@uxf/data-grid 11.13.0 → 11.15.0

package/_generator/cli.js

@@ -12,17 +12,18 @@ Usage:
         .option("o", { alias: "outputDirectory", type: "string" })
         .option("l", { alias: "requiredLoader", type: "boolean" })
         .option("h", { alias: "help", group: "Options" })
+        .option("t", { alias: "columnTypes", type: "string" })
         .strict(false)
         .exitProcess(false);
 
     try {
-        const { help, schemaDirectory, outputDirectory, requiredLoader } = cli.parse(argv.slice(2));
+        const { help, schemaDirectory, outputDirectory, requiredLoader, columnTypes } = cli.parse(argv.slice(2));
 
         if (Boolean(help)) {
             return 0;
         }
 
-        await require("./index")(schemaDirectory, outputDirectory, requiredLoader);
+        await require("./index")(schemaDirectory, outputDirectory, requiredLoader, columnTypes);
     } catch (e) {
         console.error(e);
         return 1;

package/_generator/index.js

@@ -14,23 +14,51 @@ function writeFile(filename, value) {
     writeFileSync(filename, value);
 }
 
-function generateSchemaFile(gridName, schema, schemaRelativeImport) {
-    return `import { Schema } from "@uxf/data-grid";
-import json from "${schemaRelativeImport}";
-
-type DataGrid_${camelize(gridName)} = {
+function generateGridType(gridName, schema) {
+    return `type DataGrid_${camelize(gridName)} = {
     columns: {
         ${schema.columns.map((column) => `"${column.name}": "${column.type}",`).join("\n        ")}
     },
     filters: {
         ${schema.filters.map((filter) => `"${filter.name}": "${filter.type}",`).join("\n        ")}
     }
+}`;
+}
+
+function generateRowType(gridName, schema, columnTypes) {
+    if (!columnTypes) {
+        return "";
+    }
+
+    return `export type DataGridRow_${camelize(gridName)} = {
+    ${schema.columns.map((column) => `"${column.name}": ColumnTypes["${column.type}"]`).join("\n    ")}
+}`;
+}
+
+function generateGridSchema(gridName) {
+    return `export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
 }
 
-export const dataGridSchema_${camelize(gridName)}: Schema<DataGrid_${camelize(gridName)}> = json as any;`;
+function generateSchemaFile(gridName, schema, schemaRelativeImport, columnTypes) {
+    const imports = [
+        'import { Schema } from "@uxf/data-grid";',
+        `import json from "${schemaRelativeImport}";`,
+        !!columnTypes && `import { ColumnTypes } from "${columnTypes}";`,
+    ]
+        .filter(Boolean)
+        .join("\n");
+
+    return [
+        imports,
+        !!columnTypes && generateRowType(gridName, schema, columnTypes),
+        generateGridType(gridName, schema),
+        generateGridSchema(gridName),
+    ]
+        .filter(Boolean)
+        .join("\n\n");
 }
 
-function generate(schema, filename, outputDirectory) {
+function generate(schema, filename, outputDirectory, columnTypes) {
     const gridName = parse(filename).name;
     const generatedPath = join(process.cwd(), outputDirectory, gridName);
 
@@ -38,12 +66,12 @@ function generate(schema, filename, outputDirectory) {
 
     writeFile(
         generatedSchemaFilename,
-        generateSchemaFile(gridName, schema, relative(dirname(generatedSchemaFilename), filename)),
+        generateSchemaFile(gridName, schema, relative(dirname(generatedSchemaFilename), filename), columnTypes),
     );
 }
 
-module.exports = (schemaDirectory, outputDirectory, requiredLoader) => {
+module.exports = (schemaDirectory, outputDirectory, requiredLoader, columnTypes) => {
     globSync(schemaDirectory + "/*.json")
         .map((path) => process.cwd() + "/" + path)
-        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, requiredLoader));
+        .forEach((filename) => generate(JSON.parse(readFileSync(filename)), filename, outputDirectory, columnTypes));
 };

package/_store/reducer.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.debugReducer = exports.reducer = exports.getInitialState = void 0;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
+const deepmerge_1 = __importDefault(require("deepmerge"));
 const utils_1 = require("../utils");
 function getInitialState(schema, init, initialUserConfig) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -144,7 +148,6 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                             ...((_k = (_j = state.userConfig.columns) === null || _j === void 0 ? void 0 : _j[action.name]) !== null && _k !== void 0 ? _k : {}),
                             isHidden: true,
                         },
@@ -159,13 +162,17 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                             ...((_m = (_l = state.userConfig.columns) === null || _l === void 0 ? void 0 : _l[action.name]) !== null && _m !== void 0 ? _m : {}),
                             isHidden: false,
                         },
                     },
                 },
             };
+        case "UPDATE_USER_CONFIG":
+            return {
+                ...state,
+                userConfig: (0, deepmerge_1.default)(state.userConfig, action.userConfig),
+            };
         default:
             // eslint-disable-next-line no-console
             console.warn("Unknown datagrid action.", action);

package/components.d.ts

@@ -11,6 +11,7 @@ import * as rowCountsStories from "./row-counts/row-counts.stories";
 import * as rowsPerPageSelectStories from "./rows-per-page-select/rows-per-page-select.stories";
 import * as selectedRowsToolbarStories from "./selected-rows-toolbar/selected-rows-toolbar.stories";
 import * as tableStories from "./table/table.stories";
+import * as tableV2Stories from "./table-v2/table-v2.stories";
 import * as toolbarControlStories from "./toolbar-control/toolbar-control.stories";
 import * as toolbarCustomsStories from "./toolbar-customs/toolbar-customs.stories";
 import * as toolbarTabsStories from "./toolbar-tabs/toolbar-tabs.stories";
@@ -67,6 +68,10 @@ export declare const components: {
         readonly title: "Table";
         readonly stories: typeof tableStories;
     };
+    readonly "table-v2": {
+        readonly title: "TableV2";
+        readonly stories: typeof tableV2Stories;
+    };
     readonly "toolbar-control": {
         readonly title: "ToolbarControl";
         readonly stories: typeof toolbarControlStories;

package/components.js

@@ -38,6 +38,7 @@ const rowCountsStories = __importStar(require("./row-counts/row-counts.stories")
 const rowsPerPageSelectStories = __importStar(require("./rows-per-page-select/rows-per-page-select.stories"));
 const selectedRowsToolbarStories = __importStar(require("./selected-rows-toolbar/selected-rows-toolbar.stories"));
 const tableStories = __importStar(require("./table/table.stories"));
+const tableV2Stories = __importStar(require("./table-v2/table-v2.stories"));
 const toolbarControlStories = __importStar(require("./toolbar-control/toolbar-control.stories"));
 const toolbarCustomsStories = __importStar(require("./toolbar-customs/toolbar-customs.stories"));
 const toolbarTabsStories = __importStar(require("./toolbar-tabs/toolbar-tabs.stories"));
@@ -94,6 +95,10 @@ exports.components = {
         title: "Table",
         stories: tableStories
     },
+    "table-v2": {
+        title: "TableV2",
+        stories: tableV2Stories
+    },
     "toolbar-control": {
         title: "ToolbarControl",
         stories: toolbarControlStories

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.13.0",
+  "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.13.0",
+    "@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 {

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/use-data-grid-control/actions-factory.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from "react";
 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;
@@ -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;
 };

package/use-data-grid-control/actions-factory.js

@@ -14,6 +14,7 @@ function createActions(dispatch) {
         setSelectedRows: (rows) => dispatch({ type: "SET_SELECTED_ROWS", rows }),
         hideColumn: (name) => dispatch({ type: "HIDE_COLUMN", name }),
         showColumn: (name) => dispatch({ type: "SHOW_COLUMN", name }),
+        updateUserConfig: (userConfig) => dispatch({ type: "UPDATE_USER_CONFIG", userConfig }),
     };
 }
 exports.createActions = createActions;

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

@@ -22,6 +22,7 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
         setSelectedRows: (rows: any[]) => void;
         hideColumn: (name: string) => void;
         showColumn: (name: string) => void;
+        updateUserConfig: (userConfig: DataGridUserConfig<any>) => void;
     };
 };
 export type DataGridControl = ReturnType<typeof useDataGridControl>;