@uxf/data-grid 11.12.1 → 11.15.0

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

@@ -1,3 +1,5 @@
+import { MultiSelectProps } from "@uxf/ui/multi-select";
 import { FilterHandler } from "./types";
-declare const multiSelect: FilterHandler;
-export default multiSelect;
+type StateValue = MultiSelectProps["value"];
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/multi-select.js

@@ -3,27 +3,24 @@ 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 is_empty_1 = require("@uxf/core/utils/is-empty");
 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),
-                });
-            }, name: props.filter.name }));
+const filterHandler = {
+    Input(props) {
+        var _a;
+        const onChange = (value) => {
+            props.onChange(Array.isArray(value) && !(0, is_empty_1.isEmpty)(value) ? value : null);
+        };
+        return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: onChange, name: props.filter.name }));
     },
-    listItem: (props) => {
+    ListItem(props) {
+        var _a;
         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(", ")));
+            ":\u00A0", (_a = props.value) === null || _a === void 0 ? void 0 :
+            _a.map((item) => item.label).join(", ")));
     },
 };
-exports.default = multiSelect;
+exports.default = filterHandler;

package/filter-handler/select.d.ts

@@ -0,0 +1,5 @@
+import { SelectValue } from "@uxf/ui/select";
+import { FilterHandler } from "./types";
+type StateValue = SelectValue | null;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/{select-filter.js → select.js}

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const chip_1 = require("@uxf/ui/chip");
 const select_1 = require("@uxf/ui/select");
 const react_1 = __importDefault(require("react"));
-const SelectFilterHandler = {
-    input: (props) => {
+const filterHandler = {
+    Input(props) {
         var _a;
-        return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value.value, onChange: (value) => props.onFilter({ ...props.value, value }), isClearable: true, name: props.filter.name }));
+        return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name }));
     },
-    listItem: (props) => {
+    ListItem(props) {
         var _a, _b, _c;
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
-            ":\u00A0", (_c = (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === props.value.value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ""));
+            ":\u00A0", (_c = (_b = (_a = props.filter.options) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === props.value)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ""));
     },
 };
-exports.default = SelectFilterHandler;
+exports.default = filterHandler;

package/filter-handler/string.d.ts

@@ -0,0 +1,4 @@
+import { FilterHandler } from "./types";
+type StateValue = string | null;
+declare const filterHandler: FilterHandler<StateValue>;
+export default filterHandler;

package/filter-handler/{text-filter.js → string.js}

@@ -3,22 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const chip_1 = require("@uxf/ui/chip");
 const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
-const TextFilterHandler = {
-    input: (props) => {
+const filterHandler = {
+    Input(props) {
         var _a;
-        return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onFilter({ ...props.value, value }), name: props.filter.name }));
+        return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onChange(value), name: props.filter.name }));
     },
-    listItem: (props) => {
-        if (!props.value.value) {
+    ListItem(props) {
+        if ((0, is_nil_1.isNil)(props.value) || (0, is_empty_1.isEmpty)(props.value)) {
             return null;
         }
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
             ": ",
-            props.value.value));
+            props.value));
     },
 };
-exports.default = TextFilterHandler;
+exports.default = filterHandler;

package/filter-handler/types.d.ts

@@ -1,8 +1,7 @@
-import { ComponentType } from "react";
+import { FunctionComponent } from "react";
 import { FilterProps } from "../types/components";
