@purpurds/table 8.5.2 → 8.7.0

package/src/table-content.tsx

@@ -9,137 +9,53 @@ import { EmptyTable } from "./empty-table";
 import { LoadingTableRows } from "./loading-table-rows";
 import styles from "./table.module.scss";
 import { TableBody } from "./table-body";
-import { TableHeader } from "./table-header";
 import { TableRow } from "./table-row";
 import { TableRowCell } from "./table-row-cell";
 
 const cx = c.bind(styles);
 const rootClassName = "purpur-table";
 
-type BaseTableContentProps<TData extends RowData> = {
+type TableContentProps<TData extends RowData> = {
   tanstackTable: Table<TData>;
   tableRows: Row<TData>[];
-  showColumnFiltersEnabled: boolean;
   fullWidth: boolean;
-  renderTableHeaders: () => React.ReactNode;
-};
-
-type NormalTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
-  stickyFirstColumn: boolean;
-  getStickyColumn: (index: number) => boolean;
-  isScrolled: boolean;
-  showBorder: (index: number) => boolean;
-  enableColumnDrag: boolean;
-  activeId: UniqueIdentifier | null;
+  tableHeader: React.ReactNode;
+  loading?: boolean;
+  skeletonRows?: number;
+  isEmptyTable?: boolean;
+  stickyFirstColumn?: boolean;
+  getStickyColumn?: (index: number) => boolean;
+  isScrolled?: boolean;
+  showBorder?: (index: number) => boolean;
+  enableColumnDrag?: boolean;
+  activeId?: UniqueIdentifier | null;
+  getColumnWidths?: () => (string | number)[];
+  variant?: "primary" | "secondary";
+  emptyTableHeadingTag?: HeadingTagType;
+  emptyTableCopy?: { title: string; description: string };
+  emptyTableIcon?: React.ReactNode;
 };
 
