@uxf/data-grid 10.5.0 → 11.0.0-beta.10

package/_store/reducer.d.ts

@@ -0,0 +1,8 @@
+import { Nullish } from "@uxf/core/types";
+import { Reducer } from "react";
+import { Request } from "../types/api";
+import { Schema } from "../types/schema";
+import { DataGridState, DataGridUserConfig } from "../types/state";
+export declare const getInitialState: (schema: Schema<any>, init?: Request | string | Nullish, initialUserConfig?: DataGridUserConfig | Nullish) => DataGridState;
+export declare const reducer: Reducer<DataGridState, any>;
+export declare const debugReducer: Reducer<DataGridState, any>;

package/{store → _store}/reducer.js

@@ -1,45 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const utils_1 = require("../utils");
-const getInitialState = (schema, init) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const initialState = init === undefined ? {} : typeof init === "string" ? (_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {} : init;
+const getInitialState = (schema, init, initialUserConfig) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const initialState = (0, is_nil_1.isNil)(init) ? {} : typeof init === "string" ? (_a = (0, utils_1.decodeFilter)(init)) !== null && _a !== void 0 ? _a : {} : init;
     return {
         request: {
             f: (_b = initialState.f) !== null && _b !== void 0 ? _b : [],
             page: (_c = initialState.page) !== null && _c !== void 0 ? _c : 0,
             dir: (_d = initialState.dir) !== null && _d !== void 0 ? _d : schema.dir,
             sort: (_e = initialState.sort) !== null && _e !== void 0 ? _e : schema.sort,
-            perPage: (_f = initialState.perPage) !== null && _f !== void 0 ? _f : schema.perPage,
-            tab: (_j = (_h = (_g = schema.tabs) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : null,
+            perPage: (_g = (_f = initialState.perPage) !== null && _f !== void 0 ? _f : initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _g !== void 0 ? _g : schema.perPage,
+            tab: (_k = (_j = (_h = schema.tabs) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.name) !== null && _k !== void 0 ? _k : null,
             search: "",
         },
+        userConfig: {
+            columns: (_l = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _l !== void 0 ? _l : {},
+            perPage: (_m = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _m !== void 0 ? _m : schema.perPage,
+        },
         tabRequests: {},
     };
 };
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     switch (action.type) {
-        case "RELOAD":
-            return {
-                ...state,
-                loading: true,
-            };
-        case "RELOAD_DONE":
-            return {
-                ...state,
-                loading: false,
-                response: action.response,
-            };
-        case "RELOAD_FAILED":
-            return {
-                ...state,
-                loading: false,
-                error: action.error,
-            };
         case "CHANGE_PAGE":
             return {
                 ...state,
@@ -55,6 +43,10 @@ const reducer = (state, action) => {
                     ...state.request,
                     perPage: action.perPage,
                 },
+                userConfig: {
+                    ...state.userConfig,
+                    perPage: action.perPage,
+                },
             };
         case "FILTER":
             // eslint-disable-next-line no-case-declarations
@@ -128,6 +120,41 @@ const reducer = (state, action) => {
                     [(_h = state.request.tab) !== null && _h !== void 0 ? _h : "__DEFAULT_TAB__"]: state.request,
                 },
             };
+        case "SET_SELECTED_ROWS":
+            return {
+                ...state,
+                selectedRows: action.rows,
+            };
+        case "HIDE_COLUMN":
+            return {
+                ...state,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                            ...((_k = (_j = state.userConfig.columns) === null || _j === void 0 ? void 0 : _j[action.name]) !== null && _k !== void 0 ? _k : {}),
+                            isHidden: true,
+                        },
+                    },
+                },
+            };
+        case "SHOW_COLUMN":
+            return {
+                ...state,
+                userConfig: {
+                    ...state.userConfig,
+                    columns: {
+                        ...state.userConfig.columns,
+                        [action.name]: {
+                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                            ...((_m = (_l = state.userConfig.columns) === null || _l === void 0 ? void 0 : _l[action.name]) !== null && _m !== void 0 ? _m : {}),
+                            isHidden: false,
+                        },
+                    },
+                },
+            };
         default:
             // eslint-disable-next-line no-console
             console.warn("Unknown datagrid action.", action);

package/_story-utils/data.d.ts

@@ -0,0 +1,12 @@
+interface Row {
+    id: number;
+    text: string | null | undefined;
+    bool: boolean | null | undefined;
+    tel: string | null | undefined;
+    mail: string | null | undefined;
+    link: string | null | undefined;
+    day: string | null | undefined;
+    dayAndTime: string | null | undefined;
+}
+export declare const data: Row[];
+export {};

package/_story-utils/data.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = [
+    {
+        id: 1,
+        text: "Red",
+        bool: undefined,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: null,
+    },
+    {
+        id: 2,
+        text: "Blue",
+        bool: null,
+        tel: undefined,
+        mail: "dev@uxf.cz",
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: null,
+    },
+    {
+        id: 3,
+        text: "Green",
+        bool: true,
+        tel: "777888999",
+        mail: undefined,
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: undefined,
+    },
+    {
+        id: 4,
+        text: "Gray",
+        bool: false,
+        tel: "555777888",
+        mail: "dev@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: "2023-01-05",
+        dayAndTime: undefined,
+    },
+    {
+        id: 5,
+        text: "Pink",
+        bool: false,
+        tel: "45654412",
+        mail: undefined,
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 6,
+        text: "Yellow",
+        bool: false,
+        tel: null,
+        mail: "root@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 7,
+        text: "Black",
+        bool: true,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 8,
+        text: "White",
+        bool: false,
+        tel: undefined,
+        mail: null,
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 9,
+        text: "Liberty",
+        bool: false,
+        tel: "999888777",
+        mail: "dev@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 10,
+        text: "Blue",
+        bool: false,
+        tel: "777888999",
+        mail: "root@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 11,
+        text: "Purple",
+        bool: false,
+        tel: "777888999",
+        mail: null,
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2000-12-31T01:00:00.000-07:30",
+    },
+];

package/_story-utils/grid-type.d.ts

@@ -0,0 +1,22 @@
+export type GridType = {
+    columns: {
+        id: "number";
+        text: "string";
+        bool: "boolean";
+        tel: "phone";
+        mail: "email";
+        link: "url";
+        day: "date";
+        dayAndTime: "datetime";
+    };
+    filters: {
+        text: "text";
+        bool: "boolean";
+        ival: "interval";
+        tel: "string";
+        mail: "string";
+        link: "string";
+        sele: "select";
+        seleBool: "select";
+    };
+};

package/_story-utils/grid-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/_story-utils/loader.d.ts

@@ -0,0 +1,2 @@
+import { Loader } from "../types";
+export declare const loader: Loader;

package/_story-utils/loader.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loader = void 0;
+const data_1 = require("./data");
+const loader = async (_, request) => {
+    const { page = 1, perPage = 10, tab, sort, dir, f } = request;
+    // eslint-disable-next-line no-console
+    console.log("filter", f === null || f === void 0 ? void 0 : f.length);
+    const filteredData = data_1.data
+        .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
+        .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
+        .sort((a, b) => {
+        if (!sort || !dir) {
+            return 1;
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const first = a[sort];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const second = b[sort];
+        if (typeof first === "number") {
+            return dir === "asc" ? first - second : second - first;
+        }
+        return dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
+    });
+    // eslint-disable-next-line no-console
+    console.log("loader", request);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return {
+        count: filteredData.length,
+        totalCount: filteredData.length,
+        result: filteredData.slice(page * perPage, page * perPage + perPage),
+    };
+};
+exports.loader = loader;

package/_story-utils/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from "../types";
+import { GridType } from "./grid-type";
+export declare const schema: Schema<GridType>;

package/_story-utils/schema.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.schema = void 0;
+const types_1 = require("../types");
+exports.schema = {
+    columns: [
+        { name: "id", type: "number", label: "Id", sort: true },
+        { name: "text", type: "string", label: "Text", sort: true },
+        { name: "bool", type: "boolean", label: "Boolean" },
+        { name: "mail", type: "email", label: "E-mail" },
+        { name: "tel", type: "phone", label: "Phone" },
+        { name: "link", type: "url", label: "Link" },
+        { name: "day", type: "date", label: "Date" },
+        { name: "dayAndTime", type: "datetime", label: "Datetime" },
+    ],
+    filters: [
+        { name: "text", type: "text", label: "Text" },
+        { name: "bool", type: "boolean", label: "Boolean" },
+        { name: "ival", type: "interval", label: "Super interval" },
+        { name: "mail", type: "string", label: "E-mail" },
+        { name: "tel", type: "string", label: "Phone" },
+        { name: "link", type: "string", label: "Link" },
+        {
+            name: "sele",
+            type: "select",
+            label: "Select",
+            options: [
+                { id: "", label: "" },
+                { id: 1, label: "A" },
+                { id: 2, label: "B" },
+            ],
+        },
+        {
+            name: "seleBool",
+            type: "select",
+            label: "Select Boolean",
+            options: [
+                { id: "", label: "" },
+                { id: 1, label: "Ano" },
+                { id: 0, label: "Ne" },
+            ],
+        },
+    ],
+    tabs: [
+        { name: "all", label: "All" },
+        { name: "only-odd-ids", label: "Only odd ids blablabla" },
+        // { name: "only-odd-ids", label: "Only odd ids" },
+    ],
+    dir: types_1.DataGridSortDir.Asc,
+    sort: "id",
+    perPage: 10,
+    fullText: true,
+};

package/{tailwindui/body-cell → body-cell}/body-cell-boolean.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellBoolean: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-date.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellDate: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-datetime.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellDateTime: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-default.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellDefault: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-email.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellEmail: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-phone.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellPhone: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-to-many.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellToMany: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-to-one.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellToOne: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/body-cell-url.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponent } from "../../types";
+import { BodyCellComponent } from "../types";
 export declare const BodyCellUrl: BodyCellComponent<any, any>;

package/{tailwindui/body-cell → body-cell}/index.d.ts

@@ -1,2 +1,2 @@
-import { BodyCellComponents } from "../../types";
+import { BodyCellComponents } from "../types";
 export declare const BodyCells: BodyCellComponents<any, any>;

package/data-grid.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { BaseGridType, DataGridProps } from "./types";
-export declare const DataGrid: <GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>) => React.JSX.Element;
+export declare function DataGrid<GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>): React.JSX.Element;

package/data-grid.js

@@ -1,128 +1,42 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
-const react_1 = __importStar(require("react"));
-const react_data_grid_1 = __importDefault(require("react-data-grid"));
-const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
-const useColumns_1 = require("./hooks/useColumns");
-const actions_1 = require("./store/actions");
-const reducer_1 = require("./store/reducer");
-const footer_1 = require("./tailwindui/components/footer");
-const show_1 = require("./tailwindui/show");
-const utils_1 = require("./utils");
-const defaultKeyExtractor = (r) => {
-    return r.id;
-};
-// eslint-disable-next-line react/require-optimization
-const DataGrid = (props) => {
-    var _a, _b, _c;
-    const { LinearProgress, Container, FilterList, Pagination, PaginationCounts, PaginationRowsPerPageSelect, SelectedRowsToolbar, NoRowsFallback, SelectRowCheckbox, Toolbar, ToolbarControl, ToolbarCustoms, ToolbarTabs, } = props.ui;
-    const [state, dispatch] = (0, react_1.useReducer)(props.debug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(props.schema, props.initialState));
-    // TODO @vejvis - tady vyřešit problém se závislostma v useCallbacku
-    const schema = props.schema;
-    const gridName = props.gridName;
-    const loader = props.loader;
-    const onReload = (0, react_1.useCallback)(async () => {
-        try {
-            await dispatch(actions_1.dataGridActions.reload());
-            const request = (0, utils_1.createRequest)(state, schema.sort, schema.dir);
-            const response = await loader(gridName, request, (0, utils_1.encodeFilter)(request));
-            await dispatch(actions_1.dataGridActions.reloadDone(response));
-        }
-        catch (e) {
-            await dispatch(actions_1.dataGridActions.reloadFailed(e));
-            // eslint-disable-next-line no-console
-            console.error(e);
-        }
-    }, [state, schema, gridName, loader]);
-    if (props.callbackRef) {
-        props.callbackRef.current = {
-            reload: onReload,
-        };
-    }
-    (0, react_1.useEffect)(() => {
-        onReload();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        state.request.dir,
-        state.request.sort,
-        state.request.perPage,
-        state.request.page,
-        state.request.f,
-        state.request.search,
-        state.request.tab,
-    ]);
-    const onFilter = (0, react_1.useCallback)((value) => {
-        dispatch(actions_1.dataGridActions.filter(value));
-    }, [dispatch]);
-    const rows = (_b = (_a = state.response) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : [];
-    const columns = (0, useColumns_1.useColumns)(props, onReload);
-    const components = (0, react_1.useMemo)(() => {
-        return {
-            renderCheckbox: (args) => react_1.default.createElement(SelectRowCheckbox, { ...args }),
-            noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: state.error, loading: !!state.loading }),
-        };
-    }, [SelectRowCheckbox, NoRowsFallback, state.error, state.loading]);
-    const sortColumns = state.request.sort && state.request.dir
-        ? [{ columnKey: state.request.sort, direction: state.request.dir.toUpperCase() }]
-        : [];
-    // TODO @vejvis podívat se na onSortColumnChange metodu
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const onSortColumnChange = (sortColumns) => {
-        if (sortColumns.length > 0) {
-            const sc = sortColumns[0];
-            dispatch(actions_1.dataGridActions.sort(sc.columnKey, sc.direction.toLowerCase()));
-        }
-        else {
-            dispatch(actions_1.dataGridActions.sortClear());
-        }
-    };
-    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
-        headerRowHeight: props.headerRowHeight,
-        mode: props.mode,
-        rowHeight: props.rowHeight,
-        rows,
-    });
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const body_cell_1 = require("./body-cell");
+const filter_handler_1 = require("./filter-handler");
+const filter_list_1 = require("./filter-list");
+const linear_progress_1 = require("./linear-progress");
+const pagination_1 = require("./pagination");
+const row_counts_1 = require("./row-counts");
+const rows_per_page_select_1 = require("./rows-per-page-select");
+const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
+const table_1 = require("./table");
+const action_cell_base_1 = require("./table/components/action-cell-base");
+const no_rows_fallback_1 = require("./table/no-rows-fallback");
+const toolbar_control_1 = require("./toolbar-control");
+const toolbar_customs_1 = require("./toolbar-customs");
+const toolbar_tabs_1 = require("./toolbar-tabs");
+const classes_1 = require("./utils/classes");
+const DefaultSelectedRowsToolbarActions = () => null;
+function DataGrid(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Container, { noBorder: props.noBorder, className: props.className },
-            react_1.default.createElement(Toolbar, { noBorder: props.noBorder },
-                react_1.default.createElement(ToolbarTabs, { activeTab: state.request.tab, onChange: (tab) => dispatch(actions_1.dataGridActions.changeTab(tab)), schema: props.schema }),
-                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText, hiddenColumns: props.hiddenColumns, onChangeHiddenColumns: props.onChangeHiddenColumns, onCsvDownload: props.onCsvDownload, state: state }),
-                react_1.default.createElement(ToolbarCustoms, { buttons: props.customActions })),
-            react_1.default.createElement(LinearProgress, { loading: !!state.loading }),
-            react_1.default.createElement(FilterList, { gridName: props.gridName, onFilter: onFilter, filters: props.schema.filters, filtersData: state.request.f, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder }),
-            react_1.default.createElement(show_1.Show, { when: rdgVisuals.ready },
-                react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: props.onChangeSelectedRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor, rows: rows, selectedRows: props.selectedRows, sortColumns: sortColumns, style: rdgVisuals.style })),
-            react_1.default.createElement(footer_1.Footer, { noBorder: props.noBorder },
-                react_1.default.createElement(PaginationRowsPerPageSelect, { value: state.request.perPage, onChange: (value) => dispatch(actions_1.dataGridActions.changePerPage(value)) }),
-                react_1.default.createElement(PaginationCounts, { page: state.request.page, perPage: state.request.perPage, response: state.response }),
-                react_1.default.createElement(Pagination, { count: state.response ? Math.max(Math.ceil(state.response.count / state.request.perPage), 1) : 1, page: state.request.page + 1, onPageChange: (value) => dispatch(actions_1.dataGridActions.changePage(value - 1)), size: "sm" }))),
-        react_1.default.createElement(SelectedRowsToolbar, { selectedRows: props.selectedRows, onChangeSelectedRows: props.onChangeSelectedRows, Actions: props.ui.SelectedRowsToolbarActions, reload: onReload })));
-};
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.noBorder && classes_1.NO_BORDER_CLASS, props.className) },
+            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__toolbar", props.noBorder && classes_1.NO_BORDER_CLASS) },
+                react_1.default.createElement(toolbar_tabs_1.ToolbarTabs, { state: props.state, actions: props.actions, schema: props.schema }),
+                react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: props.state, actions: props.actions, gridName: props.gridName, filterHandlers: (_b = (_a = props.ui) === null || _a === void 0 ? void 0 : _a.FilterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, onCsvDownload: props.onCsvDownload }),
+                react_1.default.createElement(toolbar_customs_1.ToolbarCustoms, { buttons: props.customActions })),
+            react_1.default.createElement(linear_progress_1.LinearProgress, { isLoading: props.isLoading }),
+            react_1.default.createElement(filter_list_1.FilterList, { state: props.state, actions: props.actions, schema: props.schema, gridName: props.gridName, filterHandlers: (_d = (_c = props.ui) === null || _c === void 0 ? void 0 : _c.FilterHandlers) !== null && _d !== void 0 ? _d : filter_handler_1.defaultFilterHandlers, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined }),
+            react_1.default.createElement(table_1.Table, { state: props.state, actions: props.actions, schema: props.schema, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, BodyCells: (_h = (_g = props.ui) === null || _g === void 0 ? void 0 : _g.BodyCells) !== null && _h !== void 0 ? _h : body_cell_1.BodyCells, NoRowsFallback: (_k = (_j = props.ui) === null || _j === void 0 ? void 0 : _j.NoRowsFallback) !== null && _k !== void 0 ? _k : no_rows_fallback_1.NoRowsFallback, ActionCell: (_m = (_l = props.ui) === null || _l === void 0 ? void 0 : _l.ActionCell) !== null && _m !== void 0 ? _m : action_cell_base_1.ActionCellBase, onRemove: props.onRemove, onEdit: props.onEdit, getEditUrl: props.getEditUrl, onOpen: props.onOpen, getOpenUrl: props.getOpenUrl, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
+            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__footer", props.noBorder && classes_1.NO_BORDER_CLASS) },
+                react_1.default.createElement(rows_per_page_select_1.RowsPerPageSelect, { state: props.state, actions: props.actions }),
+                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, totalCount: (_p = (_o = props.data) === null || _o === void 0 ? void 0 : _o.totalCount) !== null && _p !== void 0 ? _p : 0 }),
+                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, totalCount: (_r = (_q = props.data) === null || _q === void 0 ? void 0 : _q.totalCount) !== null && _r !== void 0 ? _r : 0 }))),
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_t = (_s = props.ui) === null || _s === void 0 ? void 0 : _s.SelectedRowsToolbarActions) !== null && _t !== void 0 ? _t : DefaultSelectedRowsToolbarActions })));
+}
 exports.DataGrid = DataGrid;

package/data-grid.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: <GridType_1 extends import("./").BaseGridType, R = any>(props: import("./tailwindui").DataGridProps<GridType_1, R>) => React.JSX.Element;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;