@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/table/components/empty-state/EmptyState.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Button } from '../../../button/Button';
+import { Headline } from '../../../headline/Headline';
+import { SearchX, RefreshCw, ArrowLeft } from 'lucide-react';
+import styles from './EmptyState.module.css';
+
+const defaultEmptyConfig = {
+  enabled: true,
+  title: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" }),
+  description: /* @__PURE__ */ jsx("span", { children: "Pr\xF8v at \xE6ndre dine filtre eller tilf\xF8je data." }),
+  showBack: true,
+  showRefresh: true,
+  backLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ArrowLeft, {}),
+    "Tilbage"
+  ] }),
+  refreshLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RefreshCw, {}),
+    "Indl\xE6s igen"
+  ] }),
+  className: "dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow "
+};
+function TableEmptyState({ config }) {
+  const merged = {
+    ...defaultEmptyConfig,
+    ...config != null ? config : {}
+  };
+  if (!merged.enabled) return null;
+  const showBack = merged.showBack && typeof merged.onBack === "function";
+  const showRefresh = merged.showRefresh && typeof merged.onRefresh === "function";
+  const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
+  return /* @__PURE__ */ jsxs("div", { className: `${merged.className} ${styles.container}`, children: [
+    /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [
+      /* @__PURE__ */ jsx(SearchX, { className: styles.icon }),
+      merged.title,
+      merged.description
+    ] }),
+    hasAnyActions && /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [
+      merged.actions,
+      showBack && /* @__PURE__ */ jsx(Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel }),
+      showRefresh && /* @__PURE__ */ jsx(Button, { onClick: merged.onRefresh, children: merged.refreshLabel })
+    ] })
+  ] });
+}
+
+export { TableEmptyState };

package/dist/components/table/components/empty-state/EmptyState.module.css

@@ -0,0 +1,16 @@
+.container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(clamp(-32px, -6vh, -12px));
+  padding-top: 56px;
+  box-sizing: border-box;
+}
+
+.icon {
+  inline-size: var(--component-size-lg);
+  block-size: var(--component-size-lg);
+  color: var(--color-fg-muted);
+}

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../../button/Button');
+var Popover = require('../../../popover/Popover');
+var Menu = require('../../../menu/Menu');
+var lucideReact = require('lucide-react');
+
+function TableSettings({
+  viewMode,
+  handleChangeViewMode
+}) {
+  const handleViewModeChange = (mode, close) => {
+    handleChangeViewMode("compact" );
+    close == null ? void 0 : close();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, {}),
+        icon
+      ] }),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "compact", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => handleViewModeChange("compact", close), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsDownUp, {}),
+        "Kompakt"
+      ] }) }) })
+    }
+  );
+}
+
+exports.TableSettings = TableSettings;

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -0,0 +1,7 @@
+import { ViewMode } from '../../../../hooks/useTableSettings';
+interface TableSettingsProps {
+    handleChangeViewMode: (mode: ViewMode) => void;
+    viewMode: ViewMode;
+}
+export declare function TableSettings({ viewMode, handleChangeViewMode, }: TableSettingsProps): React.ReactNode | JSX.Element;
+export {};

package/dist/components/table/components/table-settings/TableSettings.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '../../../button/Button';
+import { Popover } from '../../../popover/Popover';
+import { Menu } from '../../../menu/Menu';
+import { ListChevronsDownUp, Settings } from 'lucide-react';
+
+function TableSettings({
+  viewMode,
+  handleChangeViewMode
+}) {
+  const handleViewModeChange = (mode, close) => {
+    handleChangeViewMode("compact" );
+    close == null ? void 0 : close();
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { onClick, children: [
+        /* @__PURE__ */ jsx(Settings, {}),
+        icon
+      ] }),
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "compact", children: /* @__PURE__ */ jsxs("button", { onClick: () => handleViewModeChange("compact", close), children: [
+        /* @__PURE__ */ jsx(ListChevronsDownUp, {}),
+        "Kompakt"
+      ] }) }) })
+    }
+  );
+}
+
+export { TableSettings };

package/dist/{tanstack.cjs → components/table/tanstack.cjs}

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactTable = require('@tanstack/react-table');
-var Table = require('./components/table/Table');
-var ColumnResizer = require('./components/table/components/column-resizer/ColumnResizer');
+var Table = require('./Table');
+var ColumnResizer = require('./components/column-resizer/ColumnResizer');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -29,57 +29,52 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
 
