@stackframe/stack-ui 2.8.61 → 2.8.63

package/dist/components/data-table/data-table.js

@@ -1,98 +1,268 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@stackframe/stack-ui";
-import { GlobalFiltering, flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import React from "react";
-import { DataTablePagination } from "./pagination";
-import { DataTableToolbar } from "./toolbar";
-export function TableView(props) {
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(DataTableToolbar, { table: props.table, toolbarRender: props.toolbarRender, showDefaultToolbar: props.showDefaultToolbar, defaultColumnFilters: props.defaultColumnFilters, defaultSorting: props.defaultSorting }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
-                                    return (_jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder
-                                            ? null
-                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: props.table.getRowModel().rows.length ? (props.table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", onClick: (ev) => {
-                                    // only trigger onRowClick if the element is a direct descendant; don't trigger for portals
-                                    if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {
-                                        props.onRowClick?.(row.original);
-                                    }
-                                }, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: props.columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }), _jsx(DataTablePagination, { table: props.table })] }));
-}
-export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, showDefaultToolbar = true, onRowClick, }) {
-    const [sorting, setSorting] = React.useState(defaultSorting);
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
-    const [pagination, setPagination] = React.useState({
-        pageIndex: 0,
-        pageSize: 10,
-    });
-    const [globalFilter, setGlobalFilter] = React.useState();
-    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, defaultVisibility: defaultVisibility, sorting: sorting, setSorting: setSorting, defaultSorting: defaultSorting, columnFilters: columnFilters, setColumnFilters: setColumnFilters, defaultColumnFilters: defaultColumnFilters, manualPagination: false, manualFiltering: false, pagination: pagination, setPagination: setPagination, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, showDefaultToolbar: showDefaultToolbar, onRowClick: onRowClick });
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/data-table/data-table.tsx
+var data_table_exports = {};
+__export(data_table_exports, {
+  DataTable: () => DataTable,
+  DataTableManualPagination: () => DataTableManualPagination,
+  TableView: () => TableView
+});
+module.exports = __toCommonJS(data_table_exports);
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_table = require("../ui/table.js");
+var import_react_table = require("@tanstack/react-table");
+var import_react = __toESM(require("react"));
+var import_pagination = require("./pagination.js");
+var import_toolbar = require("./toolbar.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableView(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_toolbar.DataTableToolbar,
+      {
+        table: props.table,
+        toolbarRender: props.toolbarRender,
+        showDefaultToolbar: props.showDefaultToolbar,
+        defaultColumnFilters: props.defaultColumnFilters,
+        defaultSorting: props.defaultSorting
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_table.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableHeader, { children: props.table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id);
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableBody, { children: props.table.getRowModel().rows.length ? props.table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_table.TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          onClick: (ev) => {
+            if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {
+              props.onRowClick?.(row.original);
+            }
+          },
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableCell, { children: (0, import_react_table.flexRender)(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_table.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_table.TableCell,
+        {
+          colSpan: props.columns.length,
+          className: "h-24 text-center",
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.DataTablePagination, { table: props.table })
+  ] });
 }
-export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onRowClick, onUpdate, showDefaultToolbar = true, }) {
-    const [sorting, setSorting] = React.useState(defaultSorting);
-    const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
-    const [cursors, setCursors] = React.useState({});
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters);
-    const [globalFilter, setGlobalFilter] = React.useState();
-    const [refreshCounter, setRefreshCounter] = React.useState(0);
-    React.useEffect(() => {
-        runAsynchronouslyWithAlert(async () => {
-            const { nextCursor } = await onUpdate({
-                cursor: cursors[pagination.pageIndex],
-                limit: pagination.pageSize,
-                sorting,
-                columnFilters,
-                globalFilters: globalFilter,
-            });
-            setCursors(c => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);
-        });
-    }, [pagination, sorting, columnFilters, refreshCounter]);
-    // Reset to first page when filters change
-    React.useEffect(() => {
-        setPagination(pagination => ({ ...pagination, pageIndex: 0 }));
-        setCursors({});
-    }, [columnFilters, sorting, pagination.pageSize]);
-    // Refresh the users when the global filter changes. Delay to prevent unnecessary re-renders.
-    React.useEffect(() => {
-        const timer = setTimeout(() => {
-            setRefreshCounter(x => x + 1);
-        }, 3000);
-        return () => clearTimeout(timer);
-    }, [globalFilter]);
-    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, sorting: sorting, setSorting: setSorting, pagination: pagination, setPagination: setPagination, columnFilters: columnFilters, setColumnFilters: setColumnFilters, rowCount: pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0), globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting, defaultVisibility: defaultVisibility, showDefaultToolbar: showDefaultToolbar, onRowClick: onRowClick });
+function DataTable({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  showDefaultToolbar = true,
+  onRowClick
+}) {
+  const [sorting, setSorting] = import_react.default.useState(defaultSorting);
+  const [columnFilters, setColumnFilters] = import_react.default.useState(defaultColumnFilters);
+  const [pagination, setPagination] = import_react.default.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [globalFilter, setGlobalFilter] = import_react.default.useState();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataTableBase,
+    {
+      columns,
+      data,
+      toolbarRender,
+      defaultVisibility,
+      sorting,
+      setSorting,
+      defaultSorting,
+      columnFilters,
+      setColumnFilters,
+      defaultColumnFilters,
+      manualPagination: false,
+      manualFiltering: false,
+      pagination,
+      setPagination,
+      globalFilter,
+      setGlobalFilter,
+      showDefaultToolbar,
+      onRowClick
+    }
+  );
 }
