@uxf/data-grid 11.0.0-beta.8 → 11.0.0

package/_generator/cli.js

@@ -0,0 +1,29 @@
+const { argv, env } = require("process");
+
+module.exports = async () => {
+    const cli = require("yargs")
+        .command("$0", "UXF DataGrid generator", (yargs) => {
+            yargs.demandCommand(0, 0).usage(`
+Usage:
+  uxf-data-grid-generator [options]
+`);
+        })
+        .option("s", { alias: "schemaDirectory" })
+        .option("o", { alias: "outputDirectory" })
+        .option("h", { alias: "help", group: "Options" })
+        .strict(false)
+        .exitProcess(false);
+
+    try {
+        const { help, schemaDirectory, outputDirectory } = cli.parse(argv.slice(2));
+
+        if (Boolean(help)) {
+            return 0;
+        }
+
+        await require("./index")(schemaDirectory, outputDirectory);
+    } catch (e) {
+        console.error(e);
+        return 1;
+    }
+};

package/_generator/index.js

@@ -0,0 +1,40 @@
+const { globSync } = require("fast-glob");
+const { readFileSync, writeFileSync, mkdirSync } = require("fs");
+const { dirname, relative, parse, join } = require("path");
+
+function camelize(value) {
+    return value
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join("");
+}
+
+function writeFile(filename, value) {
+    mkdirSync(dirname(filename), { recursive: true });
+    writeFileSync(filename, value);
+}
+
+function generateSchemaFile(gridName, schemaRelativeImport) {
+    return `import { Schema } from "@uxf/data-grid";
+import json from "${schemaRelativeImport}";
+
+export const dataGridSchema_${camelize(gridName)}: Schema<any> = json as any;`;
+}
+
+function generate(jsonSchema, filename, outputDirectory) {
+    const gridName = parse(filename).name;
+    const generatedPath = join(process.cwd(), outputDirectory, gridName);
+
+    const generatedSchemaFilename = `${generatedPath}/schema.ts`;
+
+    writeFile(
+        generatedSchemaFilename,
+        generateSchemaFile(gridName, relative(dirname(generatedSchemaFilename), filename)),
+    );
+}
+
+module.exports = (schemaDirectory, outputDirectory) => {
+    globSync(schemaDirectory + "/*.json")
+        .map((path) => process.cwd() + "/" + path)
+        .forEach((filename) => generate(readFileSync(filename), filename, outputDirectory));
+};

package/_store/reducer.js