+function getColumnId(def, index) {
+  const d = def;
+  if (d.id != null && String(d.id).length) return String(d.id);
+  if (d.accessorKey != null && String(d.accessorKey).length) return String(d.accessorKey);
+  return `col_${index}`;
+}
 function mapDefsToColumnItems(defs) {
-  if (!(defs == null ? void 0 : defs.length)) return [];
-  return defs.map((def) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const header = typeof def.header === "string" ? def.header : String((_b = (_a = def.accessorKey) != null ? _a : def.id) != null ? _b : "");
-    const accessor = def.accessorKey;
+  return defs.map((def, index) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    const id = getColumnId(def, index);
+    const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
     const cell = def.cell;
     let render;
     if (typeof cell === "function") {
       render = (row) => cell({
         row: { original: row },
-        getValue: () => accessor != null ? row[accessor] : accessorFn ? accessorFn(row) : void 0
+        getValue: () => accessorKey != null ? row[accessorKey] : accessorFn ? accessorFn(row) : void 0
       });
     } else if (accessorFn) {
       render = (row) => accessorFn(row);
-    } else if (accessor != null) {
-      render = (row) => row[accessor];
+    } else if (accessorKey != null) {
+      render = (row) => row[accessorKey];
+    } else {
+      render = () => null;
     }
     return {
-      header,
-      accessor,
-      sortable: (_c = def.enableSorting) != null ? _c : !!accessor,
+      id,
+      header: def.header,
+      accessor: accessorKey,
+      sortable: (_a = def.enableSorting) != null ? _a : !!accessorKey,
       render,
-      hidden: (_e = (_d = def.meta) == null ? void 0 : _d.hidden) != null ? _e : false,
-      align: (_g = (_f = def.meta) == null ? void 0 : _f.align) != null ? _g : void 0,
+      hidden: (_c = (_b = def.meta) == null ? void 0 : _b.hidden) != null ? _c : false,
+      align: (_e = (_d = def.meta) == null ? void 0 : _d.align) != null ? _e : void 0,
+      verticalAlign: (_g = (_f = def.meta) == null ? void 0 : _f.verticalAlign) != null ? _g : void 0,
       fitContent: (_i = (_h = def.meta) == null ? void 0 : _h.fitContent) != null ? _i : false,
-      fillWidth: (_k = (_j = def.meta) == null ? void 0 : _j.fillWidth) != null ? _k : false
+      emptyPlaceholder: (_k = (_j = def.meta) == null ? void 0 : _j.emptyPlaceholder) != null ? _k : "-",
+      allowWrap: (_m = (_l = def.meta) == null ? void 0 : _l.allowWrap) != null ? _m : false,
+      fillWidth: (_o = (_n = def.meta) == null ? void 0 : _n.fillWidth) != null ? _o : false,
+      severity: (_q = (_p = def.meta) == null ? void 0 : _p.severity) != null ? _q : void 0
     };
   });
 }
