@dmsi/wedgekit-react 0.0.82 → 0.0.84

package/dist/components/{DataGrid.js → index.js}

@@ -1,7 +1,3 @@
-"use client";
-import {
-  useInfiniteScroll
-} from "../chunk-AWQSSKCK.js";
 import {
   Tooltip
 } from "../chunk-QZGUMB7T.js";
@@ -16,15 +12,17 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-ATOEGP3V.js";
+} from "../chunk-CKSDMI2Q.js";
 import {
   Menu
-} from "../chunk-6R2HCLEL.js";
-import "../chunk-B6PDZCU7.js";
+} from "../chunk-37TJJQL3.js";
+import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "../chunk-FOC6LTSX.js";
-import "../chunk-SWA5WVQO.js";
+} from "../chunk-UPBBOZM3.js";
+import {
+  useInfiniteScroll
+} from "../chunk-WNQ53SVY.js";
 import {
   Search
 } from "../chunk-LP6AZST2.js";
@@ -58,18 +56,15 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 
-// src/components/DataGrid.tsx
-import React, { useCallback, useId, useRef, useState } from "react";
+// src/components/DataGrid/index.tsx
+import React3, { useCallback, useId, useState as useState3 } from "react";
 import {
-  flexRender,
+  flexRender as flexRender3,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import {
-  useVirtualizer
-} from "@tanstack/react-virtual";
 import {
   closestCenter,
   DndContext,
@@ -85,914 +80,984 @@ import {
   SortableContext
 } from "@dnd-kit/sortable";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import clsx5 from "clsx";
+
+// src/components/DataGrid/PinnedColumns.tsx
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+import clsx4 from "clsx";
+
+// src/components/DataGrid/utils.tsx
 import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
-var NO_RESULTS_HEIGHT = "h-[120px]";
-function adaptTableStateSetter(setter) {
-  return (valueOrFn) => {
-    setter(
-      (prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
-    );
-  };
+import { jsx } from "react/jsx-runtime";
+function getSortIcon(sort, nextSort = false) {
+  const iconClassName = clsx(
+    "text-icon-on-action-primary-normal",
+    nextSort && "hidden group-hover:block"
+  );
+  if (sort === "asc")
+    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
+  if (sort === "desc")
+    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
+  return null;
 }
-function DataGrid({
+
+// src/components/DataGrid/PinnedColumns.tsx
+import React2 from "react";
+
+// src/components/DataGrid/TableBody/index.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import clsx3 from "clsx";
+
+// src/components/DataGrid/TableBody/TableBodyRow.tsx
+import clsx2 from "clsx";
+import { flexRender } from "@tanstack/react-table";
+import React from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TableBodyRow({
   id,
-  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,
-  predeterminedLeftPins = [],
-  predeterminedRightPins = []
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection
 }) {
-  var _a, _b, _c, _d, _e;
-  const [columnOrder, setColumnOrder] = useState(
-    () => columns.map((c) => c.id)
-  );
-  const [localSorting, setLocalSorting] = useState([]);
-  const [localColumnFilters, setLocalColumnFilters] = useState([]);
-  const [localRowSelection, setLocalRowSelection] = useState({});
-  const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
-  const setSortingState = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(
-      externalSorting != null ? externalSorting : []
-    ) : updaterOrValue;
-    (onSortingChange != null ? onSortingChange : setLocalSorting)(value);
-  } : setLocalSorting;
-  const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
-  const setColumnFilterState = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
-    (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
-  } : setLocalColumnFilters;
-  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
-  const setRowSelection = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
-    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
-  } : setLocalRowSelection;
-  const dndId = useId();
-  const containerRef = React.useRef(null);
-  const [columnVisibility, setColumnVisibility] = useState(() => {
-    const initialVisibility = {};
-    columns.forEach((column) => {
-      var _a2, _b2;
-      if (column.id) {
-        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-      }
-    });
-    return initialVisibility;
-  });
-  const toggleColumnVisibility = useCallback(
-    (columnId, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
+  var _a;
+  let visibleCells;
+  if (locked) {
+    visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
+  } else {
+    visibleCells = row.getCenterVisibleCells();
+  }
+  const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
+  const columns = locked ? visibleCells : virtualColumns;
+  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: clsx2(
+        "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%"
+      },
+      children: [
+        !locked && virtualPaddingLeft ? (
+          // fake empty column to the left for virtualization scroll padding
+          /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
+        ) : null,
+        columns.map((column) => {
+          var _a2, _b;
+          const cell = locked ? column : visibleCells[column.index];
+          if (!cell) {
+            return;
+          }
+          const cellValue = cell.getValue();
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ jsx2(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx2(
+            CellElement,
+            {
+              id: id ? `${id}-cell-${cell.id}` : void 0,
+              cell,
+              className: clsx2({
+                "justify-end": typeof cellValue === "number"
+              }),
+              width: (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth,
+              children: /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  showOnTruncation: true,
+                  message: cellValue,
+                  position: "bottom",
+                  children: /* @__PURE__ */ jsx2(Paragraph, { addOverflow: true, tall: true, children: cellValue })
+                }
+              )
+            },
+            cell.id
+          );
+        }),
+        !locked && virtualPaddingRight ? (
+          // fake empty column to the right for virtualization scroll padding
+          /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingRight } })
+        ) : null,
+        enableColumnSelector && !locked && /* @__PURE__ */ jsx2("td", { className: "p-2", style: { width: "48.8px" } })
+      ]
     },
-    [setColumnVisibility]
+    row.id
   );
-  const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(() => {
-      const initialVisibility = {};
-      columns.forEach((column) => {
-        var _a2, _b2;
-        if (column.id) {
-          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-        }
-      });
-      return initialVisibility;
-    });
-  }, [columns]);
-  const table = useReactTable({
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    columnResizeMode: "onChange",
-    getRowId: (row, index) => {
-      var _a2;
-      return String((_a2 = row.id) != null ? _a2 : index + 1);
-    },
-    state: {
-      columnOrder,
-      sorting: sortingState,
-      columnFilters: columnFilterState,
-      rowSelection,
-      columnVisibility
-    },
-    initialState: {
-      columnPinning: {
-        left: predeterminedLeftPins,
-        right: predeterminedRightPins
-      }
-    },
-    enableColumnPinning: (predeterminedLeftPins == null ? void 0 : predeterminedLeftPins.length) > 0 || predeterminedRightPins.length > 0,
-    onColumnOrderChange: setColumnOrder,
-    onSortingChange: adaptTableStateSetter(setSortingState),
-    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
-    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
-    filterFns: {
-      startsWith: (row, columnId, filterValue) => {
-        const cellValue = row == null ? void 0 : row.getValue(columnId);
-        if (!cellValue || !filterValue) {
-          return true;
-        }
-        return String(cellValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
+}
+
+// src/components/DataGrid/TableBody/LoadingCell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function LoadingCell({
+  id,
+  column
+}) {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx3(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
+  }
+  if (column.cell === "input") {
+    return /* @__PURE__ */ jsx3(
+      DataGridCell,
+      {
+        id: id ? `${id}-${key}` : void 0,
+        component: "input",
+        children: /* @__PURE__ */ jsx3(
+          Input,
+          {
+            id: id ? `${id}-${key}-input` : void 0,
+            align: "left",
+            disabled: true,
+            wrapperClassName: "!rounded-none !border-0"
+          }
+        )
       },
-      endsWith: (row, columnId, filterValue) => {
-        const cellValue = row == null ? void 0 : row.getValue(columnId);
-        if (!cellValue || !filterValue) {
-          return true;
-        }
-        return String(cellValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
-      }
-    }
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx3(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx3("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
+}
+
+// src/components/DataGrid/TableBody/index.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TableBody({
+  id,
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  pagination,
+  isLoadingMore,
+  hasMore,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection
+}) {
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    estimateSize: () => 40,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 8
   });
-  const allRowIds = pagination ? (_a = filteredSortedData == null ? void 0 : filteredSortedData.map((row) => String(row.id))) != null ? _a : [] : Array.from(
-    { length: totalRowCount != null ? totalRowCount : data.length },
-    (_, i) => String(i + 1)
-  );
-  const allSelectedAcrossPages = allRowIds.every(
-    (rowId) => rowSelection[rowId]
-  );
-  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
-  const toggleSelectAllAcrossPages = () => {
-    setRowSelection((prev) => {
-      const isSelecting = !allSelectedAcrossPages;
-      if (isSelecting) {
-        const newSelection = {};
-        for (const rowId of allRowIds) {
-          newSelection[rowId] = true;
-        }
-        return __spreadValues(__spreadValues({}, prev), newSelection);
-      } else {
-        const updatedSelection = __spreadValues({}, prev);
-        for (const rowId of allRowIds) {
-          delete updatedSelection[rowId];
-        }
-        return updatedSelection;
-      }
-    });
-  };
-  useInfiniteScroll({
-    containerRef,
-    onLoadMore: onLoadMore != null ? onLoadMore : () => {
-    },
-    isLoading: isLoadingMore,
-    enabled: !pagination
-  });
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    if (active && over && active.id !== over.id) {
-      setColumnOrder((prev) => {
-        const oldIndex = prev.indexOf(active.id);
-        const newIndex = prev.indexOf(over.id);
-        return arrayMove(prev, oldIndex, newIndex);
-      });
-    }
-  };
-  const sensors = useSensors(
-    useSensor(MouseSensor),
-    useSensor(TouchSensor),
-    useSensor(KeyboardSensor)
-  );
-  const visibleColumns = table.getVisibleLeafColumns();
-  const columnVirtualizer = useVirtualizer({
-    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;
-  let virtualPaddingRight;
-  if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
-    virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
-    virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+  let headerGroups;
+  if (pinDirection === "left") {
+    headerGroups = table.getLeftHeaderGroups();
+  } else if (pinDirection === "right") {
+    headerGroups = table.getRightHeaderGroups();
+  } else {
+    headerGroups = table.getCenterHeaderGroups();
   }
-  const empty = table.getRowModel().rows.length === 0;
-  return /* @__PURE__ */ jsx(
-    DndContext,
+  return /* @__PURE__ */ jsxs2(
+    "tbody",
     {
-      id: dndId,
-      collisionDetection: closestCenter,
-      modifiers: [restrictToHorizontalAxis],
-      onDragEnd: handleDragEnd,
-      sensors,
-      children: /* @__PURE__ */ jsx(
-        SortableContext,
-        {
-          items: columnOrder,
-          strategy: horizontalListSortingStrategy,
-          children: /* @__PURE__ */ jsxs(
-            "div",
+      className: clsx3(locked ? "shadow-16" : ""),
+      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
+      },
+      children: [
+        showFilterRow && /* @__PURE__ */ jsx4(
+          "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",
+            children: headerGroups.flatMap(
+              (x) => x.headers.map((header) => {
+                var _a, _b, _c, _d, _e;
+                return /* @__PURE__ */ jsx4(
+                  CellElement,
+                  {
+                    id: id ? `${id}-filter-cell-${header.id}` : void 0,
+                    noPadding: true,
+                    cell: header,
+                    width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
+                    children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
+                      header,
+                      table
+                    })) != null ? _e : /* @__PURE__ */ jsx4(
+                      Search,
+                      {
+                        id: id ? `${id}-filter-search-${header.id}` : void 0,
+                        removeRoundness: true,
+                        onChange: (e) => header.column.setFilterValue(e.target.value),
+                        value: (_d = header.column.getFilterValue()) != null ? _d : "",
+                        placeholder: "",
+                        removeSearchIcon: true
+                      }
+                    ))
+                  },
+                  header.id
+                );
+              })
+            )
+          }
+        ),
+        virtualRows.map((virtualRow) => {
+          const row = rows[virtualRow.index];
+          return /* @__PURE__ */ jsx4(
+            TableBodyRow,
             {
               id,
-              className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(
-                      "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
-                      empty ? "overflow-y-hidden" : "h-full"
+              columnVirtualizer,
+              row,
+              rowVirtualizer,
+              virtualPaddingLeft,
+              virtualPaddingRight,
+              virtualRow,
+              showFilterRow,
+              enableColumnSelector,
+              locked,
+              pinDirection
+            },
+            row.id
+          );
+        }),
+        !pagination && isLoadingMore && hasMore && /* @__PURE__ */ jsx4(
+          "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",
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx4(LoadingCell, { id, column: column.columnDef }, column.id))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataGrid/PinnedColumns.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PinnedColumns(_a) {
+  var _b = _a, {
+    pinDirection = "left",
+    table,
+    centerHeader,
+    allSelectedAcrossPages,
+    someSelectedAcrossPages,
+    toggleSelectAllAcrossPages
+  } = _b, props = __objRest(_b, [
+    "pinDirection",
+    "table",
+    "centerHeader",
+    "allSelectedAcrossPages",
+    "someSelectedAcrossPages",
+    "toggleSelectAllAcrossPages"
+  ]);
+  var _a2;
+  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ jsxs3(
+    "table",
+    {
+      className: clsx4(
+        "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
+        pinDirection === "left" ? "left-0" : "right-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsx5("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+          return /* @__PURE__ */ jsx5("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
+            var _a3, _b2, _c;
+            if (!header) {
+              return;
+            }
+            if (typeof header.column.columnDef.header === "string") {
+              const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
+              return /* @__PURE__ */ jsxs3(
+                DataCellHeader,
+                {
+                  locked: true,
+                  header,
+                  center: centerHeader,
+                  width: customHeaderWidth,
+                  className: clsx4(
+                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                    "group"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.columnDef.header }),
+                    getSortIcon(header.column.getIsSorted()),
+                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                      header.column.getNextSortingOrder(),
+                      true
                     ),
-                    ref: containerRef,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        PinnedColumns,
-                        {
-                          pinDirection: "left",
-                          table,
-                          tableContainerRef: containerRef,
-                          pagination,
-                          isLoadingMore,
-                          hasMore,
-                          showFilterRow,
-                          enableColumnSelector
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
-                          virtualPaddingLeft ? (
-                            // fake empty column to the left for virtualization scroll padding
-                            /* @__PURE__ */ jsx(
-                              "th",
-                              {
-                                style: { display: "flex", width: virtualPaddingLeft }
-                              }
-                            )
-                          ) : null,
-                          virtualColumns.map((virtualColumn) => {
-                            var _a2, _b2, _c2, _d2;
-                            const header = headerGroup.headers[virtualColumn.index];
-                            if (!header) {
-                              return;
-                            }
-                            if (typeof header.column.columnDef.header === "string") {
-                              const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                              return /* @__PURE__ */ jsxs(
-                                DraggableCellHeader,
-                                {
-                                  id: id ? `${id}-header-${header.id}` : void 0,
-                                  header,
-                                  locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
-                                  center: centerHeader,
-                                  width: customHeaderWidth,
-                                  className: clsx(
-                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                    "group"
-                                  ),
-                                  children: [
-                                    /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.columnDef.header }),
-                                    getSortIcon(header.column.getIsSorted()),
-                                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                                      header.column.getNextSortingOrder(),
-                                      true
-                                    ),
-                                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                    /* @__PURE__ */ jsx(
-                                      "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"
-                                      }
-                                    )
-                                  ]
-                                },
-                                header.id
-                              );
-                            }
-                            return /* @__PURE__ */ jsx(React.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ jsx(
-                              DataGridCell,
-                              {
-                                id: id ? `${id}-header-${header.id}` : void 0,
-                                type: "header",
-                                component: "checkbox",
-                                locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
-                                children: /* @__PURE__ */ jsx(
-                                  Checkbox,
-                                  {
-                                    id: id ? `${id}-select-all-checkbox` : void 0,
-                                    checked: allSelectedAcrossPages,
-                                    indeterminate: someSelectedAcrossPages,
-                                    onChange: toggleSelectAllAcrossPages
-                                  }
-                                )
-                              }
-                            ) : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            ) }, header.id);
-                          }),
-                          virtualPaddingRight ? (
-                            //fake empty column to the right for virtualization scroll padding
-                            /* @__PURE__ */ jsx(
-                              "th",
-                              {
-                                style: { display: "flex", width: virtualPaddingRight }
-                              }
-                            )
-                          ) : null,
-                          enableColumnSelector && /* @__PURE__ */ jsx(
-                            ColumnSelectorHeaderCell,
-                            {
-                              id: id ? `${id}-column-selector` : void 0,
-                              table,
-                              toggleColumnVisibility,
-                              resetColumnVisibility
-                            }
-                          )
-                        ] }, headerGroup.id)) }),
-                        /* @__PURE__ */ jsx(
-                          TableBody,
-                          {
-                            id,
-                            columnVirtualizer,
-                            table,
-                            tableContainerRef: containerRef,
-                            virtualPaddingLeft,
-                            virtualPaddingRight,
-                            pagination,
-                            isLoadingMore,
-                            hasMore,
-                            showFilterRow,
-                            enableColumnSelector
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        PinnedColumns,
-                        {
-                          pinDirection: "right",
-                          table,
-                          tableContainerRef: containerRef,
-                          pagination,
-                          isLoadingMore,
-                          hasMore,
-                          showFilterRow,
-                          enableColumnSelector
-                        }
-                      )
-                    ]
-                  }
-                ),
-                empty && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(
-                      NO_RESULTS_HEIGHT,
-                      "flex flex-col items-center justify-center",
-                      componentGap,
-                      componentPadding
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(Subheader, { color: "text-secondary-normal", children: "No Results" }),
-                      /* @__PURE__ */ jsx(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
-                    ]
-                  }
-                ),
-                !hideStatusBar && /* @__PURE__ */ jsxs("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
-                  pagination && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-min", children: [
-                      /* @__PURE__ */ jsx(
-                        Select,
-                        {
-                          id: id ? `${id}-pagesize-select` : void 0,
-                          wrapperClassName: "!w-20",
-                          value: pagination.pageSize.toString(),
-                          onChange: (e) => {
-                            var _a2;
-                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
-                          },
-                          renderMenu: (props) => /* @__PURE__ */ jsx(
-                            Menu,
-                            __spreadProps(__spreadValues({}, props), {
-                              id: id ? `${id}-pagesize-menu` : void 0,
-                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-                                MenuOption,
-                                {
-                                  id: id ? `${id}-pagesize-option-${option}` : void 0,
-                                  selected: pagination.pageSize === option,
-                                  onClick: () => {
-                                    var _a2;
-                                    return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
-                                  },
-                                  children: option
-                                },
-                                option
-                              ))
-                            })
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Label, { children: "Per Page" })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          id: id ? `${id}-prev-page-button` : void 0,
-                          iconOnly: true,
-                          leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" }),
-                          onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
-                          variant: "tertiary",
-                          disabled: pagination.pageIndex === 0
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(Paragraph, { children: [
-                        pagination.pageIndex * pagination.pageSize + 1,
-                        " -",
-                        " ",
-                        Math.min(
-                          (pagination.pageIndex + 1) * pagination.pageSize,
-                          pagination.total
-                        ),
-                        " ",
-                        "of ",
-                        pagination.total
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          id: id ? `${id}-next-page-button` : void 0,
-                          iconOnly: true,
-                          leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" }),
-                          onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
-                          variant: "tertiary",
-                          disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
-                        }
-                      )
-                    ] })
-                  ] }),
-                  status && /* @__PURE__ */ jsx(Paragraph, { children: status })
-                ] })
-              ]
+                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx5(
+                      "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"
+                      }
+                    )
+                  ]
+                },
+                header.id
+              );
             }
