@purpurds/table 6.12.5 → 7.0.0

package/src/table-settings-drawer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
 import { Button } from "@purpurds/button";
 import { Drawer } from "@purpurds/drawer";
 import { Heading } from "@purpurds/heading";
@@ -30,6 +30,7 @@ export type TableSettingsDrawerCopyProps = {
 };
 
 export type TableSettingsDrawerProps<TData> = {
+  id: string;
   getAllColumns: () => Column<TData, unknown>[];
   onResetSettings: () => void;
   setDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -52,6 +53,7 @@ const cx = c.bind(styles);
 const rootTestId = "purpur-table-settings-drawer";
 
 export const TableSettingsDrawer = <TData extends RowData>({
+  id,
   columnFiltersEnabled,
   copy,
   isDrawerOpen,
@@ -69,12 +71,12 @@ export const TableSettingsDrawer = <TData extends RowData>({
   setRowSelectionEnabled,
 }: TableSettingsDrawerProps<TData>) => {
   return (
-    <div id="purpur-table-settings-drawer">
+    <div id={id}>
       <Drawer data-testid={rootTestId} open={isDrawerOpen} onOpenChange={setDrawerIsOpen}>
         <Drawer.Content
           data-testid={`${rootTestId}-content`}
           zIndex={6}
-          closeButtonText={copy.buttons.closeDrawer}
+          closeButtonAriaLabel={copy.buttons.closeDrawer}
           title={copy.title}
           footerContent={
             <FooterContent text={copy.buttons.resetSettings} onClick={onResetSettings} />
@@ -147,45 +149,48 @@ const GeneralSettings = ({
   enableRowSelection,
   rowSelectionEnabled,
   setRowSelectionEnabled,
-}: GeneralSettingsProps) => (
-  <div
-    data-testid={`${rootTestId}-general-settings`}
-    className={cx(`${rootClassName}__general-settings`)}
-    aria-labelledby="general-settings"
-  >
-    <Heading id="general-settings" variant="title-100" tag="h3">
-      {copy.header}
-    </Heading>
-    {columnFiltersEnabled && (
+}: GeneralSettingsProps) => {
+  const uid = useId();
+  return (
+    <div
+      data-testid={`${rootTestId}-general-settings`}
+      className={cx(`${rootClassName}__general-settings`)}
+      aria-labelledby={`${uid}-general-settings`}
+    >
+      <Heading id={`${uid}-general-settings`} variant="title-100" tag="h3">
+        {copy.header}
+      </Heading>
+      {columnFiltersEnabled && (
+        <ToggleWrapper
+          id={`${uid}-show-filters`}
+          checked={showColumnFilters}
+          label={copy.toggles.showFilters}
+          onChange={setShowColumnFiltersEnabled}
+        />
+      )}
       <ToggleWrapper
-        id="show-filters"
-        checked={showColumnFilters}
-        label={copy.toggles.showFilters}
-        onChange={setShowColumnFiltersEnabled}
+        id={`${uid}-lock-first-column`}
+        checked={stickyFirstColumn}
+        label={copy.toggles.lockFirstcolumn}
+        onChange={setStickyFirstColumn}
       />
-    )}
-    <ToggleWrapper
-      id="lock-first-column"
-      checked={stickyFirstColumn}
-      label={copy.toggles.lockFirstcolumn}
-      onChange={setStickyFirstColumn}
-    />
-    <ToggleWrapper
-      id="sticky-header"
-      checked={stickyHeaders}
-      label={copy.toggles.stickyHeader}
-      onChange={setStickyHeaders}
-    />
-    {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
       <ToggleWrapper
-        id="row-selection"
-        checked={rowSelectionEnabled || false}
-        label={copy.toggles.rowSelection}
-        onChange={setRowSelectionEnabled}
+        id={`${uid}-sticky-header`}
+        checked={stickyHeaders}
+        label={copy.toggles.stickyHeader}
+        onChange={setStickyHeaders}
       />
-    )}
-  </div>
-);
+      {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
+        <ToggleWrapper
+          id={`${uid}-row-selection`}
+          checked={rowSelectionEnabled || false}
+          label={copy.toggles.rowSelection}
+          onChange={setRowSelectionEnabled}
+        />
+      )}
+    </div>
+  );
+};
 
 const VisibleColumns = <TData extends RowData>({
   header,
@@ -204,14 +209,14 @@ const VisibleColumns = <TData extends RowData>({
   const isDisabled = (column: Column<TData, unknown>) => {
     return !column.getCanHide() || (visible.length === 1 && visible.includes(column));
   };
-
+  const uid = useId();
   return (
     <section
       data-testid={`${rootTestId}-visible-columns`}
       className={cx(`${rootClassName}__visible-columns`)}
-      aria-labelledby="visible-columns"
+      aria-labelledby={`${uid}-visible-columns`}
     >
-      <Heading id="visible-columns" variant="title-100" tag="h3">
+      <Heading id={`${uid}-visible-columns`} variant="title-100" tag="h3">
         {header}
       </Heading>
       {filteredColumns.map((column) => (

package/src/table-toolbar.test.tsx

@@ -20,6 +20,9 @@ describe("Data table - Tool bar", () => {
       // Needs an element with id purpur-table for the ally tests to not fail with "ARIA attributes must conform to valid values (aria-valid-attr-value)" rule
       <div id="purpur-table">
         <TableToolbar
+          aria-controls="purpur-table"
+          settingsDrawerAriaControls="purpur-table-settings-drawer"
+          exportDrawerAriaControls="purpur-table-export-drawer"
           onResetColumnFilters={resetColumnFiltersMock}
           onSetDrawerIsOpen={setDrawerIsOpenMock}
           onToggleExpand={toggleExpandMock}

package/src/table-toolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type Dispatch, type HTMLAttributes, type SetStateAction } from "react";
 import { Button } from "@purpurds/button";
 import { IconDownload } from "@purpurds/icon/download";
 import { IconMaximize } from "@purpurds/icon/maximize";
@@ -28,8 +28,8 @@ export type TableToolbarCopyProps = {
   };
 };
 
-export type TableToolbarProps = {
-  onSetDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+export type TableToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  onSetDrawerIsOpen: Dispatch<SetStateAction<boolean>>;
   onResetColumnFilters: () => void;
   onToggleExpand?: () => void;
   onExportData?: () => void;
@@ -41,6 +41,8 @@ export type TableToolbarProps = {
   hasExportsDrawer: boolean;
   showFilters: boolean;
   disableClearFilters: boolean;
+  settingsDrawerAriaControls: string;
+  exportDrawerAriaControls: string;
 };
 
 const rootClassName = "purpur-table-toolbar";
@@ -48,6 +50,9 @@ const cx = c.bind(styles);
 const rootTestId = "purpur-table-toolbar";
 
 export const TableToolbar = ({
+  ["aria-controls"]: ariaControls,
+  settingsDrawerAriaControls,
+  exportDrawerAriaControls,
   onExportData,
   onResetColumnFilters,
   onSetDrawerIsOpen,
@@ -76,7 +81,7 @@ export const TableToolbar = ({
             onClick={onResetColumnFilters}
             type="button"
             aria-label={copy?.ariaLabels?.clearFilters}
-            aria-controls="purpur-table"
+            aria-controls={ariaControls}
             disabled={disableClearFilters}
           >
             {copy.buttons.clearFilters}
@@ -94,7 +99,7 @@ export const TableToolbar = ({
             aria-label={copy?.ariaLabels?.export}
             {...(hasExportsDrawer && {
               "aria-expanded": isExportDrawerOpen,
-              "aria-controls": "purpur-table-export-drawer",
+              "aria-controls": exportDrawerAriaControls,
               "aria-haspopup": "dialog",
             })}
           >
@@ -110,7 +115,7 @@ export const TableToolbar = ({
             type="button"
             aria-label={copy?.ariaLabels?.settings}
             aria-expanded={isSettingsDrawerOpen}
-            aria-controls="purpur-table-settings-drawer"
+            aria-controls={settingsDrawerAriaControls}
             aria-haspopup="dialog"
           >
             <IconSettings size="xs" />
@@ -124,7 +129,7 @@ export const TableToolbar = ({
             onClick={() => onToggleExpand()}
             type="button"
             aria-label={copy?.ariaLabels?.expand}
-            aria-controls="purpur-table"
+            aria-controls={ariaControls}
           >
             <IconMaximize size="xs" />
             {copy.buttons.expand}

package/src/table.module.scss

@@ -8,7 +8,6 @@
   flex-direction: column;
   gap: var(--purpur-spacing-200);
   z-index: 1;
-  max-width: fit-content;
   background-color: inherit;
 }
 
@@ -38,6 +37,10 @@
   border-collapse: separate;
   border-spacing: 0;
   position: relative;
+
+  &--full-width {
+    width: 100%;
+  }
 }
 
 .purpur-table-header {
@@ -72,11 +75,16 @@
 }
 
 .purpur-table-column-header-cell {
-  padding: var(--purpur-spacing-150) var(--purpur-spacing-150) var(--purpur-spacing-150)
+  padding: var(--purpur-spacing-100) var(--purpur-spacing-150) var(--purpur-spacing-100)
     var(--purpur-spacing-300);
   border-bottom: var(--table-border);
   text-align: left;
 
+  &:has([role="checkbox"]) {
+    padding: calc(var(--purpur-spacing-25) + var(--purpur-spacing-50)) var(--purpur-spacing-150)
+      calc(var(--purpur-spacing-25) + var(--purpur-spacing-50)) var(--purpur-spacing-300);
+  }
+
   &__checkbox {
     vertical-align: middle;
   }
@@ -93,7 +101,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--purpur-spacing-100);
+    gap: var(--purpur-spacing-50);
   }
 
   &__title {
@@ -101,6 +109,10 @@
     align-items: center;
     gap: var(--purpur-spacing-50);
     align-self: stretch;
+
+    &--default {
+      padding: var(--purpur-spacing-100) var(--purpur-spacing-0);
+    }
   }
 
   &__sortable-title {
@@ -110,9 +122,9 @@
   &__filter-wrapper {
     display: flex;
     padding-right: var(--purpur-spacing-150);
+    padding-bottom: var(--purpur-spacing-150);
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--purpur-spacing-100);
     align-self: stretch;
   }
 }
@@ -194,7 +206,7 @@
 }
 
 .purpur-table-row-cell {
-  height: var(--purpur-spacing-800);
+  height: calc(var(--purpur-spacing-600) + var(--purpur-spacing-150));
   padding: var(--purpur-spacing-0) var(--purpur-spacing-300);
   align-items: center;
   align-self: stretch;
@@ -263,30 +275,27 @@
     text-align: right;
   }
 
+  &__truncate-wrapper {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
   &__truncate {
     position: relative;
     max-width: 100%;
     width: 100%;
 
-    p,
-    span,
-    div {
-      display: block;
-    }
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
     a {
       display: inline;
-    }
-
-    a,
-    p,
-    span,
-    div {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      max-width: 100%;
-      width: inherit;
     }
   }
 

package/src/table.stories.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
- 
-
 import React, { useEffect, useState } from "react";
 import { Grid } from "@purpurds/grid";
 import { IllustrativeIconSearchQuestionDuocolor } from "@purpurds/illustrative-icon/search-question-duocolor";
@@ -154,6 +152,10 @@ const meta = {
       options: ["primary", "secondary"],
       description: "Style variant for the table",
     },
+    fullWidth: {
+      control: "boolean",
+      description: "Full width of the table",
+    },
   },
 } satisfies Meta<typeof Table<TableData>>;
 
@@ -245,7 +247,7 @@ const commonSettingsDrawerCopy = {
 const commonExportDrawerCopy = {
   title: "Export table",
   bodyText: "Choose the format you want to export the table in.",
-  closeButtonText: "Close drawer",
+  closeButtonAriaLabel: "Close drawer",
   link: "Export as",
 };
 
@@ -277,6 +279,7 @@ export const Showcase: StoryTableData = {
     data: generatedTableData,
     columns: columnDef,
     loading: true,
+    fullWidth: true,
   },
   parameters: {
     docs: {
@@ -345,8 +348,7 @@ manages filtering, sorting and pagination internally.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",
@@ -389,6 +391,7 @@ manages filtering, sorting and pagination internally.
         onPrimaryButtonClick={handlePrimaryButtonClick}
         onSecondaryButtonClick={() => console.log("Secondary button clicked")}
         rowSelectionAriaLabels={args.rowSelectionAriaLabels}
+        fullWidth={args.fullWidth}
       />
     );
   },
@@ -730,8 +733,7 @@ This example demonstrates pagination functionality in the Table.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",
@@ -1150,8 +1152,7 @@ sorting, and filtering are managed by a server API instead of in the browser.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",

package/src/table.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useRef, useState } from "react";
+import React, { ReactElement, useEffect, useId, useRef, useState } from "react";
 import type {
   ColumnDef,
   ColumnFiltersState,
@@ -70,6 +70,7 @@ export type TableProps<TData extends RowData> = {
   columns: CoreOptions<TData>["columns"];
   data: TData[];
   paginationComponent?: ReactElement<PaginationProps>;
+  fullWidth?: boolean;
   onRowsCountChange?: (rowsCount: number) => void;
 } & (WithToolbarProps | WithoutToolbarProps) &
   (WithSortingProps | WithoutSortingProps) &
@@ -94,6 +95,7 @@ export const Table = <TData extends RowData>({
   enableToolbar: enableToolbar,
   exportDrawerCopy,
   exportFormats,
+  fullWidth = true,
   loading,
   paginationComponent,
   rowSelectionAriaLabels,
@@ -123,10 +125,11 @@ export const Table = <TData extends RowData>({
   );
   const [stickyFirstColumn, setStickyFirstColumn] = useState(true);
   const [stickyHeaders, setStickyHeaders] = useState(true);
-  const [rowSelectionEnabled, setRowSelectionEnabled] = useState(true);
   const prevShowOnlySelectedRows = useRef(showOnlySelectedRows);
   const [isScrolled, setIsScrolled] = useState(false);
   const tableContainerRef = useRef<HTMLTableElement>(null);
+  const uid = useId();
+  const [rowSelectionEnabled, setRowSelectionEnabled] = useState(true);
 
   const classes = cx([
     className,
@@ -252,7 +255,9 @@ export const Table = <TData extends RowData>({
   };
 
   const getStickyColumn = (index: number) => {
-    return props.enableRowSelection ? index <= 1 : index === 0;
+    // When rowSelectionEnabled is true, the first two columns are sticky
+    // Otherwise, only the first column is sticky
+    return props.enableRowSelection && rowSelectionEnabled ? index <= 1 : index === 0;
   };
 
   const handleResetColumnFilters = () => {
@@ -275,11 +280,15 @@ export const Table = <TData extends RowData>({
     setShowColumnFiltersEnabled(true);
     setStickyFirstColumn(true);
     setStickyHeaders(true);
-    setRowSelectionEnabled(true);
 
     tanstackTable.resetColumnVisibility();
   };
 
+  const showBorder = (index: number) => {
+    // Only show the border for sticky columns when the table is scrolled
+    return isScrolled && getStickyColumn(index);
+  };
+
   const tableRows = tanstackTable.getRowModel().rows;
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
@@ -294,8 +303,8 @@ export const Table = <TData extends RowData>({
         getStickyColumn={getStickyColumn}
         stickyFirstColumn={stickyFirstColumn}
         isScrolled={isScrolled}
-        rowSelectionEnabled={rowSelectionEnabled}
         cellWidths={getColumnWidths()}
+        showBorder={showBorder}
       />
     ) : emptyTable && emptyTableCopy && emptyTableHeadingTag ? (
       <EmptyTable
@@ -318,11 +327,7 @@ export const Table = <TData extends RowData>({
               isLastCell={cellIndex === row.getVisibleCells().length - 1}
               stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
               isScrolled={isScrolled}
-              showBorder={
-                isScrolled &&
-                ((props.enableRowSelection && cellIndex === 1) ||
-                  (!props.enableRowSelection && cellIndex === 0))
-              }
+              showBorder={showBorder(cellIndex)}
             />
           ))}
         </TableRow>
@@ -330,9 +335,12 @@ export const Table = <TData extends RowData>({
     );
 
   return (
-    <div id="purpur-table" className={classes}>
+    <div id={`${uid}-table`} className={classes}>
       {enableToolbar && (
         <TableToolbar
+          aria-controls={`${uid}-table`}
+          settingsDrawerAriaControls={`${uid}-settings-drawer`}
+          exportDrawerAriaControls={`${uid}-export-drawer`}
           onSetDrawerIsOpen={setSettingsDrawerIsOpen}
           onResetColumnFilters={handleResetColumnFilters}
           onToggleExpand={onToggleExpand}
@@ -353,7 +361,12 @@ export const Table = <TData extends RowData>({
         })}
         ref={tableContainerRef}
       >
-        <table className={cx(`${rootClassName}__table`)}>
+        <table
+          className={cx([
+            `${rootClassName}__table`,
+            { [`${rootClassName}__table--full-width`]: fullWidth },
+          ])}
+        >
           <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
             {tanstackTable.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -365,11 +378,7 @@ export const Table = <TData extends RowData>({
                     stickyColumn={!emptyTable && stickyFirstColumn && getStickyColumn(index)}
                     stickyHeaders={!emptyTable && stickyHeaders}
                     isScrolled={isScrolled}
-                    showBorder={
-                      isScrolled &&
-                      ((props.enableRowSelection && index === 1) ||
-                        (!props.enableRowSelection && index === 0))
-                    }
+                    showBorder={showBorder(index)}
                     {...(props.enableSorting && sortingAriaLabels
                       ? { enableSorting: props.enableSorting, sortingAriaLabels }
                       : { enableSorting: false })}
@@ -396,6 +405,7 @@ export const Table = <TData extends RowData>({
       )}
       {enableToolbar && settingsDrawerCopy && (
         <TableSettingsDrawer
+          id={`${uid}-settings-drawer`}
           setDrawerIsOpen={setSettingsDrawerIsOpen}
           setShowColumnFiltersEnabled={setShowColumnFiltersEnabled}
           setStickyFirstColumn={setStickyFirstColumn}
@@ -415,6 +425,7 @@ export const Table = <TData extends RowData>({
       )}
       {Array.isArray(exportFormats) && exportDrawerCopy && (
         <TableExportDrawer
+          id={`${uid}-export-drawer`}
           isOpen={isExportDrawerOpen}
           setDrawerIsOpen={setExportDrawerIsOpen}
           exportFormats={exportFormats}
@@ -446,7 +457,7 @@ const EmptyTable = ({ variant, tag, title, description, colSpan, icon }: EmptyTa
           `${rootClassName}__empty-section--${variant}`,
         ])}
       >
-        <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>
+        {icon && <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>}
         <div className={cx(`${rootClassName}__empty-section__texts`)}>
           <Heading data-testid="purpur-table-empty-table-title" variant="title-100" tag={tag}>
             {title}
@@ -460,21 +471,20 @@ const EmptyTable = ({ variant, tag, title, description, colSpan, icon }: EmptyTa
 
 type LoadingTableRowsProps = {
   rowCount: number;
-  rowSelectionEnabled: boolean;
   isScrolled: boolean;
   stickyFirstColumn: boolean;
   getStickyColumn: (index: number) => boolean;
   cellWidths: (string | number)[];
+  showBorder: (index: number) => boolean;
 };
 
 const LoadingTableRows = ({
   rowCount,
-  // cellCount,
   getStickyColumn,
   stickyFirstColumn,
   isScrolled,
-  rowSelectionEnabled,
   cellWidths,
+  showBorder,
 }: LoadingTableRowsProps) => (
   <>
     {Array.from({ length: rowCount }, (_value, index) => index).map((row, rowIndex) => (
@@ -487,11 +497,7 @@ const LoadingTableRows = ({
             isLastCell={cellIndex === cellWidths.length - 1}
             stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
             isScrolled={isScrolled}
-            showBorder={
-              isScrolled &&
-              ((rowSelectionEnabled && cellIndex === 1) ||
-                (!rowSelectionEnabled && cellIndex === 0))
-            }
+            showBorder={showBorder(cellIndex)}
             cellWidth={cellWidth}
           />
         ))}

package/src/test-utils/helpers.ts

@@ -145,6 +145,7 @@ export const Selectors = {
   PAGINATION: {
     ROOT: "purpur-pagination",
     PAGE_SIZE_SELECT: "purpur-pagination-page-size-selector-select-select",
+    PAGE_BUTTON: (pageNumber: number) => `purpur-pagination-pages-page-${pageNumber}-button`,
   },
   SKELETON: "purpur-table-cell-skeleton",
 };
@@ -164,7 +165,7 @@ export const copy = {
   },
   exportDrawer: {
     bodyText: "Choose the format you want to export the table in.",
-    closeButtonText: "Close drawer",
+    closeButtonAriaLabel: "Close drawer",
     link: "Export as",
     title: "Export table",
   },

package/src/types.ts

@@ -190,7 +190,7 @@ export type WithEmptyTableProps = {
   /**
    * Icon to display in the empty table state.
    */
-  emptyTableIcon: React.ReactNode;
+  emptyTableIcon?: React.ReactNode;
 };
 
 export type WithoutEmptyTableProps = {