@tsed/react-formio 2.3.2 → 3.0.0-alpha.1

package/dist/components/table/filters/defaultColumnFilter.component.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as c, useCallback as f } from "react";
+import { InputText as d } from "../../input-text/inputText.component.js";
+function C(n) {
+  const {
+    filterId: s,
+    setFilterId: t,
+    column: { id: e, filterValue: a, setFilter: o }
+  } = n, [i, r] = c(a || ""), u = f(
+    (p, l) => {
+      r(l), t(e), o(l || void 0);
+    },
+    [e, r, t, o]
+  );
+  return /* @__PURE__ */ m(
+    d,
+    {
+      size: "sm",
+      id: e,
+      name: e,
+      autoFocus: e === s,
+      value: i,
+      onChange: u,
+      placeholder: "Search records..."
+    },
+    e
+  );
+}
+export {
+  C as DefaultColumnFilter
+};
+//# sourceMappingURL=defaultColumnFilter.component.js.map

package/dist/components/table/filters/defaultColumnFilter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultColumnFilter.component.js","sources":["../../../../src/components/table/filters/defaultColumnFilter.component.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { FilterProps } from \"react-table\";\n\nimport { InputText } from \"../../input-text/inputText.component\";\n\nexport function DefaultColumnFilter<D extends Record<string, unknown> = {}>(\n  props: FilterProps<D> & { filterId: string; setFilterId: any }\n) {\n  const {\n    filterId,\n    setFilterId,\n    column: { id, filterValue, setFilter }\n  } = props;\n\n  const [value, setValue] = useState(filterValue || \"\");\n\n  const onChange = useCallback(\n    (name: string, value: any) => {\n      setValue(value);\n      setFilterId(id);\n      setFilter(value || undefined);\n    },\n    [id, setValue, setFilterId, setFilter]\n  );\n\n  /* eslint-disable jsx-a11y/no-autofocus */\n  return (\n    <InputText\n      size={\"sm\"}\n      id={id}\n      name={id}\n      key={id}\n      autoFocus={id === filterId}\n      value={value}\n      onChange={onChange}\n      placeholder={\"Search records...\"}\n    />\n  );\n}\n"],"names":["DefaultColumnFilter","props","filterId","setFilterId","id","filterValue","setFilter","value","setValue","useState","onChange","useCallback","name","jsx","InputText"],"mappings":";;;AAKO,SAASA,EACdC,GACA;AACM,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAQ,EAAE,IAAAC,GAAI,aAAAC,GAAa,WAAAC,EAAU;AAAA,EAAA,IACnCL,GAEE,CAACM,GAAOC,CAAQ,IAAIC,EAASJ,KAAe,EAAE,GAE9CK,IAAWC;AAAA,IACf,CAACC,GAAcL,MAAe;AAC5B,MAAAC,EAASD,CAAK,GACdJ,EAAYC,CAAE,GACdE,EAAUC,KAAS,MAAS;AAAA,IAC9B;AAAA,IACA,CAACH,GAAII,GAAUL,GAAaG,CAAS;AAAA,EACvC;AAIE,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,IAAAV;AAAA,MACA,MAAMA;AAAA,MAEN,WAAWA,MAAOF;AAAA,MAClB,OAAAK;AAAA,MACA,UAAAG;AAAA,MACA,aAAa;AAAA,IAAA;AAAA,IAJRN;AAAA,EAKP;AAEJ;"}

package/dist/components/table/filters/selectColumnFilter.component.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import { FilterProps } from "react-table";
-export declare function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): {
-    value: any;
-    onChange: (_: string, value: any) => void;
-    choices: {
-        value: string;
-        label: string;
-    }[];
-};
-export declare function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): React.JSX.Element;
+import { FilterProps } from 'react-table';
+export declare function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): {
+    value: any;
+    onChange: (_: string, value: any) => void;
+    choices: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/filters/selectColumnFilter.component.js

@@ -0,0 +1,34 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Select as a } from "../../select/select.component.js";
+function f(t) {
+  const { column: n } = t, { id: c, preFilteredRows: l } = n, { choices: o } = n, { filterValue: i, setFilter: r } = n, u = o ? typeof o == "function" ? o(t) : o : [...new Set(l.map((e) => e.values[c]))].filter((e) => e).map((e) => ({
+    label: e,
+    value: e
+  }));
+  return {
+    value: i,
+    onChange: (e, s) => {
+      r(s || void 0);
+    },
+    choices: [{ value: "", label: "All" }].concat(u)
+  };
+}
+function v(t) {
+  const { value: n, choices: c, onChange: l } = f(t);
+  return /* @__PURE__ */ m(
+    a,
+    {
+      name: `filter-${t.column.id}`,
+      size: "sm",
+      value: n,
+      choices: c,
+      onChange: l
+    },
+    `filter-${t.column.id}`
+  );
+}
+export {
+  v as SelectColumnFilter,
+  f as useSelectColumnFilter
+};
+//# sourceMappingURL=selectColumnFilter.component.js.map

