diff --git a/e2e-tests/elementView.spec.ts b/e2e-tests/elementView.spec.ts
index 4a77bd51..dd8dd3bf 100644
--- a/e2e-tests/elementView.spec.ts
+++ b/e2e-tests/elementView.spec.ts
@@ -77,7 +77,9 @@ test('Element View', async ({ page, browserName }) => {
   await expect(selectionChip).toBeVisible();
 
   // Check that the datatable is visible and populated
-  const dataTable = page.locator('div').filter({ hasText: /^LabelAge$/ }).first();
+  const dataTable = page.getByText(
+    'LabelAgeSchoolBlue HairDuff FanEvilMalePower PlantBart10yesnononoyesnoRalph8yesnononoyesnoMartin Prince10yesnononoyesnoRows per page:1001–3 of',
+  );
   await expect(dataTable).toBeVisible();
   const nameCell = await page.getByRole('cell', { name: 'Bart' });
   await expect(nameCell).toBeVisible();
diff --git a/packages/upset/src/atoms/dataAtom.ts b/packages/upset/src/atoms/dataAtom.ts
index 22b6ca92..1232bb53 100644
--- a/packages/upset/src/atoms/dataAtom.ts
+++ b/packages/upset/src/atoms/dataAtom.ts
@@ -22,3 +22,14 @@ export const queryColumnsSelector = selector<ColumnName[]>({
       && !BUILTIN_COLS.includes(col));
   },
 });
