@purpurds/table 8.3.1 → 8.4.0

package/src/table.module.scss

@@ -1,5 +1,7 @@
 @use "@purpurds/tokens/breakpoint/variables" as *;
 
+$indicatorWidth: 3px;
+
 .purpur-table {
   --table-border: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
   --table-border-radius: var(--purpur-border-radius-lg);
@@ -49,7 +51,8 @@
   .purpur-table-column-header-cell {
     border-top: var(--table-border);
 
-    &:first-of-type {
+    &:first-of-type,
+    &__column-drag-enabled {
       border-left: var(--table-border);
     }
 
@@ -57,19 +60,24 @@
       border-right: var(--table-border);
     }
 
-    &__sticky-header {
-      position: sticky;
-      top: 0;
-      z-index: 4;
-      background-color: inherit;
-    }
+    @media (min-width: $purpur-breakpoint-md) {
+      &__sticky-header {
+        position: sticky;
+        top: 0;
+        z-index: 4;
+        background-color: inherit;
+      }
 
-    &__sticky-column {
-      z-index: 5;
+      &__sticky-column {
+        z-index: 5;
+      }
     }
   }
 
   &--has-filters {
+    th {
+      min-height: calc(31.4rem * var(--purpur-rescale));
+    }
     .purpur-table-row {
       vertical-align: baseline;
     }
@@ -77,16 +85,9 @@
 }
 
 .purpur-table-column-header-cell {
-  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;
   }
@@ -99,10 +100,17 @@
     border-top-right-radius: var(--table-border-radius);
   }
 
+  &__inner {
+    padding: var(--purpur-spacing-100) var(--purpur-spacing-150) var(--purpur-spacing-100)
+      var(--purpur-spacing-300);
+    align-self: stretch;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+
     gap: var(--purpur-spacing-50);
   }
 
@@ -131,13 +139,89 @@
     padding-right: var(--purpur-spacing-150);
     padding-bottom: var(--purpur-spacing-150);
     flex-direction: column;
+    width: 100%;
+  }
+
+  &__draggable {
+    cursor: grab;
+  }
+
+  &__dragging {
+    cursor: grabbing;
+    opacity: 0.4;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__drag-handle {
+    display: flex;
+    padding: var(--purpur-spacing-25) var(--purpur-spacing-50);
+    justify-content: center;
+    align-items: center;
     align-self: stretch;
+    border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+    background: var(--purpur-color-background-secondary);
+
+    &:hover {
+      opacity: 1;
+
+      &:not(.purpur-table-column-header-cell__drag-handle--active) {
+        background: var(--purpur-color-background-interactive-transparent-hover);
+      }
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      border-radius: var(--purpur-border-radius-xs);
+    }
+
+    &--active {
+      border: inherit;
+      border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+      background: var(--purpur-color-background-interactive-transparent-active);
+      border-top-left-radius: 7px;
+      border-top-right-radius: 7px;
+    }
+
+    &-icon {
+      color: var(--purpur-color-text-weak);
+    }
+  }
+
+  &__filter-placeholder {
+    height: calc(3.4rem * var(--purpur-rescale));
+    visibility: hidden;
+  }
+
+  &--drop-indicator-before::before,
+  &--drop-indicator-after::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: $indicatorWidth;
+    background-color: var(--purpur-color-border-interactive-primary);
+    pointer-events: none;
+  }
+
+  &--drop-indicator-before::before {
+    left: 0;
+  }
+
+  &--drop-indicator-after::after {
+    right: 0;
   }
 }
 
 .purpur-table-row {
   .purpur-table-row-cell {
-    &:first-of-type {
+    &:first-of-type,
+    &__column-drag-enabled {
       border-left: var(--table-border);
     }
 
@@ -203,21 +287,23 @@
 
 .purpur-table-column-header-cell,
 .purpur-table-row-cell {
-  &__sticky-column {
-    position: sticky;
-    left: 0;
-    z-index: 3;
-    background-color: inherit;
+  @media (min-width: $purpur-breakpoint-md) {
+    &__sticky-column {
+      position: sticky;
+      left: 0;
+      z-index: 3;
+      background-color: inherit;
 
-    & + .purpur-table-column-header-cell__sticky-column,
-    & + .purpur-table-row-cell__sticky-column {
-      left: 73px; // 73px is the width of the first column when row selection/toggle is enabled. This rule is only applied when the row selection/toggle is enabled.
-    }
+      & + .purpur-table-column-header-cell__sticky-column,
+      & + .purpur-table-row-cell__sticky-column {
+        left: 85px; // 85px is the width of the first column when row selection/toggle is enabled. This rule is only applied when the row selection/toggle is enabled.
+      }
 
-    &__with-sticky-border {
-      border-right: var(--purpur-border-width-sm) solid var(--purpur-color-border-base);
-      box-shadow: var(--purpur-border-width-sm) 0 calc(2 * var(--purpur-border-width-sm))
-        rgba(0, 0, 0, 0.05);
+      &__with-sticky-border {
+        border-right: var(--purpur-border-width-sm) solid var(--purpur-color-border-base);
+        box-shadow: var(--purpur-border-width-sm) 0 calc(2 * var(--purpur-border-width-sm))
+          rgba(0, 0, 0, 0.05);
+      }
     }
   }
 }
@@ -332,6 +418,34 @@
   &__tooltip-content {
     z-index: 10;
   }
+
+  &__dragging {
+    opacity: 0.4;
+  }
+
+  &--drop-indicator-before,
+  &--drop-indicator-after {
+    position: sticky;
+  }
+
+  &--drop-indicator-before::before,
+  &--drop-indicator-after::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: $indicatorWidth;
+    background-color: var(--purpur-color-border-interactive-primary);
+    pointer-events: none;
+  }
+
+  &--drop-indicator-before::before {
+    left: 0;
+  }
+
+  &--drop-indicator-after::after {
+    right: 0;
+  }
 }
 
 .purpur-table--primary {
@@ -408,3 +522,50 @@
       var(--purpur-spacing-0);
   }
 }
+
+.purpur-table__drag-overlay {
+  z-index: 999;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: var(--purpur-shadow-lg);
+
+  &--primary {
+    .purpur-table-header {
+      .purpur-table-row {
+        background: var(--purpur-color-background-primary);
+
+        th {
+          border-top-left-radius: var(--purpur-border-radius-md);
+          border-top-right-radius: var(--purpur-border-radius-md);
+        }
+      }
+    }
+
+    .purpur-table-body {
+      .purpur-table-row {
+        background: var(--purpur-color-background-primary);
+
+        &:nth-of-type(odd) {
+          background: var(--purpur-color-background-secondary);
+        }
+
+        &:last-of-type {
+          td {
+            border-bottom-left-radius: var(--purpur-border-radius-md);
+            border-bottom-right-radius: var(--purpur-border-radius-md);
+          }
+        }
+      }
+    }
+  }
+
+  &--secondary {
+    .purpur-table-row {
+      background-color: var(--purpur-color-background-secondary);
+
+      &:nth-of-type(odd) {
+        background-color: var(--purpur-color-background-primary);
+      }
+    }
+  }
+}

package/src/table.stories.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { Grid } from "@purpurds/grid";
-import { IllustrativeIconSearchQuestionDuocolor } from "@purpurds/illustrative-icon/search-question-duocolor";
+import { IllustrativeIconTableQuestionDuocolorStatic } from "@purpurds/illustrative-icon/table-question-duocolor-static";
 import { Pagination, type PaginationProps } from "@purpurds/pagination";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import c from "classnames";
@@ -247,6 +247,7 @@ const commonSettingsDrawerCopy = {
   },
   visibleColumns: {
     header: "Visible columns",
+    description: "Choose which columns to display.",
   },
   buttons: {
     closeDrawer: "Close drawer",
@@ -254,6 +255,30 @@ const commonSettingsDrawerCopy = {
   },
 };
 
+const commonSettingsDrawerCopyWithColumnDrag = {
+  ...commonSettingsDrawerCopy,
+  visibleColumns: {
+    ...commonSettingsDrawerCopy.visibleColumns,
+    rearrangeDescription: "Choose how you want to reorder the columns.",
+    buttons: {
+      rearrange: "Reorder",
+      done: "Done",
+    },
+    ariaLabels: {
+      dragHandle: {
+        action: "Drag to reorder column",
+        instructions: "(use space or enter to pick up, arrow keys to move, space or enter to drop)",
+      },
+      arrowButtons: {
+        move: "Move",
+        up: "up",
+        down: "down",
+      },
+      rearrangeButton: "Reorder columns",
+    },
+  },
+};
+
 const commonExportDrawerCopy = {
   title: "Export table",
   bodyText: "Choose the format you want to export the table in.",
@@ -266,6 +291,11 @@ const commonRowSelectionAriaLabels = {
   row: "Select row",
 };
 
+const commonColumnDragAriaLabels = {
+  grab: "Drag to reorder column",
+  grabbing: "Dragging",
+};
+
 /**
  * Showcase demonstrates a fully-featured Table with all available functionality enabled.
  */
@@ -281,7 +311,7 @@ export const Showcase: StoryTableData = {
     exportFormats: ["csv", "xlsx"],
     actionbarCopy: commonActionbarCopy,
     exportDrawerCopy: commonExportDrawerCopy,
-    settingsDrawerCopy: commonSettingsDrawerCopy,
+    settingsDrawerCopy: commonSettingsDrawerCopyWithColumnDrag,
     sortingAriaLabels: commonSortingAriaLabels,
     onToggleExpand: () => {},
     toolbarCopy: commonToolbarCopy,
@@ -292,6 +322,8 @@ export const Showcase: StoryTableData = {
     fullWidth: true,
     stickyFirstColumn: true,
     stickyHeaders: true,
+    enableColumnDrag: true,
+    onColumnOrderChange: () => {},
   },
   parameters: {
     docs: {
@@ -321,6 +353,7 @@ manages filtering, sorting and pagination internally.
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+    const [columnOrder, setColumnOrder] = useState<string[]>([]);
 
     const [displayData, setDisplayData] = useState(args.data);
     const [rowCount, setRowCount] = useState(args.data.length);
@@ -378,7 +411,7 @@ manages filtering, sorting and pagination internally.
         data={displayData}
         enableRowSelection={args.enableRowSelection}
         enableMultiRowSelection={args.enableMultiRowSelection}
-        state={{ pagination, rowSelection, columnFilters, columnVisibility }}
+        state={{ pagination, rowSelection, columnFilters, columnVisibility, columnOrder }}
         exportFormats={args.exportFormats}
         onExportData={args.exportFormats ? (e) => console.log("Export data", e) : undefined}
         actionbarCopy={args.enableActionBar ? args.actionbarCopy : undefined}
@@ -397,6 +430,7 @@ manages filtering, sorting and pagination internally.
         showOnlySelectedRows={showOnlySelectedRows}
         onRowSelectionChange={setRowSelection}
         onColumnFiltersChange={setColumnFilters}
+        onColumnOrderChange={setColumnOrder}
         getRowId={(row: TableData) => `${row.id}`}
         actionBarTotalRowCount={args.data.length}
         onPaginationChange={setPagination}
@@ -406,6 +440,8 @@ manages filtering, sorting and pagination internally.
         fullWidth={args.fullWidth}
         stickyFirstColumn={args.stickyFirstColumn}
         stickyHeaders={args.stickyHeaders}
+        enableColumnDrag={args.enableColumnDrag}
+        columnDragAriaLabelsCopy={commonColumnDragAriaLabels}
       />
     );
   },
@@ -1004,7 +1040,7 @@ when there is no data to show.
         enableActionBar={false}
         emptyTableCopy={emptyTableProps.emptyTableCopy}
         emptyTableHeadingTag={emptyTableProps.emptyTableHeadingTag}
-        emptyTableIcon={<IllustrativeIconSearchQuestionDuocolor />}
+        emptyTableIcon={<IllustrativeIconTableQuestionDuocolorStatic />}
       />
     );
   },
@@ -1257,3 +1293,23 @@ This example demonstrates the secondary visual variant of the Table.
     );
   },
 };