-function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, defaultColumnFilters, defaultSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination = true, manualFiltering = true, showDefaultToolbar = true, onRowClick, }) {
-    const [rowSelection, setRowSelection] = React.useState({});
-    const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
-    const table = useReactTable({
-        data,
-        columns,
-        state: {
-            sorting,
-            columnVisibility,
-            rowSelection,
-            columnFilters,
-            pagination,
-            globalFilter: globalFilter,
-        },
-        enableRowSelection: true,
-        onGlobalFilterChange: setGlobalFilter,
-        onRowSelectionChange: setRowSelection,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        onColumnVisibilityChange: setColumnVisibility,
-        onPaginationChange: setPagination,
-        getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? GlobalFiltering.getDefaultOptions(table).getColumnCanGlobalFilter(c),
-        getCoreRowModel: getCoreRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFacetedUniqueValues: getFacetedUniqueValues(),
-        autoResetAll: false,
-        manualPagination,
-        manualFiltering,
-        rowCount,
+function DataTableManualPagination({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  onRowClick,
+  onUpdate,
+  showDefaultToolbar = true
+}) {
+  const [sorting, setSorting] = import_react.default.useState(defaultSorting);
+  const [pagination, setPagination] = import_react.default.useState({ pageIndex: 0, pageSize: 10 });
+  const [cursors, setCursors] = import_react.default.useState({});
+  const [columnFilters, setColumnFilters] = import_react.default.useState(defaultColumnFilters);
+  const [globalFilter, setGlobalFilter] = import_react.default.useState();
+  const [refreshCounter, setRefreshCounter] = import_react.default.useState(0);
+  import_react.default.useEffect(() => {
+    (0, import_promises.runAsynchronouslyWithAlert)(async () => {
+      const { nextCursor } = await onUpdate({
+        cursor: cursors[pagination.pageIndex],
+        limit: pagination.pageSize,
+        sorting,
+        columnFilters,
+        globalFilters: globalFilter
+      });
+      setCursors((c) => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);
     });
-    return _jsx(TableView, { table: table, columns: columns, toolbarRender: toolbarRender, showDefaultToolbar: showDefaultToolbar, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting, onRowClick: onRowClick });
+  }, [pagination, sorting, columnFilters, refreshCounter]);
+  import_react.default.useEffect(() => {
+    setPagination((pagination2) => ({ ...pagination2, pageIndex: 0 }));
+    setCursors({});
+  }, [columnFilters, sorting, pagination.pageSize]);
+  import_react.default.useEffect(() => {
+    const timer = setTimeout(() => {
+      setRefreshCounter((x) => x + 1);
+    }, 3e3);
+    return () => clearTimeout(timer);
+  }, [globalFilter]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataTableBase,
+    {
+      columns,
+      data,
+      toolbarRender,
+      sorting,
+      setSorting,
+      pagination,
+      setPagination,
+      columnFilters,
+      setColumnFilters,
+      rowCount: pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0),
+      globalFilter,
+      setGlobalFilter,
+      defaultColumnFilters,
+      defaultSorting,
+      defaultVisibility,
+      showDefaultToolbar,
+      onRowClick
+    }
+  );
+}
+function DataTableBase({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  sorting,
+  setSorting,
+  defaultColumnFilters,
+  defaultSorting,
+  pagination,
+  setPagination,
+  rowCount,
+  columnFilters,
+  setColumnFilters,
+  globalFilter,
+  setGlobalFilter,
+  manualPagination = true,
+  manualFiltering = true,
+  showDefaultToolbar = true,
+  onRowClick
+}) {
+  const [rowSelection, setRowSelection] = import_react.default.useState({});
+  const [columnVisibility, setColumnVisibility] = import_react.default.useState(defaultVisibility || {});
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+      globalFilter
+    },
+    enableRowSelection: true,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? import_react_table.GlobalFiltering.getDefaultOptions(table).getColumnCanGlobalFilter(c),
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getFacetedRowModel: (0, import_react_table.getFacetedRowModel)(),
+    getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
+    autoResetAll: false,
+    manualPagination,
+    manualFiltering,
+    rowCount
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TableView,
+    {
+      table,
+      columns,
+      toolbarRender,
+      showDefaultToolbar,
+      defaultColumnFilters,
+      defaultSorting,
+      onRowClick
+    }
+  );
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTable,
+  DataTableManualPagination,
+  TableView
+});
+//# sourceMappingURL=data-table.js.map

