@cryptlex/web-components 3.7.2 → 3.8.0

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

@@ -1,38 +1,37 @@
 "use client";
-import { jsx as a, jsxs as c, Fragment as U } from "react/jsx-runtime";
-import { useState as H, useEffect as K, useMemo as M } from "react";
-import { cn as j } from "../../utils/index.es.js";
+import { jsx as o, Fragment as g, jsxs as n } from "react/jsx-runtime";
+import { useId as z, useState as E, useEffect as O, useMemo as U } from "react";
+import { cn as A } from "../../utils/index.es.js";
 import "../../utils/form-context.es.js";
 import "../../utils/form-hook.es.js";
-import { useQuery as k, keepPreviousData as q } from "@tanstack/react-query";
-import { createColumnHelper as B, useReactTable as G, getCoreRowModel as Q } from "@tanstack/react-table";
-import { Info as W } from "lucide-react";
-import { ColumnPicker as X } from "./column-picker.es.js";
-import { PageSize as J } from "./page-size.es.js";
-import { Paginator as Y } from "./paginator.es.js";
-import Z from "./table-actions.es.js";
-import { TableContent as $ } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as ee, TABLE_ID_COLUMN as te, TABLE_DEFAULT_DATE_COLUMNS as oe } from "./table-commons.es.js";
-import { TooltipProvider as ae, Tooltip as ne, TooltipTrigger as ie, TooltipContent as le } from "../ui/tooltip.es.js";
-const N = "Actions";
-function we({
-  columns: u,
-  fetchFn: _,
-  tableName: V,
-  tableActions: F,
-  columnsToHideByDefault: f,
-  allowSelection: p,
-  className: E,
-  ...I
+import { useQuery as D, keepPreviousData as j } from "@tanstack/react-query";
+import { useReactTable as k, getCoreRowModel as q } from "@tanstack/react-table";
+import { Info as B } from "lucide-react";
+import { ColumnPicker as G } from "./column-picker.es.js";
+import { PageSize as H } from "./page-size.es.js";
+import { Paginator as K } from "./paginator.es.js";
+import Q from "./table-actions.es.js";
+import { TableContent as W } from "./table-content.es.js";
+import { TABLE_CHECK_BOX_COLUMN as X, TABLE_ID_COLUMN as Y, TABLE_DEFAULT_DATE_COLUMNS as J } from "./table-commons.es.js";
+import { Loader as Z } from "../ui/loader.es.js";
+const y = "Actions";
+function fe({
+  columns: l,
+  fetchFn: m,
+  tableActions: M,
+  columnsToHideByDefault: d = {},
+  allowSelection: f = !1,
+  className: _,
+  ...L
   // filterableFields,
 }) {
-  var y, P, w, x, A;
-  const [L, R] = H({
+  var w, P, S, x, N;
+  const F = z(), [T, R] = E({
     sorting: [],
     // Sorting state
     columnFilters: [],
-    // Filters for columns
-    searching: "",
+    // Filters for columns, not to be confused with the filters that get sent to the Web API.
+    search: "",
     // Search query state
     columnVisibility: {},
     // Visibility of columns
@@ -40,173 +39,163 @@ function we({
     // Row selection state
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
-  }), l = (e) => {
-    R((t) => ({ ...t, ...e }));
+  }), i = (e) => {
+    R((r) => ({ ...r, ...e }));
   }, {
-    sorting: g,
-    columnFilters: C,
-    searching: h,
-    columnVisibility: S,
+    sorting: c,
+    columnFilters: p,
+    search: h,
+    columnVisibility: C,
     rowSelection: b,
-    pagination: m
-  } = L;
-  K(() => {
-    l({
+    pagination: u
+  } = T;
+  O(() => {
+    i({
       columnVisibility: {
         id: !1,
         updatedAt: !1,
-        ...f
+        ...d
       }
     });
-  }, [f]);
-  const n = k({
-    // TODO, better way to construct this key
-    queryKey: [V, m, g, h.trim()],
-    queryFn: () => _(m, g, h.trim()),
-    placeholderData: q,
+  }, [d]);
+  const a = D({
+    queryKey: [F, u, c, h.trim()],
+    queryFn: () => m(u, c, h.trim()),
+    placeholderData: j,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), D = B(), d = M(() => {
-    var T;
-    const e = (T = n.data) == null ? void 0 : T.data;
-    if (!(e != null && e.length)) return [];
-    const t = /* @__PURE__ */ new Set();
-    return e.forEach((i) => {
-      "metadata" in i && i.metadata && Array.isArray(i.metadata) && i.metadata.forEach((s) => {
-        t.add(s.key);
-      });
-    }), Array.from(t).map(
-      (i) => D.accessor(
-        (s) => {
-          var v;
-          const r = (v = s.metadata) == null ? void 0 : v.find(
-            (z) => z.key === i
-          );
-          return r == null ? void 0 : r.value;
-        },
-        {
-          header: () => /* @__PURE__ */ a(ae, { delayDuration: 0, children: /* @__PURE__ */ c(ne, { children: [
-            /* @__PURE__ */ a(ie, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
-              i,
-              " ",
-              /* @__PURE__ */ a(W, { size: 18, strokeWidth: "1px" })
-            ] }) }),
-            /* @__PURE__ */ a(le, { children: "Metadata Key" })
-          ] }) }),
-          // Use the metadata key as the column header
-          id: i,
-          enableSorting: !1,
-          cell: (s) => {
-            const r = s.getValue();
-            return r == null ? "" : String(r);
-          }
-        }
-      )
-    );
-  }, [(y = n.data) == null ? void 0 : y.data]), O = M(() => [
-    ...p ? ee : [],
-    ...te,
-    ...u.filter((t) => t.id !== N),
-    ...d.length ? d : [],
-    ...oe,
-    ...u.filter((t) => t.id === N)
-  ], [u, d, (P = n.data) == null ? void 0 : P.data, p]), o = G({
-    data: ((w = n.data) == null ? void 0 : w.data) ?? [],
-    columns: O,
-    getCoreRowModel: Q(),
-    rowCount: (x = n.data) == null ? void 0 : x.total,
+  }), I = U(() => [
+    ...f ? X : [],
+    ...Y,
+    ...l.filter((r) => r.id !== y),
+    // ...(metadataColumns.length ? metadataColumns : []),
+    ...J,
+    ...l.filter((r) => r.id === y)
+  ], [l, (w = a.data) == null ? void 0 : w.data, f]);
+  function V(e) {
+    return typeof e == "function";
+  }
+  function s(e, r) {
+    return V(e) ? e(r) : e;
+  }
+  const t = k({
+    data: ((P = a.data) == null ? void 0 : P.data) ?? [],
+    columns: I,
+    getCoreRowModel: q(),
+    rowCount: (S = a.data) == null ? void 0 : S.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (e) => {
-      const t = typeof e == "function" ? e(m) : e;
-      l({ pagination: t });
+      i({ pagination: s(e, u) });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
     onSortingChange: (e) => {
-      const t = typeof e == "function" ? e(g) : e;
-      l({ sorting: t, rowSelection: {} });
+      i({ sorting: s(e, c), rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
     onGlobalFilterChange: (e) => {
-      const t = typeof e == "function" ? e(C) : e;
-      l({ columnFilters: t });
+      i({ columnFilters: s(e, p) });
     },
     onColumnVisibilityChange: (e) => {
-      const t = typeof e == "function" ? e(S) : e;
-      l({ columnVisibility: t });
+      i({ columnVisibility: s(e, C) });
     },
     onRowSelectionChange: (e) => {
-      const t = typeof e == "function" ? e(b) : e;
-      l({ rowSelection: t });
+      i({ rowSelection: s(e, b) });
     },
     state: {
-      sorting: g,
-      columnFilters: C,
-      columnVisibility: S,
-      pagination: m,
+      sorting: c,
+      columnFilters: p,
+      columnVisibility: C,
+      pagination: u,
       rowSelection: b
     },
     meta: {
-      refetch: n.refetch
+      refetch: a.refetch
     }
   });
-  return /* @__PURE__ */ a(U, { children: /* @__PURE__ */ c("section", { ...I, className: j("flex flex-col bg-card", E), children: [
-    /* @__PURE__ */ a(
-      Z,
+  return /* @__PURE__ */ o(g, { children: /* @__PURE__ */ n("section", { ...L, className: A("flex flex-col bg-card", _), children: [
+    /* @__PURE__ */ o(
+      Q,
       {
-        dataQuery: n,
-        getSelectedRowModel: o.getSelectedRowModel,
-        tableActions: F,
-        handleSearching: (e) => l({ searching: e })
+        dataQuery: a,
+        getSelectedRowModel: t.getSelectedRowModel,
+        tableActions: M,
+        handleSearching: (e) => i({ search: e })
       }
     ),
-    /* @__PURE__ */ a("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ a(
-      $,
-      {
-        getRowModel: o.getRowModel,
-        getHeaderGroups: o.getHeaderGroups,
-        query: n
-      }
-    ) }),
-    /* @__PURE__ */ c("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
-      /* @__PURE__ */ c("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ a(
-          X,
+    /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [
+      a.isLoading && /* @__PURE__ */ o(v, { className: "cursor-wait", children: /* @__PURE__ */ o(Z, {}) }),
+      !a.isLoading && t.getRowModel().rows.length === 0 && // Empty table
+      /* @__PURE__ */ o(v, { className: "cursor-not-allowed", children: !a.isFetching && (a.isError ? /* @__PURE__ */ n("span", { className: "flex gap-3 justify-center items-center", children: [
+        /* @__PURE__ */ o(B, {}),
+        /* @__PURE__ */ o("span", { children: "You don't have the required permissions. Please contact your admin." })
+      ] }) : (x = a.data) != null && x.data ? /* @__PURE__ */ o(g, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ o(g, { children: "No results found." })) }),
+      !a.isLoading && t.getRowModel().rows.length !== 0 && /* @__PURE__ */ o(
+        W,
+        {
+          className: "size-full",
+          getRowModel: t.getRowModel,
+          getHeaderGroups: t.getHeaderGroups
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
+      /* @__PURE__ */ n("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ o(
+          G,
           {
-            getAllColumns: o.getAllColumns,
-            getIsAllColumnsVisible: o.getIsAllColumnsVisible,
-            toggleAllColumnsVisible: o.toggleAllColumnsVisible
+            getAllColumns: t.getAllColumns,
+            getIsAllColumnsVisible: t.getIsAllColumnsVisible,
+            toggleAllColumnsVisible: t.toggleAllColumnsVisible
           }
         ),
-        /* @__PURE__ */ a(
-          J,
+        /* @__PURE__ */ o(
+          H,
           {
-            size: o.getState().pagination.pageSize,
-            onSelect: o.setPageSize
+            size: t.getState().pagination.pageSize,
+            onSelect: t.setPageSize
           }
         )
       ] }),
-      /* @__PURE__ */ a(
-        Y,
+      /* @__PURE__ */ o(
+        K,
         {
-          firstPage: o.firstPage,
-          previousPage: o.previousPage,
-          getCanNextPage: o.getCanNextPage,
-          getCanPreviousPage: o.getCanPreviousPage,
-          lastPage: o.lastPage,
-          nextPage: o.nextPage,
-          getState: o.getState,
-          rowCount: ((A = n.data) == null ? void 0 : A.total) ?? 0
+          firstPage: t.firstPage,
+          previousPage: t.previousPage,
+          getCanNextPage: t.getCanNextPage,
+          getCanPreviousPage: t.getCanPreviousPage,
+          lastPage: t.lastPage,
+          nextPage: t.nextPage,
+          getState: t.getState,
+          rowCount: ((N = a.data) == null ? void 0 : N.total) ?? 0
         }
       )
     ] })
   ] }) });
 }
+function v({
+  children: l,
+  className: m
+}) {
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ o(
+      "span",
+      {
+        className: A(
+          "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
+          m
+        ),
+        children: l
+      }
+    ),
+    /* @__PURE__ */ o("span", { className: "relative h-full w-0 block" })
+  ] });
+}
 export {
-  N as ACTIONS_COLUMN_ID,
-  we as DataTable
+  y as ACTIONS_COLUMN_ID,
+  fe as DataTable
 };
 //# sourceMappingURL=data-table.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\ttype ColumnFiltersState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype PaginationState,\n\ttype SortingState,\n\ttype TableOptions,\n\tuseReactTable,\n\ttype VisibilityState,\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { MetadataDto, TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\t// \n\t// columns: ColumnDef<TData>[]; // Columns for the table\n\ttableName: string; // Table name used as query key\n\tfetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\t// filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n\tcolumnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableName,\n\ttableActions,\n\tcolumnsToHideByDefault,\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, setTableState] = useState({\n\t\tsorting: [] as SortingState, // Sorting state\n\t\tcolumnFilters: [] as ColumnFiltersState, // Filters for columns\n\t\tsearching: \"\", // Search query state\n\t\tcolumnVisibility: {} as VisibilityState, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<typeof tableState>) => {\n\t\tsetTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearching,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n\t// const formatedFilters = useMemo(() => {\n\t//   return filters.reduce((acc, filter) => {\n\t//     const { property, value, operator } = filter;\n\t//     if (!acc[property]) {\n\t//       acc[property] = {};\n\t//     }\n\t//     acc[property][operator] = value;\n\t//     return acc;\n\t//   }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\t// TODO, better way to construct this key\n\t\tqueryKey: [tableName, pagination, sorting, searching.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searching.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\tconst metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\t\t// set of all the keys present in a given view\n\t\tconst allMetadataKeys = new Set<string>();\n\n\t\t// Collect all unique metadata keys\n\t\tdata.forEach((row: TData) => {\n\t\t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t\t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t\t\t\t\tallMetadataKeys.add(meta.key);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\t// Generate columns for all unique metadata keys\n\t\treturn Array.from(allMetadataKeys).map((key) =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row: TData) => {\n\t\t\t\t\t// Find the metadata object with the matching key\n\t\t\t\t\tconst metadataEntry = row.metadata?.find(\n\t\t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t\t\t\t\t);\n\t\t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\theader: () => (\n\t\t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t\t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t), // Use the metadata key as the column header\n\t\t\t\t\tid: key,\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t),\n\t\t);\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, metadataColumns, query.data?.data, allowSelection]);\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tconst newPagination =\n\t\t\t\ttypeof updater === \"function\" ? updater(pagination) : updater;\n\t\t\tupdateTableState({ pagination: newPagination });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tconst newSorting =\n\t\t\t\ttypeof updater === \"function\" ? updater(sorting) : updater;\n\t\t\t// Reset selection when sorting.\n\t\t\tupdateTableState({ sorting: newSorting, rowSelection: {} });\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tconst newFilters =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnFilters) : updater;\n\t\t\tupdateTableState({ columnFilters: newFilters });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tconst newVisibility =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnVisibility) : updater;\n\t\t\tupdateTableState({ columnVisibility: newVisibility });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tconst newSelection =\n\t\t\t\ttypeof updater === \"function\" ? updater(rowSelection) : updater;\n\t\t\tupdateTableState({ rowSelection: newSelection });\n\t\t},\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t\tcolumnVisibility,\n\t\t\tpagination,\n\t\t\trowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ searching: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","allowSelection","className","props","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","table","useReactTable","_c","getCoreRowModel","_d","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","Fragment","cn","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":";;;;;;;;;;;;;;;;AAkCO,MAAMA,IAAoB;AAa1B,SAASC,GAAgC;AAAA,EAC/C,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AAAA;AAEJ,GAA0B;;AAIzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS;AAAA,IAC5C,SAAS,CAAA;AAAA;AAAA,IACT,eAAe,CAAA;AAAA;AAAA,IACf,WAAW;AAAA;AAAA,IACX,kBAAkB,CAAA;AAAA;AAAA,IAClB,cAAc,CAAA;AAAA;AAAA,IACd,YAAY,EAAE,WAAW,GAAG,UAAU,GAAA;AAAA;AAAA,EAAG,CACzC,GAGKC,IAAmB,CAACC,MAAwC;AACjE,IAAAH,EAAc,CAACI,OAAU,EAAE,GAAGA,GAAM,GAAGD,IAAU;AAAA,EAAA,GAI5C;AAAA,IACL,SAAAE;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACGX;AAMJ,EAAAY,EAAU,MAAM;AACf,IAAAT,EAAiB;AAAA,MAChB,kBAAkB;AAAA,QACjB,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,GAAGP;AAAA,MAAA;AAAA,IACJ,CACA;AAAA,EAAA,GACC,CAACA,CAAsB,CAAC;AAe3B,QAAMiB,IAAQC,EAAS;AAAA;AAAA,IAEtB,UAAU,CAACpB,GAAWiB,GAAYL,GAASE,EAAU,MAAM;AAAA,IAC3D,SAAS,MAAMf,EAAQkB,GAAYL,GAASE,EAAU,MAAM;AAAA,IAC5D,iBAAiBO;AAAA;AAAA,IACjB,OAAO;AAAA,IACP,sBAAsB;AAAA,EAAA,CACtB,GAKKC,IAAeC,EAAA,GACfC,IAAkBC,EAA4B,MAAM;;AACzD,UAAMC,KAAOC,IAAAR,EAAM,SAAN,gBAAAQ,EAAY;AACzB,QAAI,EAACD,KAAA,QAAAA,EAAM,QAAQ,QAAO,CAAA;AAE1B,UAAME,wBAAsB,IAAA;AAG5B,WAAAF,EAAK,QAAQ,CAACG,MAAe;AAC5B,MAAI,cAAcA,KAAOA,EAAI,YAAY,MAAM,QAAQA,EAAI,QAAQ,KAClEA,EAAI,SAAS,QAAQ,CAACC,MAAsB;AAC3C,QAAAF,EAAgB,IAAIE,EAAK,GAAG;AAAA,MAAA,CAC5B;AAAA,IACF,CACA,GAGM,MAAM,KAAKF,CAAe,EAAE;AAAA,MAAI,CAACG,MACvCT,EAAa;AAAA,QACZ,CAACO,MAAe;;AAEf,gBAAMG,KAAgBL,IAAAE,EAAI,aAAJ,gBAAAF,EAAc;AAAA,YACnC,CAACG,MAAsBA,EAAK,QAAQC;AAAA;AAErC,iBAAOC,KAAA,gBAAAA,EAAe;AAAA,QAAA;AAAA,QAEvB;AAAA,UACC,QAAQ,MACP,gBAAAC,EAACC,MAAgB,eAAe,GAC/B,4BAACC,IAAA,EACA,UAAA;AAAA,YAAA,gBAAAF,EAACG,MAAe,SAAO,IACtB,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,cAAAN;AAAA,cAAI;AAAA,cAAC,gBAAAE,EAACK,GAAA,EAAK,MAAM,IAAI,aAAa,MAAA,CAAO;AAAA,YAAA,EAAA,CAC3C,EAAA,CACD;AAAA,YACA,gBAAAL,EAACM,MAAe,UAAA,eAAA,CAAY;AAAA,UAAA,EAAA,CAC7B,EAAA,CACD;AAAA;AAAA,UAED,IAAIR;AAAA,UACJ,eAAe;AAAA,UACf,MAAM,CAACS,MAAS;AACf,kBAAMC,IAAQD,EAAK,SAAA;AAEnB,mBAAIC,KAAU,OAAoC,KAE3C,OAAOA,CAAK;AAAA,UAAA;AAAA,QACpB;AAAA,MACD;AAAA,IACD;AAAA,EACD,GACE,EAACd,IAAAR,EAAM,SAAN,gBAAAQ,EAAY,IAAI,CAAC,GAQfe,IAAkBjB,EAA+B,MACrC;AAAA,IAChB,GAAItB,IAAiBwC,KAAyB,CAAA;AAAA,IAC9C,GAAGC;AAAA,IACH,GAAG9C,EAAQ,OAAO,CAAC+C,MAAQA,EAAI,OAAOjD,CAAiB;AAAA,IACvD,GAAI4B,EAAgB,SAASA,IAAkB,CAAA;AAAA,IAC/C,GAAGsB;AAAA,IACH,GAAGhD,EAAQ,OAAO,CAAC+C,MAAQA,EAAI,OAAOjD,CAAiB;AAAA,EAAA,GAItD,CAACE,GAAS0B,IAAiBuB,IAAA5B,EAAM,SAAN,gBAAA4B,EAAY,MAAM5C,CAAc,CAAC,GAGzD6C,IAAQC,EAAc;AAAA,IAC3B,QAAMC,IAAA/B,EAAM,SAAN,gBAAA+B,EAAY,SAAQ,CAAA;AAAA,IAC1B,SAASR;AAAA,IACT,iBAAiBS,EAAA;AAAA,IACjB,WAAUC,IAAAjC,EAAM,SAAN,gBAAAiC,EAAY;AAAA,IACtB,kBAAkB;AAAA;AAAA,IAClB,oBAAoB,CAACC,MAAY;AAChC,YAAMC,IACL,OAAOD,KAAY,aAAaA,EAAQpC,CAAU,IAAIoC;AACvD,MAAA5C,EAAiB,EAAE,YAAY6C,GAAe;AAAA,IAAA;AAAA,IAE/C,eAAe;AAAA;AAAA,IACf,iBAAiB,CAACD,MAAY;AAC7B,YAAME,IACL,OAAOF,KAAY,aAAaA,EAAQzC,CAAO,IAAIyC;AAEpD,MAAA5C,EAAiB,EAAE,SAAS8C,GAAY,cAAc,CAAA,GAAI;AAAA,IAAA;AAAA,IAE3D,iBAAiB;AAAA;AAAA,IACjB,sBAAsB,CAACF,MAAY;AAClC,YAAMG,IACL,OAAOH,KAAY,aAAaA,EAAQxC,CAAa,IAAIwC;AAC1D,MAAA5C,EAAiB,EAAE,eAAe+C,GAAY;AAAA,IAAA;AAAA,IAE/C,0BAA0B,CAACH,MAAY;AACtC,YAAMI,IACL,OAAOJ,KAAY,aAAaA,EAAQtC,CAAgB,IAAIsC;AAC7D,MAAA5C,EAAiB,EAAE,kBAAkBgD,GAAe;AAAA,IAAA;AAAA,IAErD,sBAAsB,CAACJ,MAAY;AAClC,YAAMK,IACL,OAAOL,KAAY,aAAaA,EAAQrC,CAAY,IAAIqC;AACzD,MAAA5C,EAAiB,EAAE,cAAciD,GAAc;AAAA,IAAA;AAAA,IAEhD,OAAO;AAAA,MACN,SAAA9C;AAAA,MACA,eAAAC;AAAA,MACA,kBAAAE;AAAA,MACA,YAAAE;AAAA,MACA,cAAAD;AAAA,IAAA;AAAA,IAED,MAAM;AAAA,MACL,SAASG,EAAM;AAAA,IAAA;AAAA,EAChB,CACA;AAED,SACC,gBAAAc,EAAA0B,GAAA,EAYC,4BAAC,WAAA,EAAS,GAAGtD,GAAO,WAAWuD,EAAG,yBAAyBxD,CAAS,GACnE,UAAA;AAAA,IAAA,gBAAA6B;AAAA,MAAC4B;AAAA,MAAA;AAAA,QACA,WAAW1C;AAAA,QACX,qBAAqB6B,EAAM;AAAA,QAC3B,cAAA/C;AAAA,QACA,iBAAiB,CAACwC,MAAUhC,EAAiB,EAAE,WAAWgC,GAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAIlE,gBAAAR,EAAC,OAAA,EAAI,WAAU,sCAAqC,UAAU,GAC7D,UAAA,gBAAAA;AAAA,MAAC6B;AAAA,MAAA;AAAA,QACA,aAAad,EAAM;AAAA,QACnB,iBAAiBA,EAAM;AAAA,QACvB,OAAA7B;AAAA,MAAA;AAAA,IAAA,GAEF;AAAA,IAGA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,gEACd,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,cACd,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAAC8B;AAAA,UAAA;AAAA,YACA,eAAef,EAAM;AAAA,YACrB,wBAAwBA,EAAM;AAAA,YAC9B,yBAAyBA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhC,gBAAAf;AAAA,UAAC+B;AAAA,UAAA;AAAA,YACA,MAAMhB,EAAM,SAAA,EAAW,WAAW;AAAA,YAClC,UAAUA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB,GACD;AAAA,MACA,gBAAAf;AAAA,QAACgC;AAAA,QAAA;AAAA,UACA,WAAWjB,EAAM;AAAA,UACjB,cAAcA,EAAM;AAAA,UACpB,gBAAgBA,EAAM;AAAA,UACtB,oBAAoBA,EAAM;AAAA,UAC1B,UAAUA,EAAM;AAAA,UAChB,UAAUA,EAAM;AAAA,UAChB,UAAUA,EAAM;AAAA,UAChB,YAAUkB,IAAA/C,EAAM,SAAN,gBAAA+C,EAAY,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC,EAAA,CACD;AAAA,EAAA,EAAA,CACD,EAAA,CACD;AAEF;"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tLoader,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\tgetCoreRowModel,\n\ttype TableOptions,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport React, { useEffect, useId, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\n\nexport type DataTableState = Pick<TableState, 'sorting' | 'columnFilters' | 'columnVisibility' | 'rowSelection' | 'pagination'> & { search: string };\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\tfetchFn: TableFetchFn<TData>;\n\ttableActions: TableActions;\n\tallowSelection?: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableActions,\n\tcolumnsToHideByDefault = {},\n\tallowSelection = false,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\tconst id = useId();\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\tsorting: [], // Sorting state\n\t\tcolumnFilters: [], // Filters for columns, not to be confused with the filters that get sent to the Web API.\n\t\tsearch: \"\", // Search query state\n\t\tcolumnVisibility: {}, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearch,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// TODO\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\n\t// TODO, implement filters\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\t// const formatedFilters = useMemo(() => {\n\t//   return filters.reduce((acc, filter) => {\n\t//     const { property, value, operator } = filter;\n\t//     if (!acc[property]) {\n\t//       acc[property] = {};\n\t//     }\n\t//     acc[property][operator] = value;\n\t//     return acc;\n\t//   }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, search.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, search.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\t// const columnHelper = createColumnHelper<TData>();\n\t// const metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t// \tconst data = query.data?.data;\n\t// \tif (!data?.length) return [];\n\t// \t// set of all the keys present in a given view\n\t// \tconst allMetadataKeys = new Set<string>();\n\n\t// \t// Collect all unique metadata keys\n\t// \tdata.forEach((row: TData) => {\n\t// \t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t// \t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t// \t\t\t\tallMetadataKeys.add(meta.key);\n\t// \t\t\t});\n\t// \t\t}\n\t// \t});\n\n\t// \t// Generate columns for all unique metadata keys\n\t// \treturn Array.from(allMetadataKeys).map((key) =>\n\t// \t\tcolumnHelper.accessor(\n\t// \t\t\t(row: TData) => {\n\t// \t\t\t\t// Find the metadata object with the matching key\n\t// \t\t\t\tconst metadataEntry = row.metadata?.find(\n\t// \t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t// \t\t\t\t);\n\t// \t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t// \t\t\t},\n\t// \t\t\t{\n\t// \t\t\t\theader: () => (\n\t// \t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t// \t\t\t\t\t\t<Tooltip>\n\t// \t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t// \t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t// \t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t// \t\t\t\t\t\t\t\t</span>\n\t// \t\t\t\t\t\t\t</TooltipTrigger>\n\t// \t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t// \t\t\t\t\t\t</Tooltip>\n\t// \t\t\t\t\t</TooltipProvider>\n\t// \t\t\t\t), // Use the metadata key as the column header\n\t// \t\t\t\tid: key,\n\t// \t\t\t\tenableSorting: false,\n\t// \t\t\t\tcell: (info) => {\n\t// \t\t\t\t\tconst value = info.getValue();\n\t// \t\t\t\t\t// Handle null/undefined values\n\t// \t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t// \t\t\t\t\t// For primitive types, return the string representation\n\t// \t\t\t\t\treturn String(value);\n\t// \t\t\t\t},\n\t// \t\t\t},\n\t// \t\t),\n\t// \t);\n\t// }, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t// ...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, query.data?.data, allowSelection]);\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tupdateTableState({ sorting: resolveUpdater(updater, sorting), rowSelection: {} }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tupdateTableState({ columnFilters: resolveUpdater(updater, columnFilters) });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tupdateTableState({ columnVisibility: resolveUpdater(updater, columnVisibility) });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tupdateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnFilters: columnFilters,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ search: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n\t\t\t\t\t{/* Table overlay with loader */}\n\t\t\t\t\t{query.isLoading && (\n\t\t\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Table overlay for empty table */}\n\t\t\t\t\t{!query.isLoading && table.getRowModel().rows.length === 0 && (\n\t\t\t\t\t\t// Empty table\n\t\t\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t\t\t{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{!query.isLoading && table.getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t<TableContent\n\t\t\t\t\t\t\tclassName=\"size-full\"\n\t\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\t/>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n\nfunction TableOverlay({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) {\n\treturn (\n\t\t<>\n\t\t\t<span\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{/* Keep something in document flow with the correct height */}\n\t\t\t<span className=\"relative h-full w-0 block\" />\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableActions","columnsToHideByDefault","allowSelection","className","props","id","useId","tableState","_setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","search","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","extendedColumns","useMemo","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_a","isUpdaterFunction","updater","resolveUpdater","currentValue","table","useReactTable","_b","getCoreRowModel","_c","jsx","Fragment","cn","Actions","value","jsxs","TableOverlay","Loader","Info","_d","TableContent","ColumnPicker","PageSize","Paginator","_e","children"],"mappings":"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"}

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

@@ -40,7 +40,7 @@ const t = r(), i = [
   t.accessor("updatedAt", {
     header: () => "Last Updated",
     cell: ({ row: e }) => {
-      const a = e.getValue("createdAt");
+      const a = e.getValue("updatedAt");
       return o(a);
     },
     enableHiding: !1

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

@@ -1 +1 @@
-{"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tindeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAeF,EAAM,sBAAA,KAA2B,CAACA,EAAM,yBAAA;AAAA,QACvD,SACCA,EAAM,8BAA8BA,EAAM,0BAAA;AAAA,QAE3C,UAAU,MAAMA,EAAM,0BAAA;AAAA,QACtB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAIb,MAAM,CAAC,EAAE,KAAAG,EAAA,MACR,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAASC,EAAI,cAAA;AAAA,QACb,UAAU,MAAMA,EAAI,eAAA;AAAA,QACpB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,eAAe;AAAA,IACf,cAAc;AAAA,EAAA,CACd;AACF,GAEaC,IAAkB;AAAA,EAC9BP,EAAG,SAAS,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAAA,CACd;AACF,GACaQ,IAA6B;AAAA,EACzCR,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AAAA,EACDT,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AACF;"}
+{"version":3,"file":"table-commons.es.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["import { FormatDate } from \"@/components/data-table/table-utils/index\";\nimport { Checkbox } from \"@/components/inputs\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tindeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"updatedAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn FormatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","FormatDate"],"mappings":";;;;AAIA,MAAMA,IAAKC,EAAA,GACEC,IAAyB;AAAA,EACrCF,EAAG,SAAS,YAAY;AAAA,IACvB,QAAQ,CAAC,EAAE,OAAAG,EAAA,MACV,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,eAAeF,EAAM,sBAAA,KAA2B,CAACA,EAAM,yBAAA;AAAA,QACvD,SACCA,EAAM,8BAA8BA,EAAM,0BAAA;AAAA,QAE3C,UAAU,MAAMA,EAAM,0BAAA;AAAA,QACtB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAIb,MAAM,CAAC,EAAE,KAAAG,EAAA,MACR,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAASC,EAAI,cAAA;AAAA,QACb,UAAU,MAAMA,EAAI,eAAA;AAAA,QACpB,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,eAAe;AAAA,IACf,cAAc;AAAA,EAAA,CACd;AACF,GAEaC,IAAkB;AAAA,EAC9BP,EAAG,SAAS,MAAM;AAAA,IACjB,QAAQ,MAAM;AAAA,EAAA,CACd;AACF,GACaQ,IAA6B;AAAA,EACzCR,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AAAA,EACDT,EAAG,SAAS,aAAa;AAAA,IACxB,QAAQ,MAAM;AAAA,IACd,MAAM,CAAC,EAAE,KAAAM,QAAU;AAClB,YAAMG,IAAOH,EAAI,SAAS,WAAW;AAIrC,aAAOI,EAAWD,CAAI;AAAA,IAAA;AAAA,IAEvB,cAAc;AAAA,EAAA,CACd;AACF;"}

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

@@ -1,98 +1,65 @@
-import { jsxs as o, jsx as e, Fragment as a } from "react/jsx-runtime";
-import { ACTIONS_COLUMN_ID as p } from "./data-table.es.js";
-import { Table as w, TableHeader as b, TableRow as u, TableHead as x, TableBody as N, TableCell as v } from "../ui/table.es.js";
-import { cn as h } from "../../utils/index.es.js";
-import { flexRender as f } from "@tanstack/react-table";
-import { Info as C, ArrowDownNarrowWide as T, ArrowDownWideNarrow as y, ArrowUpDown as k } from "lucide-react";
-import { useCallback as z } from "react";
-import { Loader as D } from "../ui/loader.es.js";
-import { Button as I } from "../ui/button.es.js";
-const g = ({
-  children: l,
-  className: i
-}) => /* @__PURE__ */ o(a, { children: [
-  /* @__PURE__ */ e(
-    "div",
-    {
-      className: h(
-        "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
-        i
-      ),
-      children: l
-    }
-  ),
-  /* @__PURE__ */ e("div", { className: "relative h-full w-0" })
-] });
-function F({
-  className: l,
-  getHeaderGroups: i,
-  getRowModel: s,
-  query: n
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { ACTIONS_COLUMN_ID as l } from "./data-table.es.js";
+import { Table as d, TableHeader as p, TableRow as a, TableHead as u, TableBody as f, TableCell as g } from "../ui/table.es.js";
+import { flexRender as s } from "@tanstack/react-table";
+import { ArrowDownNarrowWide as x, ArrowDownWideNarrow as w, ArrowUpDown as b } from "lucide-react";
+import { Button as h } from "../ui/button.es.js";
+function k({
+  className: c,
+  getHeaderGroups: m,
+  getRowModel: r
 }) {
-  var m;
-  const c = z(() => n.isLoading, [n]);
-  return /* @__PURE__ */ o(w, { className: h("size-full relative min-h-table", l), children: [
-    c() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(D, {}) }),
-    !c() && s().rows.length === 0 && // Empty table
-    /* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !n.isFetching && (n.isError ? /* @__PURE__ */ o("span", { className: "flex gap-3 justify-center items-center", children: [
-      /* @__PURE__ */ e(C, {}),
-      /* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
-    ] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(a, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(a, { children: "No results found." })) }),
-    !c() && s().rows.length !== 0 && /* @__PURE__ */ o(a, { children: [
-      /* @__PURE__ */ e(b, { className: "sticky top-0 z-10", children: i().map((r) => /* @__PURE__ */ e(u, { children: r.headers.map((t) => /* @__PURE__ */ e(
-        x,
-        {
-          className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === p ? "sticky right-0 z-50 text-center" : ""}`,
-          children: /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1", children: [
-            /* @__PURE__ */ e("span", { children: t.isPlaceholder ? null : f(
-              t.column.columnDef.header,
-              t.getContext()
-            ) }),
-            t.column.getCanSort() && /* @__PURE__ */ e(
-              I,
-              {
-                size: "icon",
-                variant: "ghost",
-                onClick: t.column.getToggleSortingHandler(),
-                icon: () => {
-                  const d = t.column.getIsSorted();
-                  return d === "asc" ? T : d === "desc" ? y : k;
-                }
+  return /* @__PURE__ */ i(d, { className: c, children: [
+    /* @__PURE__ */ t(p, { className: "sticky top-0 z-10", children: m().map((o) => /* @__PURE__ */ t(a, { children: o.headers.map((e) => /* @__PURE__ */ t(
+      u,
+      {
+        className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${e.id === l ? "sticky right-0 z-50 text-center" : ""}`,
+        children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ t("span", { children: e.isPlaceholder ? null : s(
+            e.column.columnDef.header,
+            e.getContext()
+          ) }),
+          e.column.getCanSort() && /* @__PURE__ */ t(
+            h,
+            {
+              size: "icon",
+              variant: "ghost",
+              onClick: e.column.getToggleSortingHandler(),
+              icon: () => {
+                const n = e.column.getIsSorted();
+                return n === "asc" ? x : n === "desc" ? w : b;
               }
-            )
-          ] })
-        },
-        t.id
-      )) }, r.id)) }),
-      /* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto relative", children: s().rows.length !== 0 && s().rows.map((r) => (
-        // TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform
-        /* @__PURE__ */ e(
-          u,
+            }
+          )
+        ] })
+      },
+      e.id
+    )) }, o.id)) }),
+    /* @__PURE__ */ t(f, { className: "flex-1 overflow-y-auto relative", children: r().rows.length !== 0 && r().rows.map((o) => /* @__PURE__ */ t(
+      a,
+      {
+        className: "h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
+        "data-state": o.getIsSelected() && "selected",
+        children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(
+          g,
           {
-            className: "transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
-            "data-state": r.getIsSelected() && "selected",
-            children: r.getVisibleCells().map((t) => /* @__PURE__ */ e(
-              v,
-              {
-                className: `
+            className: `
                     px-4 py-2 text-left text-sm whitespace-nowrap
-                    ${t.column.id === p ? "sticky right-0 w-20 bg-card" : ""}
+                    ${e.column.id === l ? "sticky right-0 w-20 bg-card" : ""}
                   `,
-                children: f(
-                  t.column.columnDef.cell,
-                  t.getContext()
-                )
-              },
-              t.id
-            ))
+            children: s(
+              e.column.columnDef.cell,
+              e.getContext()
+            )
           },
-          r.id
-        )
-      )) })
-    ] })
+          e.id
+        ))
+      },
+      o.id
+    )) })
   ] });
 }
 export {
-  F as TableContent
+  k as TableContent
 };
 //# sourceMappingURL=table-content.es.js.map