-export function NormalTableContent<TData extends RowData>({
+export function TableContent<TData extends RowData>({
+  tanstackTable,
   tableRows,
-  showColumnFiltersEnabled,
   fullWidth,
-  renderTableHeaders,
+  tableHeader,
+  loading,
+  skeletonRows,
+  isEmptyTable,
   stickyFirstColumn,
   getStickyColumn,
   isScrolled,
   showBorder,
   enableColumnDrag,
   activeId,
-}: NormalTableContentProps<TData>) {
-  return (
-    <table
-      className={cx([
-        `${rootClassName}__table`,
-        { [`${rootClassName}__table--full-width`]: fullWidth },
-      ])}
-    >
-      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
-        {renderTableHeaders()}
-      </TableHeader>
-      <TableBody>
-        {tableRows.map((row, rowIndex) => (
-          <TableRow key={row.id} isSelected={row.getIsSelected()}>
-            {row.getVisibleCells().map((cell, cellIndex) => (
-              <TableRowCell
-                key={cell.id}
-                cell={cell}
-                isLastRow={rowIndex === tableRows.length - 1}
-                isFirstCell={cellIndex === 0}
-                isLastCell={cellIndex === row.getVisibleCells().length - 1}
-                stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
-                isScrolled={isScrolled}
-                showBorder={showBorder(cellIndex)}
-                enableColumnDrag={enableColumnDrag || false}
-                draggingActive={activeId === cell.column.id}
-              />
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-    </table>
-  );
-}
-
-type LoadingTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
-  skeletonRows: number;
-  getStickyColumn: (index: number) => boolean;
-  stickyFirstColumn: boolean;
-  isScrolled: boolean;
-  showBorder: (index: number) => boolean;
-  getColumnWidths: () => (string | number)[];
-};
-
-export function LoadingTableContent<TData extends RowData>({
-  showColumnFiltersEnabled,
-  fullWidth,
-  renderTableHeaders,
-  skeletonRows,
-  getStickyColumn,
-  stickyFirstColumn,
-  isScrolled,
-  showBorder,
   getColumnWidths,
-}: LoadingTableContentProps<TData>) {
-  return (
-    <table
-      className={cx([
-        `${rootClassName}__table`,
-        { [`${rootClassName}__table--full-width`]: fullWidth },
-      ])}
-    >
-      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
-        {renderTableHeaders()}
-      </TableHeader>
-      <TableBody>
-        <LoadingTableRows
-          rowCount={skeletonRows}
-          getStickyColumn={getStickyColumn}
-          stickyFirstColumn={stickyFirstColumn}
-          isScrolled={isScrolled}
-          cellWidths={getColumnWidths()}
-          showBorder={showBorder}
-        />
-      </TableBody>
-    </table>
-  );
-}
-
-type EmptyTableContentProps<TData extends RowData> = BaseTableContentProps<TData> & {
-  variant: "primary" | "secondary";
-  emptyTableHeadingTag: HeadingTagType;
-  emptyTableCopy: { title: string; description: string };
-  emptyTableIcon?: React.ReactNode;
-};
-
-export function EmptyTableContent<TData extends RowData>({
-  tanstackTable,
-  showColumnFiltersEnabled,
-  fullWidth,
-  renderTableHeaders,
   variant,
   emptyTableHeadingTag,
   emptyTableCopy,
   emptyTableIcon,
-}: EmptyTableContentProps<TData>) {
+}: TableContentProps<TData>) {
   return (
     <table
       className={cx([
@@ -147,18 +63,46 @@ export function EmptyTableContent<TData extends RowData>({
         { [`${rootClassName}__table--full-width`]: fullWidth },
       ])}
     >
-      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
-        {renderTableHeaders()}
-      </TableHeader>
+      {tableHeader}
       <TableBody>
-        <EmptyTable
-          variant={variant}
-          tag={emptyTableHeadingTag}
-          title={emptyTableCopy.title}
-          description={emptyTableCopy.description}
-          colSpan={tanstackTable.getVisibleLeafColumns().length}
-          icon={emptyTableIcon}
-        />
+        {loading && skeletonRows ? (
+          <LoadingTableRows
+            rowCount={skeletonRows}
+            getStickyColumn={getStickyColumn!}
+            stickyFirstColumn={stickyFirstColumn!}
+            isScrolled={isScrolled!}
+            cellWidths={getColumnWidths!()}
+            showBorder={showBorder!}
+          />
+        ) : isEmptyTable && emptyTableCopy && emptyTableHeadingTag ? (
+          <EmptyTable
+            variant={variant!}
+            tag={emptyTableHeadingTag}
+            title={emptyTableCopy.title}
+            description={emptyTableCopy.description}
+            colSpan={tanstackTable.getVisibleLeafColumns().length}
+            icon={emptyTableIcon}
+          />
+        ) : (
+          tableRows.map((row, rowIndex) => (
+            <TableRow key={row.id} isSelected={row.getIsSelected()}>
+              {row.getVisibleCells().map((cell, cellIndex) => (
+                <TableRowCell
+                  key={cell.id}
+                  cell={cell}
+                  isLastRow={rowIndex === tableRows.length - 1}
+                  isFirstCell={cellIndex === 0}
+                  isLastCell={cellIndex === row.getVisibleCells().length - 1}
+                  stickyColumn={stickyFirstColumn && getStickyColumn!(cellIndex)}
+                  isScrolled={isScrolled!}
+                  showBorder={showBorder!(cellIndex)}
+                  enableColumnDrag={enableColumnDrag || false}
+                  draggingActive={activeId === cell.column.id}
+                />
+              ))}
+            </TableRow>
+          ))
+        )}
       </TableBody>
     </table>
   );

package/src/table-settings-drawer.module.scss

@@ -61,7 +61,7 @@ $border-width: 1px;
     text-align: center;
   }
 
-  &__toggle {
+  div#{$root}__toggle {
     justify-content: space-between;
     width: 100%;
   }

package/src/table-settings-drawer.test.tsx

@@ -248,4 +248,66 @@ describe("Data Table - Settings drawer", () => {
       });
     });
   });
+
+  describe("Column drag enabled", () => {
+    const onColumnOrderChangeMock = vi.fn();
+    let withinDrawerContent: ReturnType<typeof within>;
+
+    beforeEach(() => {
+      render(
+        <TableSettingsDrawer
+          id="purpur-table-settings-drawer"
+          isDrawerOpen={true}
+          showColumnFilters={true}
+          columnFiltersEnabled={true}
+          stickyFirstColumn={true}
+          stickyHeaders={true}
+          copy={copy.settingsDrawerWithColumnDrag}
+          setDrawerIsOpen={setDrawerIsOpenMock}
+          setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+          setStickyFirstColumn={setStickyFirstColumnMock}
+          setStickyHeaders={setStickyHeadersMock}
+          getAllColumns={getAllColumnsMock}
+          onResetSettings={onResetSettingsMock}
+          enableColumnDrag={true}
+          onColumnOrderChange={onColumnOrderChangeMock}
+          columnOrder={["column_1", "column_2", "column_3"]}
+        />
+      );
+
+      withinDrawerContent = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT));
+    });
+
+    describe("Visible columns with rearrange mode", () => {
+      let withinVisibleColumns: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        withinVisibleColumns = within(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS)
+        );
+      });
+
+      it("should have a rearrange button", () => {
+        const rearrangeButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.rearrange,
+        });
+        expect(rearrangeButton).toBeInTheDocument();
+        expect(rearrangeButton).toHaveTextContent(copy.settingsDrawerWithColumnDrag.visibleColumns.buttons.rearrange);
+      });
+
+      it("should update aria-label when entering rearrange mode", async () => {
+        const rearrangeButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.rearrange,
+        });
+
+        await userEvent.click(rearrangeButton);
+
+        const doneButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.done,
+        });
+        expect(doneButton).toBeInTheDocument();
+        expect(doneButton).toHaveTextContent(copy.settingsDrawerWithColumnDrag.visibleColumns.buttons.done);
+      });
+    });
+  });
 });