-function TanstackTable({
-  data,
-  dataKey,
-  columns,
-  filterable = [],
-  loading,
-  onRowClick,
-  striped,
-  fillViewport = false,
-  viewportBottomOffset = 0,
-  viewportMin = 120,
-  viewportIncludeMarginTop = false,
-  pageSize,
-  skip,
-  totalItemsCount,
-  onPageChange,
-  variant,
-  size
-}) {
+function TanstackTable(props) {
   var _a, _b;
+  const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
   const [sorting, setSorting] = React__namespace.useState([]);
   const [columnFilters, setColumnFilters] = React__namespace.useState([]);
   const [columnSizing, setColumnSizing] = React__namespace.useState({});
@@ -108,42 +103,30 @@ function TanstackTable({
     [table, data]
   );
   const s = (_a = table.getState().sorting) == null ? void 0 : _a[0];
-  const sortBy = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
+  const sortById = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
   const sortDirection = s ? s.desc ? "desc" : "asc" : null;
   const gridTemplateColumns = React__namespace.useMemo(() => {
     return columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2, _b2;
-      const id = String((_a2 = ci.accessor) != null ? _a2 : "");
-      const col = id ? table.getColumn(id) : void 0;
-      const w = (_b2 = col == null ? void 0 : col.getSize) == null ? void 0 : _b2.call(col);
+      var _a2;
+      const col = table.getColumn(ci.id);
+      const w = (_a2 = col == null ? void 0 : col.getSize) == null ? void 0 : _a2.call(col);
       if (ci.fillWidth) return "1fr";
       if (ci.fitContent) return "1%";
       return `${w != null ? w : 180}px`;
     }).join(" ");
   }, [columnItems, table, table.getState().columnSizing]);
   const columnStyles = React__namespace.useMemo(() => {
-    var _a2;
     const styles = {};
     for (const c of table.getAllLeafColumns()) {
       const id = c.id;
-      const key = (_a2 = c.columnDef.accessorKey) != null ? _a2 : id;
-      const ci = columnItems.find((x) => {
-        var _a3;
-        return String((_a3 = x.accessor) != null ? _a3 : "") === String(key);
-      });
+      const ci = columnItems.find((x) => x.id === id);
       if (ci == null ? void 0 : ci.fillWidth) {
-        styles[String(key)] = {
-          width: "auto",
-          minWidth: 0
-        };
+        styles[id] = { width: "auto", minWidth: 0 };
       } else if (ci == null ? void 0 : ci.fitContent) {
-        styles[String(key)] = {
-          width: "1%",
-          whiteSpace: "nowrap"
-        };
+        styles[id] = { width: "1%", whiteSpace: "nowrap" };
       } else {
         const w = c.getSize();
-        styles[String(key)] = { width: w, minWidth: w, maxWidth: w };
+        styles[id] = { width: w, minWidth: w, maxWidth: w };
       }
     }
     return styles;
@@ -164,66 +147,45 @@ function TanstackTable({
   );
   const headerBelowRow = React__namespace.useMemo(() => {
     if (!(filterable == null ? void 0 : filterable.length)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns,
-          gap: 8
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns, gap: 8 }, children: columnItems.filter((ci) => !ci.hidden).map((ci) => {
+      var _a2;
+      const id = ci.id;
+      const isFilterable = filterable.includes(id);
+      if (!isFilterable) return /* @__PURE__ */ jsxRuntime.jsx("div", {}, id);
+      const col = table.getColumn(id);
+      const value = (_a2 = col == null ? void 0 : col.getFilterValue()) != null ? _a2 : "";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          value,
+          placeholder: `Filter ${String(ci.header)}`,
+          onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
+          style: { width: "100%", padding: "4px 6px" }
         },
-        children: columnItems.map((ci) => {
-          var _a2, _b2;
-          const id = String((_a2 = ci.accessor) != null ? _a2 : "");
-          const isFilterable = id && filterable.includes(id);
-          if (!isFilterable) return /* @__PURE__ */ jsxRuntime.jsx("div", {}, id);
-          const col = table.getColumn(id);
-          const value = (_b2 = col == null ? void 0 : col.getFilterValue()) != null ? _b2 : "";
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              value,
-              placeholder: `Filter ${ci.header}`,
-              onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
-              style: { width: "100%", padding: "4px 6px" }
-            },
-            id
-          );
-        })
-      }
-    );
+        id
+      );
+    }) });
   }, [columnItems, filterable, table, table.getState().columnFilters, gridTemplateColumns]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table.Table,
     {
+      ...tableProps,
       dataKey,
-      variant,
       data: visibleData,
       columns: columnItems,
-      sortBy,
+      sortById,
       sortDirection,
       onSortChange: (col, dir) => {
-        var _a2;
-        const id = String((_a2 = col.accessor) != null ? _a2 : "");
+        var _a2, _b2, _c;
+        const id = String(col.id);
         if (!id) return;
         if (!dir) table.setSorting([]);
         else table.setSorting([{ id, desc: dir === "desc" }]);
+        onSortingChange == null ? void 0 : onSortingChange((_c = (_b2 = (_a2 = table.getState().sorting) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) != null ? _c : null, dir);
       },
       headerExtras,
       columnStyles,
-      headerBelowRow,
-      loading,
-      onRowClick,
-      striped,
-      fillViewport,
-      viewportBottomOffset,
-      viewportMin,
-      viewportIncludeMarginTop,
-      take: pageSize,
-      skip,
-      totalItemsCount,
-      onPageChange,
-      size
+      headerBelowRow
     }
   );
 }

package/dist/components/table/tanstack.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { type TableProps, type TableVariant } from './Table';
+import { ViewMode } from '../../hooks/useTableSettings';
+type Filterable<T> = Array<keyof T>;
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles'> & {
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    filterable?: Filterable<T>;
+    onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
+    variant?: TableVariant;
+    viewMode?: ViewMode;
+};
+export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
+export {};

package/dist/{tanstack.js → components/table/tanstack.js}