+
+export const WithColumnDragAndDrop = {
+  name: "With column drag and drop",
+  args: {
+    columns: simpleColumnDef,
+    data: simpleTableData,
+    enableColumnDrag: true,
+    columnDragAriaLabelsCopy: { commonColumnDragAriaLabels },
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render: (args: any) => {
+    const [columnOrder, setColumnOrder] = useState<string[]>([]);
+
+    return (
+      <div style={{ padding: "20px" }}>
+        <Table {...args} state={{ columnOrder }} onColumnOrderChange={setColumnOrder} />
+      </div>
+    );
+  },
+};

package/src/table.test.tsx

@@ -290,6 +290,11 @@ describe("Data Table", () => {
             skeletonRows={5}
           />
         );
+
+        table = screen.getByRole("table");
+        tableHeaders = within(getTableHead(table)).getAllByRole("columnheader");
+
+        tableRows = within(getTableBody(table)).getAllByRole("row");
       });
 
       it("should show table data", () => {
@@ -300,7 +305,6 @@ describe("Data Table", () => {
 
         const firstDataRow = tableRows[0];
         const dataCells = within(firstDataRow).getAllByRole("cell");
-
         expect(dataCells[0]).toHaveTextContent("12345"); // ID
         expect(dataCells[1]).toHaveTextContent("Name 1"); // Name
         expect(dataCells[2]).toHaveTextContent("Link 2"); // Link