package/dist/components/data-table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  GlobalFiltering,\n  OnChangeFn,\n  PaginationState,\n  SortingState,\n  Table as TableType,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { DataTablePagination } from \"./pagination\";\nimport { DataTableToolbar } from \"./toolbar\";\n\nexport function TableView<TData, TValue>(props: {\n  table: TableType<TData>,\n  columns: ColumnDef<TData, TValue>[],\n  toolbarRender?: (table: TableType<TData>) => React.ReactNode,\n  showDefaultToolbar?: boolean,\n  defaultColumnFilters: ColumnFiltersState,\n  defaultSorting: SortingState,\n  onRowClick?: (row: TData) => void,\n}) {\n  return (\n    <div className=\"space-y-4\">\n      <DataTableToolbar\n        table={props.table}\n        toolbarRender={props.toolbarRender}\n        showDefaultToolbar={props.showDefaultToolbar}\n        defaultColumnFilters={props.defaultColumnFilters}\n        defaultSorting={props.defaultSorting}\n      />\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {props.table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} >\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id} colSpan={header.colSpan}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {props.table.getRowModel().rows.length ? (\n              props.table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                  onClick={(ev) => {\n                    // only trigger onRowClick if the element is a direct descendant; don't trigger for portals\n                    if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {\n                      props.onRowClick?.(row.original);\n                    }\n                  }}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={props.columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <DataTablePagination table={props.table} />\n    </div>\n  );\n}\n\ntype DataTableProps<TData, TValue> = {\n  columns: ColumnDef<TData, TValue>[],\n  data: TData[],\n  toolbarRender?: (table: TableType<TData>) => React.ReactNode,\n  defaultVisibility?: VisibilityState,\n  defaultColumnFilters: ColumnFiltersState,\n  defaultSorting: SortingState,\n  showDefaultToolbar?: boolean,\n  onRowClick?: (row: TData) => void,\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  defaultColumnFilters,\n  defaultSorting,\n  showDefaultToolbar = true,\n  onRowClick,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);\n  const [pagination, setPagination] = React.useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const [globalFilter, setGlobalFilter] = React.useState<any>();\n\n  return <DataTableBase\n    columns={columns}\n    data={data}\n    toolbarRender={toolbarRender}\n    defaultVisibility={defaultVisibility}\n    sorting={sorting}\n    setSorting={setSorting}\n    defaultSorting={defaultSorting}\n    columnFilters={columnFilters}\n    setColumnFilters={setColumnFilters}\n    defaultColumnFilters={defaultColumnFilters}\n    manualPagination={false}\n    manualFiltering={false}\n    pagination={pagination}\n    setPagination={setPagination}\n    globalFilter={globalFilter}\n    setGlobalFilter={setGlobalFilter}\n    showDefaultToolbar={showDefaultToolbar}\n    onRowClick={onRowClick}\n  />;\n}\n\ntype DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {\n  onUpdate: (options: {\n    cursor: string,\n    limit: number,\n    sorting: SortingState,\n    columnFilters: ColumnFiltersState,\n    globalFilters: any,\n  }) => Promise<{ nextCursor: string | null }>,\n}\n\nexport function DataTableManualPagination<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  defaultColumnFilters,\n  defaultSorting,\n  onRowClick,\n  onUpdate,\n  showDefaultToolbar = true,\n}: DataTableManualPaginationProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);\n  const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });\n  const [cursors, setCursors] = React.useState<Record<number, string>>({});\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);\n  const [globalFilter, setGlobalFilter] = React.useState<any>();\n  const [refreshCounter, setRefreshCounter] = React.useState(0);\n\n  React.useEffect(() => {\n    runAsynchronouslyWithAlert(async () => {\n      const { nextCursor } = await onUpdate({\n        cursor: cursors[pagination.pageIndex],\n        limit: pagination.pageSize,\n        sorting,\n        columnFilters,\n        globalFilters: globalFilter,\n      });\n      setCursors(c => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);\n    });\n  }, [pagination, sorting, columnFilters, refreshCounter]);\n\n  // Reset to first page when filters change\n  React.useEffect(() => {\n    setPagination(pagination => ({ ...pagination, pageIndex: 0 }));\n    setCursors({});\n  }, [columnFilters, sorting, pagination.pageSize]);\n\n  // Refresh the users when the global filter changes. Delay to prevent unnecessary re-renders.\n  React.useEffect(() => {\n    const timer = setTimeout(() => {\n      setRefreshCounter(x => x + 1);\n    }, 3_000);\n    return () => clearTimeout(timer);\n  }, [globalFilter]);\n\n  return <DataTableBase\n    columns={columns}\n    data={data}\n    toolbarRender={toolbarRender}\n    sorting={sorting}\n    setSorting={setSorting}\n    pagination={pagination}\n    setPagination={setPagination}\n    columnFilters={columnFilters}\n    setColumnFilters={setColumnFilters}\n    rowCount={pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0)}\n    globalFilter={globalFilter}\n    setGlobalFilter={setGlobalFilter}\n    defaultColumnFilters={defaultColumnFilters}\n    defaultSorting={defaultSorting}\n    defaultVisibility={defaultVisibility}\n    showDefaultToolbar={showDefaultToolbar}\n    onRowClick={onRowClick}\n  />;\n}\n\ntype DataTableBaseProps<TData, TValue> = DataTableProps<TData, TValue> & {\n  sorting?: SortingState,\n  setSorting?: OnChangeFn<SortingState>,\n  pagination?: PaginationState,\n  setPagination?: OnChangeFn<PaginationState>,\n  rowCount?: number,\n  columnFilters?: ColumnFiltersState,\n  setColumnFilters?: OnChangeFn<ColumnFiltersState>,\n  manualPagination?: boolean,\n  manualFiltering?: boolean,\n  globalFilter?: any,\n  setGlobalFilter?: OnChangeFn<any>,\n}\n\nfunction DataTableBase<TData, TValue>({\n  columns,\n  data,\n  toolbarRender,\n  defaultVisibility,\n  sorting,\n  setSorting,\n  defaultColumnFilters,\n  defaultSorting,\n  pagination,\n  setPagination,\n  rowCount,\n  columnFilters,\n  setColumnFilters,\n  globalFilter,\n  setGlobalFilter,\n  manualPagination = true,\n  manualFiltering = true,\n  showDefaultToolbar = true,\n  onRowClick,\n}: DataTableBaseProps<TData, TValue>) {\n  const [rowSelection, setRowSelection] = React.useState({});\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultVisibility || {});\n\n  const table: TableType<TData> = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n      globalFilter: globalFilter,\n    },\n    enableRowSelection: true,\n    onGlobalFilterChange: setGlobalFilter,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? GlobalFiltering.getDefaultOptions!(table).getColumnCanGlobalFilter!(c),\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    autoResetAll: false,\n    manualPagination,\n    manualFiltering,\n    rowCount,\n  });\n\n  return <TableView\n    table={table}\n    columns={columns}\n    toolbarRender={toolbarRender}\n    showDefaultToolbar={showDefaultToolbar}\n    defaultColumnFilters={defaultColumnFilters}\n    defaultSorting={defaultSorting}\n    onRowClick={onRowClick}\n  />;\n}\n"],"mappings":"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","names":["React","pagination"]}

