@purpurds/table 7.1.0 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "7.1.0",
+  "version": "7.3.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/table.cjs.js",
   "types": "./dist/table.d.ts",
@@ -17,22 +17,22 @@
   "dependencies": {
     "@tanstack/react-table": "~8.21.2",
     "classnames": "~2.5.0",
-    "@purpurds/badge": "7.1.0",
-    "@purpurds/button": "7.1.0",
-    "@purpurds/checkbox": "7.1.0",
-    "@purpurds/cta-link": "7.1.0",
-    "@purpurds/drawer": "7.1.0",
-    "@purpurds/heading": "7.1.0",
-    "@purpurds/icon": "7.1.0",
-    "@purpurds/link": "7.1.0",
-    "@purpurds/paragraph": "7.1.0",
-    "@purpurds/select": "7.1.0",
-    "@purpurds/skeleton": "7.1.0",
-    "@purpurds/text-field": "7.1.0",
-    "@purpurds/toggle": "7.1.0",
-    "@purpurds/tokens": "7.1.0",
-    "@purpurds/tooltip": "7.1.0",
-    "@purpurds/visually-hidden": "7.1.0"
+    "@purpurds/badge": "7.3.0",
+    "@purpurds/button": "7.3.0",
+    "@purpurds/checkbox": "7.3.0",
+    "@purpurds/cta-link": "7.3.0",
+    "@purpurds/drawer": "7.3.0",
+    "@purpurds/heading": "7.3.0",
+    "@purpurds/icon": "7.3.0",
+    "@purpurds/link": "7.3.0",
+    "@purpurds/paragraph": "7.3.0",
+    "@purpurds/select": "7.3.0",
+    "@purpurds/skeleton": "7.3.0",
+    "@purpurds/text-field": "7.3.0",
+    "@purpurds/toggle": "7.3.0",
+    "@purpurds/tokens": "7.3.0",
+    "@purpurds/tooltip": "7.3.0",
+    "@purpurds/visually-hidden": "7.3.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -57,13 +57,13 @@
     "vitest": "^3.1.2",
     "vitest-axe": "~0.1.0",
     "vitest-canvas-mock": "~0.3.3",
-    "@purpurds/autocomplete": "7.1.0",
+    "@purpurds/autocomplete": "7.3.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "7.1.0",
-    "@purpurds/illustrative-icon": "7.1.0",
-    "@purpurds/listbox": "7.1.0",
-    "@purpurds/pagination": "7.1.0",
-    "@purpurds/label": "7.1.0"
+    "@purpurds/grid": "7.3.0",
+    "@purpurds/illustrative-icon": "7.3.0",
+    "@purpurds/pagination": "7.3.0",
+    "@purpurds/listbox": "7.3.0",
+    "@purpurds/label": "7.3.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/table.stories.tsx

@@ -156,6 +156,14 @@ const meta = {
       control: "boolean",
       description: "Full width of the table",
     },
+    stickyFirstColumn: {
+      control: "boolean",
+      description: "Sticky first column",
+    },
+    stickyHeaders: {
+      control: "boolean",
+      description: "Sticky headers",
+    },
   },
 } satisfies Meta<typeof Table<TableData>>;
 
@@ -280,6 +288,8 @@ export const Showcase: StoryTableData = {
     columns: columnDef,
     loading: true,
     fullWidth: true,
+    stickyFirstColumn: true,
+    stickyHeaders: true,
   },
   parameters: {
     docs: {
@@ -392,6 +402,8 @@ manages filtering, sorting and pagination internally.
         onSecondaryButtonClick={() => console.log("Secondary button clicked")}
         rowSelectionAriaLabels={args.rowSelectionAriaLabels}
         fullWidth={args.fullWidth}
+        stickyFirstColumn={args.stickyFirstColumn}
+        stickyHeaders={args.stickyHeaders}
       />
     );
   },

package/src/table.test.tsx