package/dist/components/table/filters/selectColumnFilter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectColumnFilter.component.js","sources":["../../../../src/components/table/filters/selectColumnFilter.component.tsx"],"sourcesContent":["import { FilterProps } from \"react-table\";\n\nimport { Select } from \"../../select/select.component\";\n\nexport function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {\n  const { column } = props;\n  const { id, preFilteredRows } = column;\n  const { choices: customChoices } = column as any;\n  const { filterValue, setFilter } = column;\n\n  const choices = (() => {\n    if (customChoices) {\n      if (typeof customChoices === \"function\") {\n        return customChoices(props);\n      }\n      return customChoices;\n    }\n\n    return [...new Set(preFilteredRows.map((row) => row.values[id]))]\n      .filter((value) => value)\n      .map((value) => ({\n        label: value,\n        value\n      }));\n  })();\n\n  const onChange = (_: string, value: any) => {\n    setFilter(value || undefined);\n  };\n\n  return {\n    value: filterValue,\n    onChange,\n    choices: [{ value: \"\", label: \"All\" }].concat(choices)\n  };\n}\n\nexport function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {\n  const { value, choices, onChange } = useSelectColumnFilter(props);\n\n  return (\n    <Select\n      key={`filter-${props.column.id}`}\n      name={`filter-${props.column.id}`}\n      size={\"sm\"}\n      value={value}\n      choices={choices}\n      onChange={onChange}\n    />\n  );\n}\n"],"names":["useSelectColumnFilter","props","column","id","preFilteredRows","customChoices","filterValue","setFilter","choices","row","value","_","SelectColumnFilter","onChange","jsx","Select"],"mappings":";;AAIO,SAASA,EAA8DC,GAAuB;AAC7F,QAAA,EAAE,QAAAC,MAAWD,GACb,EAAE,IAAAE,GAAI,iBAAAC,EAAA,IAAoBF,GAC1B,EAAE,SAASG,EAAA,IAAkBH,GAC7B,EAAE,aAAAI,GAAa,WAAAC,EAAA,IAAcL,GAE7BM,IACAH,IACE,OAAOA,KAAkB,aACpBA,EAAcJ,CAAK,IAErBI,IAGF,CAAC,GAAG,IAAI,IAAID,EAAgB,IAAI,CAACK,MAAQA,EAAI,OAAON,CAAE,CAAC,CAAC,CAAC,EAC7D,OAAO,CAACO,MAAUA,CAAK,EACvB,IAAI,CAACA,OAAW;AAAA,IACf,OAAOA;AAAA,IACP,OAAAA;AAAA,EAAA,EACA;AAOC,SAAA;AAAA,IACL,OAAOJ;AAAA,IACP,UANe,CAACK,GAAWD,MAAe;AAC1C,MAAAH,EAAUG,KAAS,MAAS;AAAA,IAC9B;AAAA,IAKE,SAAS,CAAC,EAAE,OAAO,IAAI,OAAO,MAAO,CAAA,EAAE,OAAOF,CAAO;AAAA,EACvD;AACF;AAEO,SAASI,EAA2DX,GAAuB;AAChG,QAAM,EAAE,OAAAS,GAAO,SAAAF,GAAS,UAAAK,EAAS,IAAIb,EAAsBC,CAAK;AAG9D,SAAA,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,MAAM,UAAUd,EAAM,OAAO,EAAE;AAAA,MAC/B,MAAM;AAAA,MACN,OAAAS;AAAA,MACA,SAAAF;AAAA,MACA,UAAAK;AAAA,IAAA;AAAA,IALK,UAAUZ,EAAM,OAAO,EAAE;AAAA,EAMhC;AAEJ;"}