-          )
-        }
-      )
+            return /* @__PURE__ */ jsx5(React2.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx5(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx5(
+              Checkbox,
+              {
+                checked: allSelectedAcrossPages,
+                indeterminate: someSelectedAcrossPages,
+                onChange: toggleSelectAllAcrossPages
+              }
+            ) }) : flexRender2(
+              header.column.columnDef.header,
+              header.getContext()
+            ) }, header.id);
+          }) }, headerGroup.id);
+        }) }),
+        /* @__PURE__ */ jsx5(
+          TableBody,
+          __spreadProps(__spreadValues({}, props), {
+            table,
+            locked: true,
+            pinDirection
+          })
+        )
+      ]
     }
   );
 }
-DataGrid.displayName = "DataGrid";
-function TableBody({
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
+import { useRef, useState as useState2 } from "react";
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
+import { useState } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ColumnSelectorMenuOption({
   id,
-  columnVirtualizer,
-  table,
-  tableContainerRef,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  pagination,
-  isLoadingMore,
-  hasMore,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection
+  column,
+  toggleColumnVisibility
 }) {
-  const { rows } = table.getRowModel();
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    estimateSize: () => 40,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 8
-  });
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-  let headerGroups;
-  if (pinDirection === "left") {
-    headerGroups = table.getLeftHeaderGroups();
-  } else if (pinDirection === "right") {
-    headerGroups = table.getRightHeaderGroups();
-  } else {
-    headerGroups = table.getCenterHeaderGroups();
-  }
-  return /* @__PURE__ */ jsxs(
-    "tbody",
+  const [isVisible, setIsVisible] = useState(column.getIsVisible());
+  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
+  return /* @__PURE__ */ jsx6(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx6(
+    Checkbox,
     {
-      className: clsx(locked ? "shadow-16" : ""),
-      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
-      },
-      children: [
-        showFilterRow && /* @__PURE__ */ jsx(
-          "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",
-            children: headerGroups.flatMap(
-              (x) => x.headers.map((header) => {
-                var _a, _b, _c, _d, _e;
-                return /* @__PURE__ */ jsx(
-                  CellElement,
-                  {
-                    id: id ? `${id}-filter-cell-${header.id}` : void 0,
-                    noPadding: true,
-                    cell: header,
-                    width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
-                    children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
-                      header,
-                      table
-                    })) != null ? _e : /* @__PURE__ */ jsx(
-                      Search,
-                      {
-                        id: id ? `${id}-filter-search-${header.id}` : void 0,
-                        removeRoundness: true,
-                        onChange: (e) => header.column.setFilterValue(e.target.value),
-                        value: (_d = header.column.getFilterValue()) != null ? _d : "",
-                        placeholder: "",
-                        removeSearchIcon: true
-                      }
-                    ))
-                  },
-                  header.id
-                );
-              })
-            )
+      id: id ? `${id}-checkbox` : void 0,
+      label: label != null ? label : "Unknown",
+      checked: isVisible,
+      onChange: (e) => {
+        setIsVisible(e.target.checked);
+        toggleColumnVisibility(column.id, e.target.checked);
+      }
+    }
+  ) });
+}
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ColumnSelectorHeaderCell({
+  id,
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility
+}) {
+  const ref = useRef(null);
+  const [show, setShow] = useState2(false);
+  return /* @__PURE__ */ jsxs4(
+    DataGridCell,
+    {
+      id,
+      width: "48",
+      type: "header",
+      color: "text-secondary-normal",
+      ref,
+      children: [
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            id: id ? `${id}-button` : void 0,
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            leftIcon: /* @__PURE__ */ jsx7(Icon, { name: "tune" })
           }
         ),
-        virtualRows.map((virtualRow) => {
-          const row = rows[virtualRow.index];
-          return /* @__PURE__ */ jsx(
-            TableBodyRow,
-            {
-              id,
-              columnVirtualizer,
-              row,
-              rowVirtualizer,
-              virtualPaddingLeft,
-              virtualPaddingRight,
-              virtualRow,
-              showFilterRow,
-              enableColumnSelector,
-              locked,
-              pinDirection
-            },
-            row.id
-          );
-        }),
-        !pagination && isLoadingMore && hasMore && /* @__PURE__ */ jsx(
-          "tr",
+        /* @__PURE__ */ jsxs4(
+          Menu,
           {
-            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",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(LoadingCell, { id, column: column.columnDef }, column.id))
+            id: id ? `${id}-menu` : void 0,
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            children: [
+              /* @__PURE__ */ jsx7(
+                Button,
+                {
+                  id: id ? `${id}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              table.getAllColumns().filter((x) => {
+                var _a;
+                return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
+              }).map((column) => /* @__PURE__ */ jsx7(
+                ColumnSelectorMenuOption,
+                {
+                  id: id ? `${id}-option-${column.id}` : void 0,
+                  column,
+                  toggleColumnVisibility
+                },
+                column.id
+              ))
+            ]
           }
         )
       ]
     }
   );
 }
-function TableBodyRow({
+
+// src/components/DataGrid/index.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
+var NO_RESULTS_HEIGHT = "h-[120px]";
+function DataGrid({
   id,
-  columnVirtualizer,
-  row,
-  // rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection
+  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,
+  predeterminedLeftPins = [],
+  predeterminedRightPins = [],
+  useMenuDefaultMinWidth
 }) {
-  var _a;
-  let visibleCells;
-  if (locked) {
-    visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
-  } else {
-    visibleCells = row.getCenterVisibleCells();
-  }
-  const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
-  const columns = locked ? visibleCells : virtualColumns;
-  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-  return /* @__PURE__ */ jsxs(
-    "tr",
-    {
-      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%"
-      },
-      children: [
-        !locked && virtualPaddingLeft ? (
-          // fake empty column to the left for virtualization scroll padding
-          /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingLeft } })
-        ) : null,
-        columns.map((column) => {
-          var _a2;
-          const cell = locked ? column : visibleCells[column.index];
-          if (!cell) {
-            return;
-          }
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ jsx(React.Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ jsx(
-            CellElement,
-            {
-              id: id ? `${id}-cell-${cell.id}` : void 0,
-              cell,
-              children: /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
-                  showOnTruncation: true,
-                  message: cell.getValue(),
-                  position: "bottom",
-                  children: /* @__PURE__ */ jsx(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
-                }
-              )
-            },
-            cell.id
-          );
-        }),
-        !locked && virtualPaddingRight ? (
-          // fake empty column to the right for virtualization scroll padding
-          /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
-        ) : null,
-        enableColumnSelector && !locked && /* @__PURE__ */ jsx("td", { className: "p-2", style: { width: "48.8px" } })
-      ]
+  var _a, _b, _c, _d, _e;
+  const [columnOrder, setColumnOrder] = useState3(
+    () => columns.map((c) => c.id)
+  );
+  const [localSorting, setLocalSorting] = useState3([]);
+  const [localColumnFilters, setLocalColumnFilters] = useState3([]);
+  const [localRowSelection, setLocalRowSelection] = useState3({});
+  const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
+  const setSortingState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(
+      externalSorting != null ? externalSorting : []
+    ) : updaterOrValue;
+    (onSortingChange != null ? onSortingChange : setLocalSorting)(value);
+  } : setLocalSorting;
+  const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
+  const setColumnFilterState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
+    (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
+  } : setLocalColumnFilters;
+  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
+  const setRowSelection = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
+  } : setLocalRowSelection;
+  const dndId = useId();
+  const containerRef = React3.useRef(null);
+  const [columnVisibility, setColumnVisibility] = useState3(() => {
+    const initialVisibility = {};
+    columns.forEach((column) => {
+      var _a2, _b2;
+      if (column.id) {
+        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+      }
+    });
+    return initialVisibility;
+  });
+  const toggleColumnVisibility = useCallback(
+    (columnId, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
     },
-    row.id
+    [setColumnVisibility]
   );
-}
-function PinnedColumns(_a) {
-  var _b = _a, {
-    pinDirection = "left",
-    table,
-    centerHeader,
-    allSelectedAcrossPages,
-    someSelectedAcrossPages,
-    toggleSelectAllAcrossPages
-  } = _b, props = __objRest(_b, [
-    "pinDirection",
-    "table",
-    "centerHeader",
-    "allSelectedAcrossPages",
-    "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages"
-  ]);
-  var _a2;
-  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
-  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ jsxs(
-    "table",
+  const resetColumnVisibility = useCallback(() => {
+    setColumnVisibility(() => {
+      const initialVisibility = {};
+      columns.forEach((column) => {
+        var _a2, _b2;
+        if (column.id) {
+          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        }
+      });
+      return initialVisibility;
+    });
+  }, [columns]);
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    columnResizeMode: "onChange",
+    getRowId: (row, index) => {
+      var _a2;
+      return String((_a2 = row.id) != null ? _a2 : index + 1);
+    },
+    state: {
+      columnOrder,
+      sorting: sortingState,
+      columnFilters: columnFilterState,
+      rowSelection,
+      columnVisibility
+    },
+    initialState: {
+      columnPinning: {
+        left: predeterminedLeftPins,
+        right: predeterminedRightPins
+      }
+    },
+    enableColumnPinning: (predeterminedLeftPins == null ? void 0 : predeterminedLeftPins.length) > 0 || predeterminedRightPins.length > 0,
+    onColumnOrderChange: setColumnOrder,
+    onSortingChange: adaptTableStateSetter(setSortingState),
+    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
+    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
+    filterFns: {
+      startsWith: (row, columnId, filterValue) => {
+        const cellValue = row == null ? void 0 : row.getValue(columnId);
+        if (!cellValue || !filterValue) {
+          return true;
+        }
+        return String(cellValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
+      },
+      endsWith: (row, columnId, filterValue) => {
+        const cellValue = row == null ? void 0 : row.getValue(columnId);
+        if (!cellValue || !filterValue) {
+          return true;
+        }
+        return String(cellValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
+      }
+    }
+  });
+  const allRowIds = pagination ? (_a = filteredSortedData == null ? void 0 : filteredSortedData.map((row) => String(row.id))) != null ? _a : [] : Array.from(
+    { length: totalRowCount != null ? totalRowCount : data.length },
+    (_, i) => String(i + 1)
+  );
+  const allSelectedAcrossPages = allRowIds.every(
+    (rowId) => rowSelection[rowId]
+  );
+  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((rowId) => rowSelection[rowId]);
+  const toggleSelectAllAcrossPages = () => {
+    setRowSelection((prev) => {
+      const isSelecting = !allSelectedAcrossPages;
+      if (isSelecting) {
+        const newSelection = {};
+        for (const rowId of allRowIds) {
+          newSelection[rowId] = true;
+        }
+        return __spreadValues(__spreadValues({}, prev), newSelection);
+      } else {
+        const updatedSelection = __spreadValues({}, prev);
+        for (const rowId of allRowIds) {
+          delete updatedSelection[rowId];
+        }
+        return updatedSelection;
+      }
+    });
+  };
+  useInfiniteScroll({
+    containerRef,
+    onLoadMore: onLoadMore != null ? onLoadMore : () => {
+    },
+    isLoading: isLoadingMore,
+    enabled: !pagination
+  });
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((prev) => {
+        const oldIndex = prev.indexOf(active.id);
+        const newIndex = prev.indexOf(over.id);
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  };
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+  const visibleColumns = table.getVisibleLeafColumns();
+  const columnVirtualizer = useVirtualizer2({
+    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;
+  let virtualPaddingRight;
+  if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
+    virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
+    virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
+  }
+  const empty = table.getRowModel().rows.length === 0;
+  return /* @__PURE__ */ jsx8(
+    DndContext,
     {
-      className: clsx(
-        "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
-        pinDirection === "left" ? "left-0" : "right-0"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ jsx("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
-            var _a3, _b2, _c;
-            if (!header) {
-              return;
-            }
-            if (typeof header.column.columnDef.header === "string") {
-              const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
-              return /* @__PURE__ */ jsxs(
-                DataCellHeader,
-                {
-                  locked: true,
-                  header,
-                  center: centerHeader,
-                  width: customHeaderWidth,
-                  className: clsx(
-                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                    "group"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.columnDef.header }),
-                    getSortIcon(header.column.getIsSorted()),
-                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                      header.column.getNextSortingOrder(),
-                      true
+      id: dndId,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsx8(
+        SortableContext,
+        {
+          items: columnOrder,
+          strategy: horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              id,
+              className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
+              children: [
+                /* @__PURE__ */ jsxs5(
+                  "div",
+                  {
+                    className: clsx5(
+                      "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+                      empty ? "overflow-y-hidden" : "h-full"
+                    ),
+                    ref: containerRef,
+                    children: [
+                      /* @__PURE__ */ jsx8(
+                        PinnedColumns,
+                        {
+                          pinDirection: "left",
+                          table,
+                          tableContainerRef: containerRef,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs5("table", { className: "flex-1 flex flex-col min-h-min", children: [
+                        /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5("tr", { className: "flex w-full", children: [
+                          virtualPaddingLeft ? (
+                            // fake empty column to the left for virtualization scroll padding
+                            /* @__PURE__ */ jsx8(
+                              "th",
+                              {
+                                style: { display: "flex", width: virtualPaddingLeft }
+                              }
+                            )
+                          ) : null,
+                          virtualColumns.map((virtualColumn) => {
+                            var _a2, _b2, _c2, _d2, _e2;
+                            const header = headerGroup.headers[virtualColumn.index];
+                            if (!header) {
+                              return;
+                            }
+                            if (typeof header.column.columnDef.header === "string") {
+                              const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
+                              const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                              return /* @__PURE__ */ jsxs5(
+                                DraggableCellHeader,
+                                {
+                                  id: id ? `${id}-header-${header.id}` : void 0,
+                                  header,
+                                  locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
+                                  center: centerHeader,
+                                  width: customHeaderWidth,
+                                  className: clsx5(
+                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                    "group",
+                                    {
+                                      "justify-end": typeof cellValue === "number"
+                                    }
+                                  ),
+                                  useMenuDefaultMinWidth,
+                                  children: [
+                                    /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                    getSortIcon(header.column.getIsSorted()),
+                                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                                      header.column.getNextSortingOrder(),
+                                      true
+                                    ),
+                                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    /* @__PURE__ */ jsx8(
+                                      "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"
+                                      }
+                                    )
+                                  ]
+                                },
+                                header.id
+                              );
+                            }
+                            return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
+                              DataGridCell,
+                              {
+                                id: id ? `${id}-header-${header.id}` : void 0,
+                                type: "header",
+                                component: "checkbox",
+                                locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
+                                children: /* @__PURE__ */ jsx8(
+                                  Checkbox,
+                                  {
+                                    id: id ? `${id}-select-all-checkbox` : void 0,
+                                    checked: allSelectedAcrossPages,
+                                    indeterminate: someSelectedAcrossPages,
+                                    onChange: toggleSelectAllAcrossPages
+                                  }
+                                )
+                              }
+                            ) : flexRender3(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ) }, header.id);
+                          }),
+                          virtualPaddingRight ? (
+                            //fake empty column to the right for virtualization scroll padding
+                            /* @__PURE__ */ jsx8(
+                              "th",
+                              {
+                                style: { display: "flex", width: virtualPaddingRight }
+                              }
+                            )
+                          ) : null,
+                          enableColumnSelector && /* @__PURE__ */ jsx8(
+                            ColumnSelectorHeaderCell,
+                            {
+                              id: id ? `${id}-column-selector` : void 0,
+                              table,
+                              toggleColumnVisibility,
+                              resetColumnVisibility
+                            }
+                          )
+                        ] }, headerGroup.id)) }),
+                        /* @__PURE__ */ jsx8(
+                          TableBody,
+                          {
+                            id,
+                            columnVirtualizer,
+                            table,
+                            tableContainerRef: containerRef,
+                            virtualPaddingLeft,
+                            virtualPaddingRight,
+                            pagination,
+                            isLoadingMore,
+                            hasMore,
+                            showFilterRow,
+                            enableColumnSelector
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx8(
+                        PinnedColumns,
+                        {
+                          pinDirection: "right",
+                          table,
+                          tableContainerRef: containerRef,
+                          pagination,
+                          isLoadingMore,
+                          hasMore,
+                          showFilterRow,
+                          enableColumnSelector
+                        }
+                      )
+                    ]
+                  }
+                ),
+                empty && /* @__PURE__ */ jsxs5(
+                  "div",
+                  {
+                    className: clsx5(
+                      NO_RESULTS_HEIGHT,
+                      "flex flex-col items-center justify-center",
+                      componentGap,
+                      componentPadding
                     ),
-                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx(
-                      "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"
-                      }
-                    )
-                  ]
-                },
-                header.id
-              );
+                    children: [
+                      /* @__PURE__ */ jsx8(Subheader, { color: "text-secondary-normal", children: "No Results" }),
+                      /* @__PURE__ */ jsx8(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                    ]
+                  }
+                ),
+                !hideStatusBar && /* @__PURE__ */ jsxs5("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
+                  pagination && /* @__PURE__ */ jsxs5("div", { className: "flex justify-between items-center", children: [
+                    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 w-min", children: [
+                      /* @__PURE__ */ jsx8(
+                        Select,
+                        {
+                          id: id ? `${id}-pagesize-select` : void 0,
+                          wrapperClassName: "!w-20",
+                          value: pagination.pageSize.toString(),
+                          onChange: (e) => {
+                            var _a2;
+                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
+                          },
+                          renderMenu: (props) => /* @__PURE__ */ jsx8(
+                            Menu,
+                            __spreadProps(__spreadValues({}, props), {
+                              id: id ? `${id}-pagesize-menu` : void 0,
+                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ jsx8(
+                                MenuOption,
+                                {
+                                  id: id ? `${id}-pagesize-option-${option}` : void 0,
+                                  selected: pagination.pageSize === option,
+                                  onClick: () => {
+                                    var _a2;
+                                    return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
+                                  },
+                                  children: option
+                                },
+                                option
+                              ))
+                            })
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(Label, { children: "Per Page" })
+                    ] }),
+                    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx8(
+                        Button,
+                        {
+                          id: id ? `${id}-prev-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ jsx8(Icon, { name: "chevron_left" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
+                          variant: "tertiary",
+                          disabled: pagination.pageIndex === 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs5(Paragraph, { children: [
+                        pagination.pageIndex * pagination.pageSize + 1,
+                        " -",
+                        " ",
+                        Math.min(
+                          (pagination.pageIndex + 1) * pagination.pageSize,
+                          pagination.total
+                        ),
+                        " ",
+                        "of ",
+                        pagination.total
+                      ] }),
+                      /* @__PURE__ */ jsx8(
+                        Button,
+                        {
+                          id: id ? `${id}-next-page-button` : void 0,
+                          iconOnly: true,
+                          leftIcon: /* @__PURE__ */ jsx8(Icon, { name: "chevron_right" }),
+                          onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
+                          variant: "tertiary",
+                          disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
+                        }
+                      )
+                    ] })
+                  ] }),
+                  status && /* @__PURE__ */ jsx8(Paragraph, { children: status })
+                ] })
+              ]
             }