package/dist/components/data-table/faceted-filter.js

@@ -1,26 +1,134 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Popover, PopoverContent, PopoverTrigger, Separator } from "@stackframe/stack-ui";
-import { ListFilter } from "lucide-react";
-import { cn } from "../../lib/utils";
-export function DataTableFacetedFilter({ column, title, options, }) {
-    const facets = column?.getFacetedUniqueValues();
-    const selectedValues = new Set(column?.getFilterValue());
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border", children: [_jsx(ListFilter, { className: "mr-2 h-4 w-4 text-gray-500" }), title, selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: selectedValues.size }), _jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? (_jsxs(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: [selectedValues.size, " selected"] })) : (options
-                                        .filter((option) => selectedValues.has(option.value))
-                                        .map((option) => (_jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: option.label }, option.value)))) })] }))] }) }), _jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: options.map((option) => {
-                                        const isSelected = selectedValues.has(option.value);
-                                        return (_jsxs(CommandItem, { onSelect: () => {
-                                                if (isSelected) {
-                                                    selectedValues.delete(option.value);
-                                                }
-                                                else {
-                                                    selectedValues.add(option.value);
-                                                }
-                                                const filterValues = Array.from(selectedValues);
-                                                column?.setFilterValue(filterValues.length ? filterValues : undefined);
-                                            }, children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", isSelected
-                                                        ? "bg-primary text-primary-foreground"
-                                                        : "opacity-50 [&_svg]:invisible"), children: _jsx(CheckIcon, { className: cn("h-4 w-4") }) }), option.icon && (_jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" })), _jsx("span", { children: option.label })] }, option.value));
-                                    }) }), selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { onSelect: () => column?.setFilterValue(undefined), className: "justify-center text-center", children: "Clear filters" }) })] }))] })] }) })] }));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/data-table/faceted-filter.tsx
+var faceted_filter_exports = {};
+__export(faceted_filter_exports, {
+  DataTableFacetedFilter: () => DataTableFacetedFilter
+});
+module.exports = __toCommonJS(faceted_filter_exports);
+var import_react_icons = require("@radix-ui/react-icons");
+var import_badge = require("../ui/badge.js");
+var import_button = require("../ui/button.js");
+var import_command = require("../ui/command.js");
+var import_popover = require("../ui/popover.js");
+var import_separator = require("../ui/separator.js");
+var import_lucide_react = require("lucide-react");
+var import_utils = require("../../lib/utils.js");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTableFacetedFilter({
+  column,
+  title,
+  options
+}) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue());
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { variant: "outline", size: "sm", className: "h-8 border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ListFilter, { className: "mr-2 h-4 w-4 text-gray-500" }),
+      title,
+      selectedValues.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_badge.Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal lg:hidden",
+            children: selectedValues.size
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_badge.Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: [
+              selectedValues.size,
+              " selected"
+            ]
+          }
+        ) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_badge.Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: option.label
+          },
+          option.value
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.Command, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandInput, { placeholder: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.CommandList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandEmpty, { children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { children: options.map((option) => {
+          const isSelected = selectedValues.has(option.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_command.CommandItem,
+            {
+              onSelect: () => {
+                if (isSelected) {
+                  selectedValues.delete(option.value);
+                } else {
+                  selectedValues.add(option.value);
+                }
+                const filterValues = Array.from(selectedValues);
+                column?.setFilterValue(
+                  filterValues.length ? filterValues : void 0
+                );
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: (0, import_utils.cn)(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.CheckIcon, { className: (0, import_utils.cn)("h-4 w-4") })
+                  }
+                ),
+                option.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: option.label })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        selectedValues.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_command.CommandItem,
+            {
+              onSelect: () => column?.setFilterValue(void 0),
+              className: "justify-center text-center",
+              children: "Clear filters"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTableFacetedFilter
+});
+//# sourceMappingURL=faceted-filter.js.map

package/dist/components/data-table/faceted-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-table/faceted-filter.tsx"],"sourcesContent":["import { CheckIcon } from \"@radix-ui/react-icons\";\nimport { Badge } from \"../ui/badge\";\nimport { Button } from \"../ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"../ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover\";\nimport { Separator } from \"../ui/separator\";\nimport { Column } from \"@tanstack/react-table\";\nimport { ListFilter } from \"lucide-react\";\nimport React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\ntype DataTableFacetedFilterProps<TData, TValue> = {\n  column?: Column<TData, TValue>,\n  title?: string,\n  options: {\n    label: string,\n    value: string,\n    icon?: React.ComponentType<{ className?: string }>,\n  }[],\n}\n\nexport function DataTableFacetedFilter<TData, TValue>({\n  column,\n  title,\n  options,\n}: DataTableFacetedFilterProps<TData, TValue>) {\n  const facets = column?.getFacetedUniqueValues();\n  const selectedValues = new Set(column?.getFilterValue() as string[]);\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\" className=\"h-8 border\">\n          <ListFilter className=\"mr-2 h-4 w-4 text-gray-500\" />\n          {title}\n          {selectedValues.size > 0 && (\n            <>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\n              <Badge\n                variant=\"secondary\"\n                className=\"rounded-sm px-1 font-normal lg:hidden\"\n              >\n                {selectedValues.size}\n              </Badge>\n              <div className=\"hidden space-x-1 lg:flex\">\n                {selectedValues.size > 2 ? (\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"rounded-sm px-1 font-normal\"\n                  >\n                    {selectedValues.size} selected\n                  </Badge>\n                ) : (\n                  options\n                    .filter((option) => selectedValues.has(option.value))\n                    .map((option) => (\n                      <Badge\n                        variant=\"secondary\"\n                        key={option.value}\n                        className=\"rounded-sm px-1 font-normal\"\n                      >\n                        {option.label}\n                      </Badge>\n                    ))\n                )}\n              </div>\n            </>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={title} />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const isSelected = selectedValues.has(option.value);\n                return (\n                  <CommandItem\n                    key={option.value}\n                    onSelect={() => {\n                      if (isSelected) {\n                        selectedValues.delete(option.value);\n                      } else {\n                        selectedValues.add(option.value);\n                      }\n                      const filterValues = Array.from(selectedValues);\n                      column?.setFilterValue(\n                        filterValues.length ? filterValues : undefined\n                      );\n                    }}\n                  >\n                    <div\n                      className={cn(\n                        \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\n                        isSelected\n                          ? \"bg-primary text-primary-foreground\"\n                          : \"opacity-50 [&_svg]:invisible\"\n                      )}\n                    >\n                      <CheckIcon className={cn(\"h-4 w-4\")} />\n                    </div>\n                    {option.icon && (\n                      <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                    )}\n                    <span>{option.label}</span>\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n            {selectedValues.size > 0 && (\n              <>\n                <CommandSeparator />\n                <CommandGroup>\n                  <CommandItem\n                    onSelect={() => column?.setFilterValue(undefined)}\n                    className=\"justify-center text-center\"\n                  >\n                    Clear filters\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA0B;AAC1B,mBAAsB;AACtB,oBAAuB;AACvB,qBAQO;AACP,qBAAwD;AACxD,uBAA0B;AAE1B,0BAA2B;AAE3B,mBAAmB;AAwBT;AAZH,SAAS,uBAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,SAAS,QAAQ,uBAAuB;AAC9C,QAAM,iBAAiB,IAAI,IAAI,QAAQ,eAAe,CAAa;AAEnE,SACE,6CAAC,0BACC;AAAA,gDAAC,iCAAe,SAAO,MACrB,uDAAC,wBAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5C;AAAA,kDAAC,kCAAW,WAAU,8BAA6B;AAAA,MAClD;AAAA,MACA,eAAe,OAAO,KACrB,4EACE;AAAA,oDAAC,8BAAU,aAAY,YAAW,WAAU,YAAW;AAAA,QACvD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,yBAAe;AAAA;AAAA,QAClB;AAAA,QACA,4CAAC,SAAI,WAAU,4BACZ,yBAAe,OAAO,IACrB;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET;AAAA,6BAAe;AAAA,cAAK;AAAA;AAAA;AAAA,QACvB,IAEA,QACG,OAAO,CAAC,WAAW,eAAe,IAAI,OAAO,KAAK,CAAC,EACnD,IAAI,CAAC,WACJ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YAER,WAAU;AAAA,YAET,iBAAO;AAAA;AAAA,UAHH,OAAO;AAAA,QAId,CACD,GAEP;AAAA,SACF;AAAA,OAEJ,GACF;AAAA,IACA,4CAAC,iCAAe,WAAU,iBAAgB,OAAM,SAC9C,uDAAC,0BACC;AAAA,kDAAC,+BAAa,aAAa,OAAO;AAAA,MAClC,6CAAC,8BACC;AAAA,oDAAC,+BAAa,+BAAiB;AAAA,QAC/B,4CAAC,+BACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,aAAa,eAAe,IAAI,OAAO,KAAK;AAClD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAU,MAAM;AACd,oBAAI,YAAY;AACd,iCAAe,OAAO,OAAO,KAAK;AAAA,gBACpC,OAAO;AACL,iCAAe,IAAI,OAAO,KAAK;AAAA,gBACjC;AACA,sBAAM,eAAe,MAAM,KAAK,cAAc;AAC9C,wBAAQ;AAAA,kBACN,aAAa,SAAS,eAAe;AAAA,gBACvC;AAAA,cACF;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,sBACT;AAAA,sBACA,aACI,uCACA;AAAA,oBACN;AAAA,oBAEA,sDAAC,gCAAU,eAAW,iBAAG,SAAS,GAAG;AAAA;AAAA,gBACvC;AAAA,gBACC,OAAO,QACN,4CAAC,OAAO,MAAP,EAAY,WAAU,sCAAqC;AAAA,gBAE9D,4CAAC,UAAM,iBAAO,OAAM;AAAA;AAAA;AAAA,YA1Bf,OAAO;AAAA,UA2Bd;AAAA,QAEJ,CAAC,GACH;AAAA,QACC,eAAe,OAAO,KACrB,4EACE;AAAA,sDAAC,mCAAiB;AAAA,UAClB,4CAAC,+BACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,MAAM,QAAQ,eAAe,MAAS;AAAA,cAChD,WAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/data-table/index.js

@@ -1,9 +1,41 @@
-export * from "./cells";
-export * from "./column-header";
-export * from "./data-table";
-export * from "./faceted-filter";
-export * from "./pagination";
-export * from "./toolbar-items";
-export * from "./toolbar";
-export * from "./utils";
-export * from "./view-options";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/data-table/index.tsx
+var data_table_exports = {};
+module.exports = __toCommonJS(data_table_exports);
+__reExport(data_table_exports, require("./cells.js"), module.exports);
+__reExport(data_table_exports, require("./column-header.js"), module.exports);
+__reExport(data_table_exports, require("./data-table.js"), module.exports);
+__reExport(data_table_exports, require("./faceted-filter.js"), module.exports);
+__reExport(data_table_exports, require("./pagination.js"), module.exports);
+__reExport(data_table_exports, require("./toolbar-items.js"), module.exports);
+__reExport(data_table_exports, require("./toolbar.js"), module.exports);
+__reExport(data_table_exports, require("./utils.js"), module.exports);
+__reExport(data_table_exports, require("./view-options.js"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./cells.js"),
+  ...require("./column-header.js"),
+  ...require("./data-table.js"),
+  ...require("./faceted-filter.js"),
+  ...require("./pagination.js"),
+  ...require("./toolbar-items.js"),
+  ...require("./toolbar.js"),
+  ...require("./utils.js"),
+  ...require("./view-options.js")
+});
+//# sourceMappingURL=index.js.map