@purpurds/table 0.0.1

package/src/table.tsx

@@ -0,0 +1,501 @@
+import React, { ReactElement, useEffect, useRef, useState } from "react";
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  CoreOptions,
+  PaginationState,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  TableOptions,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+export { createColumnHelper } from "@tanstack/react-table";
+import { Heading, HeadingTagType } from "@purpurds/heading";
+import { PaginationProps } from "@purpurds/pagination";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+export type {
+  ColumnDef,
+  ColumnFiltersState,
+  CoreOptions,
+  PaginationState,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  TableOptions,
+  VisibilityState,
+};
+
+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 { 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 { TableToolbar } from "./table-toolbar";
+import {
+  WithActionBarProps,
+  WithEmptyTableProps,
+  WithLoadingProps,
+  WithoutActionBarProps,
+  WithoutEmptyTableProps,
+  WithoutLoadingProps,
+  WithoutRowSelectionProps,
+  WithoutSortingProps,
+  WithoutToolbarProps,
+  WithRowSelectionProps,
+  WithSortingProps,
+  WithToolbarProps,
+} from "./types";
+import { filterOnFilterKey, sortOnBadgeValue, sortOnBadgeVariant } from "./utils/custom-functions";
+
+const cx = c.bind(styles);
+
+export type TableProps<TData extends RowData> = {
+  className?: string;
+  variant?: "primary" | "secondary";
+  columns: CoreOptions<TData>["columns"];
+  data: TData[];
+  paginationComponent?: ReactElement<PaginationProps>;
+  onRowsCountChange?: (rowsCount: number) => void;
+} & (WithToolbarProps | WithoutToolbarProps) &
+  (WithSortingProps | WithoutSortingProps) &
+  (WithActionBarProps | WithoutActionBarProps) &
+  (WithEmptyTableProps | WithoutEmptyTableProps) &
+  (WithoutLoadingProps | WithLoadingProps) &
+  (WithoutRowSelectionProps | WithRowSelectionProps<TData>) &
+  Partial<TableOptions<TData>>;
+
+const rootClassName = "purpur-table";
+
+export const Table = <TData extends RowData>({
+  actionbarCopy,
+  actionBarTotalRowCount,
+  className,
+  columns,
+  data,
+  emptyTableCopy,
+  emptyTableHeadingTag,
+  emptyTableIcon,
+  enableActionBar,
+  enableToolbar: enableToolbar,
+  exportDrawerCopy,
+  exportFormats,
+  loading,
+  paginationComponent,
+  rowSelectionAriaLabels,
+  settingsDrawerCopy,
+  showOnlySelectedRows,
+  skeletonRows,
+  sortingAriaLabels,
+  state,
+  toolbarCopy,
+  toolbarTotalRowCount,
+  variant = "primary",
+  getRowId,
+  onExportData,
+  onRowsCountChange,
+  onToggleExpand,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
+  setShowOnlySelectedRows,
+  ...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(
+    Boolean(props.enableFilters)
+  );
+  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 classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--${variant}`]: variant,
+    },
+  ]);
+
+  // Only add row selection columns when both enableRowSelection is true and rowSelectionEnabled is true
+  if (props.enableRowSelection && rowSelectionEnabled) {
+    columns = props.enableMultiRowSelection
+      ? [
+          {
+            id: "row-selection",
+            header: "Row selection",
+            size: 25,
+            meta: {
+              cellType: "rowSelection",
+              rowSelectionAriaLabels,
+            },
+          },
+          ...columns,
+        ]
+      : [
+          {
+            id: "row-toggle",
+            header: "Row toggle",
+            size: 25,
+            meta: {
+              cellType: "rowToggle",
+              rowSelectionAriaLabels,
+            },
+          },
+          ...columns,
+        ];
+  }
+
+  const { filterFns, sortingFns, ...restProps } = props;
+
+  const tanstackTable = useReactTable({
+    columns,
+    data,
+    state,
+    enableColumnFilters: showColumnFiltersEnabled,
+    getRowId,
+    filterFns: {
+      ...filterFns,
+      filterOnFilterKey: filterOnFilterKey<TData>,
+    },
+    sortingFns: {
+      ...sortingFns,
+      sortOnBadgeVariant: sortOnBadgeVariant<TData>,
+      sortOnBadgeValue: sortOnBadgeValue<TData>,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel:
+      props.enableSorting && !props.manualSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel:
+      props.enableFilters && !props.manualFiltering ? getFilteredRowModel() : undefined,
+    getPaginationRowModel:
+      paginationComponent && !props.manualPagination ? getPaginationRowModel() : undefined,
+    ...restProps,
+  });
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (tableContainerRef.current) {
+        const scrollLeft = tableContainerRef.current.scrollLeft;
+        setIsScrolled(scrollLeft > 0);
+      }
+    };
+
+    const container = tableContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (showOnlySelectedRows) {
+      if (!prevShowOnlySelectedRows.current) {
+        tanstackTable.setPageIndex(0);
+      }
+      prevShowOnlySelectedRows.current = showOnlySelectedRows;
+    } else {
+      if (prevShowOnlySelectedRows.current) {
+        tanstackTable.setPageIndex(0);
+      }
+      prevShowOnlySelectedRows.current = showOnlySelectedRows;
+    }
+  }, [showOnlySelectedRows, tanstackTable]);
+
+  useEffect(() => {
+    if (onRowsCountChange) {
+      onRowsCountChange(tanstackTable.getRowCount());
+    }
+  }, [state, onRowsCountChange, tanstackTable]);
+
+  useEffect(() => {
+    if (state?.rowSelection) {
+      const newLength = Object.keys(state.rowSelection).length;
+      setSelectedRowsCount(newLength);
+      setActionBarVisible(newLength > 0);
+    }
+  }, [state?.rowSelection]);
+
+  const handleCancelSelection = () => {
+    tanstackTable.resetRowSelection();
+    setShowOnlySelectedRows?.(false);
+  };
+
+  const handleToggleSelected = () => {
+    if (setShowOnlySelectedRows) {
+      setShowOnlySelectedRows((prev) => !prev);
+    }
+  };
+
+  const getStickyColumn = (index: number) => {
+    return props.enableRowSelection ? index <= 1 : index === 0;
+  };
+
+  const handleResetColumnFilters = () => {
+    tanstackTable.resetColumnFilters();
+  };
+
+  const handleExportButton = () => {
+    if (typeof exportFormats === "string") {
+      handleExportData(exportFormats);
+    } else {
+      setExportDrawerIsOpen((prev) => !prev);
+    }
+  };
+
+  const handleExportData = (format: string) => {
+    onExportData?.(format);
+  };
+
+  const handleResetSettings = () => {
+    setShowColumnFiltersEnabled(true);
+    setStickyFirstColumn(true);
+    setStickyHeaders(true);
+    setRowSelectionEnabled(true);
+
+    tanstackTable.resetColumnVisibility();
+  };
+
+  const tableRows = tanstackTable.getRowModel().rows;
+  const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
+
+  const getColumnWidths = (): (string | number)[] => {
+    return tanstackTable.getAllColumns().map((column) => column.getSize() || "100%");
+  };
+
+  const tableBodyContent =
+    loading && skeletonRows ? (
+      <LoadingTableRows
+        rowCount={skeletonRows}
+        getStickyColumn={getStickyColumn}
+        stickyFirstColumn={stickyFirstColumn}
+        isScrolled={isScrolled}
+        rowSelectionEnabled={rowSelectionEnabled}
+        cellWidths={getColumnWidths()}
+      />
+    ) : 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={
+                isScrolled &&
+                ((props.enableRowSelection && cellIndex === 1) ||
+                  (!props.enableRowSelection && cellIndex === 0))
+              }
+            />
+          ))}
+        </TableRow>
+      ))
+    );
+
+  return (
+    <div id="purpur-table" className={classes}>
+      {enableToolbar && (
+        <TableToolbar
+          onSetDrawerIsOpen={setSettingsDrawerIsOpen}
+          onResetColumnFilters={handleResetColumnFilters}
+          onToggleExpand={onToggleExpand}
+          onExportData={handleExportButton}
+          totalRowCount={toolbarTotalRowCount ?? tanstackTable.getRowCount()}
+          visibleRowCount={tanstackTable.getRowModel().rows.length}
+          toolbarCopy={toolbarCopy}
+          isSettingsDrawerOpen={isSettingsDrawerOpen}
+          hasExportsDrawer={Array.isArray(exportFormats)}
+          isExportDrawerOpen={isExportDrawerOpen}
+          showFilters={showColumnFiltersEnabled}
+          disableClearFilters={tanstackTable.getState().columnFilters.length === 0}
+        />
+      )}
+      <div
+        className={cx(`${rootClassName}__container`, {
+          [`${rootClassName}__container--scrolled`]: isScrolled,
+        })}
+        ref={tableContainerRef}
+      >
+        <table className={cx(`${rootClassName}__table`)}>
+          <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={
+                      isScrolled &&
+                      ((props.enableRowSelection && index === 1) ||
+                        (!props.enableRowSelection && index === 0))
+                    }
+                    {...(props.enableSorting && sortingAriaLabels
+                      ? { enableSorting: props.enableSorting, sortingAriaLabels }
+                      : { enableSorting: false })}
+                  />
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>{tableBodyContent}</TableBody>
+        </table>
+      </div>
+      {paginationComponent}
+      {enableActionBar && actionBarTotalRowCount && actionbarCopy && onPrimaryButtonClick && (
+        <TableActionBar
+          rowCount={actionBarTotalRowCount}
+          selectedRowsCount={selectedRowsCount}
+          copy={actionbarCopy}
+          isVisible={actionBarVisible}
+          onCancelSelection={handleCancelSelection}
+          onToggleSelected={handleToggleSelected}
+          onPrimaryButtonClick={onPrimaryButtonClick}
+          onSecondaryButtonClick={onSecondaryButtonClick}
+        />
+      )}
+      {enableToolbar && settingsDrawerCopy && (
+        <TableSettingsDrawer
+          setDrawerIsOpen={setSettingsDrawerIsOpen}
+          setShowColumnFiltersEnabled={setShowColumnFiltersEnabled}
+          setStickyFirstColumn={setStickyFirstColumn}
+          setStickyHeaders={setStickyHeaders}
+          getAllColumns={tanstackTable.getAllColumns}
+          isDrawerOpen={isSettingsDrawerOpen}
+          showColumnFilters={showColumnFiltersEnabled}
+          stickyFirstColumn={stickyFirstColumn}
+          stickyHeaders={stickyHeaders}
+          copy={settingsDrawerCopy}
+          onResetSettings={handleResetSettings}
+          columnFiltersEnabled={Boolean(props.enableFilters)}
+          enableRowSelection={Boolean(props.enableRowSelection)}
+          rowSelectionEnabled={rowSelectionEnabled}
+          setRowSelectionEnabled={setRowSelectionEnabled}
+        />
+      )}
+      {Array.isArray(exportFormats) && exportDrawerCopy && (
+        <TableExportDrawer
+          isOpen={isExportDrawerOpen}
+          setDrawerIsOpen={setExportDrawerIsOpen}
+          exportFormats={exportFormats}
+          copy={exportDrawerCopy}
+          onExportData={handleExportData}
+        />
+      )}
+    </div>
+  );
+};
+
+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}`,
+        ])}
+      >
+        <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;
+  rowSelectionEnabled: boolean;
+  isScrolled: boolean;
+  stickyFirstColumn: boolean;
+  getStickyColumn: (index: number) => boolean;
+  cellWidths: (string | number)[];
+};
+
+const LoadingTableRows = ({
+  rowCount,
+  // cellCount,
+  getStickyColumn,
+  stickyFirstColumn,
+  isScrolled,
+  rowSelectionEnabled,
+  cellWidths,
+}: 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={
+              isScrolled &&
+              ((rowSelectionEnabled && cellIndex === 1) ||
+                (!rowSelectionEnabled && cellIndex === 0))
+            }
+            cellWidth={cellWidth}
+          />
+        ))}
+      </TableRow>
+    ))}
+  </>
+);