@@ -1,60 +1,55 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
-import { Table } from './components/table/Table';
-import ColumnResizer from './components/table/components/column-resizer/ColumnResizer';
+import { Table } from './Table';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
 
+function getColumnId(def, index) {
+  const d = def;
+  if (d.id != null && String(d.id).length) return String(d.id);
+  if (d.accessorKey != null && String(d.accessorKey).length) return String(d.accessorKey);
+  return `col_${index}`;
+}
 function mapDefsToColumnItems(defs) {
-  if (!(defs == null ? void 0 : defs.length)) return [];
-  return defs.map((def) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const header = typeof def.header === "string" ? def.header : String((_b = (_a = def.accessorKey) != null ? _a : def.id) != null ? _b : "");
-    const accessor = def.accessorKey;
+  return defs.map((def, index) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    const id = getColumnId(def, index);
+    const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
     const cell = def.cell;
     let render;
     if (typeof cell === "function") {
       render = (row) => cell({
         row: { original: row },
-        getValue: () => accessor != null ? row[accessor] : accessorFn ? accessorFn(row) : void 0
+        getValue: () => accessorKey != null ? row[accessorKey] : accessorFn ? accessorFn(row) : void 0
       });
     } else if (accessorFn) {
       render = (row) => accessorFn(row);
-    } else if (accessor != null) {
-      render = (row) => row[accessor];
+    } else if (accessorKey != null) {
+      render = (row) => row[accessorKey];
+    } else {
+      render = () => null;
     }
     return {
-      header,
-      accessor,
-      sortable: (_c = def.enableSorting) != null ? _c : !!accessor,
+      id,
+      header: def.header,
+      accessor: accessorKey,
+      sortable: (_a = def.enableSorting) != null ? _a : !!accessorKey,
       render,
-      hidden: (_e = (_d = def.meta) == null ? void 0 : _d.hidden) != null ? _e : false,
-      align: (_g = (_f = def.meta) == null ? void 0 : _f.align) != null ? _g : void 0,
+      hidden: (_c = (_b = def.meta) == null ? void 0 : _b.hidden) != null ? _c : false,
+      align: (_e = (_d = def.meta) == null ? void 0 : _d.align) != null ? _e : void 0,
+      verticalAlign: (_g = (_f = def.meta) == null ? void 0 : _f.verticalAlign) != null ? _g : void 0,
       fitContent: (_i = (_h = def.meta) == null ? void 0 : _h.fitContent) != null ? _i : false,
-      fillWidth: (_k = (_j = def.meta) == null ? void 0 : _j.fillWidth) != null ? _k : false
+      emptyPlaceholder: (_k = (_j = def.meta) == null ? void 0 : _j.emptyPlaceholder) != null ? _k : "-",
+      allowWrap: (_m = (_l = def.meta) == null ? void 0 : _l.allowWrap) != null ? _m : false,
+      fillWidth: (_o = (_n = def.meta) == null ? void 0 : _n.fillWidth) != null ? _o : false,
+      severity: (_q = (_p = def.meta) == null ? void 0 : _p.severity) != null ? _q : void 0
     };
   });
 }
