@purpurds/table 8.6.0 → 8.8.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.tsx

@@ -489,7 +489,7 @@ const DraggableColumnItem = ({
         >
           <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>

package/src/table.stories.tsx

@@ -403,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. */
@@ -446,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
@@ -204,7 +205,7 @@ export const Table = <TData extends RowData>({
     ...restProps,
   });
 
-  const rowCount = useMemo(() => tanstackTable.getRowCount(), [tanstackTable]);
+  const rowCount = tanstackTable.getRowCount();
 
   useEffect(() => {
     if (onRowsCountChange) {
@@ -315,141 +316,101 @@ export const Table = <TData extends RowData>({
   const tableRows = tanstackTable.getRowModel().rows;
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
-  const memoizedGetColumnWidths = React.useCallback(() => {
-    return tanstackTable.getAllColumns().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,
+      emptyTable,
+      stickyFirstColumn,
+      stickyHeaders,
+      isScrolled,
+      getStickyColumn,
+      showBorder,
+      activeId,
+    ]
+  );
 
-    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={() =>
+        tanstackTable.getVisibleLeafColumns().map((column) => column.getSize() || "100%")
+      }
+      variant={variant}
+      emptyTableHeadingTag={emptyTableHeadingTag}
+      emptyTableCopy={emptyTableCopy}
+      emptyTableIcon={emptyTableIcon}
+    />
+  );
 
   return (
     <div id={`${uid}-table`} className={classes}>
@@ -491,10 +452,10 @@ export const Table = <TData extends RowData>({
             columnDragAriaLabelsCopy={columnDragAriaLabelsCopy}
             rootClassName={rootClassName}
           >
-            {renderTableContent()}
+            {tableContent}
           </DraggableTable>
         ) : (
-          renderTableContent()
+          tableContent
         )}
       </div>
       {paginationComponent}

package/src/use-drag-handle.hook.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { IconDragHorizontal } from "@purpurds/icon/drag-horizontal";
 import c from "classnames/bind";
 
@@ -7,52 +7,33 @@ import styles from "./table.module.scss";
 const cx = c.bind(styles);
 const rootClassName = "purpur-table-column-header-cell";
 
-export function useDragHandle() {
-  const [mouseDownActive, setMouseDownActive] = useState(false);
-
-  const handleMouseDown = () => {
-    setMouseDownActive(true);
-    window.addEventListener("mouseup", handleMouseUp, { once: true });
-  };
-
-  const handleMouseUp = () => {
-    setMouseDownActive(false);
-  };
-
-  return { mouseDownActive, handleMouseDown };
-}
-
 export type TableColumnDragHandleProps = {
-  onMouseDown: () => void;
   overlayActive?: boolean;
   isFirstColumn: boolean;
   isLastColumn: boolean;
   columnDragAriaLabel: string;
+  // Add any additional props from listeners
+  [key: string]: unknown;
 };
 
 export function TableColumnDragHandle({
-  onMouseDown,
   overlayActive,
   isFirstColumn,
   isLastColumn,
   columnDragAriaLabel,
+  ...dragListeners // Capture the listeners from useSortable
 }: TableColumnDragHandleProps) {
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={cx(`${rootClassName}__drag-handle`, {
         [`${rootClassName}__border-radius-first-cell`]: isFirstColumn && !overlayActive,
         [`${rootClassName}__border-radius-last-cell`]: isLastColumn && !overlayActive,
         [`${rootClassName}__drag-handle--active`]: overlayActive,
       })}
-      role="button"
-      tabIndex={0}
       aria-label={columnDragAriaLabel}
-      onMouseDown={onMouseDown}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          onMouseDown();
-        }
-      }}
+      {...dragListeners}
     >
       <IconDragHorizontal className={cx(`${rootClassName}__drag-handle-icon`)} size="sm" />
     </div>