package/dist/components/table/filters/sliderColumnFilter.component.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-import { FilterProps } from "react-table";
-export declare function SliderColumnFilter<D extends Record<string, unknown> = {}>({ column: { filterValue, setFilter, preFilteredRows, id } }: FilterProps<D>): React.JSX.Element;
+import { FilterProps } from 'react-table';
+export declare function SliderColumnFilter<D extends Record<string, unknown> = {}>({ column: { filterValue, setFilter, preFilteredRows, id } }: FilterProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/table/filters/sliderColumnFilter.component.js

@@ -0,0 +1,27 @@
+import { jsxs as v, Fragment as c, jsx as e } from "react/jsx-runtime";
+function f({
+  column: { filterValue: h, setFilter: m, preFilteredRows: a, id: t }
+}) {
+  let l = a.length ? a[0].values[t] : 0, u = a.length ? a[0].values[t] : 0;
+  return a.forEach((n) => {
+    l = Math.min(n == null ? void 0 : n.values[t], l), u = Math.max(n == null ? void 0 : n.values[t], u);
+  }), /* @__PURE__ */ v(c, { children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "range",
+        min: l,
+        max: u,
+        value: h || l,
+        onChange: (n) => {
+          m(parseInt(n.target.value, 10));
+        }
+      }
+    ),
+    /* @__PURE__ */ e("button", { onClick: () => m(void 0), children: "Off" })
+  ] });
+}
+export {
+  f as SliderColumnFilter
+};
+//# sourceMappingURL=sliderColumnFilter.component.js.map

package/dist/components/table/filters/sliderColumnFilter.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliderColumnFilter.component.js","sources":["../../../../src/components/table/filters/sliderColumnFilter.component.tsx"],"sourcesContent":["import { FilterProps } from \"react-table\";\n\nexport function SliderColumnFilter<D extends Record<string, unknown> = {}>({\n  column: { filterValue, setFilter, preFilteredRows, id }\n}: FilterProps<D>) {\n  let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;\n  let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;\n\n  preFilteredRows.forEach((row) => {\n    min = Math.min(row?.values[id], min);\n    max = Math.max(row?.values[id], max);\n  });\n\n  return (\n    <>\n      <input\n        type='range'\n        min={min}\n        max={max}\n        value={filterValue || min}\n        onChange={(e) => {\n          setFilter(parseInt(e.target.value, 10));\n        }}\n      />\n      <button onClick={() => setFilter(undefined)}>Off</button>\n    </>\n  );\n}\n"],"names":["SliderColumnFilter","filterValue","setFilter","preFilteredRows","id","min","max","row","jsxs","Fragment","jsx","e"],"mappings":";AAEO,SAASA,EAA2D;AAAA,EACzE,QAAQ,EAAE,aAAAC,GAAa,WAAAC,GAAW,iBAAAC,GAAiB,IAAAC,EAAG;AACxD,GAAmB;AACb,MAAAC,IAAMF,EAAgB,SAASA,EAAgB,CAAC,EAAE,OAAOC,CAAE,IAAI,GAC/DE,IAAMH,EAAgB,SAASA,EAAgB,CAAC,EAAE,OAAOC,CAAE,IAAI;AAEnD,SAAAD,EAAA,QAAQ,CAACI,MAAQ;AAC/B,IAAAF,IAAM,KAAK,IAAIE,KAAA,gBAAAA,EAAK,OAAOH,IAAKC,CAAG,GACnCC,IAAM,KAAK,IAAIC,KAAA,gBAAAA,EAAK,OAAOH,IAAKE,CAAG;AAAA,EAAA,CACpC,GAIG,gBAAAE,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAL;AAAA,QACA,KAAAC;AAAA,QACA,OAAOL,KAAeI;AAAA,QACtB,UAAU,CAACM,MAAM;AACf,UAAAT,EAAU,SAASS,EAAE,OAAO,OAAO,EAAE,CAAC;AAAA,QAAA;AAAA,MACxC;AAAA,IACF;AAAA,sBACC,UAAO,EAAA,SAAS,MAAMT,EAAU,MAAS,GAAG,UAAG,MAAA,CAAA;AAAA,EAAA,GAClD;AAEJ;"}

