@cryptlex/web-components 2.0.2 → 3.1.0

package/README.md

@@ -4,14 +4,10 @@ A React component library for Cryptlex.
 
 # Usage
 
-In your root React file or global CSS, import the index.css
-
-TS
-```ts
-import '@cryptlex/web-components/index.css';
-```
+In your global CSS file, import the index.css and add the web-components as an explicit source for Tailwind.
 
 CSS
 ```css
-@import url('@cryptlex/web-components/index.css');
+@import '@cryptlex/web-components/index.css';
+@source "@cryptlex/web-components";
 ```

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

@@ -1,79 +1,50 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import { Button as c } from "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import "../ui/card.es.js";
-import "../ui/chart.es.js";
-import { Checkbox as l } from "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import { Columns3 as a } from "lucide-react";
-import { useState as d } from "react";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import { Label as s } from "../ui/label.es.js";
-import "@tanstack/react-router";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import { Popover as h, PopoverTrigger as f, PopoverContent as g } from "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import { SearchInput as u } from "../ui/search-input.es.js";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/textarea.es.js";
-import "../ui/tooltip.es.js";
-import { getResourceDisplayName as C } from "./table-utils/constants.es.js";
-function ie({ table: r }) {
-  const [t, p] = d(""), m = r.getAllColumns().filter(
-    (e) => e.getCanHide() && e.id.toLowerCase().includes(t.toLowerCase())
-  );
-  return /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ o(f, { asChild: !0, children: /* @__PURE__ */ o(c, { icon: a, variant: "outline", size: "sm", children: "Columns" }) }),
-    /* @__PURE__ */ i(g, { className: "flex flex-col gap-4 divide-y-1", children: [
-      /* @__PURE__ */ o("div", { className: " flex gap-1 justify-center items-center sticky top-0", children: /* @__PURE__ */ o(u, { value: t, onChange: (e) => p(e) }) }),
-      /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ o(
-          l,
-          {
-            id: "selectAll",
-            checked: r.getIsAllColumnsVisible(),
-            onCheckedChange: () => r.toggleAllColumnsVisible()
-          }
-        ),
-        /* @__PURE__ */ o(s, { className: "font-normal cursor-pointer", htmlFor: "selectAll", children: "Show All Columns" })
-      ] }),
-      /* @__PURE__ */ i("div", { className: "flex flex-col gap-3 max-h-96 overflow-auto", children: [
-        m.map((e) => /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ o(
-            l,
-            {
-              id: e.id,
-              checked: e.getIsVisible(),
-              onCheckedChange: (n) => e.toggleVisibility(!!n)
-            }
-          ),
-          /* @__PURE__ */ o(s, { className: "font-normal cursor-pointer", htmlFor: e.id, children: C(e.id, "admin-portal") })
-        ] }, e.id)),
-        " ",
-        m.length === 0 && /* @__PURE__ */ o("p", { className: "text-gray-500 text-sm italic", children: "No matching columns found." })
-      ] })
-    ] })
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "react";
+import "../../utils/form-context.es.js";
+import "../../utils/form-hook.es.js";
+import { Columns3 as m } from "lucide-react";
+import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as a, DropdownMenuGroup as c, DropdownMenuCheckboxItem as n } from "../ui/dropdown-menu.es.js";
+import { Button as s } from "../ui/button.es.js";
+import { getResourceDisplayName as h } from "./table-utils/constants.es.js";
+function x({
+  toggleAllColumnsVisible: o,
+  getIsAllColumnsVisible: t,
+  getAllColumns: d
+}) {
+  return /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ r(u, { asChild: !0, children: /* @__PURE__ */ r(s, { icon: () => m, variant: "outline", children: "Columns" }) }),
+    /* @__PURE__ */ r(a, { children: /* @__PURE__ */ i(c, { children: [
+      /* @__PURE__ */ r(
+        n,
+        {
+          className: "italic",
+          onSelect: (e) => {
+            e.preventDefault(), o();
+          },
+          checked: t(),
+          children: "(Select all)"
+        }
+      ),
+      d().map((e) => /* @__PURE__ */ i(
+        n,
+        {
+          onSelect: (l) => {
+            l.preventDefault(), e.toggleVisibility();
+          },
+          disabled: !e.getCanHide(),
+          checked: e.getIsVisible(),
+          children: [
+            e.getIsSorted(),
+            " ",
+            h(e.id, "admin-portal")
+          ]
+        },
+        e.id
+      ))
+    ] }) })
   ] });
 }
 export {
-  ie as ColumnPicker
+  x as ColumnPicker
 };
 //# sourceMappingURL=column-picker.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\" size=\"sm\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAMC,GAAU,SAAQ,WAAU,MAAK,MAAK,UAAA,UAEpD,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n\tButton,\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuTrigger,\n\tgetResourceDisplayName,\n} from \"@/index\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { Columns3 } from \"lucide-react\";\n\nexport function ColumnPicker({\n\ttoggleAllColumnsVisible,\n\tgetIsAllColumnsVisible,\n\tgetAllColumns,\n}: {\n\ttoggleAllColumnsVisible: () => void;\n\tgetIsAllColumnsVisible: () => boolean;\n\tgetAllColumns: () => Column<any, any>[];\n}) {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Button icon={() => Columns3} variant={\"outline\"}>\n\t\t\t\t\tColumns\n\t\t\t\t</Button>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\tclassName=\"italic\"\n\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\ttoggleAllColumnsVisible();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tchecked={getIsAllColumnsVisible()}\n\t\t\t\t\t>\n\t\t\t\t\t\t(Select all)\n\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t{getAllColumns().map((col) => (\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tcol.toggleVisibility();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\tdisabled={!col.getCanHide()}\n\t\t\t\t\t\t\tchecked={col.getIsVisible()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{col.getIsSorted()}{\" \"}\n\t\t\t\t\t\t\t{getResourceDisplayName(col.id, \"admin-portal\")}\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t))}\n\t\t\t\t\t{/* TODO getResourceDisplayName needs some review here. */}\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"],"names":["ColumnPicker","toggleAllColumnsVisible","getIsAllColumnsVisible","getAllColumns","DropdownMenu","jsx","DropdownMenuTrigger","Button","Columns3","DropdownMenuContent","jsxs","DropdownMenuGroup","DropdownMenuCheckboxItem","col","e","getResourceDisplayName"],"mappings":";;;;;;;;AAYO,SAASA,EAAa;AAAA,EAC5B,yBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,eAAAC;AACD,GAIG;AACF,2BACEC,GACA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAoB,SAAO,IAC3B,UAAC,gBAAAD,EAAAE,GAAA,EAAO,MAAM,MAAMC,GAAU,SAAS,WAAW,UAAA,UAElD,CAAA,GACD;AAAA,IACA,gBAAAH,EAACI,GACA,EAAA,UAAA,gBAAAC,EAACC,GACA,EAAA,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AAChB,cAAE,eAAe,GACOX,EAAA;AAAA,UACzB;AAAA,UACA,SAASC,EAAuB;AAAA,UAChC,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACCC,IAAgB,IAAI,CAACU,MACrB,gBAAAH;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,UAAU,CAACE,MAAM;AAChB,YAAAA,EAAE,eAAe,GACjBD,EAAI,iBAAiB;AAAA,UACtB;AAAA,UAEA,UAAU,CAACA,EAAI,WAAW;AAAA,UAC1B,SAASA,EAAI,aAAa;AAAA,UAEzB,UAAA;AAAA,YAAAA,EAAI,YAAY;AAAA,YAAG;AAAA,YACnBE,EAAuBF,EAAI,IAAI,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QALzCA,EAAI;AAAA,MAOV,CAAA;AAAA,IAAA,EAAA,CAEF,EACD,CAAA;AAAA,EAAA,GACD;AAEF;"}

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

