@cryptlex/web-components 3.6.0 → 3.7.0

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

@@ -1,33 +1,33 @@
 "use client";
-import { jsx as a, jsxs as c, Fragment as z } from "react/jsx-runtime";
-import { useState as U, useEffect as H, useMemo as N } from "react";
-import { cn as K } from "../../utils/index.es.js";
+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 "../../utils/form-context.es.js";
 import "../../utils/form-hook.es.js";
-import { useQuery as j, keepPreviousData as k } from "@tanstack/react-query";
-import { createColumnHelper as q, useReactTable as B, getCoreRowModel as G } from "@tanstack/react-table";
-import { Info as Q } from "lucide-react";
-import { ColumnPicker as W } from "./column-picker.es.js";
-import { PageSize as X } from "./page-size.es.js";
-import { Paginator as J } from "./paginator.es.js";
-import Y from "./table-actions.es.js";
-import { TableContent as Z } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as $, TABLE_ID_COLUMN as ee, TABLE_DEFAULT_DATE_COLUMNS as te } from "./table-commons.es.js";
-import { TooltipProvider as oe, Tooltip as ae, TooltipTrigger as ne, TooltipContent as ie } from "../ui/tooltip.es.js";
-const _ = "Actions";
-function Pe({
+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: f,
-  // tableName,
-  tableActions: V,
-  columnsToHideByDefault: p,
-  allowSelection: C,
-  className: F,
-  ...E
+  fetchFn: _,
+  tableName: V,
+  tableActions: F,
+  columnsToHideByDefault: f,
+  allowSelection: p,
+  className: E,
+  ...I
   // filterableFields,
 }) {
-  var P, w, x, A, T;
-  const [I, L] = U({
+  var y, P, w, x, A;
+  const [L, R] = H({
     sorting: [],
     // Sorting state
     columnFilters: [],
@@ -41,34 +41,35 @@ function Pe({
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
   }), l = (e) => {
-    L((t) => ({ ...t, ...e }));
+    R((t) => ({ ...t, ...e }));
   }, {
     sorting: g,
-    columnFilters: h,
-    searching: S,
-    columnVisibility: b,
-    rowSelection: y,
+    columnFilters: C,
+    searching: h,
+    columnVisibility: S,
+    rowSelection: b,
     pagination: m
-  } = I;
-  H(() => {
+  } = L;
+  K(() => {
     l({
       columnVisibility: {
         id: !1,
         updatedAt: !1,
-        ...p
+        ...f
       }
     });
-  }, [p]);
-  const n = j({
-    queryKey: [f.toString(), m, g, S.trim()],
-    queryFn: () => f(m, g, S.trim()),
-    placeholderData: k,
+  }, [f]);
+  const n = k({
+    // TODO, better way to construct this key
+    queryKey: [V, m, g, h.trim()],
+    queryFn: () => _(m, g, h.trim()),
+    placeholderData: q,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), R = q(), d = N(() => {
-    var v;
-    const e = (v = n.data) == null ? void 0 : v.data;
+  }), 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) => {
@@ -76,22 +77,22 @@ function Pe({
         t.add(s.key);
       });
     }), Array.from(t).map(
-      (i) => R.accessor(
+      (i) => D.accessor(
         (s) => {
-          var M;
-          const r = (M = s.metadata) == null ? void 0 : M.find(
-            (O) => O.key === i
+          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(oe, { delayDuration: 0, children: /* @__PURE__ */ c(ae, { children: [
-            /* @__PURE__ */ a(ne, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
+          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(Q, { size: 18, strokeWidth: "1px" })
+              /* @__PURE__ */ a(W, { size: 18, strokeWidth: "1px" })
             ] }) }),
-            /* @__PURE__ */ a(ie, { children: "Metadata Key" })
+            /* @__PURE__ */ a(le, { children: "Metadata Key" })
           ] }) }),
           // Use the metadata key as the column header
           id: i,
@@ -103,18 +104,18 @@ function Pe({
         }
       )
     );
-  }, [(P = n.data) == null ? void 0 : P.data]), D = N(() => [
-    ...C ? $ : [],
-    ...ee,
-    ...u.filter((t) => t.id !== _),
-    ...d.length ? d : [],
+  }, [(y = n.data) == null ? void 0 : y.data]), O = M(() => [
+    ...p ? ee : [],
     ...te,
-    ...u.filter((t) => t.id === _)
-  ], [u, d, (w = n.data) == null ? void 0 : w.data, C]), o = B({
-    data: ((x = n.data) == null ? void 0 : x.data) ?? [],
-    columns: D,
-    getCoreRowModel: G(),
-    rowCount: (A = n.data) == null ? void 0 : A.total,
+    ...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,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (e) => {
@@ -130,40 +131,40 @@ function Pe({
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
     onGlobalFilterChange: (e) => {
-      const t = typeof e == "function" ? e(h) : e;
+      const t = typeof e == "function" ? e(C) : e;
       l({ columnFilters: t });
     },
     onColumnVisibilityChange: (e) => {
-      const t = typeof e == "function" ? e(b) : e;
+      const t = typeof e == "function" ? e(S) : e;
       l({ columnVisibility: t });
     },
     onRowSelectionChange: (e) => {
-      const t = typeof e == "function" ? e(y) : e;
+      const t = typeof e == "function" ? e(b) : e;
       l({ rowSelection: t });
     },
     state: {
       sorting: g,
-      columnFilters: h,
-      columnVisibility: b,
+      columnFilters: C,
+      columnVisibility: S,
       pagination: m,
-      rowSelection: y
+      rowSelection: b
     },
     meta: {
       refetch: n.refetch
     }
   });
-  return /* @__PURE__ */ a(z, { children: /* @__PURE__ */ c("section", { ...E, className: K("flex flex-col bg-card", F), children: [
+  return /* @__PURE__ */ a(U, { children: /* @__PURE__ */ c("section", { ...I, className: j("flex flex-col bg-card", E), children: [
     /* @__PURE__ */ a(
-      Y,
+      Z,
       {
         dataQuery: n,
         getSelectedRowModel: o.getSelectedRowModel,
-        tableActions: V,
+        tableActions: F,
         handleSearching: (e) => l({ searching: e })
       }
     ),
     /* @__PURE__ */ a("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ a(
-      Z,
+      $,
       {
         getRowModel: o.getRowModel,
         getHeaderGroups: o.getHeaderGroups,
@@ -173,7 +174,7 @@ function Pe({
     /* @__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(
-          W,
+          X,
           {
             getAllColumns: o.getAllColumns,
             getIsAllColumnsVisible: o.getIsAllColumnsVisible,
@@ -181,7 +182,7 @@ function Pe({
           }
         ),
         /* @__PURE__ */ a(
-          X,
+          J,
           {
             size: o.getState().pagination.pageSize,
             onSelect: o.setPageSize
@@ -189,7 +190,7 @@ function Pe({
         )
       ] }),
       /* @__PURE__ */ a(
-        J,
+        Y,
         {
           firstPage: o.firstPage,
           previousPage: o.previousPage,
@@ -198,14 +199,14 @@ function Pe({
           lastPage: o.lastPage,
           nextPage: o.nextPage,
           getState: o.getState,
-          rowCount: ((T = n.data) == null ? void 0 : T.total) ?? 0
+          rowCount: ((A = n.data) == null ? void 0 : A.total) ?? 0
         }
       )
     ] })
   ] }) });
 }
 export {
-  _ as ACTIONS_COLUMN_ID,
-  Pe as DataTable
+  N as ACTIONS_COLUMN_ID,
+  we 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\t// tableName: 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\t// tableName,\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\tqueryKey: [fetchFn.toString(), 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","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":"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"}
+{"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":"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"}

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

@@ -7,6 +7,7 @@ const t = r(), i = [
     header: ({ table: e }) => /* @__PURE__ */ c(
       l,
       {
+        indeterminate: e.getIsSomeRowsSelected() && !e.getIsAllPageRowsSelected(),
         checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(),
         onChange: () => e.toggleAllPageRowsSelected(),
         "aria-label": "Select all"
@@ -27,7 +28,7 @@ const t = r(), i = [
   t.accessor("id", {
     header: () => "ID"
   })
-], A = [
+], S = [
   t.accessor("createdAt", {
     header: () => "Creation Date",
     cell: ({ row: e }) => {
@@ -47,7 +48,7 @@ const t = r(), i = [
 ];
 export {
   i as TABLE_CHECK_BOX_COLUMN,
-  A as TABLE_DEFAULT_DATE_COLUMNS,
+  S as TABLE_DEFAULT_DATE_COLUMNS,
   m as TABLE_ID_COLUMN
 };
 //# sourceMappingURL=table-commons.es.js.map

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\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,SACCF,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(\"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;"}

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

@@ -1,46 +1,46 @@
-import { jsxs as n, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { jsxs as o, jsx as e, Fragment as c } from "react/jsx-runtime";
 import { ACTIONS_COLUMN_ID as p } from "./data-table.es.js";
-import { Table as b, TableHeader as w, TableRow as u, TableHead as x, TableBody as N, TableCell as C } from "../ui/table.es.js";
-import { cn as h } from "../../utils/index.es.js";
+import { Table as b, TableHeader as w, TableRow as u, TableHead as x, TableBody as N, TableCell as v } from "../ui/table.es.js";
+import { cn as g } from "../../utils/index.es.js";
 import { flexRender as f } from "@tanstack/react-table";
-import { Info as T, ArrowDownNarrowWide as v, ArrowDownWideNarrow as y, ArrowUpDown as k } from "lucide-react";
+import { Info as C, ArrowDownNarrowWide as T, ArrowDownWideNarrow as y, ArrowUpDown as k } from "lucide-react";
 import { useCallback as D } from "react";
 import { Loader as z } from "../ui/loader.es.js";
 import { Button as I } from "../ui/button.es.js";
-const g = ({
+const h = ({
   children: a,
   className: l
-}) => /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e("div", { className: "relative h-full w-0", children: /* @__PURE__ */ e(
   "div",
   {
-    className: h(
+    className: g(
       "absolute top-0 bg-card z-20 h-table w-full flex items-center justify-center",
       l
     ),
     children: a
   }
-);
+) });
 function F({
   className: a,
   getHeaderGroups: l,
   getRowModel: s,
-  query: o
+  query: n
 }) {
   var m;
-  const i = D(() => o.isLoading, [o]);
-  return /* @__PURE__ */ n(b, { className: h("size-full relative h-table", a), children: [
-    i() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(z, {}) }),
-    !i() && s().rows.length === 0 && // Empty table
-    /* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !o.isFetching && (o.isError ? /* @__PURE__ */ n("span", { className: "flex gap-3 justify-center items-center", children: [
-      /* @__PURE__ */ e(T, {}),
+  const i = D(() => n.isLoading, [n]);
+  return /* @__PURE__ */ o(b, { className: g("size-full relative min-h-table", a), children: [
+    i() && /* @__PURE__ */ e(h, { className: "cursor-wait", children: /* @__PURE__ */ e(z, {}) }),
+    i() && s().rows.length === 0 && // Empty table
+    /* @__PURE__ */ e(h, { 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 = o.data) != null && m.data ? /* @__PURE__ */ e(c, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(c, { children: "No results found." })) }),
-    !i() && /* @__PURE__ */ n(c, { children: [
+    ] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(c, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(c, { children: "No results found." })) }),
+    !i() && /* @__PURE__ */ o(c, { children: [
       /* @__PURE__ */ e(w, { className: "sticky top-0 z-10", children: l().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__ */ n("span", { className: "inline-flex items-end gap-1", children: [
+          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()
@@ -53,7 +53,7 @@ function F({
                 onClick: t.column.getToggleSortingHandler(),
                 icon: () => {
                   const d = t.column.getIsSorted();
-                  return d === "asc" ? v : d === "desc" ? y : k;
+                  return d === "asc" ? T : d === "desc" ? y : k;
                 }
               }
             )
@@ -67,7 +67,7 @@ function F({
           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(
-            C,
+            v,
             {
               className: `
                     px-4 py-2 text-left text-sm whitespace-nowrap

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

@@ -1 +1 @@
-{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"absolute top-0 bg-card z-20 h-table w-full flex items-center justify-center\",\n\t\t\tclassName,\n\t\t)}\n\t>\n\t\t{children}\n\t</div>\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative h-table\", className)}>\n\t\t\t{/* Table overlay with loader */}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/* Table overlay for empty table */}\n\t\t\t{!isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\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{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\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\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-end gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto h-table relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap\n                    ${\n\t\t\t\t\t\t\t\t\t\t\tcell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t}\n                  `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","jsxs","Info","_a","Fragment","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;;AAyBA,MAAMA,IAAe,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AACD,MACC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACV;AAAA,MACAF;AAAA,IAAA;AAAA,IAGA,UAAAD;AAAA,EAAA;AACF;AAEM,SAASI,EAAa;AAAA,EAC5B,WAAAH;AAAA,EACA,iBAAAI;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AACD,GAKG;;AACF,QAAMC,IAAYC,EAAY,MACtBF,EAAM,WACX,CAACA,CAAK,CAAC;AAEV,2BACEG,GAAA,EAAe,WAAWP,EAAG,8BAA8BF,CAAS,GAEnE,UAAA;AAAA,IAAAO,OACA,gBAAAN,EAACH,GAAA,EAAa,WAAU,eACvB,UAAA,gBAAAG,EAACS,KAAO,EAAA,CACT;AAAA,IAGA,CAACH,EAAA,KAAeF,EAAA,EAAc,KAAK,WAAW;AAAA,IAE9C,gBAAAJ,EAACH,GAAA,EAAa,WAAU,sBACtB,UAAA,CAACQ,EAAM,eACNA,EAAM,UACN,gBAAAK,EAAC,QAAA,EAAK,WAAU,0CAGf,UAAA;AAAA,MAAA,gBAAAV,EAACW,GAAA,EAAK;AAAA,MACN,gBAAAX,EAAC,UAAK,UAAA,sEAAA,CAGN;AAAA,IAAA,EAAA,CACD,KACIY,IAAAP,EAAM,SAAN,QAAAO,EAAY,OAGhB,gBAAAZ,EAAAa,GAAA,EAAE,UAAA,kDAAA,CAA+C,2BAF/C,UAAA,oBAAA,CAAiB,IAItB;AAAA,IAEA,CAACP,EAAA,KACD,gBAAAI,EAAAG,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAb,EAACc,GAAA,EAAY,WAAU,qBACrB,UAAAX,EAAA,EAAkB,IAAI,CAACY,MACvB,gBAAAf,EAACgB,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAjB;AAAA,QAACkB;AAAA,QAAA;AAAA,UAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,UAExJ,UAAA,gBAAAT,EAAC,QAAA,EAAK,WAAU,+BACf,UAAA;AAAA,YAAA,gBAAAV,EAAC,QAAA,EACC,UAAAiB,EAAO,gBACL,OACAG;AAAA,cACAH,EAAO,OAAO,UAAU;AAAA,cACxBA,EAAO,WAAA;AAAA,YAAW,GAEtB;AAAA,YACCA,EAAO,OAAO,WAAA,KACd,gBAAAjB;AAAA,cAACqB;AAAA,cAAA;AAAA,gBACA,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,gBACvB,MAAM,MAAM;AACX,wBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,yBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,gBAAA;AAAA,cACR;AAAA,YAAA;AAAA,UACD,EAAA,CAEF;AAAA,QAAA;AAAA,QA9BKR,EAAO;AAAA,MAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,MACA,gBAAAf,EAAC0B,GAAA,EAAU,WAAU,2CACnB,cAAc,KAAK,WAAW,KAC9BtB,EAAA,EAAc,KAAK,IAAI,CAACuB,MACvB,gBAAA3B;AAAA,QAACgB;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,UAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAA5B;AAAA,YAAC6B;AAAA,YAAA;AAAA,cAEA,WAAW;AAAA;AAAA,sBAGXD,EAAK,OAAO,OAAOT,IAChB,gCACA,EACJ;AAAA;AAAA,cAGE,UAAAC;AAAA,gBACAQ,EAAK,OAAO,UAAU;AAAA,gBACtBA,EAAK,WAAA;AAAA,cAAW;AAAA,YACjB;AAAA,YAbKA,EAAK;AAAA,UAAA,CAeX;AAAA,QAAA;AAAA,QApBID,EAAI;AAAA,MAAA,CAsBV,EAAA,CACH;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GAEF;AAEF;"}
+{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<div className=\"relative h-full w-0\">\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 bg-card z-20 h-table w-full flex items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t</div>\n\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative min-h-table\", className)}>\n\t\t\t{/* Table overlay with loader */}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/* Table overlay for empty table */}\n\t\t\t{isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\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{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\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\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto h-table relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap\n                    ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t\t\t}\n                  `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","jsxs","Info","_a","Fragment","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":"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"}

package/dist/components/inputs/checkbox.es.js

@@ -1,24 +1,29 @@
-import { jsx as o, Fragment as i } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { cn as t } from "../../utils/index.es.js";
-import { useFieldContext as c } from "../../utils/form-context.es.js";
-function a({ className: n, checked: e, ...r }) {
-  return /* @__PURE__ */ o(i, { children: /* @__PURE__ */ o(
-    "input",
-    {
-      checked: e,
-      type: "checkbox",
-      className: t(
-        "appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        n
-      ),
-      ...r
-    }
-  ) });
+import { useFieldContext as a } from "../../utils/form-context.es.js";
+import { CircleDashed as l, Check as c } from "lucide-react";
+function u({ className: n, checked: e, indeterminate: i, ...r }) {
+  return /* @__PURE__ */ s("div", { className: "relative", children: [
+    i && /* @__PURE__ */ o(l, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
+    e && !i && /* @__PURE__ */ o(c, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        checked: e,
+        type: "checkbox",
+        className: t(
+          "appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          n
+        ),
+        ...r
+      }
+    )
+  ] });
 }
-function s({ ...n }) {
-  const e = c();
+function h({ ...n }) {
+  const e = a();
   return /* @__PURE__ */ o(
-    a,
+    u,
     {
       checked: e.state.value,
       onChange: () => e.handleChange(!e.state.value),
@@ -28,7 +33,7 @@ function s({ ...n }) {
   );
 }
 export {
-  a as Checkbox,
-  s as TfCheckbox
+  u as Checkbox,
+  h as TfCheckbox
 };
 //# sourceMappingURL=checkbox.es.js.map

package/dist/components/inputs/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> { }\n\nexport function Checkbox({ className, checked, ...props }: CheckboxProps) {\n\treturn (\n\t\t<>\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","props","jsx","Fragment","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;AAOO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,KAAwB;AACzE,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAAAF;AAAA,MACA,MAAK;AAAA,MACL,WAAWI;AAAA,QACV;AAAA,QACAL;AAAA,MAAA;AAAA,MAEA,GAAGE;AAAA,IAAA;AAAA,EAAA,GAEN;AAEF;AAOO,SAASI,EAAW,EAAE,GAAGJ,KAA0B;AACzD,QAAMK,IAAQC,EAAA;AAEd,SACC,gBAAAL;AAAA,IAACJ;AAAA,IAAA;AAAA,MACA,SAASQ,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport { Check, CircleDashed } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> {\n\tindeterminate?: boolean\n}\n\nexport function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps) {\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t{indeterminate && <CircleDashed className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t{checked && !indeterminate && <Check className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t</div>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","indeterminate","props","jsxs","jsx","CircleDashed","Check","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;;AAUO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,KAAwB;AACxF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAF,KAAiB,gBAAAG,EAACC,GAAA,EAAa,WAAU,sDAAA,CAAsD;AAAA,IAC/FL,KAAW,CAACC,KAAiB,gBAAAG,EAACE,GAAA,EAAM,WAAU,uDAAsD;AAAA,IACrG,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAAJ;AAAA,QACA,MAAK;AAAA,QACL,WAAWO;AAAA,UACV;AAAA,UACAR;AAAA,QAAA;AAAA,QAEA,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAED;AAEF;AAOO,SAASM,EAAW,EAAE,GAAGN,KAA0B;AACzD,QAAMO,IAAQC,EAAA;AAEd,SACC,gBAAAN;AAAA,IAACN;AAAA,IAAA;AAAA,MACA,SAASW,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/index.es.d.ts

@@ -125,9 +125,10 @@ export declare function CardHeader({ className, ...props }: React_2.ComponentPro
 
 export declare function CardTitle({ className, ...props }: React_2.ComponentProps<"h3">): JSX.Element;
 
-export declare function Checkbox({ className, checked, ...props }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps): JSX.Element;
 
 export declare interface CheckboxProps extends Omit<React_2.ComponentProps<"input">, "type" | "value"> {
+    indeterminate?: boolean;
 }
 
 declare type Client = ReturnType<typeof default_2<paths>>;
@@ -175,9 +176,10 @@ export declare type CtxPortals = "customer-portal" | "system-portal" | "reseller
 /** Application Names */
 export declare type CtxProjectName = "admin-portal" | "customer-portal" | "internal-portal" | "reseller-portal";
 
-export declare function DataTable<TData extends object>({ columns, fetchFn, tableActions, columnsToHideByDefault, allowSelection, className, ...props }: DataTableProps<TData>): JSX.Element;
+export declare function DataTable<TData extends object>({ columns, fetchFn, tableName, tableActions, columnsToHideByDefault, allowSelection, className, ...props }: DataTableProps<TData>): JSX.Element;
 
 export declare interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {
+    tableName: string;
     fetchFn: TableFetchFn<TData>;
     tableActions: TableActions;
     allowSelection: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",