-import { BaseGridType, Filters } from "../types/schema";
-export type FilterComponent<F extends BaseGridType["filters"], T = any> = ComponentType<FilterProps<Filters<F>, T>>;
-export interface FilterHandler {
-    input: FilterComponent<any>;
-    listItem: FilterComponent<any>;
+export type FilterComponent<StateValue> = FunctionComponent<FilterProps<StateValue>>;
+export interface FilterHandler<StateValue> {
+    Input: FilterComponent<StateValue>;
+    ListItem: FilterComponent<StateValue>;
 }

package/filter-list/filter-list.js

@@ -5,25 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterList = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
+const create_filter_component_props_1 = require("../utils/create-filter-component-props");
 function FilterList(props) {
     const renderedFilters = props.state.request.f
         .map((filterRequest) => {
-        var _a;
-        if (typeof filterRequest.value !== "number" && !filterRequest.value) {
-            return null;
-        }
         const filter = props.schema.filters.find((f) => f.name === filterRequest.name);
-        if (!filter) {
+        if ((0, is_nil_1.isNil)(filter)) {
             return null;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const FilterListItem = (_a = props.filterHandlers[filter.type]) === null || _a === void 0 ? void 0 : _a.listItem;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const filterHandler = props.filterHandlers[filter.type];
+        const FilterListItem = filterHandler === null || filterHandler === void 0 ? void 0 : filterHandler.ListItem;
         if (!FilterListItem) {
             return null;
         }
-        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, filter: filter, onFilter: props.actions.filter, gridName: props.gridName, value: filterRequest, onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
+        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
     })
         .filter((item) => !!item);
     if (renderedFilters.length === 0) {

package/filters/filters.js

@@ -5,21 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filters = void 0;
 const react_1 = __importDefault(require("react"));
+const create_filter_component_props_1 = require("../utils/create-filter-component-props");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
-        var _a, _b;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const FilterInput = (_a = props.filterHandlers[filter.type]) === null || _a === void 0 ? void 0 : _a.input;
+        const filterHandler = props.filterHandlers[filter.type];
+        const FilterInput = filterHandler === null || filterHandler === void 0 ? void 0 : filterHandler.Input;
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!FilterInput) {
             // eslint-disable-next-line no-console
             console.warn(`Unknown filter "${filter.type}".`);
             return null;
         }
-        return (react_1.default.createElement(FilterInput, { key: filter.name, gridName: props.gridName, filter: filter, value: (_b = props.state.request.f.find((f) => f.name === filter.name)) !== null && _b !== void 0 ? _b : {
-                name: filter.name,
-                value: null,
-            }, onFilter: (requestFilter) => props.actions.filter(requestFilter), onClear: () => props.actions.filter({ name: filter.name, value: null }) }));
+        return (react_1.default.createElement(FilterInput, { key: filter.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
     })));
 }
 exports.Filters = Filters;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.12.1",
+  "version": "11.15.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -31,8 +31,10 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/ui": "11.12.1",
+    "@uxf/core": "11.11.3",
+    "@uxf/ui": "11.15.0",
     "dayjs": "1.11.10",
+    "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",
     "qs": "6.11.2",
     "react-data-grid": "7.0.0-beta.39",

package/styles.css

@@ -1,4 +1,5 @@
 @import url("react-data-grid/lib/styles.css");
+@import url("./table-v2/styles.css");
 
 @layer rdg.Root {
     .uxf-data-grid__table {
@@ -165,7 +166,8 @@
     }
 
     &__filter {
-        &--date {
+        &--date,
+        &--datetime {
             display: grid;
             gap: theme("spacing.4");
             grid-template-columns: repeat(2, 1fr);

package/table-v2/hooks/use-resizable-columns.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Column } from "../../types";
+import { DataGridControl } from "../../use-data-grid-control";
+import { TableProps } from "../types";
+export declare function useResizableColumns(columns: Column<any, any>[], actionCell: TableProps<any>["actionCell"], actions: DataGridControl["actions"]): {
+    tableRef: import("react").RefObject<HTMLDivElement>;
+    columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    onResizeStart(index: number): void;
+};

package/table-v2/hooks/use-resizable-columns.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizableColumns = void 0;
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const rem_1 = require("@uxf/styles/units/rem");
+const react_1 = require("react");
+function mapColumnSizesToGridTemplateColumns(columnSizes, actionCellWidth) {
+    const normalizedColumnSizes = columnSizes.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "1fr"));
+    return (0, is_nil_1.isNil)(actionCellWidth)
+        ? `${normalizedColumnSizes.join(" ")}`
+        : `${normalizedColumnSizes.join(" ")} ${(0, rem_1.rem)(actionCellWidth)}`;
+}
+function useResizableColumns(columns, actionCell, actions) {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const columnRefs = (0, react_1.useRef)([]);
+    const actionCellWidth = actionCell === null || actionCell === void 0 ? void 0 : actionCell.width;
+    (0, react_1.useEffect)(() => {
+        let tempColumnSizes = [];
+        const onMouseMove = (e) => {
+            const gridColumns = columns.map((_, i) => {
+                var _a, _b, _c, _d;
+                const columnRef = columnRefs.current[i];
+                if (i === activeIndex) {
+                    const tableScrollLeft = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                    const columnOffsetLeft = (_c = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _c !== void 0 ? _c : 0;
+                    const clickPositionX = e.clientX + tableScrollLeft;
+                    const width = clickPositionX - columnOffsetLeft;
+                    return width >= 50 ? width : 50;
+                }
+                return (_d = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _d !== void 0 ? _d : 50;
+            });
+            // TODO @vejvis - jak tohle udělat lépe??
+            tempColumnSizes = gridColumns;
+            if (tableRef.current) {
+                tableRef.current.style.gridTemplateColumns = mapColumnSizesToGridTemplateColumns(gridColumns, actionCellWidth);
+            }
+        };
+        const onMouseUp = () => {
+            setActiveIndex(null);
+            if (!(0, is_empty_1.isEmpty)(tempColumnSizes)) {
+                const userConfigColumns = {};
+                columns.forEach((column, index) => {
+                    userConfigColumns[column.name] = { width: tempColumnSizes[index] };
+                });
+                actions.updateUserConfig({ columns: userConfigColumns });
+            }
+        };
+        if (activeIndex !== null) {
+            window.addEventListener("mousemove", onMouseMove);
+            window.addEventListener("mouseup", onMouseUp);
+        }
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [columns, actions, actionCellWidth, activeIndex]);
+    return {
+        tableRef,
+        columnRefs,
+        onResizeStart(index) {
+            setActiveIndex(index);
+        },
+    };
+}
+exports.useResizableColumns = useResizableColumns;

package/table-v2/index.d.ts

@@ -0,0 +1 @@
+export * from "./table-v2";

package/table-v2/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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("./table-v2"), exports);

package/table-v2/no-rows-fallback.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+export interface NoRowsFallbackProps {
+    error?: any;
+    loading: boolean;
+}
+export type NoRowsFallbackComponent = FC<NoRowsFallbackProps>;
+export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/table-v2/no-rows-fallback.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoRowsFallback = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function NoRowsFallback(props) {
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__fallback", props.loading && "is-loading", props.error && "is-error") }, props.loading ? (react_1.default.createElement(react_1.default.Fragment, null, "Na\u010D\u00EDt\u00E1m...")) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(icon_1.Icon, { name: "warning", size: 24 }),
+        react_1.default.createElement("p", null, "Vyskytla se chyba"))) : (react_1.default.createElement(react_1.default.Fragment, null, "\u017D\u00E1dn\u00E9 z\u00E1znamy"))));
+}
+exports.NoRowsFallback = NoRowsFallback;

package/table-v2/styles.css

@@ -0,0 +1,62 @@
+.uxf-data-grid__table-v2 {
+    display: grid;
+    font-size: theme("fontSize.sm");
+    overflow-x: auto;
+    width: 100%;
+
+    .uxf-data-grid__row {
+        display: contents;
+    }
+
+    .uxf-data-grid__cell {
+        align-items: center;
+        border-top: 1px solid theme("colors.lightBorder");
+        display: flex;
+        padding: 8px;
+    }
+
+    .uxf-data-grid__cell-header {
+        background-color: theme("colors.neutral.50");
+        color: theme("colors.neutral.400");
+        position: relative;
+        user-select: none;
+    }
+
+    .uxf-data-grid__cell-action {
+        background-color: theme("colors.white");
+        border-left: 1px solid theme("colors.lightBorder");
+        position: sticky;
+        right: 0;
+
+        &.uxf-data-grid__cell-header {
+            background-color: theme("colors.neutral.50");
+            z-index: 2;
+        }
+    }
+
+    .uxf-data-grid__cell-resize-handle {
+        bottom: 0;
+        cursor: col-resize;
+        position: absolute;
+        right: -8px;
+        top: 0;
+        width: 16px;
+        z-index: 2;
+
+        &::before {
+            background-color: theme("colors.lightBorder");
+            bottom: 0;
+            content: "";
+            position: absolute;
+            right: 8px;
+            top: 0;
+            width: 1px;
+        }
+
+        &:hover {
+            &::before {
+                width: 2px;
+            }
+        }
+    }
+}

package/table-v2/table-v2.d.ts

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

package/table-v2/table-v2.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableV2 = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const rem_1 = require("@uxf/styles/units/rem");
+const react_1 = __importDefault(require("react"));
+const use_resizable_columns_1 = require("./hooks/use-resizable-columns");
+const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
+const defaultKeyExtractor = (r) => r.id;
+function TableV2(props) {
+    var _a, _b, _c, _d;
+    const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
+    const visibleColumns = props.schema.columns.filter((column) => { var _a, _b; return !((_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden); });
+    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions);
+    const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
+    const gridTemplateColumnsWithoutAction = visibleColumns
+        .map((column) => { var _a, _b, _c, _d; return (_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.width; })
+        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)))
+        .join(" ");
+    const gridTemplateColumns = (0, is_nil_1.isNil)((_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width)
+        ? gridTemplateColumnsWithoutAction
+        : `${gridTemplateColumnsWithoutAction} ${(0, rem_1.rem)(props.actionCell.width)}`;
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__table-v2", ref: tableRef, style: { gridTemplateColumns, gridTemplateRows } },
+        react_1.default.createElement("div", { className: "uxf-data-grid__row" },
+            visibleColumns.map((column, index) => (react_1.default.createElement("div", { key: column.name, className: "uxf-data-grid__cell uxf-data-grid__cell-header", ref: (el) => (columnRefs.current[index] = el) },
+                column.label,
+                react_1.default.createElement("div", { className: "uxf-data-grid__cell-resize-handle", onMouseDown: () => onResizeStart(index) })))),
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement("div", { className: "uxf-data-grid__cell uxf-data-grid__cell-header uxf-data-grid__cell-action" }))),
+        props.data.map((row) => (react_1.default.createElement("div", { className: "uxf-data-grid__row", key: keyExtractor(row) },
+            visibleColumns.map((column) => {
+                var _a, _b, _c;
+                const BodyCell = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default;
+                if (!BodyCell) {
+                    return null;
+                }
+                return (react_1.default.createElement("div", { className: "uxf-data-grid__cell", key: column.name },
+                    react_1.default.createElement(BodyCell, { column: column, row: row, value: row[column.name], reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })));
+            }),
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement("div", { className: "uxf-data-grid__cell  uxf-data-grid__cell-action" },
+                react_1.default.createElement(props.actionCell.Component, { row: row, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } }))))))));
+}
+exports.TableV2 = TableV2;