-            return /* @__PURE__ */ jsx(React.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: allSelectedAcrossPages,
-                indeterminate: someSelectedAcrossPages,
-                onChange: toggleSelectAllAcrossPages
-              }
-            ) }) : flexRender(
-              header.column.columnDef.header,
-              header.getContext()
-            ) }, header.id);
-          }) }, headerGroup.id);
-        }) }),
-        /* @__PURE__ */ jsx(
-          TableBody,
-          __spreadProps(__spreadValues({}, props), {
-            table,
-            locked: true,
-            pinDirection
-          })
-        )
-      ]
+          )
+        }
+      )
     }
   );
 }
-var LoadingCell = ({
-  id,
-  column
-}) => {
-  const key = `loading-${column.id}`;
-  if (column.cell === "checkbox") {
-    return /* @__PURE__ */ jsx(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
-  }
-  if (column.cell === "input") {
-    return /* @__PURE__ */ jsx(
-      DataGridCell,
-      {
-        id: id ? `${id}-${key}` : void 0,
-        component: "input",
-        children: /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: id ? `${id}-${key}-input` : void 0,
-            align: "left",
-            disabled: true,
-            wrapperClassName: "!rounded-none !border-0"
-          }
-        )
-      },
-      key
+DataGrid.displayName = "DataGrid";
+function adaptTableStateSetter(setter) {
+  return (valueOrFn) => {
+    setter(
+      (prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
     );
-  }
-  return /* @__PURE__ */ jsx(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ jsx("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
-};
-function ColumnSelectorHeaderCell({
-  id,
-  table,
-  toggleColumnVisibility,
-  resetColumnVisibility
-}) {
-  const ref = useRef(null);
-  const [show, setShow] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    DataGridCell,
-    {
-      id,
-      width: "48",
-      type: "header",
-      color: "text-secondary-normal",
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            id: id ? `${id}-button` : void 0,
-            onClick: () => setShow((prev) => !prev),
-            variant: "navigation",
-            iconOnly: true,
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "tune" })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Menu,
-          {
-            id: id ? `${id}-menu` : void 0,
-            positionTo: ref,
-            position: "bottom-right",
-            show,
-            setShow,
-            children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  id: id ? `${id}-reset-button` : void 0,
-                  variant: "tertiary",
-                  onClick: () => {
-                    resetColumnVisibility();
-                    setShow(false);
-                  },
-                  children: "Reset to default"
-                }
-              ),
-              table.getAllColumns().filter((x) => {
-                var _a;
-                return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
-              }).map((column) => /* @__PURE__ */ jsx(
-                ColumnSelectorMenuOption,
-                {
-                  id: id ? `${id}-option-${column.id}` : void 0,
-                  column,
-                  toggleColumnVisibility
-                },
-                column.id
-              ))
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function ColumnSelectorMenuOption({
-  id,
-  column,
-  toggleColumnVisibility
-}) {
-  const [isVisible, setIsVisible] = useState(column.getIsVisible());
-  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ jsx(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      id: id ? `${id}-checkbox` : void 0,
-      label: label != null ? label : "Unknown",
-      checked: isVisible,
-      onChange: (e) => {
-        setIsVisible(e.target.checked);
-        toggleColumnVisibility(column.id, e.target.checked);
-      }
-    }
-  ) });
-}
-function getSortIcon(sort, nextSort = false) {
-  const iconClassName = clsx(
-    "text-icon-on-action-primary-normal",
-    nextSort && "hidden group-hover:block"
-  );
-  if (sort === "asc")
-    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
-  if (sort === "desc")
-    return /* @__PURE__ */ jsx(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
-  return null;
+  };
 }
 export {
-  DataGrid
+  Button,
+  Checkbox,
+  DataCellHeader,
+  DataGrid,
+  DataGridCell,
+  DragAlongCell,
+  DraggableCellHeader,
+  Icon,
+  Input,
+  Label,
+  Menu,
+  MenuOption,
+  Paragraph,
+  Search,
+  Select,
+  Subheader,
+  Tooltip
 };