package/src/table-settings-drawer.tsx

@@ -34,6 +34,7 @@ import {
   purpurMotionDuration150,
   purpurMotionEasingEaseInOut,
 } from "@purpurds/tokens/motion/variables";
+import { VisuallyHidden } from "@purpurds/visually-hidden";
 import { type Column, type RowData } from "@tanstack/react-table";
 import c from "classnames/bind";
 
@@ -80,7 +81,10 @@ type VisibleColumnsWithColumnDragCopyProps = VisibleColumnsCopyBaseProps & {
       up: string;
       down: string;
     };
-    rearrangeButton: string;
+    buttons: {
+      rearrange: string;
+      done: string;
+    };
   };
 };
 
@@ -358,7 +362,11 @@ const VisibleColumns = <TData extends RowData>({
               variant={isRearrangeMode ? "primary" : "tertiary-purple"}
               onClick={() => setIsRearrangeMode((v) => !v)}
               data-testid={`${rootTestId}-rearrange-button`}
-              aria-label={copy.visibleColumns.ariaLabels.rearrangeButton}
+              aria-label={
+                isRearrangeMode
+                  ? copy.visibleColumns.ariaLabels.buttons.done
+                  : copy.visibleColumns.ariaLabels.buttons.rearrange
+              }
             >
               <IconSorter size="xs" />
               {isRearrangeMode
@@ -476,13 +484,15 @@ const DraggableColumnItem = ({
           })}
           {...listeners}
           {...attributes}
+          aria-label={`${copy.visibleColumns.ariaLabels.dragHandle.action} ${label}`}
+          aria-describedby={`drag-instructions-${id}`}
         >
-          <IconDragVertical
-            className={cx(`${rootClassName}__draggable-handle-icon`, "terre")}
-            size="sm"
-          />
+          <IconDragVertical className={cx(`${rootClassName}__draggable-handle-icon`)} size="sm" />
         </div>
-        <span>{label}</span>
+        <Paragraph>{label}</Paragraph>
+        <VisuallyHidden id={`drag-instructions-${id}`}>
+          {copy.visibleColumns.ariaLabels.dragHandle.instructions}
+        </VisuallyHidden>
       </div>
 
       <div className={cx(`${rootClassName}__draggable-item-buttons`)}>

package/src/table.stories.tsx

@@ -274,7 +274,10 @@ const commonSettingsDrawerCopyWithColumnDrag = {
         up: "up",
         down: "down",
       },
-      rearrangeButton: "Reorder columns",
+      buttons: {
+        rearrange: "Reorder columns",
+        done: "Save column order and exit reorder mode",
+      },
     },
   },
 };