@@ -1,62 +1,29 @@
 "use client";
-import { jsx as i, jsxs as c, Fragment as H } from "react/jsx-runtime";
-import { TableFilter as W } from "./table-filter.es.js";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import "../ui/card.es.js";
-import "../ui/chart.es.js";
-import "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import { Info as G } from "lucide-react";
-import { useState as M, useEffect as X, useMemo as d } from "react";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import "../ui/label.es.js";
-import "@tanstack/react-router";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/textarea.es.js";
-import { TooltipProvider as J, Tooltip as Y, TooltipTrigger as Z, TooltipContent as $ } from "../ui/tooltip.es.js";
-import { useQuery as Q, keepPreviousData as tt } from "@tanstack/react-query";
-import { createColumnHelper as ot, useReactTable as et, getCoreRowModel as it } from "@tanstack/react-table";
-import { useDebounce as rt } from "use-debounce";
-import { ColumnPicker as nt } from "./column-picker.es.js";
-import { PageSize as at } from "./page-size.es.js";
-import { Paginator as lt } from "./paginator.es.js";
-import mt from "./table-actions.es.js";
-import { TableContent as st } from "./table-content.es.js";
-import { TABLE_CHECK_BOX_COLUMN as ct, TABLE_ID_COLUMN as pt, TABLE_DEFAULT_DATE_COLUMNS as ft } from "./table-commons.es.js";
-import { DEFAULT_FILTERABLE_FIELDS as ut } from "./table-utils/constants.es.js";
-const N = "actions_button";
-function lo({
-  columns: g,
-  fetchFn: O,
-  tableName: I,
-  tableActions: h,
-  columnsToHideByDefault: S,
-  filterableFields: V
+import { jsx as n, jsxs as c, Fragment as D } from "react/jsx-runtime";
+import { useState as O, useEffect as z, useMemo as M } from "react";
+import "../../utils/form-context.es.js";
+import "../../utils/form-hook.es.js";
+import { useQuery as U, keepPreviousData as H } from "@tanstack/react-query";
+import { createColumnHelper as K, useReactTable as j, getCoreRowModel as k } from "@tanstack/react-table";
+import { Info as q } from "lucide-react";
+import { ColumnPicker as B } from "./column-picker.es.js";
+import { PageSize as G } from "./page-size.es.js";
+import { Paginator as Q } from "./paginator.es.js";
+import W from "./table-actions.es.js";
+import { TableContent as X } from "./table-content.es.js";
+import { TABLE_CHECK_BOX_COLUMN as J, TABLE_ID_COLUMN as Y, TABLE_DEFAULT_DATE_COLUMNS as Z } from "./table-commons.es.js";
+import { TooltipProvider as $, Tooltip as ee, TooltipTrigger as te, TooltipContent as oe } from "../ui/tooltip.es.js";
+const N = "Actions";
+function he({
+  columns: u,
+  fetchFn: _,
+  tableName: V,
+  tableActions: d,
+  columnsToHideByDefault: p
+  // filterableFields,
 }) {
-  var D, E, L, v, x, P;
-  const [U, R] = M({
+  var P, b, y, x, v;
+  const [F, E] = O({
     sorting: [],
     // Sorting state
     columnFilters: [],
@@ -69,148 +36,172 @@ function lo({
     // Row selection state
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
-  }), a = (t) => {
-    R((o) => ({ ...o, ...t }));
-  }, { sorting: p, columnFilters: w, searching: y, columnVisibility: T, rowSelection: f, pagination: u } = U, [j] = rt(y.trim(), 300);
-  X(() => {
-    a({
-      columnVisibility: { id: !1, updatedAt: !1, ...S }
+  }), i = (e) => {
+    E((t) => ({ ...t, ...e }));
+  }, {
+    sorting: g,
+    columnFilters: C,
+    searching: h,
+    columnVisibility: S,
+    rowSelection: w,
+    pagination: m
+  } = F;
+  z(() => {
+    i({
+      columnVisibility: {
+        id: !1,
+        updatedAt: !1,
+        ...p
+      }
     });
-  }, [S]);
-  const [C, k] = M([]), F = d(() => C.reduce((t, o) => {
-    const { property: r, value: n, operator: l } = o;
-    return t[r] || (t[r] = {}), t[r][l] = n, t;
-  }, {}), [C]), e = Q({
-    queryKey: [I, u, p, j, F],
-    queryFn: () => O(u, p, y.trim(), F),
-    placeholderData: tt,
+  }, [p]);
+  const a = U({
+    queryKey: [V, m, g, h.trim()],
+    queryFn: () => _(m, g, h.trim()),
+    placeholderData: H,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), B = ot(), b = d(() => {
-    var r;
-    const t = (r = e.data) == null ? void 0 : r.data;
-    if (!(t != null && t.length)) return [];
-    const o = /* @__PURE__ */ new Set();
-    return t.forEach((n) => {
-      n.metadata && n.metadata.forEach((l) => {
-        o.add(l.key);
+  }), I = K(), f = M(() => {
+    var T;
+    const e = (T = a.data) == null ? void 0 : T.data;
+    if (!(e != null && e.length)) return [];
+    const t = /* @__PURE__ */ new Set();
+    return e.forEach((r) => {
+      r.metadata && r.metadata.forEach((s) => {
+        t.add(s.key);
       });
-    }), Array.from(o).map(
-      (n) => B.accessor(
-        (l) => {
+    }), Array.from(t).map(
+      (r) => I.accessor(
+        (s) => {
           var A;
-          const m = (A = l.metadata) == null ? void 0 : A.find((q) => q.key === n);
-          return m == null ? void 0 : m.value;
+          const l = (A = s.metadata) == null ? void 0 : A.find(
+            (R) => R.key === r
+          );
+          return l == null ? void 0 : l.value;
         },
         {
-          header: () => /* @__PURE__ */ i(J, { delayDuration: 0, children: /* @__PURE__ */ c(Y, { children: [
-            /* @__PURE__ */ i(Z, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
-              n,
+          header: () => /* @__PURE__ */ n($, { delayDuration: 0, children: /* @__PURE__ */ c(ee, { children: [
+            /* @__PURE__ */ n(te, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
+              r,
               " ",
-              /* @__PURE__ */ i(G, { size: 18, strokeWidth: "1px" })
+              /* @__PURE__ */ n(q, { size: 18, strokeWidth: "1px" })
             ] }) }),
-            /* @__PURE__ */ i($, { children: "Metadata Key" })
+            /* @__PURE__ */ n(oe, { children: "Metadata Key" })
           ] }) }),
           // Use the metadata key as the column header
-          id: n,
+          id: r,
           enableSorting: !1,
-          cell: (l) => {
-            const m = l.getValue();
-            return m == null ? "" : String(m);
+          cell: (s) => {
+            const l = s.getValue();
+            return l == null ? "" : String(l);
           }
         }
       )
     );
-  }, [(D = e.data) == null ? void 0 : D.data]), _ = d(() => [
-    ...h.selection ? ct : [],
-    ...pt,
-    ...g.filter((o) => o.id !== N),
-    ...b.length ? b : [],
-    ...ft,
-    ...g.filter((o) => o.id === N)
-  ], [g, b, (E = e.data) == null ? void 0 : E.data, h.selection]), K = d(
-    () => Object.entries(f).map((t) => {
-      var o, r;
-      return (r = (o = e == null ? void 0 : e.data) == null ? void 0 : o.data) == null ? void 0 : r[t[0]];
-    }),
-    [(L = e == null ? void 0 : e.data) == null ? void 0 : L.data, f]
-  ), s = et({
-    data: ((v = e.data) == null ? void 0 : v.data) ?? [],
-    columns: _,
-    getCoreRowModel: it(),
-    rowCount: (x = e.data) == null ? void 0 : x.total,
+  }, [(P = a.data) == null ? void 0 : P.data]), L = M(() => [
+    ...d.selection ? J : [],
+    ...Y,
+    ...u.filter((t) => t.id !== N),
+    ...f.length ? f : [],
+    ...Z,
+    ...u.filter((t) => t.id === N)
+  ], [u, f, (b = a.data) == null ? void 0 : b.data, d.selection]), o = j({
+    data: ((y = a.data) == null ? void 0 : y.data) ?? [],
+    columns: L,
+    getCoreRowModel: k(),
+    rowCount: (x = a.data) == null ? void 0 : x.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
-    onPaginationChange: (t) => {
-      const o = typeof t == "function" ? t(u) : t;
-      a({ pagination: o });
+    onPaginationChange: (e) => {
+      const t = typeof e == "function" ? e(m) : e;
+      i({ pagination: t });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
-    onSortingChange: (t) => {
-      const o = typeof t == "function" ? t(p) : t;
-      a({ sorting: o, rowSelection: {} });
+    onSortingChange: (e) => {
+      const t = typeof e == "function" ? e(g) : e;
+      i({ sorting: t, rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
-    onGlobalFilterChange: (t) => {
-      const o = typeof t == "function" ? t(w) : t;
-      a({ columnFilters: o });
+    onGlobalFilterChange: (e) => {
+      const t = typeof e == "function" ? e(C) : e;
+      i({ columnFilters: t });
     },
-    onColumnVisibilityChange: (t) => {
-      const o = typeof t == "function" ? t(T) : t;
-      a({ columnVisibility: o });
+    onColumnVisibilityChange: (e) => {
+      const t = typeof e == "function" ? e(S) : e;
+      i({ columnVisibility: t });
     },
-    onRowSelectionChange: (t) => {
-      const o = typeof t == "function" ? t(f) : t;
-      a({ rowSelection: o });
+    onRowSelectionChange: (e) => {
+      const t = typeof e == "function" ? e(w) : e;
+      i({ rowSelection: t });
     },
     state: {
-      sorting: p,
-      columnFilters: w,
-      columnVisibility: T,
-      pagination: u,
-      rowSelection: f
+      sorting: g,
+      columnFilters: C,
+      columnVisibility: S,
+      pagination: m,
+      rowSelection: w
     },
     meta: {
-      refetch: e.refetch
+      refetch: a.refetch
     }
-  }), z = {
-    key: "",
-    stateData: K
-  };
-  return /* @__PURE__ */ c(H, { children: [
-    /* @__PURE__ */ i(
+  });
+  return /* @__PURE__ */ n(D, { children: /* @__PURE__ */ c("div", { className: "bg-card", children: [
+    /* @__PURE__ */ n(
       W,
       {
-        filterableProperties: { ...V, ...ut },
-        filters: C,
-        onFiltersChange: k
+        dataQuery: a,
+        getSelectedRowModel: o.getSelectedRowModel,
+        tableActions: d,
+        handleSearching: (e) => i({ searching: e })
       }
     ),
-    /* @__PURE__ */ i(
-      mt,
+    /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x", tabIndex: 0, children: /* @__PURE__ */ n(
+      X,
       {
-        dataQuery: e,
-        table: s,
-        tableActions: h,
-        stateToPass: z,
-        handleSearching: (t) => a({ searching: t })
+        getRowModel: o.getRowModel,
+        getHeaderGroups: o.getHeaderGroups,
+        query: a
       }
-    ),
-    /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: e }) }),
-    /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
+    ) }),
+    /* @__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__ */ i(nt, { table: s }),
-        /* @__PURE__ */ i(at, { table: s })
+        /* @__PURE__ */ n(
+          B,
+          {
+            getAllColumns: o.getAllColumns,
+            getIsAllColumnsVisible: o.getIsAllColumnsVisible,
+            toggleAllColumnsVisible: o.toggleAllColumnsVisible
+          }
+        ),
+        /* @__PURE__ */ n(
+          G,
+          {
+            size: o.getState().pagination.pageSize,
+            onSelect: o.setPageSize
+          }
+        )
       ] }),
-      /* @__PURE__ */ i(lt, { table: s, rowCount: ((P = e.data) == null ? void 0 : P.total) ?? 0 })
+      /* @__PURE__ */ n(
+        Q,
+        {
+          firstPage: o.firstPage,
+          previousPage: o.previousPage,
+          getCanNextPage: o.getCanNextPage,
+          getCanPreviousPage: o.getCanPreviousPage,
+          lastPage: o.lastPage,
+          nextPage: o.nextPage,
+          getState: o.getState,
+          rowCount: ((v = a.data) == null ? void 0 : v.total) ?? 0
+        }
+      )
     ] })
-  ] });
+  ] }) });
 }
 export {
   N as ACTIONS_COLUMN_ID,
-  lo as DataTable
+  he 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';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\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 { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"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\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\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, TValue = any> {\n\tcolumns: ColumnDef<TData, TValue>[]; // 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\t// filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n\tcolumnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n\tcolumns,\n\tfetchFn,\n\ttableName,\n\ttableActions,\n\tcolumnsToHideByDefault,\n\t// filterableFields,\n}: DataTableProps<TData, TValue>) {\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: [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\t// Create column helpers for dynamic column generation\n\tconst columnHelper = createColumnHelper<TData>();\n\tconst metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\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 (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...(tableActions.selection ? 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, tableActions.selection]);\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{/* <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<div className=\"bg-card\">\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\" 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</div>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","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","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":"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"}