@@ -282,7 +282,14 @@ describe("Data Table", () => {
 
     describe("When loading is false", () => {
       beforeEach(() => {
-        rerender(<Table columns={createColumnDefSmall()} data={tableDataSmall} loading={false} />);
+        rerender(
+          <Table
+            columns={createColumnDefSmall()}
+            data={tableDataSmall}
+            loading={false}
+            skeletonRows={5}
+          />
+        );
       });
 
       it("should show table data", () => {
@@ -304,6 +311,92 @@ describe("Data Table", () => {
     });
   });
 
+  describe("Sticky Table Features", () => {
+    describe("Default values", () => {
+      beforeEach(() => {
+        render(<Table columns={createColumnDefSmall()} data={tableDataSmall} />);
+
+        table = screen.getByRole("table");
+      });
+
+      it("should have sticky header by default", () => {
+        const tableHeader = getTableHead(table);
+        const headerCells = within(tableHeader).getAllByRole("columnheader");
+
+        headerCells.forEach((cell) => {
+          expect(cell.className).toContain("purpur-table-column-header-cell__sticky-header");
+        });
+      });
+
+      it("should have sticky first column by default", () => {
+        const tableBody = getTableBody(table);
+        const rows = within(tableBody).getAllByRole("row");
+
+        rows.forEach((row) => {
+          const firstCell = within(row).getAllByRole("cell")[0];
+          expect(firstCell.className).toContain("purpur-table-row-cell__sticky-column");
+        });
+      });
+    });
+
+    it("should disable sticky headers when stickyHeaders is false", () => {
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          stickyHeaders={false}
+          settingsDrawerCopy={copy.settingsDrawer}
+          toolbarCopy={{
+            buttons: {
+              settings: copy.toolbar.buttons.settings,
+            },
+            ariaLabels: {
+              settings: copy.toolbar.ariaLabels.settings,
+            },
+          }}
+        />
+      );
+
+      table = screen.getByRole("table");
+      const tableHeader = getTableHead(table);
+      const headerCells = within(tableHeader).getAllByRole("columnheader");
+
+      headerCells.forEach((cell) => {
+        expect(cell.className).not.toContain("purpur-table-column-header-cell__sticky-header");
+      });
+    });
+
+    it("should disable sticky first column when stickyFirstColumn is false", () => {
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          stickyFirstColumn={false}
+          settingsDrawerCopy={copy.settingsDrawer}
+          toolbarCopy={{
+            buttons: {
+              settings: copy.toolbar.buttons.settings,
+            },
+            ariaLabels: {
+              settings: copy.toolbar.ariaLabels.settings,
+            },
+          }}
+        />
+      );
+
+      table = screen.getByRole("table");
+      const tableBody = getTableBody(table);
+      const rows = within(tableBody).getAllByRole("row");
+
+      rows.forEach((row) => {
+        const firstCell = within(row).getAllByRole("cell")[0];
+        expect(firstCell).not.toHaveClass("purpur-table__row-cell--sticky");
+      });
+    });
+  });
+
   describe("Accessibility", () => {
     it("is accessible", async () => {
       const { container } = render(

package/src/table.tsx

@@ -71,6 +71,8 @@ export type TableProps<TData extends RowData> = {
   data: TData[];
   paginationComponent?: ReactElement<PaginationProps>;
   fullWidth?: boolean;
+  stickyHeaders?: boolean;
+  stickyFirstColumn?: boolean;
   onRowsCountChange?: (rowsCount: number) => void;
 } & (WithToolbarProps | WithoutToolbarProps) &
   (WithSortingProps | WithoutSortingProps) &
@@ -104,6 +106,8 @@ export const Table = <TData extends RowData>({
   skeletonRows,
   sortingAriaLabels,
   state,
+  stickyFirstColumn: stickyFirstColumnProp = true,
+  stickyHeaders: stickyHeadersProp = true,
   toolbarCopy,
   toolbarTotalRowCount,
   variant = "primary",
@@ -123,8 +127,8 @@ export const Table = <TData extends RowData>({
   const [showColumnFiltersEnabled, setShowColumnFiltersEnabled] = useState(
     Boolean(props.enableFilters)
   );
-  const [stickyFirstColumn, setStickyFirstColumn] = useState(true);
-  const [stickyHeaders, setStickyHeaders] = useState(true);
+  const [stickyFirstColumn, setStickyFirstColumn] = useState(stickyFirstColumnProp);
+  const [stickyHeaders, setStickyHeaders] = useState(stickyHeadersProp);
   const prevShowOnlySelectedRows = useRef(showOnlySelectedRows);
   const [isScrolled, setIsScrolled] = useState(false);
   const tableContainerRef = useRef<HTMLTableElement>(null);