+
+/**
+ * Returns the boolean columns that indicate set membership
+ */
+export const setColumnsSelector = selector<ColumnName[]>({
+  key: 'set-columns',
+  get: ({ get }) => {
+    const data = get(dataAtom);
+    return data.setColumns;
+  },
+});
diff --git a/packages/upset/src/atoms/subsetAtoms.ts b/packages/upset/src/atoms/subsetAtoms.ts
deleted file mode 100644
index 250ab75c..00000000
--- a/packages/upset/src/atoms/subsetAtoms.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getSubsets, Subsets } from '@visdesignlab/upset2-core';
-import { selector } from 'recoil';
-
-import { attributeAtom } from './attributeAtom';
-import { visibleSetSelector } from './config/visibleSetsAtoms';
-import { itemsAtom } from './itemsAtoms';
-import { setsAtom } from './setsAtoms';
-
-export const subsetSelector = selector<Subsets>({
-  key: 'subsets',
-  get: ({ get }) => {
-    const items = get(itemsAtom);
-    const sets = get(setsAtom);
-    const visibleSets = get(visibleSetSelector);
-    const attributeColumns = get(attributeAtom);
-
-    return getSubsets(items, sets, visibleSets, attributeColumns);
-  },
-});
diff --git a/packages/upset/src/components/BackgroundRects.tsx b/packages/upset/src/components/BackgroundRects.tsx
deleted file mode 100644
index 51b4bd25..00000000
--- a/packages/upset/src/components/BackgroundRects.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { css } from '@emotion/react';
-import { useRecoilValue } from 'recoil';
-
-import { visibleSetSelector } from '../atoms/config/visibleSetsAtoms';
-import { dimensionsSelector } from '../atoms/dimensionsAtom';
-import { columnHoverAtom, rowHoverAtom } from '../atoms/highlightAtom';
-import { subsetSelector } from '../atoms/subsetAtoms';
-import { highlight } from '../utils/styles';
-import translate from '../utils/transform';
-
-/** @jsxImportSource @emotion/react */
-export const BackgroundRects = () => {
-  const dimensions = useRecoilValue(dimensionsSelector);
-  const visibleSets = useRecoilValue(visibleSetSelector);
-  const subsets = useRecoilValue(subsetSelector);
-  const hoveredRow = useRecoilValue(rowHoverAtom);
-  const hoveredColumn = useRecoilValue(columnHoverAtom);
-
-  return (
-    <>
-      <g
-        className="background-columns"
-        transform={translate(dimensions.xOffset, 0)}
-      >
-        {visibleSets.map((setName, idx) => (
-          <g key={setName} transform={translate(idx * dimensions.set.width, 0)}>
-            <rect
-              className={setName}
-              css={css`
-                ${hoveredColumn.includes(setName) && highlight}
-              `}
-              height={dimensions.body.height}
-              width={dimensions.set.width}
-              fill="none"
-            />
-          </g>
-        ))}
-      </g>
-      <g
-        className="background-rows"
-        transform={translate(dimensions.xOffset, 0)}
-      >
-        {subsets.order.map((subsetId, idx) => (
-          <g
-            key={subsetId}
-            transform={translate(0, idx * dimensions.body.rowHeight)}
-          >
-            <rect
-              key={subsetId}
-              className={subsetId}
-              css={css`
-                ${hoveredRow === subsetId && highlight}
-              `}
-              height={dimensions.body.rowHeight}
-              width={dimensions.body.rowWidth}
-              fill="none"
-            />
-          </g>
-        ))}
-      </g>
-    </>
-  );
-};
diff --git a/packages/upset/src/components/ElementView/ElementTable.tsx b/packages/upset/src/components/ElementView/ElementTable.tsx
index 3af6df8b..de2b855e 100644
--- a/packages/upset/src/components/ElementView/ElementTable.tsx
+++ b/packages/upset/src/components/ElementView/ElementTable.tsx
@@ -4,8 +4,9 @@ import { Item } from '@visdesignlab/upset2-core';
 import { FC, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { attributeAtom } from '../../atoms/attributeAtom';
 import { selectedItemsSelector } from '../../atoms/elementsSelectors';
+import { setColumnsSelector } from '../../atoms/dataAtom';
+import { attributeAtom } from '../../atoms/attributeAtom';
 
 /**
  * Hook to generate rows for the DataGrid
@@ -43,7 +44,13 @@ export const ElementTable: FC = () => {
   const attributeColumns = useRecoilValue(attributeAtom);
   const elements = useRecoilValue(selectedItemsSelector);
   const rows = useRows(elements);
-  const columns = useColumns(['_label', ...attributeColumns]);
+  const setColumns = useRecoilValue(setColumnsSelector);
+  let columns = useColumns(['_label', ...([...attributeColumns, ...setColumns].filter((col) => !col.startsWith('_')))]);
+  // Add a boolean type to set columns so they display properly
+  columns = columns.map((col) => ({
+    ...col,
+    type: setColumns.includes(col.field) ? 'boolean' : 'string',
+  }));
 
   return (
     <Box
diff --git a/packages/upset/src/components/Header/SizeHeader.tsx b/packages/upset/src/components/Header/SizeHeader.tsx
index 9c1327cb..9a16c751 100644
--- a/packages/upset/src/components/Header/SizeHeader.tsx
+++ b/packages/upset/src/components/Header/SizeHeader.tsx
@@ -11,13 +11,13 @@ import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAt
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { itemsAtom } from '../../atoms/itemsAtoms';
 import { maxSize } from '../../atoms/maxSizeAtom';
-import { subsetSelector } from '../../atoms/subsetAtoms';
 import { useScale } from '../../hooks/useScale';
 import translate from '../../utils/transform';
 import { Axis } from '../custom/Axis';
 import { ProvenanceContext } from '../Root';
 import { contextMenuAtom } from '../../atoms/contextMenuAtom';
 import { HeaderSortArrow } from '../custom/HeaderSortArrow';
+import { flattenedRowsSelector } from '../../atoms/renderRowsAtom';
 
 /** @jsxImportSource @emotion/react */
 const hide = css`
@@ -30,13 +30,16 @@ const show = css`
   transition: opacity 0.5s;
 `;
 
+/**
+ * Header showing label & axis for cardinality bars
+ */
 export const SizeHeader: FC = () => {
   const { actions } = useContext(ProvenanceContext);
   const sliderRef = useRef<SVGRectElement>(null);
   const sliderParentRef = useRef<SVGGElement>(null);
   const dimensions = useRecoilValue(dimensionsSelector);
   const items = useRecoilValue(itemsAtom);
-  const subsets = useRecoilValue(subsetSelector);
+  const subsets = useRecoilValue(flattenedRowsSelector).map((r) => r.row);
   const sortBy = useRecoilValue(sortBySelector);
   const sortByOrder = useRecoilValue(sortByOrderSelector);
 
@@ -109,17 +112,14 @@ export const SizeHeader: FC = () => {
    * control and set a value
    */
   useEffect(() => {
-    if (advancedScale) return;
-    const subs = Object.values(subsets.values);
-    if (subs.length === 0) return;
+    if (advancedScale || subsets.length === 0) return;
 
-    const sizes = subs.map((s) => s.size);
+    const sizes = subsets.map((s) => s.size);
     const maxS = Math.max(...sizes);
     setMaxSize(maxS);
   }, [subsets, maxSize, advancedScale]);
 
   const globalScale = useScale([0, itemCount], [0, dimensions.attribute.width]);
-
   const detailScale = useScale([0, maxC], [0, dimensions.attribute.width]);
 
   useEffect(() => {