package/dist/components/table/hooks/useCustomTable.hook.d.ts

@@ -1,128 +1,128 @@
-import React, { PropsWithChildren } from "react";
-import { Cell, CellProps, Column, FilterProps, Renderer, TableOptions } from "react-table";
-import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
-import { Pagination as DefaultPagination } from "../../pagination/pagination.component";
-import { DefaultCellHeaderProps } from "../components/defaultCellHeader.component";
-import { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
-export interface ExtraColumnProps {
-    colspan?: number;
-    hidden?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
-export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
-    column: ExtraColumnProps;
-};
-export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
-    /**
-     * extended columns interface
-     */
-    columns: ReadonlyArray<ExtendedColumn<Data>>;
-    className?: string;
-    /**
-     * Call the listener when a filter / pagination  / sort change.
-     */
-    onChange?: (query: QueryOptions) => void;
-    /**
-     * Call the listener when a line is clicked.
-     */
-    onClick?: OnClickOperation<Data>;
-    /**
-     * Pagination steps list
-     */
-    pageSizes?: number[];
-    /**
-     * Total length of the data
-     */
-    totalLength?: number;
-    /**
-     *
-     */
-    isLoading?: boolean;
-    /**
-     * Custom EmptyData displayed when there is no data
-     */
-    EmptyData?: React.ComponentType;
-    /**
-     * Custom ArrowSort
-     */
-    ArrowSort?: React.ComponentType;
-    /**
-     * Custom default ColumnFilter
-     */
-    ColumnFilter?: Renderer<FilterProps<Data>>;
-    /**
-     * Custom cell
-     */
-    Cell?: React.ComponentType<CellProps<Data>>;
-    /**
-     * Custom Row
-     */
-    Row?: React.ComponentType<DefaultRowProps<Data>>;
-    /**
-     *
-     */
-    CellHeader?: React.ComponentType<DefaultCellHeaderProps<Data>>;
-    /**
-     *
-     */
-    CellOperations?: React.ComponentType;
-    /**
-     * Custom Loader
-     */
-    Loader?: React.ComponentType;
-    /**
-     * Custom Loader
-     */
-    Pagination?: React.ComponentType;
-    /**
-     * Disable filters
-     */
-    disableFilters?: boolean;
-    /**
-     * Disable pagination
-     */
-    disablePagination?: boolean;
-    manualPagination?: boolean;
-    manualSortBy?: boolean;
-    manualFilters?: boolean;
-    /**
-     * Configuration operation for each line.
-     */
-    operations?: Operation[];
-    i18n?: (f: string) => string;
-    /**
-     * Enable drag and drop rows
-     */
-    enableDragNDrop?: boolean;
-    onDrag?: (data: Data[]) => void;
-    onDrop?: (item: Data) => void;
-}
-export declare function getOperationCallback(operations: Operation[], onClick: OnClickOperation): (data: any, action: string) => void;
-declare function DefaultLoader(): React.JSX.Element;
-declare function DefaultEmptyData(): React.JSX.Element;
-export declare function useCustomTable<Data extends object = {}>(props: PropsWithChildren<TableProps<Data>>): {
-    className: string;
-    tableInstance: import("react-table").TableInstance<Data>;
-    CellHeader: any;
-    isLoading: boolean | undefined;
-    Loader: React.ComponentType<{}> | typeof DefaultLoader;
-    EmptyData: React.ComponentType<{}> | typeof DefaultEmptyData;
-    Row: React.ComponentType<DefaultRowProps<Data>> | typeof DefaultRow;
-    data: readonly Data[];
-    disablePagination: boolean | undefined;
-    Pagination: React.ComponentType<{}> | typeof DefaultPagination;
-    pageIndex: number;
-    pageSize: number;
-    pageSizes: number[];
-    totalLength: number | undefined;
-    setPageSize: (pageSize: number) => void;
-    i18n: (f: string) => string;
-    children: React.ReactNode;
-    onClick: any;
-    onDrag: (dragIndex: number, hoverIndex: number) => void;
-    onDrop: (...args: any[]) => void;
-    enableDragNDrop: boolean | undefined;
-};
-export {};
+import { ComponentType, CSSProperties, PropsWithChildren } from 'react';
+import { Cell, CellProps, Column, FilterProps, Renderer, TableOptions } from 'react-table';
+import { OnClickOperation, Operation, QueryOptions } from '../../../interfaces';
+import { Pagination as DefaultPagination } from '../../pagination/pagination.component';
+import { DefaultCellHeaderProps } from '../components/defaultCellHeader.component';
+import { DefaultRow, DefaultRowProps } from '../components/defaultRow.component';
+export interface ExtraColumnProps {
+    colspan?: number;
+    hidden?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
+export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
+    column: ExtraColumnProps;
+};
+export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
+    /**
+     * extended columns interface
+     */
+    columns: ReadonlyArray<ExtendedColumn<Data>>;
+    className?: string;
+    /**
+     * Call the listener when a filter / pagination  / sort change.
+     */
+    onChange?: (query: QueryOptions) => void;
+    /**
+     * Call the listener when a line is clicked.
+     */
+    onClick?: OnClickOperation<Data>;
+    /**
+     * Pagination steps list
+     */
+    pageSizes?: number[];
+    /**
+     * Total length of the data
+     */
+    totalLength?: number;
+    /**
+     *
+     */
+    isLoading?: boolean;
+    /**
+     * Custom EmptyData displayed when there is no data
+     */
+    EmptyData?: ComponentType;
+    /**
+     * Custom ArrowSort
+     */
+    ArrowSort?: ComponentType;
+    /**
+     * Custom default ColumnFilter
+     */
+    ColumnFilter?: Renderer<FilterProps<Data>>;
+    /**
+     * Custom cell
+     */
+    Cell?: ComponentType<CellProps<Data>>;
+    /**
+     * Custom Row
+     */
+    Row?: ComponentType<DefaultRowProps<Data>>;
+    /**
+     *
+     */
+    CellHeader?: ComponentType<DefaultCellHeaderProps<Data>>;
+    /**
+     *
+     */
+    CellOperations?: ComponentType;
+    /**
+     * Custom Loader
+     */
+    Loader?: ComponentType;
+    /**
+     * Custom Loader
+     */
+    Pagination?: ComponentType;
+    /**
+     * Disable filters
+     */
+    disableFilters?: boolean;
+    /**
+     * Disable pagination
+     */
+    disablePagination?: boolean;
+    manualPagination?: boolean;
+    manualSortBy?: boolean;
+    manualFilters?: boolean;
+    /**
+     * Configuration operation for each line.
+     */
+    operations?: Operation[];
+    i18n?: (f: string) => string;
+    /**
+     * Enable drag and drop rows
+     */
+    enableDragNDrop?: boolean;
+    onDrag?: (data: Data[]) => void;
+    onDrop?: (item: Data) => void;
+}
+export declare function getOperationCallback(operations: Operation[], onClick: OnClickOperation): (data: any, action: string) => void;
+declare function DefaultLoader(): import("react/jsx-runtime").JSX.Element;
+declare function DefaultEmptyData(): import("react/jsx-runtime").JSX.Element;
+export declare function useCustomTable<Data extends object = {}>(props: PropsWithChildren<TableProps<Data>>): {
+    className: string;
+    tableInstance: import('react-table').TableInstance<Data>;
+    CellHeader: any;
+    isLoading: boolean | undefined;
+    Loader: ComponentType | typeof DefaultLoader;
+    EmptyData: ComponentType | typeof DefaultEmptyData;
+    Row: ComponentType<DefaultRowProps<Data>> | typeof DefaultRow;
+    data: readonly Data[];
+    disablePagination: boolean | undefined;
+    Pagination: ComponentType | typeof DefaultPagination;
+    pageIndex: number;
+    pageSize: number;
+    pageSizes: number[];
+    totalLength: number | undefined;
+    setPageSize: (pageSize: number) => void;
+    i18n: (f: string) => string;
+    children: import('react').ReactNode;
+    onClick: any;
+    onDrag: (dragIndex: number, hoverIndex: number) => void;
+    onDrop: (...args: any[]) => void;
+    enableDragNDrop: boolean | undefined;
+};
+export {};