package/table-v2/table-v2.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/table-v2/table-v2.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../_story-utils/data");
+const schema_1 = require("../_story-utils/schema");
+const body_cell_1 = require("../body-cell");
+const hidden_columns_button_1 = require("../hidden-columns-button");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const table_v2_1 = require("./table-v2");
+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(hidden_columns_button_1.HiddenColumnsButton, { schema: schema_1.schema, state: state, actions: actions }),
+        react_1.default.createElement(table_v2_1.TableV2, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true, actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") } }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}
+exports.Default = Default;

package/table-v2/types.d.ts

@@ -0,0 +1,24 @@
+import { Nullish } from "@uxf/core/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 {
+    schema: Schema<any>;
+    data: Row[];
+    isLoading?: boolean;
+    error?: any | Nullish;
+    onReload?: () => void;
+    rowHeight?: number | ((row: Row) => number) | "auto";
+    headerRowHeight?: number;
+    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    keyExtractor?: KeyExtractor;
+    bodyCells?: BodyCellComponents<any, any>;
+    actionCell?: {
+        width: number;
+        Component: ActionCellComponent<any>;
+    };
+    NoRowsFallback?: NoRowsFallbackComponent;
+    isRowSelectable?: boolean;
+}

package/table-v2/types.js

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

package/table-v2/utils/get-grid-template-rows.d.ts