package/src/test-utils/column-def.ts

@@ -0,0 +1,152 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+import { TableDataLarge, TableDataSmall } from "./table-data";
+
+export const createColumnDefKitchenSink = (
+  clickCellButton: () => void,
+  clickButtonGroupCellButton: () => void
+): ColumnDef<TableDataLarge>[] => [
+  {
+    accessorKey: "id",
+    header: "ID",
+    meta: {
+      cellType: "leadText",
+      filterVariant: "string",
+      filterPlaceholder: "Search by id",
+      filterAriaLabel: "Search by id",
+    },
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    meta: {
+      cellType: "bodyText",
+      filterVariant: "string",
+      filterPlaceholder: "Search by name",
+      filterAriaLabel: "Search by name",
+    },
+  },
+  {
+    accessorKey: "link",
+    header: "Link",
+    enableColumnFilter: false,
+    meta: {
+      cellType: "link",
+    },
+  },
+  {
+    accessorKey: "age",
+    header: "Age",
+    filterFn: "includesString",
+    meta: {
+      cellType: "number",
+      filterVariant: "string",
+      filterPlaceholder: "Search by age",
+      filterAriaLabel: "Search by age",
+    },
+  },
+  {
+    accessorKey: "badge",
+    header: "Badge",
+    filterFn: "filterOnFilterKey",
+    meta: {
+      cellType: "badge",
+      filterVariant: "select",
+      filterKey: "variant",
+      selectProps: {
+        value: "",
+        options: [
+          {
+            value: "",
+            label: "Default",
+          },
+          {
+            value: "information",
+            label: "Information",
+          },
+          {
+            value: "success",
+            label: "Success",
+          },
+          {
+            value: "warning",
+            label: "Warning",
+          },
+          {
+            value: "special",
+            label: "Special",
+          },
+        ],
+        "aria-label": "Select badge variant",
+      },
+    },
+  },
+  {
+    accessorKey: "position",
+    header: "Position",
+    filterFn: "includesString",
+    meta: {
+      cellType: "number",
+      filterVariant: "string",
+      numberCellAlignment: "right",
+      filterAriaLabel: "Filter on position",
+    },
+  },
+  {
+    id: "button",
+    header: "Action",
+    meta: {
+      cellType: "button",
+      onClick: clickCellButton,
+    },
+  },
+  {
+    accessorKey: "date",
+    header: "Date",
+    enableColumnFilter: false,
+    enableSorting: false,
+    meta: {
+      cellType: "date",
+      showTime: true,
+    },
+  },
+  {
+    id: "buttonGroup",
+    header: "Buttons",
+    meta: {
+      cellType: "buttonGroup",
+      onClick: clickButtonGroupCellButton,
+    },
+  },
+];
+
+export const createColumnDefSmall = (): ColumnDef<TableDataSmall>[] => [
+  {
+    accessorKey: "id",
+    header: "ID",
+    meta: {
+      cellType: "leadText",
+    },
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    meta: {
+      cellType: "bodyText",
+    },
+  },
+  {
+    accessorKey: "link",
+    header: "Link",
+    meta: {
+      cellType: "link",
+    },
+  },
+  {
+    accessorKey: "age",
+    header: "Age",
+    meta: {
+      cellType: "number",
+    },
+  },
+];