@@ -4,7 +4,7 @@ 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, initialUserConfig) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     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: {
@@ -13,12 +13,12 @@ const getInitialState = (schema, init, initialUserConfig) => {
             dir: (_d = initialState.dir) !== null && _d !== void 0 ? _d : schema.dir,
             sort: (_e = initialState.sort) !== null && _e !== void 0 ? _e : schema.sort,
             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: "",
+            tab: (_l = (_h = initialState.tab) !== null && _h !== void 0 ? _h : (_k = (_j = schema.tabs) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : null,
+            search: (_m = initialState.search) !== null && _m !== void 0 ? _m : "",
         },
         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,
+            columns: (_o = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.columns) !== null && _o !== void 0 ? _o : {},
+            perPage: (_p = initialUserConfig === null || initialUserConfig === void 0 ? void 0 : initialUserConfig.perPage) !== null && _p !== void 0 ? _p : schema.perPage,
         },
         tabRequests: {},
     };

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

@@ -12,11 +12,13 @@ export type GridType = {
     filters: {
         text: "text";
         bool: "boolean";
+        date: "date";
         ival: "interval";
         tel: "string";
         mail: "string";
         link: "string";
         sele: "select";
         seleBool: "select";
+        multiSelect: "multiSelect";
     };
 };

package/_story-utils/loader.js

@@ -29,7 +29,7 @@ const loader = async (_, request) => {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     return {
         count: filteredData.length,
-        totalCount: filteredData.length,
+        totalCount: data_1.data.length,
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };

package/_story-utils/schema.js

@@ -18,6 +18,7 @@ exports.schema = {
         { name: "bool", type: "boolean", label: "Boolean" },
         { name: "ival", type: "interval", label: "Super interval" },
         { name: "mail", type: "string", label: "E-mail" },
+        { name: "date", type: "date", label: "Date" },
         { name: "tel", type: "string", label: "Phone" },
         { name: "link", type: "string", label: "Link" },
         {
@@ -30,6 +31,17 @@ exports.schema = {
                 { id: 2, label: "B" },
             ],
         },
+        {
+            name: "multiSelect",
+            label: "Multi select",
+            type: "multiSelect",
+            options: [
+                { label: "Option 1", id: "option-1" },
+                { label: "Option 2", id: "option-2" },
+                { label: "Option 3", id: "option-3" },
+                { label: "Option 4", id: "option-4" },
+            ],
+        },
         {
             name: "seleBool",
             type: "select",

package/bin/uxf-data-grid-generator.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+require("../_generator/cli")()
+    .then((exitCode) => {
+        process.exitCode = exitCode;
+    })
+    .catch(() => {
+        process.exitCode = 1;
+    });

package/data-grid.js

@@ -15,7 +15,6 @@ 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");
@@ -23,20 +22,20 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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_control_1.ToolbarControl, { state: props.state, actions: props.actions, gridName: props.gridName, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : 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(filter_list_1.FilterList, { state: props.state, actions: props.actions, schema: props.schema, gridName: props.gridName, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : 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: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, bodyCells: (_e = props.bodyCells) !== null && _e !== void 0 ? _e : body_cell_1.BodyCells, NoRowsFallback: (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, 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 })));
+                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),
+                react_1.default.createElement(pagination_1.Pagination, { state: props.state, actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0 }))),
+        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions })));
 }
 exports.DataGrid = DataGrid;

package/data-grid.stories.js

@@ -24,12 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
+const buildArray_1 = require("@uxf/core/utils/buildArray");
 const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
 const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importStar(require("react"));
 const loader_1 = require("./_story-utils/loader");
 const schema_1 = require("./_story-utils/schema");
 const data_grid_1 = require("./data-grid");
+const table_1 = require("./table");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
 function Default() {
@@ -45,7 +47,29 @@ function Default() {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value) }),
-        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, onRemove: console.log, getOpenUrl: () => "https://www.uxf.cz", getEditUrl: () => "https://www.uxf.cz" }),
+        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, isRowSelectable: true, actionCell: {
+                width: 100,
+                Component: () => {
+                    const actionCellActions = (0, buildArray_1.buildArray)()
+                        .add({
+                        icon: "arrow-right",
+                        isIconButton: true,
+                        href: "https://www.uxf.cz",
+                        target: "_blank",
+                    })
+                        .add({
+                        icon: "file",
+                        label: "Download",
+                        onClick: console.log,
+                    })
+                        .add({
+                        icon: "cloud",
+                        label: "Reload",
+                        onClick: console.log,
+                    });
+                    return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
+                },
+            } }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/filter-handler/date.d.ts

@@ -0,0 +1,3 @@
+import { FilterHandler } from "./types";
+declare const date: FilterHandler;
+export default date;

package/filter-handler/date.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter_nullish_1 = require("@uxf/core/utils/filter-nullish");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const chip_1 = require("@uxf/ui/chip");
+const date_picker_input_1 = require("@uxf/ui/date-picker-input");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
+const date = {
+    input: function (props) {
+        var _a, _b;
+        const initializedValue = typeof ((_a = props.value.value) === null || _a === void 0 ? void 0 : _a.from) !== "undefined" && typeof ((_b = props.value.value) === null || _b === void 0 ? void 0 : _b.to) !== "undefined"
+            ? props.value
+            : { name: props.filter.name, value: { from: null, to: null } };
+        return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--date" },
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: initializedValue.value.from, onChange: (changedValue) => props.onFilter({
+                    ...initializedValue,
+                    value: { ...initializedValue.value, from: changedValue },
+                }), label: `${props.filter.label} (od)` }),
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: initializedValue.value.to, onChange: (changedValue) => props.onFilter({ ...initializedValue, value: { ...initializedValue.value, to: changedValue } }), label: `${props.filter.label} (do)` })));
+    },
+    listItem: function (props) {
+        if ((0, is_nil_1.isNil)(props.value.value)) {
+            return null;
+        }
+        const value = props.value.value;
+        if ((0, is_nil_1.isNil)(value.from) && (0, is_nil_1.isNil)(value.to)) {
+            return null;
+        }
+        const formatDate = [
+            value.from ? "od " + (0, dayjs_1.default)(value.from).format("l") : "",
+            value.to ? "do " + (0, dayjs_1.default)(value.to).format("l") : "",
+        ];
+        return (react_1.default.createElement(chip_1.Chip, { onClose: () => props.onFilter({ ...props.value, value: undefined }) },
+            props.filter.label,
+            " ",
+            (0, filter_nullish_1.filterNullish)(formatDate).join(" ")));
+    },
+};
+exports.default = date;

package/filter-handler/index.js

@@ -20,16 +20,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultFilterHandlers = void 0;
 const bool_filter_1 = __importDefault(require("./bool-filter"));
 const boolean_filter_1 = __importDefault(require("./boolean-filter"));
+const date_1 = __importDefault(require("./date"));
 const interval_filter_1 = __importDefault(require("./interval-filter"));
+const multi_select_1 = __importDefault(require("./multi-select"));
 const select_filter_1 = __importDefault(require("./select-filter"));
 const text_filter_1 = __importDefault(require("./text-filter"));
 __exportStar(require("./types"), exports);
 exports.defaultFilterHandlers = {
     text: text_filter_1.default,
     string: text_filter_1.default,
+    date: date_1.default,
     bool: bool_filter_1.default,
     boolean: boolean_filter_1.default,
     checkbox: boolean_filter_1.default,
     interval: interval_filter_1.default,
+    multiSelect: multi_select_1.default,
     select: select_filter_1.default,
 };

package/filter-handler/multi-select.d.ts

@@ -0,0 +1,3 @@
+import { FilterHandler } from "./types";
+declare const multiSelect: FilterHandler;
+export default multiSelect;

package/filter-handler/multi-select.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const chip_1 = require("@uxf/ui/chip");
+const multi_select_1 = require("@uxf/ui/multi-select");
+const react_1 = __importDefault(require("react"));
+const multiSelect = {
+    input: (props) => {
+        var _a, _b;
+        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: (_b = props.value.value) === null || _b === void 0 ? void 0 : _b.map((id) => { var _a; return (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id); }), onChange: (value) => {
+                props.onFilter({
+                    ...props.value,
+                    value: (0, is_nil_1.isNil)(value) || value.length === 0 ? null : value.map((item) => item.id),
+                });
+            } }));
+    },
+    listItem: (props) => {
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ":\u00A0",
+            props.value.value
+                .map((id) => { var _a, _b; return (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.id === id)) === null || _b === void 0 ? void 0 : _b.label; })
+                .join(", ")));
+    },
+};
+exports.default = multiSelect;

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.0.0-beta.8",
+  "version": "11.0.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
+  "bin": {
+    "uxf-data-grid-generator": "bin/uxf-data-grid-generator.js"
+  },
   "typings": "index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -27,9 +30,11 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/ui": "10.0.7",
+    "@uxf/ui": "11.0.0",
     "dayjs": "1.11.10",
-    "react-data-grid": "7.0.0-beta.39"
+    "fast-glob": "^3.3.2",
+    "react-data-grid": "7.0.0-beta.39",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
     "react": ">=18.2.0",

package/pagination/pagination.d.ts

@@ -2,7 +2,7 @@ import { Nullish } from "@uxf/core/types";
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
 interface PaginationProps extends DataGridControl {
-    totalCount: number | Nullish;
+    count: number | Nullish;
 }
 export declare function Pagination(props: PaginationProps): React.JSX.Element;
 export {};

package/pagination/pagination.js

@@ -8,8 +8,8 @@ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const pagination_1 = require("@uxf/ui/pagination");
 const react_1 = __importDefault(require("react"));
 function Pagination(props) {
-    const pageCount = (0, is_not_nil_1.isNotNil)(props.totalCount) && props.totalCount > 0
-        ? Math.max(Math.ceil(props.totalCount / props.state.request.perPage), 1)
+    const pageCount = (0, is_not_nil_1.isNotNil)(props.count) && props.count > 0
+        ? Math.max(Math.ceil(props.count / props.state.request.perPage), 1)
         : 1;
     return (react_1.default.createElement(pagination_1.Pagination, { count: pageCount, page: props.state.request.page + 1, onPageChange: (value) => props.actions.changePage(value - 1) }));
 }

package/pagination/pagination.stories.js

@@ -12,7 +12,7 @@ const pagination_1 = require("./pagination");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(pagination_1.Pagination, { state: state, actions: actions, totalCount: 100 }),
+        react_1.default.createElement(pagination_1.Pagination, { state: state, actions: actions, count: 100 }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/row-counts/row-counts.d.ts

@@ -3,5 +3,6 @@ import { DataGridControl } from "../use-data-grid-control";
 export interface RowCountsProps {
     state: DataGridControl["state"];
     totalCount: number;
+    count: number;
 }
 export declare function RowCounts(props: RowCountsProps): React.JSX.Element;

package/row-counts/row-counts.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowCounts = void 0;
+const show_1 = require("@uxf/core/components/show");
 const react_1 = __importDefault(require("react"));
 function RowCounts(props) {
     const fromNumber = props.state.request.page * props.state.request.perPage + 1;
@@ -13,6 +14,11 @@ function RowCounts(props) {
         "-",
         toNumber,
         " z ",
-        props.totalCount));
+        props.count,
+        " ",
+        react_1.default.createElement(show_1.Show, { when: props.count !== props.totalCount },
+            "(celkem ",
+            props.totalCount,
+            ")")));
 }
 exports.RowCounts = RowCounts;

package/row-counts/row-counts.stories.js

@@ -10,6 +10,6 @@ const use_data_grid_control_1 = require("../use-data-grid-control");
 const row_counts_1 = require("./row-counts");
 function Default() {
     const { state } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
-    return react_1.default.createElement(row_counts_1.RowCounts, { state: state, totalCount: 150 });
+    return react_1.default.createElement(row_counts_1.RowCounts, { state: state, totalCount: 150, count: 100 });
 }
 exports.Default = Default;

package/selected-rows-toolbar/selected-rows-toolbar.js

@@ -27,6 +27,6 @@ function SelectedRowsToolbar(props) {
             react_1.default.createElement("p", null, getText(props.state.selectedRows.length)),
             react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar-actions" },
                 props.Actions && (react_1.default.createElement(props.Actions, { state: props.state, actions: props.actions, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })),
-                react_1.default.createElement(button_1.Button, { onClick: () => props.actions.setSelectedRows([]) }, "Smazat")))));
+                react_1.default.createElement(button_1.Button, { onClick: () => props.actions.setSelectedRows([]) }, "Zru\u0161it v\u00FDb\u011Br")))));
 }
 exports.SelectedRowsToolbar = SelectedRowsToolbar;

package/styles.css

@@ -165,6 +165,12 @@
     }
 
     &__filter {
+        &--date {
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: repeat(2, 1fr);
+        }
+
         &--interval {
             display: grid;
             gap: theme("spacing.4");
@@ -292,8 +298,10 @@
         display: flex;
         justify-content: center;
         left: 0;
+        pointer-events: none;
         position: fixed;
         right: 0;
+        z-index: theme("zIndex.fixed");
     }
 
     &__selected-rows-toolbar {
@@ -307,6 +315,7 @@
         display: flex;
         justify-content: center;
         padding: theme("spacing.2") theme("spacing.6");
+        pointer-events: auto;
 
         :root .dark & {
             border-color: theme("colors.darkBorder");

package/table/components/action-cell-wrapper.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function ActionCellWrapper(props: PropsWithChildren): React.JSX.Element;

package/table/components/{action-cell-base.js → action-cell-wrapper.js}

@@ -23,11 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionCellBase = exports.ActionCellWrapper = void 0;
-const button_1 = require("@uxf/ui/button");
-const icon_1 = require("@uxf/ui/icon");
+exports.ActionCellWrapper = void 0;
 const react_1 = __importStar(require("react"));
-const ActionCellWrapper = (props) => {
+function ActionCellWrapper(props) {
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         var _a;
@@ -56,29 +54,5 @@ const ActionCellWrapper = (props) => {
         };
     }, []);
     return (react_1.default.createElement("div", { className: "uxf-data-grid__action-cell-wrapper", ref: innerRef }, props.children));
-};
+}
 exports.ActionCellWrapper = ActionCellWrapper;
-const Button = (props) => {
-    if (props.getUrl) {
-        const href = props.getUrl(props.row);
-        if (!href) {
-            return null;
-        }
-        return (react_1.default.createElement(button_1.Button, { href: href, title: props.title, variant: "white", size: "sm", isIconButton: true },
-            react_1.default.createElement(icon_1.Icon, { name: props.icon })));
-    }
-    if (props.onClick) {
-        return (react_1.default.createElement(button_1.Button, { variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.row); }, isIconButton: true },
-            react_1.default.createElement(icon_1.Icon, { name: props.icon })));
-    }
-    return null;
-};
-const ActionCellBase = (props) => {
-    const onRemove = props.onRemove;
-    const handleRemove = onRemove ? () => onRemove(props.row, props.reload) : undefined;
-    return (react_1.default.createElement(exports.ActionCellWrapper, null,
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" }),
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onEdit, getUrl: props.getEditUrl, icon: "pen", title: "Upravit" }),
-        react_1.default.createElement(Button, { row: props.row, onClick: handleRemove, getUrl: undefined, icon: "trash", title: "Smazat" })));
-};
-exports.ActionCellBase = ActionCellBase;

package/table/components/action-cell.d.ts

@@ -0,0 +1,7 @@
+import { ButtonListProps } from "@uxf/ui/button-list";
+import React from "react";
+export interface ActionCellProps {
+    buttons: ButtonListProps["buttons"];
+    visibleButtonsCount: ButtonListProps["visibleButtonsCount"];
+}
+export declare function ActionCell(props: ActionCellProps): React.JSX.Element;

package/table/components/action-cell.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = void 0;
+const button_list_1 = require("@uxf/ui/button-list");
+const react_1 = __importDefault(require("react"));
+const action_cell_wrapper_1 = require("./action-cell-wrapper");
+function ActionCell(props) {
+    return (react_1.default.createElement(action_cell_wrapper_1.ActionCellWrapper, null,
+        react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, visibleButtonsCount: props.visibleButtonsCount, variant: "white", size: "xs" })));
+}
+exports.ActionCell = ActionCell;

package/{hooks → table/hooks}/use-rdg-visuals.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { DataGridHandle } from "react-data-grid";
-import { BaseGridType, DataGridBaseProps } from "../types";
+import { DataGridBaseProps } from "../../types/data-grid-props";
+import { BaseGridType } from "../../types/schema";
 export declare function useRdgVisuals(props: {
     headerRowHeight?: DataGridBaseProps<BaseGridType, any>["headerRowHeight"];
-    mode?: DataGridBaseProps<BaseGridType, any>["mode"];
     rowHeight?: DataGridBaseProps<BaseGridType, any>["rowHeight"];
     rows: any[];
 }): {

package/{hooks → table/hooks}/use-rdg-visuals.js

@@ -9,7 +9,7 @@ function useRdgVisuals(props) {
     const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
     const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
     const contentHeight = typeof rowHeight === "function"
-        ? props.rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        ? props.rows.reduce((prev, curr) => prev + rowHeight(curr))
         : rowHeight * props.rows.length;
     const ref = (0, react_1.useRef)(null);
     const size = {
@@ -36,7 +36,7 @@ function useRdgVisuals(props) {
         return () => observer.disconnect();
     }, [mounted, storedSize]);
     return {
-        className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`,
+        className: "uxf-data-grid__table rdg-light",
         headerRowHeight,
         ready: mounted,
         ref,

package/table/hooks/use-react-data-grid-columns.js

@@ -25,14 +25,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReactDataGridColumns = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
-const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = require("react-data-grid");
-const action_cell_base_1 = require("../components/action-cell-base");
 function useReactDataGridColumns(props, state) {
-    var _a;
-    const { onReload, actionCellWidth, schema, isRowSelectable, BodyCells, getOpenUrl, onOpen, getEditUrl, onEdit, onRemove, } = props;
-    const ActionCell = (_a = props.ActionCell) !== null && _a !== void 0 ? _a : action_cell_base_1.ActionCellBase;
+    const { onReload, schema, isRowSelectable, bodyCells, actionCell } = props;
     const columnsConfig = state.userConfig.columns;
     return (0, react_1.useMemo)(() => {
         var _a;
@@ -58,7 +54,7 @@ function useReactDataGridColumns(props, state) {
                 renderCell: (p) => {
                     var _a;
                     const columnType = schemaColumn.type;
-                    const BodyCell = (_a = BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells[columnType]) !== null && _a !== void 0 ? _a : BodyCells === null || BodyCells === void 0 ? void 0 : BodyCells.default;
+                    const BodyCell = (_a = bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells[columnType]) !== null && _a !== void 0 ? _a : bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells.default;
                     if (!BodyCell) {
                         return null;
                     }
@@ -71,29 +67,18 @@ function useReactDataGridColumns(props, state) {
                 },
             });
         }
-        columns.push({
-            key: "__action_column",
-            name: "",
-            resizable: false,
-            headerCellClass: "uxf-data-grid__action-cell",
-            cellClass: "uxf-data-grid__action-cell",
-            width: actionCellWidth,
-            renderCell: (p) => (0, is_not_nil_1.isNotNil)(ActionCell) ? (react_1.default.createElement(ActionCell, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row, getEditUrl: getEditUrl, onEdit: onEdit, getOpenUrl: getOpenUrl, onOpen: onOpen, onRemove: onRemove })) : null,
-        });
+        if (actionCell) {
+            columns.push({
+                key: "__action_column",
+                name: "",
+                resizable: false,
+                headerCellClass: "uxf-data-grid__action-cell",
+                cellClass: "uxf-data-grid__action-cell",
+                width: actionCell.width,
+                renderCell: (p) => react_1.default.createElement(actionCell.Component, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row }),
+            });
+        }
         return columns;
-    }, [
-        columnsConfig,
-        ActionCell,
-        actionCellWidth,
-        schema.columns,
-        BodyCells,
-        isRowSelectable,
-        onOpen,
-        getOpenUrl,
-        onEdit,
-        getEditUrl,
-        onRemove,
-        onReload,
-    ]);
+    }, [columnsConfig, actionCell, schema.columns, bodyCells, isRowSelectable, onReload]);
 }
 exports.useReactDataGridColumns = useReactDataGridColumns;

package/table/index.d.ts

@@ -1 +1,3 @@
+export * from "./components/action-cell";
+export * from "./components/action-cell-wrapper";
 export * from "./table";

package/table/index.js

@@ -14,4 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/action-cell"), exports);
+__exportStar(require("./components/action-cell-wrapper"), exports);
 __exportStar(require("./table"), exports);

package/table/table.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./types";
-export declare function Table(props: TableProps<any>): React.JSX.Element | null;
+export declare function Table(props: TableProps<any>): React.JSX.Element;

package/table/table.js

@@ -27,10 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
+const show_1 = require("@uxf/core/components/show");
 const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = __importDefault(require("react-data-grid"));
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
+const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
 const defaultKeyExtractor = (r) => r.id;
 const DefaultNoRowsFallback = () => react_1.default.createElement("div", null, "no rows");
@@ -41,7 +43,7 @@ function Table(props) {
     const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
     const keyExtractor = (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor;
     const contentHeight = typeof rowHeight === "function"
-        ? props.data.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        ? props.data.reduce((prev, curr) => prev + rowHeight(curr))
         : (rowHeight + 1) * props.data.length;
     const reactDataGridStyles = {
         border: 0,
@@ -58,7 +60,10 @@ function Table(props) {
     }), [NoRowsFallback, error, isLoading]);
     const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props, props.state);
     const onSelectRows = (value) => {
-        const selectedRows = Array.from(value).map((id) => props.data.find((row) => keyExtractor(row) === id));
+        const selectedRows = Array.from(value).map((id) => {
+            var _a, _b;
+            return (_b = (_a = props.state.selectedRows) === null || _a === void 0 ? void 0 : _a.find((row) => keyExtractor(row) === id)) !== null && _b !== void 0 ? _b : props.data.find((row) => keyExtractor(row) === id);
+        });
         props.actions.setSelectedRows(selectedRows);
     };
     const onSortColumnChange = (sortColumns) => {
@@ -72,9 +77,12 @@ function Table(props) {
     const sortColumns = props.state.request.sort && props.state.request.dir
         ? [{ columnKey: props.state.request.sort, direction: props.state.request.dir.toUpperCase() }]
         : [];
-    if (!isMounted) {
-        return null;
-    }
-    return (react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: "uxf-data-grid__table", columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components }));
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        rowHeight: props.rowHeight,
+        rows: props.data,
+    });
+    return (react_1.default.createElement(show_1.Show, { when: isMounted },
+        react_1.default.createElement(react_data_grid_1.default, { ref: rdgVisuals.ref, style: reactDataGridStyles, className: rdgVisuals.className, columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rdgVisuals.rowHeight, headerRowHeight: rdgVisuals.headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components })));
 }
 exports.Table = Table;

package/table/table.stories.js

@@ -14,7 +14,7 @@ const table_1 = require("./table");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, BodyCells: body_cell_1.BodyCells, isRowSelectable: true, onOpen: console.log, onEdit: console.log, onRemove: console.log }),
+        react_1.default.createElement(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/table/types.d.ts

@@ -1,6 +1,7 @@
 import { Nullish } from "@uxf/core/types";
-import { DataGridProps as RDGProps } from "react-data-grid";
-import { ActionCellComponent, BodyCellComponents, KeyExtractor, Schema } from "../types";
+import { ActionCellComponent, BodyCellComponents } from "../types/components";
+import { KeyExtractor } from "../types/core";
+import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
 export interface TableProps<Row> extends DataGridControl {
@@ -9,18 +10,15 @@ export interface TableProps<Row> extends DataGridControl {
     isLoading?: boolean;
     error?: any | Nullish;
     onReload?: () => void;
-    rowHeight?: RDGProps<any>["rowHeight"];
-    headerRowHeight?: RDGProps<any>["headerRowHeight"];
+    rowHeight?: number | ((row: Row) => number);
+    headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     keyExtractor?: KeyExtractor;
-    BodyCells?: BodyCellComponents<any, any>;
-    ActionCell?: ActionCellComponent<any>;
-    actionCellWidth?: number;
+    bodyCells?: BodyCellComponents<any, any>;
+    actionCell?: {
+        width: number;
+        Component: ActionCellComponent<any>;
+    };
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
-    onOpen?: (row: Row) => void;
-    getOpenUrl?: (row: Row) => string | null | undefined;
-    onEdit?: (row: Row) => void;
-    getEditUrl?: (row: Row) => string | null | undefined;
-    onRemove?: (row: Row, reload: () => void) => void;
 }

package/toolbar-control/toolbar-control.js

@@ -15,8 +15,8 @@ function ToolbarControl(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
             react_1.default.createElement(fulltext_input_1.FulltextInput, { state: props.state, actions: props.actions })),
-        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers }),
+        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload })),
         react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
-        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload }))));
+        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers })));
 }
 exports.ToolbarControl = ToolbarControl;

package/types/components.d.ts

@@ -3,11 +3,6 @@ import { RequestFilter } from "./api";
 import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
-    onOpen?: (row: R) => void;
-    getOpenUrl?: (row: R) => string | null | undefined;
-    onEdit?: (row: R) => void;
-    getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R, reload: () => void) => void;
     reload: () => void;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;

package/types/data-grid-props.d.ts

@@ -1,10 +1,13 @@
-import { DataGridProps as RDGProps } from "react-data-grid";
+import { FilterHandlers } from "../filter-handler";
+import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
+import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
+import { TableProps } from "../table/types";
 import { ToolbarCustomsProps } from "../toolbar-customs";
 import { DataGridControl } from "../use-data-grid-control";
 import { DataGridFetchingResult } from "../use-data-grid-fetching";
+import { BodyCellComponents } from "./components";
 import { CsvDownloadHandler, KeyExtractor } from "./core";
 import { BaseGridType, Schema } from "./schema";
-import { UIComponents } from "./ui-components";
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
 export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
@@ -12,20 +15,18 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     keyExtractor?: KeyExtractor;
     onCsvDownload?: CsvDownloadHandler;
-    onOpen?: (row: Row) => void;
-    getOpenUrl?: (row: Row) => string | null | undefined;
-    onEdit?: (row: Row) => void;
-    getEditUrl?: (row: Row) => string | null | undefined;
-    onRemove?: (row: Row, reload: () => void) => void;
     noBorder?: boolean;
-    rowHeight?: RDGProps<any>["rowHeight"];
-    headerRowHeight?: RDGProps<any>["headerRowHeight"];
+    rowHeight?: number | ((row: Row) => number);
+    headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
-    debug?: boolean;
     className?: string;
     customActions?: ToolbarCustomsProps["buttons"];
-    mode?: "light" | "dark";
-    ui?: UIComponents<GridType, Row>;
+    actionCell?: TableProps<Row>["actionCell"];
+    bodyCells?: BodyCellComponents<GridType["columns"], Row>;
+    filterHandlers?: FilterHandlers;
+    NoRowsFallback?: NoRowsFallbackComponent;
+    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
     isRowSelectable?: boolean;
+    isDebug?: boolean;
 };
 export type DataGridProps<GridType extends BaseGridType, Row> = DataGridBaseProps<GridType, Row> & DataGridDataProps<Row> & DataGridControlProps;

package/types/index.d.ts

@@ -4,4 +4,3 @@ export * from "./core";
 export * from "./data-grid-props";
 export * from "./schema";
 export * from "./state";
-export * from "./ui-components";

package/types/index.js

@@ -20,4 +20,3 @@ __exportStar(require("./core"), exports);
 __exportStar(require("./data-grid-props"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./state"), exports);
-__exportStar(require("./ui-components"), exports);

package/use-data-grid-fetching/use-data-grid-fetching.js

@@ -12,6 +12,7 @@ function useDataGridFetching(config) {
     const reload = (0, react_1.useCallback)(() => {
         const stateRequest = JSON.parse(stringStateRequest);
         const request = (0, utils_1.createRequest)(stateRequest, schema.sort, schema.dir);
+        setIsLoading(true);
         loader(gridName, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {
             setData(response);

package/table/components/action-cell-base.d.ts

@@ -1,4 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { ActionCellComponent } from "../../types";
-export declare const ActionCellWrapper: FC<PropsWithChildren>;
-export declare const ActionCellBase: ActionCellComponent<any>;

package/types/ui-components.d.ts

@@ -1,18 +0,0 @@
-import { FilterHandlers } from "../filter-handler";
-import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
-import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
-import { ActionCellComponent, BodyCellComponents } from "./components";
-import { BaseGridType } from "./schema";
-export type ActionCellWithRequiredWidth<R> = {
-    ActionCell?: ActionCellComponent<R>;
-    actionCellWidth: number;
-} | {
-    ActionCell?: never;
-    actionCellWidth?: never;
-};
-export type UIComponents<GridType extends BaseGridType, R> = {
-    BodyCells?: BodyCellComponents<GridType["columns"], R>;
-    FilterHandlers?: FilterHandlers;
-    NoRowsFallback?: NoRowsFallbackComponent;
-    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
-} & ActionCellWithRequiredWidth<R>;

package/types/ui-components.js

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