@@ -0,0 +1,2 @@
+import { TableProps } from "../types";
+export declare function getGridTemplateRows(rows: any[], headerRowHeight: number, rowHeight: TableProps<any>["rowHeight"]): string | undefined;

package/table-v2/utils/get-grid-template-rows.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridTemplateRows = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const rem_1 = require("@uxf/styles/units/rem");
+function getGridTemplateRows(rows, headerRowHeight, rowHeight) {
+    if (rowHeight === "auto" || (0, is_nil_1.isNil)(rowHeight)) {
+        return undefined;
+    }
+    if (typeof rowHeight === "number") {
+        return `${(0, rem_1.rem)(headerRowHeight)} repeat(${rows.length}, ${(0, rem_1.rem)(rowHeight)})`;
+    }
+    return `${headerRowHeight} ${rows.map(rowHeight).join(" ")}`;
+}
+exports.getGridTemplateRows = getGridTemplateRows;

package/types/api.d.ts

@@ -3,7 +3,6 @@ export type ResultItem = any;
 export interface RequestFilter<T = any> {
     name: string;
     value: T;
-    label?: string;
     op?: string;
 }
 export interface Request {

package/types/components.d.ts

@@ -1,5 +1,4 @@
 import { ComponentType, FC } from "react";
-import { RequestFilter } from "./api";
 import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
@@ -17,10 +16,11 @@ export type BodyCellComponents<C, R> = {
     [key: string]: BodyCellComponent<C, R>;
     default: BodyCellComponent<C, R>;
 };
-export interface FilterProps<F extends Filter<any, any>, T> {
+export interface FilterProps<StateValue> {
     gridName?: string;
-    filter: F;
-    value: RequestFilter<T>;
-    onFilter: (value: RequestFilter<T>) => void;
+    filter: Filter;
+    value: StateValue;
+    op?: string;
+    onChange: (value: StateValue | undefined, op?: string) => void;
     onClear: () => void;
 }

package/types/schema.d.ts

@@ -37,19 +37,17 @@ export interface FilterOption {
     id: string | number;
     label: string;
 }
-export interface Filter<N, T> {
-    name: N;
+export interface Filter {
+    name: string;
     label: string;
-    type?: T;
+    type: string;
     options?: FilterOption[];
+    autocomplete?: string | null;
 }
-export type Filters<F extends BaseGridType["filters"]> = {
-    [K in keyof F]: Filter<K, F[K]>;
-}[keyof F];
 export interface Schema<GritType extends BaseGridType> {
     name?: string;
     columns: Columns<GritType["columns"]>[];
-    filters: Filters<GritType["filters"]>[];
+    filters: Filter[];
     tabs?: Tab[];
     s: DataGridSort;
     perPage: number;

package/use-data-grid-control/actions-factory.d.ts

@@ -1,10 +1,11 @@
 import { Dispatch } from "react";
-import { RequestFilter } from "../types/api";
 import { Tab } from "../types/schema";
+import { DataGridUserConfig } from "../types/state";
 export declare function createActions(dispatch: Dispatch<any>): {
     changePage: (page: number) => void;
     changePerPage: (perPage: number) => void;
-    filter: (filterValue: RequestFilter) => void;
+    filter: (name: string, value: any, op?: string) => void;
+    filterClear: (name: string) => void;
     sort: (columnName: string, direction: string) => void;
     sortClear: () => void;
     search: (search: string) => void;
@@ -12,4 +13,5 @@ export declare function createActions(dispatch: Dispatch<any>): {
     setSelectedRows: (rows: any[]) => void;
     hideColumn: (name: string) => void;
     showColumn: (name: string) => void;
+    updateUserConfig: (userConfig: DataGridUserConfig<any>) => void;
 };