@purpurds/table 8.3.0 → 8.4.0

package/src/table.tsx

@@ -1,4 +1,5 @@
-import React, { type ReactElement, useEffect, useId, useRef, useState } from "react";
+import React, { type ReactElement, useEffect, useId, useMemo, useRef, useState } from "react";
+import type { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 import type {
   ColumnDef,
   ColumnFiltersState,
@@ -18,11 +19,11 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 export { createColumnHelper } from "@tanstack/react-table";
-import { Heading, type HeadingTagType } from "@purpurds/heading";
 import { type PaginationProps } from "@purpurds/pagination";
-import { Paragraph } from "@purpurds/paragraph";
 import c from "classnames/bind";
 
+import { DraggableTable } from "./draggable-table";
+
 export type {
   ColumnDef,
   ColumnFiltersState,
@@ -37,29 +38,28 @@ export type {
 
 import styles from "./table.module.scss";
 import { TableActionBar } from "./table-action-bar";
-import TableBody from "./table-body";
-import { TableColumnHeaderCell } from "./table-column-header-cell";
+import { EmptyTableContent, LoadingTableContent, NormalTableContent } from "./table-content";
 import { TableExportDrawer } from "./table-export-drawer";
-import { TableHeader } from "./table-header";
-import TableRow from "./table-row";
-import TableRowCell from "./table-row-cell";
-import TableRowCellSkeleton from "./table-row-cell-skeleton";
-import { TableSettingsDrawer } from "./table-settings-drawer";
+import { SortableTableHeaders, StandardTableHeaders } from "./table-headers";
+import { TableSettingsDrawer, type TableSettingsDrawerCopyProps } from "./table-settings-drawer";
 import { TableToolbar } from "./table-toolbar";
-import {
-  type WithActionBarProps,
-  type WithEmptyTableProps,
-  type WithLoadingProps,
-  type WithoutActionBarProps,
-  type WithoutEmptyTableProps,
-  type WithoutLoadingProps,
-  type WithoutRowSelectionProps,
-  type WithoutSortingProps,
-  type WithoutToolbarProps,
-  type WithRowSelectionProps,
-  type WithSortingProps,
-  type WithToolbarProps,
+import type {
+  WithActionBarProps,
+  WithColumnDragProps,
+  WithEmptyTableProps,
+  WithLoadingProps,
+  WithoutActionBarProps,
+  WithoutColumnDragProps,
+  WithoutEmptyTableProps,
+  WithoutLoadingProps,
+  WithoutRowSelectionProps,
+  WithoutSortingProps,
+  WithoutToolbarProps,
+  WithRowSelectionProps,
+  WithSortingProps,
+  WithToolbarProps,
 } from "./types";
+import { useTableScroll } from "./use-table-scroll.hook";
 import { filterOnFilterKey, sortOnBadgeValue, sortOnBadgeVariant } from "./utils/custom-functions";
 
 const cx = c.bind(styles);
@@ -81,6 +81,7 @@ export type TableProps<TData extends RowData> = {
   (WithEmptyTableProps | WithoutEmptyTableProps) &
   (WithoutLoadingProps | WithLoadingProps) &
   (WithoutRowSelectionProps | WithRowSelectionProps<TData>) &
+  (WithColumnDragProps | WithoutColumnDragProps) &
   Partial<TableOptions<TData>>;
 
 const rootClassName = "purpur-table";
@@ -120,10 +121,10 @@ export const Table = <TData extends RowData>({
   onSecondaryButtonClick,
   setShowOnlySelectedRows,
   drawerZIndex = 6,
+  enableColumnDrag,
+  columnDragAriaLabelsCopy,
   ...props
 }: TableProps<TData>) => {
-  const [selectedRowsCount, setSelectedRowsCount] = useState(0);
-  const [actionBarVisible, setActionBarVisible] = useState(false);
   const [isSettingsDrawerOpen, setSettingsDrawerIsOpen] = useState(false);
   const [isExportDrawerOpen, setExportDrawerIsOpen] = useState(false);
   const [showColumnFiltersEnabled, setShowColumnFiltersEnabled] = useState(
@@ -132,10 +133,11 @@ export const Table = <TData extends RowData>({
   const [stickyFirstColumn, setStickyFirstColumn] = useState(stickyFirstColumnProp);
   const [stickyHeaders, setStickyHeaders] = useState(stickyHeadersProp);
   const prevShowOnlySelectedRows = useRef(showOnlySelectedRows);
-  const [isScrolled, setIsScrolled] = useState(false);
   const tableContainerRef = useRef<HTMLTableElement>(null);
   const uid = useId();
-  const [rowSelectionEnabled, setRowSelectionEnabled] = useState(true);
+  const isScrolled = useTableScroll(tableContainerRef);
+
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
 
   const classes = cx([
     className,
@@ -146,13 +148,13 @@ export const Table = <TData extends RowData>({
     },
   ]);
 
-  // Only add row selection columns when both enableRowSelection is true and rowSelectionEnabled is true
-  if (props.enableRowSelection && rowSelectionEnabled) {
+  // Only add row selection columns when enableRowSelection is true
+  if (props.enableRowSelection) {
     columns = props.enableMultiRowSelection
       ? [
           {
             id: "row-selection",
-            header: "Row selection",
+            header: rowSelectionAriaLabels?.header,
             size: 25,
             meta: {
               cellType: "rowSelection",
@@ -164,7 +166,7 @@ export const Table = <TData extends RowData>({
       : [
           {
             id: "row-toggle",
-            header: "Row toggle",
+            header: rowSelectionAriaLabels?.header,
             size: 25,
             meta: {
               cellType: "rowToggle",
@@ -202,54 +204,62 @@ export const Table = <TData extends RowData>({
     ...restProps,
   });
 
+  const rowCount = useMemo(() => tanstackTable.getRowCount(), [tanstackTable]);
+
   useEffect(() => {
-    const handleScroll = () => {
-      if (tableContainerRef.current) {
-        const scrollLeft = tableContainerRef.current.scrollLeft;
-        setIsScrolled(scrollLeft > 0);
-      }
-    };
+    if (onRowsCountChange) {
+      onRowsCountChange(rowCount);
+    }
+  }, [rowCount, onRowsCountChange]);
 
-    const container = tableContainerRef.current;
-    if (container) {
-      container.addEventListener("scroll", handleScroll);
+  // Handle drag end - Only used when DnD is enabled
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    // Don't allow moving row selection columns
+    if (active.id === "row-selection" || active.id === "row-toggle") {
+      setActiveId(null);
+      return;
     }
 
-    return () => {
-      if (container) {
-        container.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, []);
+    // Don't allow dropping over row selection columns
+    if (over && (over.id === "row-selection" || over.id === "row-toggle")) {
+      setActiveId(null);
+      return;
+    }
 
-  useEffect(() => {
-    if (showOnlySelectedRows) {
-      if (!prevShowOnlySelectedRows.current) {
-        tanstackTable.setPageIndex(0);
-      }
-      prevShowOnlySelectedRows.current = showOnlySelectedRows;
-    } else {
-      if (prevShowOnlySelectedRows.current) {
-        tanstackTable.setPageIndex(0);
+    if (over && active.id !== over.id) {
+      const currentOrder = tanstackTable.getAllLeafColumns().map((column) => column.id);
+      const oldIndex = currentOrder.indexOf(String(active.id));
+      const newIndex = currentOrder.indexOf(String(over.id));
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newOrder = [...currentOrder];
+        const [removed] = newOrder.splice(oldIndex, 1);
+        newOrder.splice(newIndex, 0, removed);
+        tanstackTable.setColumnOrder(newOrder);
       }
-      prevShowOnlySelectedRows.current = showOnlySelectedRows;
     }
-  }, [showOnlySelectedRows, tanstackTable]);
 
-  useEffect(() => {
-    if (onRowsCountChange) {
-      onRowsCountChange(tanstackTable.getRowCount());
-    }
-  }, [state, onRowsCountChange, tanstackTable]);
+    setActiveId(null);
+  };
 
   useEffect(() => {
-    if (state?.rowSelection) {
-      const newLength = Object.keys(state.rowSelection).length;
-      setSelectedRowsCount(newLength);
-      setActionBarVisible(newLength > 0);
+    if (showOnlySelectedRows !== prevShowOnlySelectedRows.current) {
+      tanstackTable.setPageIndex(0);
+      prevShowOnlySelectedRows.current = showOnlySelectedRows;
     }
+  }, [showOnlySelectedRows, tanstackTable]);
+
+  const selectedRowsData = useMemo(() => {
+    if (!state?.rowSelection) return { count: 0, visible: false };
+    const count = Object.keys(state.rowSelection).length;
+    return { count, visible: count > 0 };
   }, [state?.rowSelection]);
 
+  const selectedRowsCount = selectedRowsData.count;
+  const actionBarVisible = selectedRowsData.visible;
+
   const handleCancelSelection = () => {
     tanstackTable.resetRowSelection();
     setShowOnlySelectedRows?.(false);
@@ -261,11 +271,14 @@ export const Table = <TData extends RowData>({
     }
   };
 
-  const getStickyColumn = (index: number) => {
-    // 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 getStickyColumn = React.useCallback(
+    (index: number) => {
+      // When rowSelectionEnabled is true, the first two columns are sticky
+      // Otherwise, only the first column is sticky
+      return props.enableRowSelection ? index <= 1 : index === 0;
+    },
+    [props.enableRowSelection]
+  );
 
   const handleResetColumnFilters = () => {
     tanstackTable.resetColumnFilters();
@@ -284,62 +297,159 @@ export const Table = <TData extends RowData>({
   };
 
   const handleResetSettings = () => {
-    setShowColumnFiltersEnabled(true);
-    setStickyFirstColumn(true);
-    setStickyHeaders(true);
-
+    setShowColumnFiltersEnabled(Boolean(props.enableFilters));
+    setStickyFirstColumn(stickyFirstColumnProp);
+    setStickyHeaders(stickyHeadersProp);
+    tanstackTable.resetColumnOrder();
     tanstackTable.resetColumnVisibility();
   };
 
-  const showBorder = (index: number) => {
-    // Only show the border for sticky columns when the table is scrolled
-    return isScrolled && stickyFirstColumn && getStickyColumn(index);
-  };
+  const showBorder = React.useCallback(
+    (index: number) => {
+      // Only show the border for sticky columns when the table is scrolled
+      return isScrolled && stickyFirstColumn && getStickyColumn(index);
+    },
+    [isScrolled, stickyFirstColumn, getStickyColumn]
+  );
 
   const tableRows = tanstackTable.getRowModel().rows;
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
-  const getColumnWidths = (): (string | number)[] => {
+  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}
+          />
+        );
+      }
 
-  const tableBodyContent =
-    loading && skeletonRows ? (
-      <LoadingTableRows
-        rowCount={skeletonRows}
-        getStickyColumn={getStickyColumn}
+      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}
+        />
+      );
+    }
+
+    return (
+      <NormalTableContent
+        tanstackTable={tanstackTable}
+        tableRows={tableRows}
+        showColumnFiltersEnabled={showColumnFiltersEnabled}
+        fullWidth={fullWidth}
+        renderTableHeaders={renderTableHeaders}
         stickyFirstColumn={stickyFirstColumn}
+        getStickyColumn={getStickyColumn}
         isScrolled={isScrolled}
-        cellWidths={getColumnWidths()}
         showBorder={showBorder}
+        enableColumnDrag={enableColumnDrag || false}
+        activeId={activeId}
       />
-    ) : emptyTable && 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)}
-            />
-          ))}
-        </TableRow>
-      ))
     );
+  }, [
+    activeId,
+    emptyTableCopy,
+    emptyTableHeadingTag,
+    emptyTableIcon,
+    enableColumnDrag,
+    fullWidth,
+    getStickyColumn,
+    isScrolled,
+    loading,
+    memoizedGetColumnWidths,
+    renderTableHeaders,
+    showBorder,
+    showColumnFiltersEnabled,
+    skeletonRows,
+    stickyFirstColumn,
+    tableRows,
+    tanstackTable,
+    variant,
+  ]);
 
   return (
     <div id={`${uid}-table`} className={classes}>
@@ -368,34 +478,24 @@ export const Table = <TData extends RowData>({
         })}
         ref={tableContainerRef}
       >
-        <table
-          className={cx([
-            `${rootClassName}__table`,
-            { [`${rootClassName}__table--full-width`]: fullWidth },
-          ])}
-        >
-          <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
-            {tanstackTable.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header, index) => (
-                  <TableColumnHeaderCell
-                    key={header.id}
-                    header={header}
-                    tanstackTable={tanstackTable}
-                    stickyColumn={!emptyTable && stickyFirstColumn && getStickyColumn(index)}
-                    stickyHeaders={!emptyTable && stickyHeaders}
-                    isScrolled={isScrolled}
-                    showBorder={showBorder(index)}
-                    {...(props.enableSorting && sortingAriaLabels
-                      ? { enableSorting: props.enableSorting, sortingAriaLabels }
-                      : { enableSorting: false })}
-                  />
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>{tableBodyContent}</TableBody>
-        </table>
+        {enableColumnDrag && columnDragAriaLabelsCopy ? (
+          <DraggableTable
+            activeId={activeId}
+            setActiveId={setActiveId}
+            handleDragEnd={handleDragEnd}
+            tableRows={tableRows}
+            tanstackTable={tanstackTable}
+            variant={variant}
+            fullWidth={fullWidth}
+            showColumnFiltersEnabled={showColumnFiltersEnabled}
+            columnDragAriaLabelsCopy={columnDragAriaLabelsCopy}
+            rootClassName={rootClassName}
+          >
+            {renderTableContent()}
+          </DraggableTable>
+        ) : (
+          renderTableContent()
+        )}
       </div>
       {paginationComponent}
       {enableActionBar && actionBarTotalRowCount && actionbarCopy && onPrimaryButtonClick && (
@@ -417,18 +517,27 @@ export const Table = <TData extends RowData>({
           setShowColumnFiltersEnabled={setShowColumnFiltersEnabled}
           setStickyFirstColumn={setStickyFirstColumn}
           setStickyHeaders={setStickyHeaders}
-          getAllColumns={tanstackTable.getAllColumns}
+          getAllColumns={tanstackTable.getAllLeafColumns}
           isDrawerOpen={isSettingsDrawerOpen}
           showColumnFilters={showColumnFiltersEnabled}
           stickyFirstColumn={stickyFirstColumn}
           stickyHeaders={stickyHeaders}
-          copy={settingsDrawerCopy}
           onResetSettings={handleResetSettings}
           columnFiltersEnabled={Boolean(props.enableFilters)}
-          enableRowSelection={Boolean(props.enableRowSelection)}
-          rowSelectionEnabled={rowSelectionEnabled}
-          setRowSelectionEnabled={setRowSelectionEnabled}
           zIndex={drawerZIndex}
+          {...(enableColumnDrag && state?.columnOrder
+            ? {
+                enableColumnDrag: true,
+                copy: settingsDrawerCopy as TableSettingsDrawerCopyProps<true>,
+                columnOrder: state.columnOrder,
+                onColumnOrderChange: (newOrder) => {
+                  tanstackTable.setColumnOrder(newOrder);
+                },
+              }
+            : {
+                enableColumnDrag: false,
+                copy: settingsDrawerCopy as TableSettingsDrawerCopyProps<false>,
+              })}
         />
       )}
       {Array.isArray(exportFormats) && exportDrawerCopy && (
@@ -447,70 +556,3 @@ export const Table = <TData extends RowData>({
 };
 
 Table.displayName = "Table";
-
-type EmptyTableProps = {
-  variant: "primary" | "secondary";
-  tag: HeadingTagType;
-  title: string;
-  description: string;
-  colSpan: number;
-  icon: React.ReactNode;
-};
-
-const EmptyTable = ({ variant, tag, title, description, colSpan, icon }: EmptyTableProps) => (
-  <TableRow>
-    <TableRowCell colSpan={colSpan} isLastRow={true} isFirstCell={true} isLastCell={true}>
-      <div
-        className={cx([
-          `${rootClassName}__empty-section`,
-          `${rootClassName}__empty-section--${variant}`,
-        ])}
-      >
-        {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}
-          </Heading>
-          <Paragraph data-testid="purpur-table-empty-table-description">{description}</Paragraph>
-        </div>
-      </div>
-    </TableRowCell>
-  </TableRow>
-);
-
-type LoadingTableRowsProps = {
-  rowCount: number;
-  isScrolled: boolean;
-  stickyFirstColumn: boolean;
-  getStickyColumn: (index: number) => boolean;
-  cellWidths: (string | number)[];
-  showBorder: (index: number) => boolean;
-};
-
-const LoadingTableRows = ({
-  rowCount,
-  getStickyColumn,
-  stickyFirstColumn,
-  isScrolled,
-  cellWidths,
-  showBorder,
-}: LoadingTableRowsProps) => (
-  <>
-    {Array.from({ length: rowCount }, (_value, index) => index).map((row, rowIndex) => (
-      <TableRow key={`skeleton-row-${row}`}>
-        {cellWidths.map((cellWidth, cellIndex) => (
-          <TableRowCellSkeleton
-            key={`skeleton-cell-${cellIndex}`}
-            isLastRow={rowIndex === rowCount - 1}
-            isFirstCell={cellIndex === 0}
-            isLastCell={cellIndex === cellWidths.length - 1}
-            stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
-            isScrolled={isScrolled}
-            showBorder={showBorder(cellIndex)}
-            cellWidth={cellWidth}
-          />
-        ))}
-      </TableRow>
-    ))}
-  </>
-);

package/src/test-utils/helpers.ts

@@ -186,6 +186,7 @@ export const copy = {
     },
     generalSettings: {
       header: "General settings",
+
       toggles: {
         lockFirstcolumn: "Lock first column",
         showFilters: "Show Filters",
@@ -195,6 +196,7 @@ export const copy = {
     title: "Table settings",
     visibleColumns: {
       header: "Visible columns",
+      description: "Change general table settings",
     },
   },
   sortingAriaLabels: {

package/src/types.ts

@@ -320,6 +320,7 @@ export type WithoutToolbarProps = {
   toolbarCopy?: never;
   toolbarTotalRowCount?: never;
   exportDrawerCopy?: never;
+  enableColumnDrag?: boolean;
 };
 
 type WithFiltersProps = {
@@ -440,7 +441,6 @@ type WithSettingsDrawerProps = {
   /**
    * Optional properties for customizing the settings drawer copy.
    */
-  settingsDrawerCopy: TableSettingsDrawerCopyProps;
   toolbarCopy: {
     buttons: {
       settings: string;
@@ -449,7 +449,10 @@ type WithSettingsDrawerProps = {
       settings: string;
     };
   };
-};
+} & (
+  | (WithColumnDragProps & { settingsDrawerCopy: TableSettingsDrawerCopyProps<true> })
+  | (WithoutColumnDragProps & { settingsDrawerCopy?: TableSettingsDrawerCopyProps<false> })
+);
 
 /**
  * Props for enabling a single export format in a data table component.
@@ -494,4 +497,24 @@ type WithoutSettingsDrawerProps = {
       settings?: undefined;
     };
   };
+} & WithoutColumnDragProps;
+
+/**
+ * Props for column drag feature
+ */
+export type WithColumnDragProps = {
+  enableColumnDrag: true;
+  onColumnOrderChange: (newColumnOrder: string[]) => void;
+  columnDragAriaLabelsCopy: ColumnDragAriaLabelsCopy;
+};
+
+export type WithoutColumnDragProps = {
+  enableColumnDrag?: false | undefined;
+  onColumnOrderChange?: never;
+  columnDragAriaLabelsCopy?: never;
+};
+
+type ColumnDragAriaLabelsCopy = {
+  grab: string;
+  grabbing: string;
 };