package/dist/components/table/hooks/useCustomTable.hook.js

@@ -0,0 +1,130 @@
+import { jsx as y } from "react/jsx-runtime";
+import n from "lodash/noop";
+import { useState as b, useEffect as F } from "react";
+import { useTable as W, useFilters as X, useGroupBy as Y, useSortBy as Z, usePagination as tt } from "react-table";
+import { Pagination as et } from "../../pagination/pagination.component.js";
+import { DefaultArrowSort as ot } from "../components/defaultArrowSort.component.js";
+import { DefaultCellHeader as at } from "../components/defaultCellHeader.component.js";
+import { DefaultRow as nt } from "../components/defaultRow.component.js";
+import { DefaultColumnFilter as it } from "../filters/defaultColumnFilter.component.js";
+import { swapElements as rt } from "../utils/swapElements.js";
+import { useOperations as lt } from "./useOperations.hook.js";
+function st(t, i) {
+  return (r, a) => {
+    const e = t.find((o) => o.action === a || o.alias === a);
+    e && i(r, e);
+  };
+}
+function ut() {
+  return /* @__PURE__ */ y("div", { className: "text-center p-2 pb-4 font-bold", children: "Loading in progress" });
+}
+function mt() {
+  return /* @__PURE__ */ y("div", { className: "text-center p-2 pb-4 font-bold", children: "No data found" });
+}
+const ct = [X, Y, Z, tt];
+function xt(t) {
+  const {
+    children: i,
+    className: r = "",
+    columns: a,
+    data: e,
+    onChange: o = n,
+    onClick: x = n,
+    onDrag: I = n,
+    onDrop: B = n,
+    operations: c = [],
+    pageSizes: h = [10, 25, 50, 100],
+    filters: k,
+    filterId: w,
+    pageSize: z,
+    pageIndex: N,
+    totalLength: v,
+    sortBy: L,
+    isLoading: E,
+    disableFilters: R,
+    disablePagination: O,
+    ArrowSort: A = ot,
+    ColumnFilter: H = it,
+    EmptyData: T = mt,
+    Loader: _ = ut,
+    Pagination: j = et,
+    Row: G = nt,
+    CellHeader: $ = at,
+    CellOperations: q,
+    i18n: d = (m) => m,
+    ...f
+  } = t, g = st(c, x), J = {
+    Filter: H,
+    ArrowSort: A
+  }, [l, K] = b(w), [M, p] = b(e);
+  F(() => {
+    p(e);
+  }, [e]);
+  const Q = (m, V) => {
+    const P = rt([...M], m, V);
+    p(P), I(P);
+  }, D = W(
+    {
+      ...t,
+      columns: a,
+      data: e,
+      ctx: f,
+      defaultColumn: J,
+      // getRowId,
+      initialState: {
+        ...t.initialState || {},
+        filters: k || [],
+        pageIndex: N || 0,
+        pageSize: z || 10,
+        sortBy: L || []
+      },
+      manualPagination: t.manualPagination === void 0 ? !0 : t.manualPagination,
+      manualSortBy: t.manualSortBy === void 0 ? !0 : t.manualPagination,
+      manualFilters: t.manualFilters === void 0 ? !0 : t.manualFilters,
+      disableFilters: R,
+      filterId: l,
+      setFilterId: K
+    },
+    ...ct,
+    lt({ operations: c, CellOperations: q, onClick: g, ctx: f, i18n: d })
+  ), {
+    setPageSize: U,
+    state: { pageIndex: s, pageSize: u, sortBy: S, filters: C }
+  } = D;
+  return F(() => {
+    o({
+      pageIndex: s,
+      pageSize: u,
+      sortBy: S,
+      filters: C,
+      filterId: l
+    });
+  }, [o, s, u, S, C, l]), {
+    className: r,
+    tableInstance: D,
+    CellHeader: $,
+    isLoading: E,
+    Loader: _,
+    EmptyData: T,
+    Row: G,
+    data: e,
+    disablePagination: O,
+    Pagination: j,
+    pageIndex: s,
+    pageSize: u,
+    pageSizes: h,
+    totalLength: v,
+    setPageSize: U,
+    i18n: d,
+    children: i,
+    onClick: g,
+    onDrag: Q,
+    onDrop: B,
+    enableDragNDrop: t.enableDragNDrop
+  };
+}
+export {
+  st as getOperationCallback,
+  xt as useCustomTable
+};
+//# sourceMappingURL=useCustomTable.hook.js.map