@@ -324,6 +327,7 @@ export const Showcase: StoryTableData = {
     stickyHeaders: true,
     enableColumnDrag: true,
     onColumnOrderChange: () => {},
+    columnDragAriaLabelsCopy: commonColumnDragAriaLabels,
   },
   parameters: {
     docs: {
@@ -399,6 +403,14 @@ manages filtering, sorting and pagination internally.
       stepNumberPrefix: "Go to page",
     };
 
+    const emptyTableProps = {
+      emptyTableCopy: {
+        title: args.emptyTableCopy?.title || "No data found",
+        description: args.emptyTableCopy?.description || "There are no items to display.",
+      },
+      emptyTableHeadingTag: args.emptyTableHeadingTag || "h2",
+    };
+
     return renderTableContainer(
       { ...args, isExpanded: tableExpanded },
       /* @ts-expect-error Props are incompatible. Storybook issue after adding argTypes. */
@@ -442,6 +454,9 @@ manages filtering, sorting and pagination internally.
         stickyHeaders={args.stickyHeaders}
         enableColumnDrag={args.enableColumnDrag}
         columnDragAriaLabelsCopy={commonColumnDragAriaLabels}
+        emptyTableCopy={emptyTableProps.emptyTableCopy}
+        emptyTableHeadingTag={emptyTableProps.emptyTableHeadingTag}
+        emptyTableIcon={<IllustrativeIconTableQuestionDuocolorStatic />}
       />
     );
   },

package/src/table.tsx

@@ -38,8 +38,9 @@ export type {
 
 import styles from "./table.module.scss";
 import { TableActionBar } from "./table-action-bar";
-import { EmptyTableContent, LoadingTableContent, NormalTableContent } from "./table-content";
+import { TableContent } from "./table-content";
 import { TableExportDrawer } from "./table-export-drawer";
+import { TableHeader } from "./table-header";
 import { SortableTableHeaders, StandardTableHeaders } from "./table-headers";
 import { TableSettingsDrawer, type TableSettingsDrawerCopyProps } from "./table-settings-drawer";
 import { TableToolbar } from "./table-toolbar";
@@ -140,12 +141,12 @@ export const Table = <TData extends RowData>({
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
 
   const classes = cx([
-    className,
     rootClassName,
     {
       [`${rootClassName}--${variant}`]: variant,
       [`${rootClassName}--without-toolbar`]: !enableToolbar || !settingsDrawerCopy,
     },
+    className,
   ]);
 
   // Only add row selection columns when enableRowSelection is true
@@ -316,140 +317,95 @@ export const Table = <TData extends RowData>({
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
   const memoizedGetColumnWidths = React.useCallback(() => {
-    return tanstackTable.getAllColumns().map((column) => column.getSize() || "100%");
+    return tanstackTable.getVisibleLeafColumns().map((column) => column.getSize() || "100%");
   }, [tanstackTable]);
 
-  // Render table headers with or without drag functionality
-  const renderTableHeaders = React.useCallback(() => {
-    return tanstackTable.getHeaderGroups().map((headerGroup) => {
-      if (enableColumnDrag && state?.columnOrder) {
-        return (
-          <SortableTableHeaders
-            key={headerGroup.id}
-            headerGroup={headerGroup}
-            tanstackTable={tanstackTable}
-            tableHasFilters={showColumnFiltersEnabled}
-            emptyTable={emptyTable}
-            stickyFirstColumn={stickyFirstColumn}
-            stickyHeaders={stickyHeaders}
-            isScrolled={isScrolled}
-            getStickyColumn={getStickyColumn}
-            showBorder={showBorder}
-            enableSorting={props.enableSorting || false}
-            sortingAriaLabels={sortingAriaLabels}
-            columnOrder={state.columnOrder}
-            activeId={activeId}
-            enableColumnDrag={enableColumnDrag}
-            columnDragAriaLabelsCopy={columnDragAriaLabelsCopy}
-          />
-        );
-      }
-
-      return (
-        <StandardTableHeaders
-          key={headerGroup.id}
-          headerGroup={headerGroup}
-          tanstackTable={tanstackTable}
-          tableHasFilters={showColumnFiltersEnabled}
-          emptyTable={emptyTable}
-          stickyFirstColumn={stickyFirstColumn}
-          stickyHeaders={stickyHeaders}
-          isScrolled={isScrolled}
-          getStickyColumn={getStickyColumn}
-          showBorder={showBorder}
-          enableSorting={props.enableSorting || false}
-          sortingAriaLabels={sortingAriaLabels}
-        />
-      );
-    });
-  }, [
-    activeId,
-    columnDragAriaLabelsCopy,
-    emptyTable,
-    enableColumnDrag,
-    getStickyColumn,
-    isScrolled,
-    props.enableSorting,
-    showBorder,
-    showColumnFiltersEnabled,
-    sortingAriaLabels,
-    state?.columnOrder,
-    stickyFirstColumn,
-    stickyHeaders,
-    tanstackTable,
-  ]);
-
-  const renderTableContent = React.useCallback(() => {
-    if (loading && skeletonRows) {
-      return (
-        <LoadingTableContent
-          tanstackTable={tanstackTable}
-          tableRows={tableRows}
-          showColumnFiltersEnabled={showColumnFiltersEnabled}
-          fullWidth={fullWidth}
-          renderTableHeaders={renderTableHeaders}
-          skeletonRows={skeletonRows}
-          getStickyColumn={getStickyColumn}
-          stickyFirstColumn={stickyFirstColumn}
-          isScrolled={isScrolled}
-          showBorder={showBorder}
-          getColumnWidths={memoizedGetColumnWidths}
-        />
-      );
-    }
-
-    const isEmptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
-    if (isEmptyTable && emptyTableCopy && emptyTableHeadingTag) {
-      return (
-        <EmptyTableContent
-          tanstackTable={tanstackTable}
-          tableRows={tableRows}
-          showColumnFiltersEnabled={showColumnFiltersEnabled}
-          fullWidth={fullWidth}
-          renderTableHeaders={renderTableHeaders}
-          variant={variant}
-          emptyTableHeadingTag={emptyTableHeadingTag}
-          emptyTableCopy={emptyTableCopy}
-          emptyTableIcon={emptyTableIcon}
-        />
-      );
-    }
+  // Extract header groups to avoid complex expression in dependency array
+  const headerGroups = tanstackTable.getHeaderGroups();
+
+  // Memoized table header to prevent re-renders and maintain filter focus
+  const tableHeader = React.useMemo(
+    () => (
+      <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
+        {headerGroups.map((headerGroup) => {
+          if (enableColumnDrag && state?.columnOrder) {
+            return (
+              <SortableTableHeaders
+                key={headerGroup.id}
+                headerGroup={headerGroup}
+                tanstackTable={tanstackTable}
+                tableHasFilters={showColumnFiltersEnabled}
+                emptyTable={emptyTable}
+                stickyFirstColumn={stickyFirstColumn}
+                stickyHeaders={stickyHeaders}
+                isScrolled={isScrolled}
+                getStickyColumn={getStickyColumn}
+                showBorder={showBorder}
+                enableSorting={props.enableSorting || false}
+                sortingAriaLabels={sortingAriaLabels}
+                columnOrder={state.columnOrder}
+                activeId={activeId}
+                enableColumnDrag={enableColumnDrag}
+                columnDragAriaLabelsCopy={columnDragAriaLabelsCopy}
+              />
+            );
+          }
+
+          return (
+            <StandardTableHeaders
+              key={headerGroup.id}
+              headerGroup={headerGroup}
+              tanstackTable={tanstackTable}
+              tableHasFilters={showColumnFiltersEnabled}
+              emptyTable={emptyTable}
+              stickyFirstColumn={stickyFirstColumn}
+              stickyHeaders={stickyHeaders}
+              isScrolled={isScrolled}
+              getStickyColumn={getStickyColumn}
+              showBorder={showBorder}
+              enableSorting={props.enableSorting || false}
+              sortingAriaLabels={sortingAriaLabels}
+            />
+          );
+        })}
+      </TableHeader>
+    ),
+    [
+      showColumnFiltersEnabled,
+      headerGroups,
+      enableColumnDrag,
+      state?.columnOrder,
+      props.enableSorting,
+      sortingAriaLabels,
+      columnDragAriaLabelsCopy,
+      tanstackTable,
+    ]
+  );
 
-    return (
-      <NormalTableContent
-        tanstackTable={tanstackTable}
-        tableRows={tableRows}
-        showColumnFiltersEnabled={showColumnFiltersEnabled}
-        fullWidth={fullWidth}
-        renderTableHeaders={renderTableHeaders}
-        stickyFirstColumn={stickyFirstColumn}
-        getStickyColumn={getStickyColumn}
-        isScrolled={isScrolled}
-        showBorder={showBorder}
-        enableColumnDrag={enableColumnDrag || false}
-        activeId={activeId}
-      />
-    );
-  }, [
-    activeId,
-    emptyTableCopy,
-    emptyTableHeadingTag,
-    emptyTableIcon,
-    enableColumnDrag,
-    fullWidth,
-    getStickyColumn,
-    isScrolled,
-    loading,
-    memoizedGetColumnWidths,
-    renderTableHeaders,
-    showBorder,
-    showColumnFiltersEnabled,
-    skeletonRows,
-    stickyFirstColumn,
-    tableRows,
-    tanstackTable,
-    variant,
-  ]);
+  const isEmptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
+
+  const tableContent = (
+    <TableContent
+      tanstackTable={tanstackTable}
+      tableRows={tableRows}
+      fullWidth={fullWidth}
+      tableHeader={tableHeader}
+      loading={loading}
+      skeletonRows={skeletonRows}
+      isEmptyTable={isEmptyTable}
+      stickyFirstColumn={stickyFirstColumn}
+      getStickyColumn={getStickyColumn}
+      isScrolled={isScrolled}
+      showBorder={showBorder}
+      enableColumnDrag={enableColumnDrag}
+      activeId={activeId}
+      getColumnWidths={memoizedGetColumnWidths}
+      variant={variant}
+      emptyTableHeadingTag={emptyTableHeadingTag}
+      emptyTableCopy={emptyTableCopy}
+      emptyTableIcon={emptyTableIcon}
+    />
+  );
 
   return (
     <div id={`${uid}-table`} className={classes}>
@@ -491,10 +447,10 @@ export const Table = <TData extends RowData>({
             columnDragAriaLabelsCopy={columnDragAriaLabelsCopy}
             rootClassName={rootClassName}
           >
-            {renderTableContent()}
+            {tableContent}
           </DraggableTable>
         ) : (
-          renderTableContent()
+          tableContent
         )}
       </div>
       {paginationComponent}