@dmsi/wedgekit-react 0.0.2

package/src/components/DataGrid.tsx

@@ -0,0 +1,948 @@
+"use client";
+
+import React, { ReactNode, useCallback, useId, useRef, useState } from "react";
+
+// TanStack Table
+import {
+  Column,
+  ColumnDef,
+  ColumnFiltersState,
+  FilterFn,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  Header,
+  PartialKeys,
+  RowData,
+  SortDirection,
+  SortingState,
+  Table,
+  TableOptionsResolved,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  useVirtualizer,
+  VirtualItem,
+  Virtualizer,
+} from "@tanstack/react-virtual";
+
+// DnD Kit
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+} from "@dnd-kit/sortable";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+
+// UI Components
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import {
+  DataGridCell,
+  DragAlongCell,
+  DraggableCellHeader,
+} from "./DataGridCell";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { Search } from "./Search";
+import { Label } from "./Label";
+import { Menu } from "./Menu";
+import { MenuOption } from "./MenuOption";
+import { Paragraph } from "./Paragraph";
+import { Select } from "./Select";
+import { Subheader } from "./Subheader";
+import { Tooltip } from "./Tooltip";
+
+// Utils & Hooks
+import { useInfiniteScroll } from "./useInfiniteScroll";
+import { componentGap, componentPadding } from "../classNames";
+import clsx from "clsx";
+import { Row } from "@tanstack/react-table";
+
+// Constants
+const PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
+const NO_RESULTS_HEIGHT = "h-[120px]";
+
+function adaptTableStateSetter<T>(
+  setter: React.Dispatch<React.SetStateAction<T>>,
+) {
+  return (valueOrFn: T | ((prev: T) => T)) => {
+    setter((prev) =>
+      typeof valueOrFn === "function"
+        ? (valueOrFn as (prev: T) => T)(prev)
+        : valueOrFn,
+    );
+  };
+}
+
+// Types
+export interface DataGridPagination {
+  pageIndex: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export interface DataGridProps<T extends Record<string, unknown>> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  status?: string;
+  locked?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  pagination?: DataGridPagination;
+  showFilterRow?: boolean;
+  sorting?: SortingState;
+  onSortingChange?: (state: SortingState) => void;
+  columnFilters?: ColumnFiltersState;
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+  rowSelection?: Record<string, boolean>;
+  onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+  filteredSortedData?: T[];
+  totalRowCount: number;
+  hideStatusBar?: boolean;
+  centerHeader?: boolean;
+  enableColumnSelector?: boolean;
+}
+
+export function DataGrid<T extends Record<string, unknown>>({
+  data,
+  columns,
+  status,
+  isLoadingMore = false,
+  onLoadMore,
+  pagination,
+  showFilterRow = false,
+  hasMore = false,
+  sorting: externalSorting,
+  onSortingChange,
+  columnFilters: externalColumnFilters,
+  onColumnFiltersChange,
+  rowSelection: externalRowSelection,
+  onRowSelectionChange,
+  filteredSortedData,
+  totalRowCount,
+  hideStatusBar,
+  centerHeader,
+  enableColumnSelector,
+}: DataGridProps<T>) {
+  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
+    columns.map((c) => c.id!),
+  );
+  const [localSorting, setLocalSorting] = useState<SortingState>([]);
+  const [localColumnFilters, setLocalColumnFilters] =
+    useState<ColumnFiltersState>([]);
+  const [localRowSelection, setLocalRowSelection] = useState<
+    Record<string, boolean>
+  >({});
+
+  const sortingState = pagination
+    ? (externalSorting ?? localSorting)
+    : localSorting;
+  const setSortingState: React.Dispatch<React.SetStateAction<SortingState>> =
+    pagination
+      ? (updaterOrValue) => {
+          const value =
+            typeof updaterOrValue === "function"
+              ? (updaterOrValue as (prev: SortingState) => SortingState)(
+                  externalSorting ?? [],
+                )
+              : updaterOrValue;
+          (onSortingChange ?? setLocalSorting)(value);
+        }
+      : setLocalSorting;
+
+  const columnFilterState = pagination
+    ? (externalColumnFilters ?? localColumnFilters)
+    : localColumnFilters;
+
+  const setColumnFilterState: React.Dispatch<
+    React.SetStateAction<ColumnFiltersState>
+  > = pagination
+    ? (updaterOrValue) => {
+        const value =
+          typeof updaterOrValue === "function"
+            ? (
+                updaterOrValue as (
+                  prev: ColumnFiltersState,
+                ) => ColumnFiltersState
+              )(externalColumnFilters ?? [])
+            : updaterOrValue;
+        (onColumnFiltersChange ?? setLocalColumnFilters)(value);
+      }
+    : setLocalColumnFilters;
+
+  const rowSelection = pagination
+    ? (externalRowSelection ?? localRowSelection)
+    : localRowSelection;
+  const setRowSelection: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  > = pagination
+    ? (updaterOrValue) => {
+        const value =
+          typeof updaterOrValue === "function"
+            ? (
+                updaterOrValue as (
+                  prev: Record<string, boolean>,
+                ) => Record<string, boolean>
+              )(externalRowSelection ?? {})
+            : updaterOrValue;
+        (onRowSelectionChange ?? setLocalRowSelection)(value);
+      }
+    : setLocalRowSelection;
+
+  const id = useId();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const [columnVisibility, setColumnVisibility] = useState<
+    Record<string, boolean>
+  >(() => {
+    const initialVisibility: Record<string, boolean> = {};
+    columns.forEach((column) => {
+      if (column.id) {
+        initialVisibility[column.id] = column.meta?.visible ?? true;
+      }
+    });
+    return initialVisibility;
+  });
+
+  const toggleColumnVisibility = useCallback(
+    (id: string, isVisible: boolean) => {
+      setColumnVisibility((prev) => ({ ...prev, [id]: isVisible }));
+    },
+    [setColumnVisibility],
+  );
+
+  const resetColumnVisibility = useCallback(() => {
+    setColumnVisibility(() => {
+      const initialVisibility: Record<string, boolean> = {};
+      columns.forEach((column) => {
+        if (column.id) {
+          initialVisibility[column.id] = column.meta?.visible ?? true;
+        }
+      });
+      return initialVisibility;
+    });
+  }, [columns]);
+
+  const table = useReactTable<T>({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    columnResizeMode: "onChange",
+    getRowId: (row, index) => String(row.id ?? index + 1),
+    state: {
+      columnOrder,
+      sorting: sortingState,
+      columnFilters: columnFilterState,
+      rowSelection,
+      columnVisibility,
+    },
+    onColumnOrderChange: setColumnOrder,
+    onSortingChange: adaptTableStateSetter(setSortingState),
+    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
+    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
+    filterFns: {
+      startsWith: (row, columnId, filterValue) =>
+        (row.getValue(columnId) as string)
+          ?.toLowerCase()
+          .startsWith(filterValue.toLowerCase()),
+      endsWith: (row, columnId, filterValue) =>
+        (row.getValue(columnId) as string)
+          ?.toLowerCase()
+          .endsWith(filterValue.toLowerCase()),
+    },
+  });
+
+  const allRowIds = pagination
+    ? (filteredSortedData?.map((row) => String(row.id)) ?? [])
+    : Array.from({ length: totalRowCount ?? data.length }, (_, i) =>
+        String(i + 1),
+      );
+
+  const allSelectedAcrossPages = allRowIds.every((id) => rowSelection[id]);
+  const someSelectedAcrossPages =
+    !allSelectedAcrossPages && allRowIds.some((id) => rowSelection[id]);
+
+  const toggleSelectAllAcrossPages = () => {
+    setRowSelection((prev) => {
+      const isSelecting = !allSelectedAcrossPages;
+
+      if (isSelecting) {
+        const newSelection: Record<string, boolean> = {};
+        for (const id of allRowIds) {
+          newSelection[id] = true;
+        }
+        return { ...prev, ...newSelection };
+      } else {
+        const updatedSelection: Record<string, boolean> = { ...prev };
+        for (const id of allRowIds) {
+          delete updatedSelection[id];
+        }
+        return updatedSelection;
+      }
+    });
+  };
+
+  useInfiniteScroll({
+    containerRef,
+    onLoadMore: onLoadMore ?? (() => {}),
+    isLoading: isLoadingMore,
+    enabled: !pagination,
+  });
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((prev) => {
+        const oldIndex = prev.indexOf(active.id as string);
+        const newIndex = prev.indexOf(over.id as string);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  };
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor),
+  );
+
+  const visibleColumns = table.getVisibleLeafColumns();
+
+  const columnVirtualizer = useVirtualizer<
+    HTMLDivElement,
+    HTMLTableCellElement
+  >({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => containerRef.current,
+    horizontal: true,
+    overscan: 3, //how many columns to render on each side off screen each way
+  });
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+
+  let virtualPaddingLeft: number | undefined;
+  let virtualPaddingRight: number | undefined;
+
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = virtualColumns[0]?.start ?? 0;
+    virtualPaddingRight =
+      columnVirtualizer.getTotalSize() -
+      (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+  }
+
+  return (
+    <DndContext
+      id={id}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <SortableContext
+        items={columnOrder}
+        strategy={horizontalListSortingStrategy}
+      >
+        <div className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal">
+          <div
+            className="overflow-auto scrollbar-thin h-full relative contain-paint will-change-transform"
+            ref={containerRef}
+          >
+            <table className="min-w-full grid">
+              <thead className="sticky top-0 z-10 grid">
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id} className="flex w-full">
+                    {virtualPaddingLeft ? (
+                      // fake empty column to the left for virtualization scroll padding
+                      <th
+                        style={{ display: "flex", width: virtualPaddingLeft }}
+                      />
+                    ) : null}
+
+                    {virtualColumns.map((virtualColumn) => {
+                      const header = headerGroup.headers[virtualColumn.index];
+                      if (typeof header.column.columnDef.header === "string") {
+                        const customHeaderWidth =
+                          header.column.columnDef.meta?.headerWidth;
+
+                        return (
+                          <DraggableCellHeader
+                            key={header.id}
+                            header={header}
+                            locked={header.column.columnDef.meta?.locked}
+                            center={centerHeader}
+                            width={customHeaderWidth}
+                            className={clsx(
+                              header.column.getCanSort()
+                                ? "cursor-pointer"
+                                : "cursor-grab",
+                              "group",
+                            )}
+                          >
+                            <Subheader tall>
+                              {header.column.columnDef.header}
+                            </Subheader>
+
+                            {getSortIcon(header.column.getIsSorted())}
+
+                            {!header.column.getIsSorted() &&
+                              header.column.getCanSort() &&
+                              getSortIcon(
+                                header.column.getNextSortingOrder(),
+                                true,
+                              )}
+
+                            {header.column.getSortIndex() !== -1 &&
+                              table.getState().sorting.length > 1 && (
+                                <Subheader tall>
+                                  {header.column.getSortIndex() + 1}
+                                </Subheader>
+                              )}
+
+                            {!header.column.columnDef.meta?.locked && (
+                              <div
+                                onDoubleClick={(e) => {
+                                  e.stopPropagation();
+                                  header.column.resetSize();
+                                }}
+                                onMouseDown={(e) => {
+                                  e.stopPropagation();
+                                  header.getResizeHandler()(e);
+                                }}
+                                onTouchStart={(e) => {
+                                  e.stopPropagation();
+                                  header.getResizeHandler()(e);
+                                }}
+                                className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                              />
+                            )}
+                          </DraggableCellHeader>
+                        );
+                      }
+                      return (
+                        <React.Fragment key={header.id}>
+                          {header.column.columnDef.meta?.checkbox ? (
+                            <DataGridCell
+                              type="header"
+                              component="checkbox"
+                              locked={header.column.columnDef.meta?.locked}
+                            >
+                              <Checkbox
+                                checked={allSelectedAcrossPages}
+                                indeterminate={someSelectedAcrossPages}
+                                onChange={toggleSelectAllAcrossPages}
+                              />
+                            </DataGridCell>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+
+                    {virtualPaddingRight ? (
+                      //fake empty column to the right for virtualization scroll padding
+                      <th
+                        style={{ display: "flex", width: virtualPaddingRight }}
+                      />
+                    ) : null}
+                    {enableColumnSelector && (
+                      <ColumnSelectorHeaderCell
+                        table={table}
+                        toggleColumnVisibility={toggleColumnVisibility}
+                        resetColumnVisibility={resetColumnVisibility}
+                      />
+                    )}
+                  </tr>
+                ))}
+              </thead>
+
+              <TableBody
+                columnVirtualizer={columnVirtualizer}
+                table={table}
+                tableContainerRef={containerRef}
+                virtualPaddingLeft={virtualPaddingLeft}
+                virtualPaddingRight={virtualPaddingRight}
+                pagination={pagination}
+                isLoadingMore={isLoadingMore}
+                hasMore={hasMore}
+                showFilterRow={showFilterRow}
+                enableColumnSelector={enableColumnSelector}
+              />
+            </table>
+          </div>
+
+          {table.getRowModel().rows.length === 0 && (
+            <div
+              className={clsx(
+                NO_RESULTS_HEIGHT,
+                "flex flex-col items-center justify-center",
+                componentGap,
+                componentPadding,
+              )}
+            >
+              <Subheader color="text-secondary-normal">No Results</Subheader>
+              <Paragraph color="text-secondary-normal">
+                To view results, enter or update your search criteria.
+              </Paragraph>
+            </div>
+          )}
+
+          {!hideStatusBar && (
+            <div className="p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]">
+              {pagination && (
+                <div className="flex justify-between items-center">
+                  <div className="flex items-center gap-1 w-min">
+                    <Select
+                      wrapperClassName="!w-20"
+                      value={pagination.pageSize.toString()}
+                      onChange={(e) =>
+                        pagination.onPageSizeChange?.(Number(e.target.value))
+                      }
+                      renderMenu={(props) => (
+                        <Menu {...props} onClick={() => props.setShow(false)}>
+                          {PAGE_SIZE_OPTIONS.map((option) => (
+                            <MenuOption
+                              key={option}
+                              selected={pagination.pageSize === option}
+                              onClick={() =>
+                                pagination.onPageSizeChange?.(option)
+                              }
+                            >
+                              {option}
+                            </MenuOption>
+                          ))}
+                        </Menu>
+                      )}
+                    />
+                    <Label className="whitespace-nowrap">Per Page</Label>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      iconOnly
+                      leftIcon={<Icon name="chevron_left" />}
+                      onClick={() =>
+                        pagination.onPageChange(pagination.pageIndex - 1)
+                      }
+                      variant="tertiary"
+                      disabled={pagination.pageIndex === 0}
+                    />
+                    <Paragraph>
+                      {pagination.pageIndex * pagination.pageSize + 1} -{" "}
+                      {Math.min(
+                        (pagination.pageIndex + 1) * pagination.pageSize,
+                        pagination.total,
+                      )}{" "}
+                      of {pagination.total}
+                    </Paragraph>
+                    <Button
+                      iconOnly
+                      leftIcon={<Icon name="chevron_right" />}
+                      onClick={() =>
+                        pagination.onPageChange(pagination.pageIndex + 1)
+                      }
+                      variant="tertiary"
+                      disabled={
+                        (pagination.pageIndex + 1) * pagination.pageSize >=
+                        pagination.total
+                      }
+                    />
+                  </div>
+                </div>
+              )}
+
+              {status && <Paragraph>{status}</Paragraph>}
+            </div>
+          )}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+DataGrid.displayName = "DataGrid";
+
+interface TableBodyProps<TData extends RowData> {
+  columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  table: Table<TData>;
+  tableContainerRef: React.RefObject<HTMLDivElement | null>;
+  virtualPaddingLeft: number | undefined;
+  virtualPaddingRight: number | undefined;
+  pagination: DataGridPagination | undefined;
+  isLoadingMore: boolean;
+  hasMore: boolean;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+}
+
+// Helpers
+
+function TableBody<T>({
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  pagination,
+  isLoadingMore,
+  hasMore,
+  showFilterRow,
+  enableColumnSelector = false,
+}: TableBodyProps<T>) {
+  const { rows } = table.getRowModel();
+
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: rows.length,
+    estimateSize: () => 40,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 8,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  return (
+    <tbody
+      style={{
+        display: "grid",
+        height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`, // tells scrollbar how big the table is
+        position: "relative", // needed for absolute positioning of rows
+      }}
+    >
+      {showFilterRow && (
+        <tr
+          style={{
+            display: "flex",
+            position: "sticky",
+            top: "40px",
+            width: "100%",
+            height: "40px",
+            zIndex: 10,
+          }}
+          className="even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
+        >
+          {table.getHeaderGroups().flatMap((x) =>
+            x.headers.map((header) => (
+              <DragAlongCell
+                noPadding
+                key={header.id}
+                cell={header}
+                width={header.column.columnDef.meta?.headerWidth}
+              >
+                {header.column.getCanFilter() &&
+                  (header.column.columnDef.meta?.filterRowCell?.({
+                    header,
+                    table,
+                  }) ?? (
+                    <Search
+                      removeRoundness
+                      onChange={(e) =>
+                        header.column.setFilterValue(e.target.value)
+                      }
+                      value={(header.column.getFilterValue() ?? "") as string}
+                      placeholder=""
+                      removeSearchIcon
+                    />
+                  ))}
+              </DragAlongCell>
+            )),
+          )}
+        </tr>
+      )}
+
+      {virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index] as Row<T>;
+
+        return (
+          <TableBodyRow
+            columnVirtualizer={columnVirtualizer}
+            key={row.id}
+            row={row}
+            rowVirtualizer={rowVirtualizer}
+            virtualPaddingLeft={virtualPaddingLeft}
+            virtualPaddingRight={virtualPaddingRight}
+            virtualRow={virtualRow}
+            showFilterRow={showFilterRow}
+            enableColumnSelector={enableColumnSelector}
+          />
+        );
+      })}
+
+      {!pagination && isLoadingMore && hasMore && (
+        <tr
+          style={{
+            display: "flex",
+            position: "absolute",
+            width: "100%",
+            transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`,
+          }}
+          className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+        >
+          {table.getAllLeafColumns().map((column) => (
+            <LoadingCell key={column.id} column={column.columnDef} />
+          ))}
+        </tr>
+      )}
+    </tbody>
+  );
+}
+
+interface TableBodyRowProps<T> {
+  columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  row: Row<T>;
+  rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+  virtualPaddingLeft: number | undefined;
+  virtualPaddingRight: number | undefined;
+  virtualRow: VirtualItem;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+}
+
+function TableBodyRow<T>({
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow,
+  enableColumnSelector = false,
+}: TableBodyRowProps<T>) {
+  const visibleCells = row.getVisibleCells();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+
+  const isError =
+    typeof row.original === "object" &&
+    row.original !== null &&
+    "rowState" in row.original &&
+    row.original.rowState === "error";
+
+  return (
+    <tr
+      key={row.id}
+      className={clsx(
+        "transition-colors hover:bg-background-action-secondary-hover",
+        row.getIsSelected() && "!bg-background-action-secondary-hover",
+        isError && "!bg-background-action-critical-secondary-hover",
+        showFilterRow
+          ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
+          : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
+      )}
+      style={{
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
+        width: "100%",
+      }}
+    >
+      {virtualPaddingLeft ? (
+        // fake empty column to the left for virtualization scroll padding
+        <td style={{ display: "flex", width: virtualPaddingLeft }} />
+      ) : null}
+
+      {virtualColumns.map((virtualColumn) => {
+        const cell = visibleCells[virtualColumn.index];
+        return cell.column.columnDef.meta?.useCustomRenderer ? (
+          <React.Fragment key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </React.Fragment>
+        ) : (
+          <DragAlongCell key={cell.id} cell={cell}>
+            <Tooltip
+              showOnTruncation
+              message={cell.getValue() as string}
+              position="bottom"
+            >
+              <Paragraph addOverflow tall>
+                {cell.getValue() as ReactNode | string}
+              </Paragraph>
+            </Tooltip>
+          </DragAlongCell>
+        );
+      })}
+
+      {virtualPaddingRight ? (
+        // fake empty column to the right for virtualization scroll padding
+        <td style={{ display: "flex", width: virtualPaddingRight }} />
+      ) : null}
+
+      {enableColumnSelector && <td></td>}
+    </tr>
+  );
+}
+
+const LoadingCell = <T extends RowData>({
+  column,
+}: {
+  column: ColumnDef<T>;
+}) => {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return (
+      <DataGridCell key={key}>
+        <Checkbox disabled />
+      </DataGridCell>
+    );
+  }
+  if (column.cell === "input") {
+    return (
+      <DataGridCell key={key} component="input">
+        <Input
+          align="left"
+          disabled
+          wrapperClassName="!rounded-none !border-0"
+        />
+      </DataGridCell>
+    );
+  }
+  return (
+    <DataGridCell key={key}>
+      <div className="bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6"></div>
+    </DataGridCell>
+  );
+};
+
+function ColumnSelectorHeaderCell<T>({
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility,
+}: {
+  table: Table<T>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+  resetColumnVisibility: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [show, setShow] = useState(false);
+
+  return (
+    <DataGridCell
+      width="48"
+      type="header"
+      color="text-secondary-normal"
+      ref={ref}
+    >
+      <Button
+        onClick={() => setShow((prev) => !prev)}
+        variant="navigation"
+        iconOnly
+        leftIcon={<Icon name="tune" />}
+      ></Button>
+      <Menu
+        positionTo={ref}
+        position="bottom-right"
+        show={show}
+        setShow={setShow}
+      >
+        <Button
+          variant="tertiary"
+          onClick={() => {
+            resetColumnVisibility();
+            setShow(false);
+          }}
+        >
+          Reset to default
+        </Button>
+        {table.getAllColumns().map((column) => (
+          <ColumnSelectorMenuOption
+            key={column.id}
+            column={column}
+            toggleColumnVisibility={toggleColumnVisibility}
+          />
+        ))}
+      </Menu>
+    </DataGridCell>
+  );
+}
+
+function ColumnSelectorMenuOption<T>({
+  column,
+  toggleColumnVisibility,
+}: {
+  column: Column<T, unknown>;
+  toggleColumnVisibility: (id: string, isVisible: boolean) => void;
+}) {
+  const [isVisible, setIsVisible] = useState(column.getIsVisible());
+  const label =
+    typeof column.columnDef.header === "string"
+      ? column.columnDef.header
+      : null;
+  return (
+    <MenuOption selected={isVisible} defaultChecked={isVisible}>
+      <Checkbox
+        label={label ?? "Unknown"}
+        checked={isVisible}
+        onChange={(e) => {
+          setIsVisible(e.target.checked);
+          toggleColumnVisibility(column.id, e.target.checked);
+        }}
+      />
+    </MenuOption>
+  );
+}
+
+function getSortIcon(sort: SortDirection | false, nextSort = false) {
+  const iconClassName = clsx(
+    "text-icon-on-action-primary-normal",
+    nextSort && "hidden group-hover:block",
+  );
+  if (sort === "asc")
+    return <Icon size={16} className={iconClassName} name="arrow_upward" />;
+  if (sort === "desc")
+    return <Icon size={16} className={iconClassName} name="arrow_downward" />;
+  return null;
+}
+
+// Extend TanStack ColumnMeta
+declare module "@tanstack/react-table" {
+  interface TableOptions<TData extends RowData>
+    extends PartialKeys<
+      TableOptionsResolved<TData>,
+      "state" | "onStateChange" | "renderFallbackValue"
+    > {
+    filterFns?: FilterFns;
+  }
+  interface FilterFns {
+    endsWith?: FilterFn<RowData>;
+    startsWith?: FilterFn<RowData>;
+  }
+
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterVariant?: "text" | "select" | "range";
+    className?: string;
+    sticky?: boolean;
+    useCustomRenderer?: boolean;
+    locked?: boolean;
+    checkbox?: boolean;
+    headerWidth?: string;
+    visible?: boolean;
+    filterRowCell?: ({
+      header,
+      table,
+    }: {
+      header: Header<TData, TValue>;
+      table: Table<TData>;
+    }) => ReactNode;
+  }
+}
+export type { ColumnDef };