package/dist/components/table/hooks/useCustomTable.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomTable.hook.js","sources":["../../../../src/components/table/hooks/useCustomTable.hook.tsx"],"sourcesContent":["import noop from \"lodash/noop\";\nimport { ComponentType, CSSProperties, PropsWithChildren, useEffect, useState } from \"react\";\nimport {\n  Cell,\n  CellProps,\n  Column,\n  FilterProps,\n  Renderer,\n  TableOptions,\n  useFilters,\n  useGroupBy,\n  usePagination,\n  useSortBy,\n  useTable\n} from \"react-table\";\n\nimport { OnClickOperation, Operation, QueryOptions } from \"../../../interfaces\";\nimport { Pagination as DefaultPagination } from \"../../pagination/pagination.component\";\nimport { DefaultArrowSort } from \"../components/defaultArrowSort.component\";\nimport { DefaultCellHeader, DefaultCellHeaderProps } from \"../components/defaultCellHeader.component\";\nimport { DefaultRow, DefaultRowProps } from \"../components/defaultRow.component\";\nimport { DefaultColumnFilter } from \"../filters/defaultColumnFilter.component\";\nimport { swapElements } from \"../utils/swapElements\";\nimport { useOperations } from \"./useOperations.hook\";\n\nexport interface ExtraColumnProps {\n  colspan?: number;\n  hidden?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;\n\nexport type ExtendedCell<Data extends object = any> = Cell<Data, any> & {\n  column: ExtraColumnProps;\n};\n\nexport interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {\n  /**\n   * extended columns interface\n   */\n  columns: ReadonlyArray<ExtendedColumn<Data>>;\n\n  className?: string;\n  /**\n   * Call the listener when a filter / pagination  / sort change.\n   */\n  onChange?: (query: QueryOptions) => void;\n  /**\n   * Call the listener when a line is clicked.\n   */\n  onClick?: OnClickOperation<Data>;\n  /**\n   * Pagination steps list\n   */\n  pageSizes?: number[];\n  /**\n   * Total length of the data\n   */\n  totalLength?: number;\n  /**\n   *\n   */\n  isLoading?: boolean;\n  /**\n   * Custom EmptyData displayed when there is no data\n   */\n  EmptyData?: ComponentType;\n  /**\n   * Custom ArrowSort\n   */\n  ArrowSort?: ComponentType;\n  /**\n   * Custom default ColumnFilter\n   */\n  ColumnFilter?: Renderer<FilterProps<Data>>;\n  /**\n   * Custom cell\n   */\n  Cell?: ComponentType<CellProps<Data>>;\n  /**\n   * Custom Row\n   */\n  Row?: ComponentType<DefaultRowProps<Data>>;\n  /**\n   *\n   */\n  CellHeader?: ComponentType<DefaultCellHeaderProps<Data>>;\n  /**\n   *\n   */\n  CellOperations?: ComponentType;\n  /**\n   * Custom Loader\n   */\n  Loader?: ComponentType;\n  /**\n   * Custom Loader\n   */\n  Pagination?: ComponentType;\n  /**\n   * Disable filters\n   */\n  disableFilters?: boolean;\n  /**\n   * Disable pagination\n   */\n  disablePagination?: boolean;\n  manualPagination?: boolean;\n  manualSortBy?: boolean;\n  manualFilters?: boolean;\n  /**\n   * Configuration operation for each line.\n   */\n  operations?: Operation[];\n\n  i18n?: (f: string) => string;\n\n  /**\n   * Enable drag and drop rows\n   */\n  enableDragNDrop?: boolean;\n  onDrag?: (data: Data[]) => void;\n  onDrop?: (item: Data) => void;\n}\n\nexport function getOperationCallback(operations: Operation[], onClick: OnClickOperation) {\n  return (data: any, action: string) => {\n    const operation = operations.find((operation) => operation.action === action || operation.alias === action);\n    if (operation) {\n      onClick(data, operation);\n    }\n  };\n}\n\nfunction DefaultLoader() {\n  return <div className={\"text-center p-2 pb-4 font-bold\"}>Loading in progress</div>;\n}\n\nfunction DefaultEmptyData() {\n  return <div className='text-center p-2 pb-4 font-bold'>No data found</div>;\n}\n\nconst hooks = [useFilters, useGroupBy, useSortBy, usePagination];\n\nexport function useCustomTable<Data extends object = {}>(props: PropsWithChildren<TableProps<Data>>) {\n  const {\n    children,\n    className = \"\",\n    columns,\n    data,\n    onChange = noop,\n    onClick = noop,\n    onDrag = noop,\n    onDrop = noop,\n    operations = [],\n    pageSizes = [10, 25, 50, 100],\n    filters: controlledFilters,\n    filterId: controlledFilterId,\n    pageSize: controlledPageSize,\n    pageIndex: controlledPageIndex,\n    totalLength,\n    sortBy: controlledSortBy,\n    isLoading,\n    disableFilters,\n    disablePagination,\n    ArrowSort = DefaultArrowSort,\n    ColumnFilter = DefaultColumnFilter,\n    EmptyData = DefaultEmptyData,\n    Loader = DefaultLoader,\n    Pagination = DefaultPagination,\n    Row = DefaultRow,\n    CellHeader = DefaultCellHeader as any,\n    CellOperations,\n    i18n = (f: string) => f,\n    ...ctx\n  } = props;\n\n  const _onClick = getOperationCallback(operations, onClick);\n\n  const defaultColumn = {\n    Filter: ColumnFilter,\n    ArrowSort\n  };\n\n  const [filterId, setFilterId] = useState(controlledFilterId);\n\n  // DND\n  const [records, setRecords] = useState<readonly Data[]>(data);\n\n  useEffect(() => {\n    setRecords(data);\n  }, [data]);\n\n  const _onDrag = (dragIndex: number, hoverIndex: number) => {\n    const newRecords = swapElements([...records], dragIndex, hoverIndex);\n\n    setRecords(newRecords);\n\n    onDrag(newRecords);\n  };\n\n  const tableInstance = useTable<Data>(\n    {\n      ...props,\n      columns,\n      data,\n      ctx,\n      defaultColumn,\n      // getRowId,\n      initialState: {\n        ...(props.initialState || {}),\n        filters: controlledFilters || [],\n        pageIndex: controlledPageIndex || 0,\n        pageSize: controlledPageSize || 10,\n        sortBy: controlledSortBy || []\n      } as any,\n      manualPagination: props.manualPagination === undefined ? true : props.manualPagination,\n      manualSortBy: props.manualSortBy === undefined ? true : props.manualPagination,\n      manualFilters: props.manualFilters === undefined ? true : props.manualFilters,\n      disableFilters,\n      filterId,\n      setFilterId\n    } as any,\n    ...hooks,\n    useOperations({ operations, CellOperations, onClick: _onClick, ctx, i18n })\n  );\n\n  const {\n    setPageSize,\n    state: { pageIndex, pageSize, sortBy, filters }\n  } = tableInstance;\n\n  useEffect(() => {\n    onChange({\n      pageIndex,\n      pageSize,\n      sortBy,\n      filters,\n      filterId\n    });\n  }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);\n\n  return {\n    className,\n    tableInstance,\n    CellHeader,\n    isLoading,\n    Loader,\n    EmptyData,\n    Row,\n    data,\n    disablePagination,\n    Pagination,\n    pageIndex,\n    pageSize,\n    pageSizes,\n    totalLength,\n    setPageSize,\n    i18n,\n    children,\n    onClick: _onClick as any,\n    onDrag: _onDrag,\n    onDrop: onDrop,\n    enableDragNDrop: props.enableDragNDrop\n  };\n}\n"],"names":["getOperationCallback","operations","onClick","data","action","operation","DefaultLoader","jsx","DefaultEmptyData","hooks","useFilters","useGroupBy","useSortBy","usePagination","useCustomTable","props","children","className","columns","onChange","noop","onDrag","onDrop","pageSizes","controlledFilters","controlledFilterId","controlledPageSize","controlledPageIndex","totalLength","controlledSortBy","isLoading","disableFilters","disablePagination","ArrowSort","DefaultArrowSort","ColumnFilter","DefaultColumnFilter","EmptyData","Loader","Pagination","DefaultPagination","Row","DefaultRow","CellHeader","DefaultCellHeader","CellOperations","i18n","f","ctx","_onClick","defaultColumn","filterId","setFilterId","useState","records","setRecords","useEffect","_onDrag","dragIndex","hoverIndex","newRecords","swapElements","tableInstance","useTable","useOperations","setPageSize","pageIndex","pageSize","sortBy","filters"],"mappings":"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"}