-function TanstackTable({
-  data,
-  dataKey,
-  columns,
-  filterable = [],
-  loading,
-  onRowClick,
-  striped,
-  fillViewport = false,
-  viewportBottomOffset = 0,
-  viewportMin = 120,
-  viewportIncludeMarginTop = false,
-  pageSize,
-  skip,
-  totalItemsCount,
-  onPageChange,
-  variant,
-  size
-}) {
+function TanstackTable(props) {
   var _a, _b;
+  const { data, dataKey, columns, filterable = [], onSortingChange, ...tableProps } = props;
   const [sorting, setSorting] = React.useState([]);
   const [columnFilters, setColumnFilters] = React.useState([]);
   const [columnSizing, setColumnSizing] = React.useState({});
@@ -83,42 +78,30 @@ function TanstackTable({
     [table, data]
   );
   const s = (_a = table.getState().sorting) == null ? void 0 : _a[0];
-  const sortBy = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
+  const sortById = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
   const sortDirection = s ? s.desc ? "desc" : "asc" : null;
   const gridTemplateColumns = React.useMemo(() => {
     return columnItems.filter((ci) => !ci.hidden).map((ci) => {
-      var _a2, _b2;
-      const id = String((_a2 = ci.accessor) != null ? _a2 : "");
-      const col = id ? table.getColumn(id) : void 0;
-      const w = (_b2 = col == null ? void 0 : col.getSize) == null ? void 0 : _b2.call(col);
+      var _a2;
+      const col = table.getColumn(ci.id);
+      const w = (_a2 = col == null ? void 0 : col.getSize) == null ? void 0 : _a2.call(col);
       if (ci.fillWidth) return "1fr";
       if (ci.fitContent) return "1%";
       return `${w != null ? w : 180}px`;
     }).join(" ");
   }, [columnItems, table, table.getState().columnSizing]);
   const columnStyles = React.useMemo(() => {
-    var _a2;
     const styles = {};
     for (const c of table.getAllLeafColumns()) {
       const id = c.id;
-      const key = (_a2 = c.columnDef.accessorKey) != null ? _a2 : id;
-      const ci = columnItems.find((x) => {
-        var _a3;
-        return String((_a3 = x.accessor) != null ? _a3 : "") === String(key);
-      });
+      const ci = columnItems.find((x) => x.id === id);
       if (ci == null ? void 0 : ci.fillWidth) {
-        styles[String(key)] = {
-          width: "auto",
-          minWidth: 0
-        };
+        styles[id] = { width: "auto", minWidth: 0 };
       } else if (ci == null ? void 0 : ci.fitContent) {
-        styles[String(key)] = {
-          width: "1%",
-          whiteSpace: "nowrap"
-        };
+        styles[id] = { width: "1%", whiteSpace: "nowrap" };
       } else {
         const w = c.getSize();
-        styles[String(key)] = { width: w, minWidth: w, maxWidth: w };
+        styles[id] = { width: w, minWidth: w, maxWidth: w };
       }
     }
     return styles;
@@ -139,66 +122,45 @@ function TanstackTable({
   );
   const headerBelowRow = React.useMemo(() => {
     if (!(filterable == null ? void 0 : filterable.length)) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns,
-          gap: 8
+    return /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns, gap: 8 }, children: columnItems.filter((ci) => !ci.hidden).map((ci) => {
+      var _a2;
+      const id = ci.id;
+      const isFilterable = filterable.includes(id);
+      if (!isFilterable) return /* @__PURE__ */ jsx("div", {}, id);
+      const col = table.getColumn(id);
+      const value = (_a2 = col == null ? void 0 : col.getFilterValue()) != null ? _a2 : "";
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          value,
+          placeholder: `Filter ${String(ci.header)}`,
+          onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
+          style: { width: "100%", padding: "4px 6px" }
         },
-        children: columnItems.map((ci) => {
-          var _a2, _b2;
-          const id = String((_a2 = ci.accessor) != null ? _a2 : "");
-          const isFilterable = id && filterable.includes(id);
-          if (!isFilterable) return /* @__PURE__ */ jsx("div", {}, id);
-          const col = table.getColumn(id);
-          const value = (_b2 = col == null ? void 0 : col.getFilterValue()) != null ? _b2 : "";
-          return /* @__PURE__ */ jsx(
-            "input",
-            {
-              value,
-              placeholder: `Filter ${ci.header}`,
-              onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
-              style: { width: "100%", padding: "4px 6px" }
-            },
-            id
-          );
-        })
-      }
-    );
+        id
+      );
+    }) });
   }, [columnItems, filterable, table, table.getState().columnFilters, gridTemplateColumns]);
   return /* @__PURE__ */ jsx(
     Table,
     {
+      ...tableProps,
       dataKey,
-      variant,
       data: visibleData,
       columns: columnItems,
-      sortBy,
+      sortById,
       sortDirection,
       onSortChange: (col, dir) => {
-        var _a2;
-        const id = String((_a2 = col.accessor) != null ? _a2 : "");
+        var _a2, _b2, _c;
+        const id = String(col.id);
         if (!id) return;
         if (!dir) table.setSorting([]);
         else table.setSorting([{ id, desc: dir === "desc" }]);
+        onSortingChange == null ? void 0 : onSortingChange((_c = (_b2 = (_a2 = table.getState().sorting) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) != null ? _c : null, dir);
       },
       headerExtras,
       columnStyles,
-      headerBelowRow,
-      loading,
-      onRowClick,
-      striped,
-      fillViewport,
-      viewportBottomOffset,
-      viewportMin,
-      viewportIncludeMarginTop,
-      take: pageSize,
-      skip,
-      totalItemsCount,
-      onPageChange,
-      size
+      headerBelowRow
     }
   );
 }