@tsed/react-formio 3.0.0-rc.16 → 3.0.0-rc.17

package/dist/molecules/table/filters/TextFieldFilter.js

@@ -1,26 +1,26 @@
-import { jsxs as r, Fragment as a, jsx as i } from "react/jsx-runtime";
-import { registerComponent as c, getComponent as d } from "../../../registries/components.js";
+import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { registerComponent as m, getComponent as d } from "../../../registries/components.js";
 import { useUniqValues as p } from "../hooks/useUniqValues.js";
-function F({ header: t, options: e }) {
-  const o = d("InputText"), m = t.column.getFilterValue(), s = p({ header: t }), n = `data_list_${t.column.id}`;
-  return /* @__PURE__ */ r(a, { children: [
-    !e.disableDatalist && /* @__PURE__ */ i("datalist", { id: n, children: s.map((l) => /* @__PURE__ */ i("option", { value: l }, l)) }),
-    /* @__PURE__ */ i(
+function F({ header: l, options: n }) {
+  const o = d("InputText"), u = l.column.getFilterValue(), a = p({ header: l }), i = `data_list_${l.column.id}`;
+  return /* @__PURE__ */ r(c, { children: [
+    !n.disableDatalist && /* @__PURE__ */ e("datalist", { id: i, children: a.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label || t.value }, t.value)) }),
+    /* @__PURE__ */ e(
       o,
       {
         size: "small",
-        placeholder: `Filter by ${t.column.columnDef.header}`,
-        ...e,
-        name: `filter_${t.column.id}`,
-        "data-testid": `filter_${t.column.id}`,
-        value: m ?? "",
-        list: n,
-        onChange: (l, u) => t.column.setFilterValue(u)
+        placeholder: `Filter by ${l.column.columnDef.header}`,
+        ...n,
+        name: `filter_${l.column.id}`,
+        "data-testid": `filter_${l.column.id}`,
+        value: u ?? "",
+        list: i,
+        onChange: (t, s) => l.column.setFilterValue(s)
       }
     )
   ] });
 }
-c("Filter.text", F);
+m("Filter.text", F);
 export {
   F as TextFieldFilter
 };

package/dist/molecules/table/filters/TextFieldFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((value: any) => (\n            <option value={value} key={value} />\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","value","_","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,GAC3CO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,UAAA,EAAO,OAAAC,KAAmBA,CAAO,CACnC,GACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGD,MAAUX,EAAO,OAAO,eAAeW,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAE,EAAkB,eAAed,CAAe;"}
+{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((item) => (\n            <option value={item.value} key={item.value}>\n              {item.label || item.value}\n            </option>\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","item","_","value","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,GAC3CO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,YAAO,OAAOC,EAAK,OACjB,UAAAA,EAAK,SAASA,EAAK,MAAA,GADUA,EAAK,KAErC,CACD,EAAA,CACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGC,MAAUb,EAAO,OAAO,eAAea,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAC,EAAkB,eAAef,CAAe;"}

package/dist/molecules/table/hooks/useTable.d.ts

@@ -1,7 +1,7 @@
 import { TableOptions, TableState } from '@tanstack/react-table';
 import { FormOptions, Operation } from '../../../interfaces';
 import { JSONRecord } from '../../../interfaces/JSONRecord.js';
-export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick"> {
     operations: Operation<Data>[];
     metadata?: Record<string, unknown>;
     i18n?: FormOptions["i18n"];

package/dist/molecules/table/hooks/useTable.js

@@ -1,35 +1,35 @@
-import { jsx as R } from "react/jsx-runtime";
-import { useReactTable as f, getFacetedUniqueValues as w, getFacetedRowModel as M, getSortedRowModel as C, getFilteredRowModel as S, getPaginationRowModel as b, getCoreRowModel as h } from "@tanstack/react-table";
+import { jsx as w } from "react/jsx-runtime";
+import { useReactTable as M, getFacetedUniqueValues as s, getFacetedRowModel as f, getSortedRowModel as C, getFilteredRowModel as S, getPaginationRowModel as b, getCoreRowModel as h } from "@tanstack/react-table";
 import { useEffect as v } from "react";
 import { useI18n as O } from "../../../hooks/useI18n.js";
-import { getComponent as I } from "../../../registries/components.js";
-function z(e) {
-  const n = I("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
+import { getComponent as V } from "../../../registries/components.js";
+function x(e) {
+  const n = V("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
     {
       id: "operations",
       header: t("Operations"),
-      cell: (F) => /* @__PURE__ */ R(n, { info: F, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
+      cell: (R) => /* @__PURE__ */ w(n, { info: R, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
     }
-  ] : [], o = f({
+  ] : [], o = M({
     ...e,
     columns: [...e.columns, ...i],
     getCoreRowModel: h(),
     getPaginationRowModel: b(),
-    getFilteredRowModel: e.manualFiltering ? void 0 : S(),
-    getSortedRowModel: e.manualSorting ? void 0 : C(),
-    getFacetedRowModel: e.manualFaceted ? void 0 : M(),
+    getFilteredRowModel: e.manualFiltering ? void 0 : e.getFilteredRowModel || S(),
+    getSortedRowModel: e.manualSorting ? void 0 : e.getSortedRowModel || C(),
+    getFacetedRowModel: e.manualFaceted ? void 0 : e.getFacetedRowModel || f(),
     // client-side faceting
-    getFacetedUniqueValues: e.manualFaceted ? void 0 : w()
+    getFacetedUniqueValues: e.manualFaceted ? void 0 : e.getFacetedUniqueValues || s()
     // generate unique values for select filter/autocomplete
-  }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: r, columnVisibility: u, globalFilter: s } = o.getState();
+  }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: u, columnVisibility: r, globalFilter: F } = o.getState();
   return v(() => {
     e.onChange && e.onChange(o.getState());
-  }, [a, l, d, g, c, m, r, u, s]), {
+  }, [a, l, d, g, c, m, u, r, F]), {
     i18n: t,
     tableInstance: o
   };
 }
 export {
-  z as useTable
+  x as useTable
 };
 //# sourceMappingURL=useTable.js.map

package/dist/molecules/table/hooks/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { type FormOptions, Operation } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, \"getCoreRowModel\" | \"onClick\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (data: Data, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const { t } = useI18n(props.i18n);\n\n  // const [pagination, setPagination] = useState({\n  //   pageIndex: 0, //initial page index\n  //   pageSize: 10 //default page size\n  // });\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: t(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n: t,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","useI18n","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;;AA8BO,SAASA,EAA2CC,GAA4B;AACrF,QAAMC,IAAaC,EAAiD,gBAAgB,GAC9E,EAAE,EAAA,IAAMC,EAAQH,EAAM,IAAI,GAO1BI,IAAaJ,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ,EAAE,YAAY;AAAA,MACtB,MAAM,CAACK,MACL,gBAAAC,EAACL,GAAA,EAAW,MAAAI,GAAY,YAAYL,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAErH,IAEF,CAAA,GAEEO,IAAgBC,EAAc;AAAA,IAClC,GAAGR;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGI,CAAU;AAAA,IACzC,iBAAiBK,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,qBAAsBV,EAAM,kBAA0C,SAAxBW;IAC9C,mBAAoBX,EAAM,gBAAsC,SAAtBY;IAC1C,oBAAqBZ,EAAM,gBAAuC,SAAvBa;;IAC3C,wBAAyBb,EAAM,gBAA2C,SAA3Bc;;EAA2B,CAC3E,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAA;AAEhB,SAAAiB,EAAU,MAAM;AACd,IAAIxB,EAAM,YACRA,EAAM,SAASO,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAM;AAAA,IACN,eAAAhB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { type FormOptions, Operation } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, \"onClick\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (data: Data, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const { t } = useI18n(props.i18n);\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: t(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? props.getFilteredRowModel || getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? props.getSortedRowModel || getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? props.getFacetedRowModel || getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? props.getFacetedUniqueValues || getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n: t,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","useI18n","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;;AA8BO,SAASA,EAA2CC,GAA4B;AACrF,QAAMC,IAAaC,EAAiD,gBAAgB,GAC9E,EAAE,EAAA,IAAMC,EAAQH,EAAM,IAAI,GAE1BI,IAAaJ,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ,EAAE,YAAY;AAAA,MACtB,MAAM,CAACK,MACL,gBAAAC,EAACL,GAAA,EAAW,MAAAI,GAAY,YAAYL,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAErH,IAEF,CAAA,GAEEO,IAAgBC,EAAc;AAAA,IAClC,GAAGR;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGI,CAAU;AAAA,IACzC,iBAAiBK,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,qBAAsBV,EAAM,kBAAuE,SAArDA,EAAM,uBAAuBW;IAC3E,mBAAoBX,EAAM,gBAAiE,SAAjDA,EAAM,qBAAqBY;IACrE,oBAAqBZ,EAAM,gBAAmE,SAAnDA,EAAM,sBAAsBa;;IACvE,wBAAyBb,EAAM,gBAA2E,SAA3DA,EAAM,0BAA0Bc;;EAA2B,CAC3G,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAA;AAEhB,SAAAiB,EAAU,MAAM;AACd,IAAIxB,EAAM,YACRA,EAAM,SAASO,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAM;AAAA,IACN,eAAAhB;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-rc.16",
+  "version": "3.0.0-rc.17",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-rc.16",
-    "@tsed/typescript": "3.0.0-rc.16",
+    "@tsed/tailwind-formio": "3.0.0-rc.17",
+    "@tsed/typescript": "3.0.0-rc.17",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

package/src/molecules/table/Table.stories.tsx

@@ -172,7 +172,10 @@ export const Usage: Story = {
       return expect(canvas.queryByText("MPEC")).not.toBeInTheDocument();
     });
 
-    await expect(canvas.getByText("La Caravelle")).toBeInTheDocument();
+    const tableBody = canvasElement.querySelector("tbody");
+
+    await expect(tableBody).toBeInTheDocument();
+    await expect(within(tableBody as HTMLElement).getByText("La Caravelle")).toBeInTheDocument();
 
     await delay(300);
 

package/src/molecules/table/filters/TextFieldFilter.tsx

@@ -14,8 +14,10 @@ export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Dat
     <>
       {!options.disableDatalist && (
         <datalist id={datalistId}>
-          {uniqValues.map((value: any) => (
-            <option value={value} key={value} />
+          {uniqValues.map((item) => (
+            <option value={item.value} key={item.value}>
+              {item.label || item.value}
+            </option>
           ))}
         </datalist>
       )}

package/src/molecules/table/hooks/useTable.tsx

@@ -18,7 +18,7 @@ import type { JSONRecord } from "../../../interfaces/JSONRecord.js";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCellOperations } from "../components/DefaultCellOperations";
 
-export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick"> {
   operations: Operation<Data>[];
   metadata?: Record<string, unknown>;
   i18n?: FormOptions["i18n"];
@@ -32,11 +32,6 @@ export function useTable<Data extends object = JSONRecord>(props: UseTableProps<
   const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
   const { t } = useI18n(props.i18n);
 
-  // const [pagination, setPagination] = useState({
-  //   pageIndex: 0, //initial page index
-  //   pageSize: 10 //default page size
-  // });
-
   const operations = props.operations.length
     ? ([
         {
@@ -54,10 +49,10 @@ export function useTable<Data extends object = JSONRecord>(props: UseTableProps<
     columns: [...props.columns, ...operations],
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
-    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
-    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
-    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
+    getFilteredRowModel: !props.manualFiltering ? props.getFilteredRowModel || getFilteredRowModel() : undefined,
+    getSortedRowModel: !props.manualSorting ? props.getSortedRowModel || getSortedRowModel() : undefined,
+    getFacetedRowModel: !props.manualFaceted ? props.getFacetedRowModel || getFacetedRowModel() : undefined, // client-side faceting
+    getFacetedUniqueValues: !props.manualFaceted ? props.getFacetedUniqueValues || getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
   });
 
   const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =