@uxf/data-grid 10.0.0-beta.7 → 10.0.0-beta.70

package/data-grid.js

@@ -35,20 +35,15 @@ const useColumns_1 = require("./hooks/useColumns");
 const footer_1 = require("./tailwindui/components/footer");
 const show_1 = require("./tailwindui/show");
 const actions_1 = require("./store/actions");
+const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const defaultKeyExtractor = (r) => {
     return r.id;
 };
 // eslint-disable-next-line react/require-optimization
 const DataGrid = (props) => {
-    var _a, _b, _c, _d, _e;
-    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
-    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    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));
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-    }, []);
     // TODO @vejvis - tady vyřešit problém se závislostma v useCallbacku
     const schema = props.schema;
     const gridName = props.gridName;
@@ -86,11 +81,8 @@ const DataGrid = (props) => {
     const onFilter = (0, react_1.useCallback)((value) => {
         dispatch(actions_1.dataGridActions.filter(value));
     }, [dispatch]);
-    const rows = (_d = (_c = state.response) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [];
+    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 contentHeight = typeof rowHeight === "function"
-        ? rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
-        : (rowHeight + 1) * rows.length;
     const components = (0, react_1.useMemo)(() => {
         return {
             checkboxFormatter: SelectRowCheckbox,
@@ -111,22 +103,22 @@ const DataGrid = (props) => {
             dispatch(actions_1.dataGridActions.sortClear());
         }
     };
-    const reactDataGridStyles = {
-        border: 0,
-        borderRadius: 4,
-        height: contentHeight + headerRowHeight + (rows.length === 0 ? 44 : 0) + 4,
-        overflowY: "hidden",
-    };
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        mode: props.mode,
+        rowHeight: props.rowHeight,
+        rows,
+    });
     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, filtersData: state.request.f, fulltextValue: state.request.search, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText }),
+                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: mounted },
-                react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`, columns: columns, rows: rows, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: props.selectedRows, onSelectedRowsChange: props.onChangeSelectedRows, components: components })),
+            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 }),

package/data-grid.stories.js

@@ -75,7 +75,7 @@ const schema = {
         { name: "only-odd-ids", label: "Only odd ids blablabla" },
         // { name: "only-odd-ids", label: "Only odd ids" },
     ],
-    dir: "asc",
+    dir: _1.DataGridSortDir.Asc,
     sort: "id",
     perPage: 10,
     fullText: true,
@@ -223,12 +223,19 @@ const loader = async (_, request) => {
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };
+const onCsvDownload = (request) => {
+    // eslint-disable-next-line no-console
+    console.log(request);
+};
 function Default() {
     const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)([]);
     const [selectedRows, setSelectedRows] = (0, react_1.useState)(new Set());
     const callbackRef = (0, _1.useCallbackRef)();
     return (react_1.default.createElement("div", { className: "min-h-screen bg-gray-50 p-4 dark:bg-gray-950" },
-        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", defaultConfig: {
+        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: (row, reload) => {
+                console.log(row, reload);
+                reload();
+            }, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", onCsvDownload: onCsvDownload, defaultConfig: {
                 columns: {
                     id: { width: 50, hidden: true },
                     text: {},

package/hooks/use-rdg-visuals.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DataGridHandle } from "react-data-grid";
+import { BaseGridType, DataGridBaseProps } from "../types";
+export declare function useRdgVisuals(props: {
+    headerRowHeight?: DataGridBaseProps<BaseGridType, any>["headerRowHeight"];
+    mode?: DataGridBaseProps<BaseGridType, any>["mode"];
+    rowHeight?: DataGridBaseProps<BaseGridType, any>["rowHeight"];
+    rows: any[];
+}): {
+    className: string;
+    headerRowHeight: number;
+    ready: boolean;
+    ref: import("react").RefObject<DataGridHandle>;
+    rowHeight: number | ((row: any) => number);
+    style: {
+        height: number | undefined;
+    };
+};

package/hooks/use-rdg-visuals.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRdgVisuals = void 0;
+const react_1 = require("react");
+function useRdgVisuals(props) {
+    var _a, _b;
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    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 }))
+        : rowHeight * props.rows.length;
+    const ref = (0, react_1.useRef)(null);
+    const size = {
+        contentHeight,
+        headerRowHeight,
+        rowsCount: props.rows.length,
+    };
+    const storedSize = (0, react_1.useRef)(size);
+    storedSize.current = size;
+    const [height, setHeight] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const node = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.element;
+        if (!(mounted && node)) {
+            return;
+        }
+        const observer = new MutationObserver((mutations) => mutations.forEach(() => {
+            const currentSize = storedSize.current;
+            const scrollbarHeight = node.scrollWidth > node.clientWidth ? 8 : 0;
+            const emptyRowHeight = currentSize.rowsCount === 0 ? 44 : 0;
+            setHeight(currentSize.headerRowHeight + currentSize.contentHeight + emptyRowHeight + scrollbarHeight);
+        }));
+        observer.observe(node, { attributes: true, attributeFilter: ["style"] });
+        return () => observer.disconnect();
+    }, [mounted, storedSize]);
+    return {
+        className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`,
+        headerRowHeight,
+        ready: mounted,
+        ref,
+        rowHeight,
+        style: { height },
+    };
+}
+exports.useRdgVisuals = useRdgVisuals;

package/hooks/useColumns.js

@@ -47,7 +47,7 @@ const useColumns = (props, reload) => {
                 width: props.ui.ActionCell !== action_cell_base_1.ActionCellBase
                     ? actionCellWidth
                     : [onRemove, onEdit !== null && onEdit !== void 0 ? onEdit : getEditUrl, onOpen !== null && onOpen !== void 0 ? onOpen : getOpenUrl].filter((i) => i).length * 40 + 8 * 2,
-                formatter: (p) => {
+                renderCell: (p) => {
                     if (!props.ui.ActionCell) {
                         return null;
                     }
@@ -71,7 +71,7 @@ const useColumns = (props, reload) => {
                 minWidth: (_c = c.minWidth) !== null && _c !== void 0 ? _c : (_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _d === void 0 ? void 0 : _d.minWidth,
                 maxWidth: (_e = c.maxWidth) !== null && _e !== void 0 ? _e : (_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _f === void 0 ? void 0 : _f.maxWidth,
                 cellClass: (0, utils_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${c.type}`, `uxf-data-grid__cell--name-${c.name}`),
-                formatter: (p) => {
+                renderCell: (p) => {
                     var _a;
                     const columnType = c.type;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "10.0.0-beta.7",
+  "version": "10.0.0-beta.70",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -30,12 +30,13 @@
     "node": ">=8.9"
   },
   "peerDependencies": {
+    "@uxf/ui": "10.0.0-beta.69",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "dayjs": "^1.11.7"
   },
   "dependencies": {
-    "react-data-grid": "7.0.0-beta.13"
+    "react-data-grid": "7.0.0-beta.39"
   },
   "devDependencies": {},
   "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"

package/store/actions.d.ts

@@ -1,4 +1,4 @@
-import { RequestFilter, Response, SortDirection } from "../types";
+import { DataGridSortDir, RequestFilter, Response } from "../types";
 export declare const dataGridActions: {
     filter: (filterValue: RequestFilter) => {
         type: string;
@@ -34,10 +34,10 @@ export declare const dataGridActions: {
         type: string;
         search: string;
     };
-    sort: (columnName: string, direction: SortDirection) => {
+    sort: (columnName: string, direction: DataGridSortDir) => {
         type: string;
         columnName: string;
-        direction: SortDirection;
+        direction: DataGridSortDir;
     };
     sortClear: () => {
         type: string;

package/tailwindui/components/action-cell-base.js

@@ -74,9 +74,11 @@ const Button = (props) => {
     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.onRemove, getUrl: undefined, icon: "trash", title: "Smazat" }),
+        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: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" })));
+        react_1.default.createElement(Button, { row: props.row, onClick: handleRemove, getUrl: undefined, icon: "trash", title: "Smazat" })));
 };
 exports.ActionCellBase = ActionCellBase;

package/tailwindui/components/drawer.js

@@ -7,14 +7,21 @@ exports.Drawer = void 0;
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("@uxf/ui/icon");
 const button_1 = require("@uxf/ui/button");
+const react_2 = require("@floating-ui/react");
+const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
 const Drawer = (props) => {
-    return (react_1.default.createElement("main", { className: `uxf-data-grid__drawer uxf-data-grid__drawer--${props.open ? "open" : "closed"}` },
-        react_1.default.createElement("section", { className: `uxf-data-grid__drawer-body-wrapper ${props.open ? "uxf-data-grid__drawer-body-wrapper--open" : ""}` },
-            react_1.default.createElement("article", { className: "uxf-data-grid__drawer-body" },
-                react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: props.onClose, variant: "text", className: "uxf-data-grid__drawer-close-button" },
-                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge" })),
-                react_1.default.createElement("header", { className: "uxf-data-grid__drawer-header" }, props.title),
-                react_1.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))),
-        react_1.default.createElement("section", { className: "uxf-data-grid__drawer-backdrop", onClick: props.onClose })));
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    if (!isMounted) {
+        return null;
+    }
+    return (react_1.default.createElement(react_2.FloatingPortal, null,
+        react_1.default.createElement("div", { className: `uxf-data-grid__drawer uxf-data-grid__drawer--${props.open ? "open" : "closed"}` },
+            react_1.default.createElement("div", { className: `uxf-data-grid__drawer-body-wrapper ${props.open ? "uxf-data-grid__drawer-body-wrapper--open" : ""}` },
+                react_1.default.createElement("div", { className: "uxf-data-grid__drawer-body" },
+                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: props.onClose, variant: "text", className: "uxf-data-grid__drawer-close-button" },
+                        react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge" })),
+                    react_1.default.createElement("header", { className: "uxf-data-grid__drawer-header" }, props.title),
+                    react_1.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))),
+            react_1.default.createElement("section", { className: "uxf-data-grid__drawer-backdrop", onClick: props.onClose }))));
 };
 exports.Drawer = Drawer;

package/tailwindui/components/toolbar-control.js

@@ -32,6 +32,7 @@ const drawer_1 = require("./drawer");
 const toggle_1 = require("@uxf/ui/toggle");
 const actions_1 = require("../../store/actions");
 const show_1 = require("../show");
+const utils_1 = require("../../utils");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         var _a, _b;
@@ -47,21 +48,38 @@ function Filters(props) {
     })));
 }
 function Columns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: true, onChange: () => null })))));
+    const onHideColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), columnName]);
+    };
+    const onShowColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : [])].filter((v) => v !== columnName));
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
+        var _a;
+        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_a = props.hiddenColumns) === null || _a === void 0 ? void 0 : _a.includes(column.name)), onChange: (value) => (value ? onShowColumn(column.name) : onHideColumn(column.name)) }));
+    })));
 }
 const ToolbarControl = (props) => {
     const [isFiltersOpen, setFiltersOpen] = (0, react_1.useState)(false);
     const [isColumnsOpen, setColumnsOpen] = (0, react_1.useState)(false);
+    const fulltextValue = props.state.request.search;
+    const filtersData = props.state.request.f;
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(show_1.Show, { when: props.showFulltext },
-            react_1.default.createElement(text_input_1.TextInput, { value: props.fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }) })),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-filter" },
-            react_1.default.createElement(icon_1.Icon, { name: "filter" })),
+            react_1.default.createElement(text_input_1.TextInput, { value: fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), label: "Vyhled\u00E1v\u00E1n\u00ED", hiddenLabel: true })),
+        react_1.default.createElement(show_1.Show, { when: props.schema.filters.length !== 0 },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "filter" }))),
         react_1.default.createElement(show_1.Show, { when: props.onChangeHiddenColumns && props.hiddenColumns },
-            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F" },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
                 react_1.default.createElement(icon_1.Icon, { name: "table-columns" }))),
+        react_1.default.createElement(show_1.Show, { when: props.onCsvDownload },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onCsvDownload) === null || _a === void 0 ? void 0 : _a.call(props, (0, utils_1.createRequest)(props.state, props.schema.sort, props.schema.dir)); }, title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" }))),
         react_1.default.createElement(drawer_1.Drawer, { open: isFiltersOpen, onClose: () => setFiltersOpen(false), title: "Filtry" },
-            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: props.filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
+            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
         react_1.default.createElement(drawer_1.Drawer, { open: isColumnsOpen, onClose: () => setColumnsOpen(false), title: "Nastaven\u00ED sloupc\u016F" },
             react_1.default.createElement(Columns, { schema: props.schema, onChangeHiddenColumns: props.onChangeHiddenColumns, hiddenColumns: props.hiddenColumns }))));
 };

package/tailwindui/filter-handler/boolean-filter.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const chip_1 = require("@uxf/ui/chip");
 const checkbox_input_1 = require("@uxf/ui/checkbox-input");
 const BooleanFilterHandler = {
-    input: (props) => (react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: props.filter.label, value: props.value.value, onChange: (value) => props.onFilter({ ...props.value, value }) })),
+    input: (props) => (react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: props.filter.label, value: props.value.value, onChange: (value) => props.onFilter({ ...props.value, value: value === true ? value : undefined }) })),
     listItem: (props) => (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
         props.filter.label,
         ":\u00A0",

package/tailwindui/filter-handler/index.js

@@ -14,6 +14,7 @@ exports.defaultFilterHandlers = {
     string: text_filter_1.default,
     bool: bool_filter_1.default,
     boolean: boolean_filter_1.default,
+    checkbox: boolean_filter_1.default,
     interval: interval_filter_1.default,
     select: select_filter_1.default,
 };

package/tailwindui/styles.css

@@ -1,86 +1,179 @@
+@import url("react-data-grid/lib/styles.css");
+
+@layer rdg.Root {
+    .uxf-data-grid__table {
+        --rdg-color-scheme: light;
+        --rdg-color: theme("colors.lightHigh");
+        --rdg-border-color: theme("colors.lightBorder");
+        --rdg-summary-border-color: theme("colors.lightBorder");
+        --rdg-background-color: theme("colors.white");
+        --rdg-header-background-color: theme("colors.gray.50");
+        --rdg-row-hover-background-color: theme("colors.gray.50");
+        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
+        --row-selected-hover-background-color: theme("colors.gray.200/.75");
+        --rdg-selection-color: theme("colors.lightBorder");
+        --rdg-font-size: 14px;
+
+        :root .dark & {
+            --rdg-color-scheme: dark;
+            --rdg-color: theme("colors.darkHigh");
+            --rdg-border-color: theme("colors.darkBorder");
+            --rdg-summary-border-color: theme("colors.darkBorder");
+            --rdg-background-color: theme("colors.gray.950");
+            --rdg-header-background-color: theme("colors.gray.900");
+            --rdg-row-hover-background-color: theme("colors.gray.950");
+            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
+            --row-selected-hover-background-color: theme("colors.gray.800/.75");
+            --rdg-selection-color: theme("colors.darkBorder");
+            --rdg-font-size: 14px;
+        }
+    }
+}
+
 .uxf-data-grid {
-    @apply border border-gray-300 dark:border-gray-700 rounded;
+    border: 1px solid var(--rdg-border-color);
+    border-radius: theme("borderRadius.DEFAULT");
 
     &.no-border {
-        @apply border-0;
+        border-style: none;
     }
 
     &__action-cell {
-        @apply sticky right-0;
-
-        border-inline-start: 1px solid theme("colors.gray.200");
-
-        :root .dark & {
-            border-inline-start: 1px solid theme("colors.gray.700");
-        }
+        background-color: var(--rdg-background-color);
+        border-inline-start: 1px solid var(--rdg-border-color);
+        position: sticky;
+        right: 0;
     }
 
     &__action-cell-wrapper {
-        @apply flex items-center justify-center text-center w-full h-full space-x-2;
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
 
         .uxf-icon {
-            @apply text-gray-400 dark:text-gray-500;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__body-cell {
         &--boolean {
-            @apply w-full h-full flex items-center;
+            align-items: center;
+            display: flex;
+            height: 100%;
+            width: 100%;
         }
     }
 
     &__drawer {
-        @apply fixed overflow-hidden z-10 bg-gray-900 bg-opacity-25 dark:bg-opacity-75 inset-0 transform ease-in-out;
+        @apply ease-in-out;
+
+        background-color: theme("colors.gray.900/.25");
+        inset: 0;
+        overflow: hidden;
+        position: fixed;
+        z-index: theme("zIndex.modal");
+
+        :root .dark & {
+            background-color: theme("colors.gray.900/.75");
+        }
 
         &--open {
-            @apply transition-opacity opacity-100 duration-500 translate-x-0;
+            @apply transition-opacity duration-500;
+
+            opacity: 100;
+            transform: translateX(0);
         }
 
         &--closed {
-            @apply transition-all delay-500 opacity-0 translate-x-full;
+            @apply transition-all delay-500;
+
+            opacity: 0;
+            transform: translateX(100%);
         }
 
         &-body-wrapper {
-            @apply w-11/12 max-w-sm right-0 absolute bg-white h-full shadow-xl duration-500 ease-in-out transition-all transform translate-x-full;
+            @apply transition-all duration-500 ease-in-out;
+
+            background-color: theme("colors.white");
+            box-shadow: theme("boxShadow.xl");
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            position: absolute;
+            right: 0;
+            transform: translateX(100%);
+            width: theme("width.11/12");
 
             &--open {
-                @apply translate-x-0;
+                transform: translateX(0);
             }
         }
 
         &-body {
-            @apply relative w-full max-w-sm pb-10 flex flex-col overflow-y-scroll h-full dark:bg-gray-950 dark:text-gray-100;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            overflow-y: scroll;
+            padding-bottom: theme("spacing.10");
+            position: relative;
+            width: 100%;
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+                color: theme("colors.gray.100");
+            }
         }
 
         &-close-button {
-            @apply ml-auto !mt-4 mr-4;
+            margin-left: auto;
+            margin-right: theme("spacing.4");
+            margin-top: theme("spacing.4") !important;
         }
 
         &-header {
-            @apply p-4 pt-8 font-bold text-lg;
+            font-weight: theme("fontWeight.bold");
+            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
         }
 
         &-content {
-            @apply p-4;
+            padding: theme("spacing.4");
         }
 
         &-backdrop {
-            @apply w-screen h-full cursor-pointer;
+            cursor: pointer;
+            height: 100%;
+            width: 100vw;
         }
     }
 
     &__fallback {
+        align-items: center;
+        color: theme("colors.gray.600"); /* ?? */
+        display: flex;
         grid-column: 1/-1;
-
-        @apply flex items-center justify-center text-center text-gray-600; /* ?? */
+        justify-content: center;
+        text-align: center;
     }
 
     &__filter {
         &--interval {
-            @apply gap-4 grid grid-cols-[1fr_min-content_1fr];
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: 1fr min-content 1fr;
 
             .uxf-data-grid__filter-gap {
-                @apply flex items-center pt-5;
+                align-items: center;
+                display: flex;
+                padding-top: theme("spacing.5");
             }
         }
     }
@@ -90,249 +183,393 @@
     }
 
     &__filter-list {
-        @apply p-2 space-x-2;
+        @apply space-x-2;
+
+        padding: theme("spacing.2");
     }
 
     &__footer {
-        @apply flex flex-wrap items-center justify-end p-2 gap-4;
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.4");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
 
         &.no-border {
-            @apply px-0;
+            padding-inline: 0;
         }
     }
 
     &__linear-progress {
-        position: absolute;
-        z-index: 1;
+        border-radius: 20px;
+        height: 3px;
         left: 0;
-        right: 0;
         overflow: hidden;
-        height: 3px;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
+        position: absolute;
+        right: 0;
+        z-index: 1;
 
         &.is-loading::before {
-            content: '';
-            position: absolute;
-            left: -50%;
+            animation: datagridlineanim 1s linear infinite;
+            background-color: theme("colors.dataGridSecondary");
+            border-radius: inherit;
+            content: "";
             height: 3px;
+            left: -50%;
+            position: absolute;
             width: 40%;
-            background-color: theme("colors.dataGridSecondary");
-            -webkit-animation: datagridlineanim 1s linear infinite;
-            -moz-animation: datagridlineanim 1s linear infinite;
-            animation: datagridlineanim 1s linear infinite;
-            -webkit-border-radius: 20px;
-            -moz-border-radius: 20px;
-            border-radius: 20px;
         }
     }
 
     &__linear-progress-wrapper {
-        @apply relative;
+        position: relative;
     }
 
     &__pagination-counts {
-        @apply text-sm text-neutral-700 text-lightLow;
+        @apply text-sm;
+
+        color: theme("colors.lightLow");
     }
 
     &__plugin-fulltext {
-        @apply my-2 text-gray-400 w-full sm:w-auto;
+        color: theme("colors.gray.400");
+        margin: theme("spacing.2") 0;
+        width: 100%;
+
+        @screen sm {
+            width: auto;
+        }
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
-    &__plugin-filter {
-        @apply my-2 shrink-0;
+    &__plugin-button {
+        flex-shrink: 0;
+        margin: theme("spacing.2") 0;
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__rows-per-page {
-        @apply flex flex-wrap gap-2 text-sm text-gray-700 items-center text-lightLow;
+        @apply text-sm;
+
+        align-items: center;
+        color: theme("colors.lightLow");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
 
         .uxf-select {
-            @apply w-28;
+            width: theme("width.28");
         }
     }
 
     &__select-row-checkbox-wrapper {
-        @apply flex items-center justify-center text-white w-full h-full;
+        align-items: center;
+        color: theme("colors.white");
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
     }
 
     &__selected-rows-toolbar-wrapper {
-        @apply fixed bottom-8 left-0 right-0 flex flex-row justify-center items-center;
+        align-items: center;
+        bottom: theme("spacing.8");
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        right: 0;
     }
 
     &__selected-rows-toolbar {
-        @apply text-white text-sm bg-dataGridPrimary rounded-full px-6 py-2 flex items-center justify-center drop-shadow-xl border border-gray-100 dark:border-gray-800;
+        @apply text-sm drop-shadow-xl;
+
+        align-items: center;
+        background-color: theme("colors.dataGridPrimary");
+        border: 1px solid theme("colors.lightBorder");
+        border-radius: 999px;
+        color: theme("colors.white");
+        display: flex;
+        justify-content: center;
+        padding: theme("spacing.2") theme("spacing.6");
+
+        :root .dark & {
+            border-color: theme("colors.darkBorder");
+        }
     }
 
     &__selected-rows-toolbar-actions {
-        @apply pl-4 space-x-2;
+        @apply space-x-2;
+
+        padding-left: theme("spacing.4");
     }
 
     &__table {
-        @apply rounded-none;
+        overflow-y: hidden;
+
+        &::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: theme("colors.lightLow");
+            border-radius: 999px;
+
+            :root .dark & {
+                background-color: theme("colors.darkLow");
+            }
+        }
     }
 
     &__toolbar {
-        @apply flex flex-wrap gap-2 items-center justify-end border-b border-b-gray-300 dark:border-b-gray-700 px-2 md:pl-0 py-2 md:py-0;
+        align-items: center;
+        border-bottom: 1px solid theme("colors.lightBorder");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
+
+        :root .dark & {
+            border-bottom-color: theme("colors.darkBorder");
+        }
+
+        @screen md {
+            padding-block: 0;
+            padding-left: 0;
+        }
     }
 
     &__toolbar-tab {
-        @apply inline-flex items-center hover:text-gray-700 whitespace-nowrap p-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700;
+        @apply text-sm;
+
+        align-items: center;
+        border-bottom: 2px solid transparent;
+        color: theme("colors.lightMedium");
+        display: inline-flex;
+        font-weight: theme("fontWeight.medium");
+        padding: theme("spacing.4");
+        white-space: nowrap;
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
+        }
 
         &.is-active {
-            @apply border-dataGridPrimary text-dataGridPrimary;
+            border-bottom-color: currentcolor;
+            color: theme("colors.dataGridPrimary");
         }
     }
 
     &__toolbar-tabs {
-        @apply flex flex-1 self-stretch;
+        align-self: stretch;
+        display: flex;
+        flex: 1;
 
         &-nav {
             &--desktop {
-                @apply -mb-px space-x-4 hidden;
+                @apply space-x-4;
 
-                @media screen(md) {
-                    @apply flex;
+                display: none;
+                margin-bottom: -1px;
+
+                @screen md {
+                    display: flex;
                 }
             }
 
             &--mobile {
-                @apply flex items-center z-10 w-max;
+                align-items: center;
+                display: flex;
+                width: max-content;
+                z-index: theme("zIndex.10");
 
-                @media screen(md) {
-                    @apply hidden;
+                @screen md {
+                    display: none;
                 }
 
                 .uxf-data-grid__toolbar-tabs-button {
-                    @apply m-0 flex items-center;
+                    align-items: center;
+                    display: flex;
+                    margin: 0;
 
                     &-icon {
-                        @apply ml-1 text-lightHigh dark:text-darkHigh;
+                        color: theme("colors.lightHigh");
+                        margin-left: theme("spacing.1");
+
+                        :root .dark & {
+                            color: theme("colors.darkHigh");
+                        }
                     }
                 }
             }
 
             &-text {
-                @apply text-lightHigh dark:text-darkHigh;
+                color: theme("colors.lightHigh");
+
+                :root .dark & {
+                    color: theme("colors.darkHigh");
+                }
             }
         }
 
         &-modal-content {
-            @apply flex flex-col items-start divide-y divide-lightBorder dark:divide-darkBorder pb-4 pt-1 text-left;
+            @apply divide-y divide-lightBorder dark:divide-darkBorder;
+
+            align-items: flex-start;
+            display: flex;
+            flex-direction: column;
+            padding-bottom: theme("spacing.4");
+            padding-top: theme("spacing.1");
+            text-align: left;
         }
 
         &-modal-button {
-            @apply justify-start w-full;
+            border-radius: 0;
+            justify-content: flex-start;
+            width: 100%;
         }
 
         &-modal-button-text {
-            @apply text-lightHigh dark:text-darkHigh;
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
         }
 
         &-modal-active-tab-icon {
-            @apply text-lightMedium dark:text-darkMedium mr-3;
+            color: theme("colors.lightMedium");
+            margin-right: theme("spacing.3");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__toolbar-control {
-        @apply flex flex-row items-center justify-between gap-2 order-3 xs:order-2 w-full xs:w-auto;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        justify-content: space-between;
+        order: 3;
+        width: 100%;
+
+        @screen xs {
+            order: 2;
+            width: auto;
+        }
     }
 
     &__toolbar-customs {
-        @apply flex flex-row items-center gap-2 order-2 xs:order-3 md:my-2;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        order: 2;
+
+        @screen xs {
+            order: 2;
+        }
+
+        @screen md {
+            margin-block: theme("spacing.2");
+        }
 
         &-mobile {
-            @apply md:hidden;
+            display: flex;
+
+            @screen md {
+                display: none;
+            }
         }
 
         &-desktop {
-            @apply hidden md:block;
+            display: none;
+
+            @screen md {
+                display: flex;
+                gap: theme("spacing.2");
+            }
         }
     }
 }
 
 .rdg-cell.action {
-    text-align: right;
-    border-right: 0;
     align-items: center;
+    border-right: 0;
+    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     display: flex;
     justify-content: center;
     position: sticky;
-    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     right: 0;
+    text-align: right;
 }
 
 .rdg-header-row {
-    @apply bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-600 font-medium;
+    color: theme("colors.lightLow");
+    font-weight: theme("fontWeight.normal");
+
+    :root .dark & {
+        color: theme("colors.darkLow");
+    }
 
     .rdg-cell {
-        @apply rounded-none bg-gray-50 dark:bg-gray-900 dark:text-darkMedium;
+        background-color: var(--rdg-header-background-color);
 
-        &:not(:first-child) {
-            border-inline-start: 1px solid theme("colors.gray.200");
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
 
-            :root .dark & {
-                border-inline-start: 1px solid theme("colors.gray.700");
-            }
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--rdg-border-color);
         }
     }
 }
 
 .rdg-header-sort-name + span {
-    display: flex;
     align-items: center;
+    display: flex;
 }
 
 .rdg-cell {
+    border-block-end-width: 1px;
+    border-color: var(--rdg-border-color);
     border-inline-end: none;
 
     &.rdg-cell-frozen {
         box-shadow: none;
     }
-
-    &[aria-selected="true"] {
-        outline-color: theme("colors.gray.300");
-
-        :root .dark & {
-            outline-color: theme("colors.gray.700");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"] {
-    @apply bg-gray-100/75 dark:bg-gray-900/75;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.900");
-        }
-    }
-}
-
-.rdg-row:hover {
-    @apply bg-gray-50 dark:bg-gray-950;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.950");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"]:hover {
-    @apply bg-gray-200/75 dark:bg-gray-800/75;
 }
 
 @keyframes datagridlineanim {
@@ -349,4 +586,4 @@
         left: 100%;
         width: 100%;
     }
-}
+}

package/types/api.d.ts

@@ -1,4 +1,4 @@
-import { SortDirection } from "./schema";
+import { DataGridSortDir } from "./schema";
 export type ResultItem = any;
 export interface RequestFilter<T = any> {
     name: string;
@@ -9,7 +9,7 @@ export interface RequestFilter<T = any> {
 export interface Request {
     f?: RequestFilter[];
     sort?: string;
-    dir?: SortDirection;
+    dir?: DataGridSortDir;
     page?: number;
     perPage?: number;
     search?: string;

package/types/components.d.ts

@@ -2,8 +2,9 @@ import React, { ComponentType, FC, ReactElement, ReactNode } from "react";
 import { BaseGridType, Columns, Filter, Filters, Schema } from "./schema";
 import { RequestFilter, Response } from "./api";
 import { PaginationProps } from "@uxf/ui/pagination/pagination";
-import { CheckboxFormatterProps } from "react-data-grid";
-import { ChangeHiddenColumnsHandler } from "./core";
+import { RenderCheckboxProps } from "react-data-grid";
+import { ChangeHiddenColumnsHandler, CsvDownloadHandler } from "./core";
+import { DataGridState } from "./state";
 /**
  * Action cell
  */
@@ -13,7 +14,7 @@ export interface ActionCellProps<R> {
     getOpenUrl?: (row: R) => string | null | undefined;
     onEdit?: (row: R) => void;
     getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R) => void;
+    onRemove?: (row: R, reload: () => void) => void;
     reload: () => Promise<void>;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
@@ -127,7 +128,7 @@ export type SelectedRowsToolbarComponent = FC<SelectedRowsToolbarProps>;
 /**
  * Select row checkbox
  */
-export type SelectRowCheckboxComponent = React.FC<CheckboxFormatterProps>;
+export type SelectRowCheckboxComponent = React.FC<RenderCheckboxProps>;
 /**
  * Selected rows toolbar actions
  */
@@ -152,14 +153,14 @@ export interface ToolbarControlProps {
     gridName: string | undefined;
     schema: Schema<any>;
     dispatch: (action: any) => void;
-    filtersData: RequestFilter[];
     filterHandlers: FilterHandlers;
-    fulltextValue: string;
     onFulltextChange: (value: string) => void;
     noBorder: boolean | null | undefined;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     showFulltext?: boolean;
+    state: DataGridState;
 }
 export type ToolbarControlComponent = React.FC<ToolbarControlProps>;
 /**

package/types/core.d.ts

@@ -2,6 +2,7 @@ import { Request, Response, ResultItem } from "./api";
 import { BaseGridType } from "./schema";
 export type KeyExtractor = (row: ResultItem) => number;
 export type ChangeHiddenColumnsHandler = (hiddenColumns: string[]) => void;
+export type CsvDownloadHandler = (request: Request) => void;
 export type Loader = (gridName: string | undefined, request: Request, encodedRequest: string) => Promise<Response>;
 export type CallbackRef = {
     reload: () => Promise<void>;

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

@@ -4,7 +4,7 @@ import { Request } from "./api";
 import { DataGridProps as RDGProps } from "react-data-grid";
 import { ToolbarCustomsProps } from "./components";
 import { UIComponents } from "./ui-components";
-import { CallbackRef, ChangeHiddenColumnsHandler, Config, KeyExtractor, Loader } from "./core";
+import { CallbackRef, ChangeHiddenColumnsHandler, Config, CsvDownloadHandler, KeyExtractor, Loader } from "./core";
 export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     callbackRef?: MutableRefObject<CallbackRef | undefined>;
     schema: Schema<GridType>;
@@ -14,6 +14,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     keyExtractor?: KeyExtractor;
     initialState?: Request | string;
     onChangeHiddenColumns?: ChangeHiddenColumnsHandler;
+    onCsvDownload?: CsvDownloadHandler;
     hiddenColumns?: string[];
     onChangeSelectedRows?: (selectedRows: Set<number>) => void;
     selectedRows?: Set<number>;
@@ -21,7 +22,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, R> = {
     getOpenUrl?: (row: R) => string | null | undefined;
     onEdit?: (row: R) => void;
     getEditUrl?: (row: R) => string | null | undefined;
-    onRemove?: (row: R) => void;
+    onRemove?: (row: R, reload: () => void) => void;
     noBorder?: boolean;
     rowHeight?: RDGProps<any>["rowHeight"];
     headerRowHeight?: RDGProps<any>["headerRowHeight"];

package/types/schema.d.ts

@@ -1,5 +1,8 @@
 import { ReactElement } from "react";
-export type SortDirection = "asc" | "desc";
+export declare enum DataGridSortDir {
+    Asc = "asc",
+    Desc = "desc"
+}
 export interface Tab {
     name: string;
     label: string;
@@ -42,7 +45,7 @@ export interface Schema<GritType extends BaseGridType> {
     filters: Filters<GritType["filters"]>[];
     tabs?: Tab[];
     sort: string;
-    dir: SortDirection;
+    dir: DataGridSortDir;
     perPage: number;
     fullText?: boolean;
 }

package/types/schema.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSortDir = void 0;
+var DataGridSortDir;
+(function (DataGridSortDir) {
+    DataGridSortDir["Asc"] = "asc";
+    DataGridSortDir["Desc"] = "desc";
+})(DataGridSortDir || (exports.DataGridSortDir = DataGridSortDir = {}));

package/types/state.d.ts

@@ -1,9 +1,9 @@
 import { RequestFilter, Response } from "./api";
-import { SortDirection } from "./schema";
+import { DataGridSortDir } from "./schema";
 type GridRequest = {
     f: RequestFilter[];
     sort: string | null;
-    dir: SortDirection | null;
+    dir: DataGridSortDir | null;
     page: number;
     perPage: number;
     search: string;

package/utils.d.ts

@@ -1,7 +1,7 @@
-import { DataGridState, Request, SortDirection } from "./types";
+import { DataGridSortDir, DataGridState, Request } from "./types";
 export declare function decodeFilter(filterString: string): null | Request;
 export declare function encodeFilter(request: Request): string;
-export declare function createRequest(state: DataGridState, defaultSort: string, defaultDir: SortDirection): Request;
+export declare function createRequest(state: DataGridState, defaultSort: string, defaultDir: DataGridSortDir): Request;
 export type ClassArray = ClassValue[];
 export type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
 export declare function cx(...classes: ClassValue[]): string;