@uxf/data-grid 11.45.0 → 11.46.0

package/_story-utils/schema.js

@@ -15,7 +15,7 @@ exports.schema = {
         { name: "chip", type: "chip", label: "Chip" },
         { name: "chips", type: "chips", label: "Chips" },
         { name: "money", type: "money", label: "Money" },
-        { name: "toOne", type: "toOne", label: "To one" },
+        { name: "toOne", type: "toOne", label: "ToOne" },
         { name: "toMany", type: "toMany", label: "To many" },
         { name: "hidden", type: "hidden", label: "Hidden", hidden: true },
     ],

package/data-grid-v2.stories.js

@@ -61,7 +61,12 @@ const actionCell = {
 const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, {
     perPage: 100,
     columns: {
+        text: { width: 200 },
+        tel: { minWidth: 160, width: 600 },
+        mail: { minWidth: 200 },
         bool: { width: 80 },
+        chips: { minWidth: 200 },
+        toMany: { minWidth: 200 },
     },
     filters: {
         text: { placeholder: "Custom placeholder ..." },
@@ -74,17 +79,7 @@ const FILTER_BEHAVIOR_OPTIONS = [
 ];
 function Default() {
     const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
-    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
-        schema: schema_1.schema,
-        initialUserConfig: {
-            columns: {
-                id: { width: 100 },
-                text: { minWidth: 300 },
-                mail: { minWidth: 300 },
-                tel: { minWidth: 300 },
-            },
-        },
-    });
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema: schema_1.schema,
@@ -92,6 +87,6 @@ function Default() {
     });
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/data-grid.js

@@ -33,7 +33,7 @@ function DataGrid(props) {
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_1.DataGridTable, { NoRowsFallback: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_d = props.bodyCells) !== null && _d !== void 0 ? _d : body_cell_1.BodyCells, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_1.DataGridTable, { NoRowsFallback: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_d = props.bodyCells) !== null && _d !== void 0 ? _d : body_cell_1.BodyCells, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, rowHeight: props.rowHeight === "auto" ? undefined : props.rowHeight, schema: props.schema, state: props.state }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
                 react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, state: props.state, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.45.0",
+    "version": "11.46.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -31,9 +31,9 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.45.0",
-        "@uxf/core-react": "11.45.0",
-        "@uxf/ui": "11.45.0",
+        "@uxf/core": "11.46.0",
+        "@uxf/core-react": "11.46.0",
+        "@uxf/ui": "11.46.0",
         "dayjs": "1.11.13",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.2",

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

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

package/table-v2/components/header-select-all-rows-checkbox.js

@@ -11,7 +11,8 @@ const react_1 = __importDefault(require("react"));
 function HeaderSelectAllRowsCheckbox(props) {
     var _a;
     const selectedRows = (_a = props.state.selectedRows) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
-    const isAllRowsSelected = props.data.every((row) => selectedRows.find((selectedRow) => props.keyExtractor(row) === props.keyExtractor(selectedRow)));
+    const isAllRowsSelected = (0, is_not_empty_1.isNotEmpty)(props.data) &&
+        props.data.every((row) => selectedRows.find((selectedRow) => props.keyExtractor(row) === props.keyExtractor(selectedRow)));
     const isIndeterminate = !isAllRowsSelected && (0, is_not_empty_1.isNotEmpty)(selectedRows);
     const selectAllRowsHandler = () => {
         props.actions.setSelectedRows(isAllRowsSelected ? [] : props.data);

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResizableColumns = useResizableColumns;
 const is_empty_1 = require("@uxf/core/utils/is-empty");
-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");
 const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
+const COLUMN_ABSOLUTE_MIN_WIDTH = 50;
 function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
@@ -14,24 +14,28 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
     (0, react_1.useEffect)(() => {
         let tempColumnSizes = [];
         const onMouseMove = (e) => {
-            const gridColumns = columns.map((_, i) => {
-                var _a, _b, _c, _d;
+            const gridColumns = columns.map((column, i) => {
+                var _a, _b, _c, _d, _e, _f;
                 const columnRef = columnRefs.current[i];
+                const columnMinWidth = (_b = (_a = column.config) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : COLUMN_ABSOLUTE_MIN_WIDTH;
                 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 tableScrollLeft = (_d = (_c = tableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+                    const columnOffsetLeft = (_e = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _e !== void 0 ? _e : 0;
                     const clickPositionX = e.clientX + tableScrollLeft;
                     const width = clickPositionX - columnOffsetLeft;
-                    return width >= 50 ? width : 50;
+                    return width >= columnMinWidth ? width : columnMinWidth;
                 }
-                return (_d = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _d !== void 0 ? _d : 50;
+                return (_f = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _f !== void 0 ? _f : columnMinWidth;
             });
             // TODO @vejvis - jak tohle udělat lépe??
             tempColumnSizes = gridColumns;
             if (tableRef.current) {
                 tableRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
                     actionColumnWidth: actionCellWidth,
-                    columns: gridColumns.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "minmax(0,1fr)")),
+                    columns: gridColumns.map((size) => ({
+                        width: (0, rem_1.rem)(size),
+                        minWidth: null,
+                    })),
                     selectRowColumnWidth: selectRowsCellWidth,
                 });
             }

package/table-v2/table-v2.js

@@ -29,8 +29,11 @@ function DataGridTableV2(props) {
     const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
     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 gridTemplateBasicColumns = 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)));
+        .map((column) => { var _a, _b; return (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) !== null && _b !== void 0 ? _b : column.config; })
+        .map((columnConfig) => ({
+        width: (0, is_nil_1.isNil)(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.width) ? "1fr" : (0, rem_1.rem)(columnConfig.width),
+        minWidth: (0, is_nil_1.isNil)(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.minWidth) ? null : (0, rem_1.rem)(columnConfig.minWidth),
+    }));
     const gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
         columns: gridTemplateBasicColumns,
         selectRowColumnWidth: selectedRowColumnWidth,

package/table-v2/types.d.ts

@@ -1,7 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { ActionCellComponent, BodyCellComponents } from "../types/components";
-import { KeyExtractor } from "../types/core";
-import { Schema } from "../types/schema";
+import { ActionCellComponent, BodyCellComponents, KeyExtractor, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
 export interface DataGridTableProps<Row> extends DataGridControl {

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

@@ -1,6 +1,9 @@
 import { Nullish } from "@uxf/core/types";
 export declare function getGridTemplateColumns(config: {
-    columns: string[];
+    columns: {
+        width: string;
+        minWidth: string | null;
+    }[];
     selectRowColumnWidth: number | Nullish;
     actionColumnWidth: number | Nullish;
 }): string;

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

@@ -8,7 +8,7 @@ function getGridTemplateColumns(config) {
     var _a, _b;
     return (0, buildArray_1.buildArray)()
         .when((0, is_not_nil_1.isNotNil)(config.selectRowColumnWidth), (0, rem_1.rem)((_a = config.selectRowColumnWidth) !== null && _a !== void 0 ? _a : 0))
-        .add(config.columns.join(" "))
+        .add(config.columns.map((col) => (col.minWidth ? `minmax(${col.minWidth},${col.width})` : col.width)).join(" "))
         .when((0, is_not_nil_1.isNotNil)(config.actionColumnWidth), `minmax(${(0, rem_1.rem)((_b = config.actionColumnWidth) !== null && _b !== void 0 ? _b : 0)}, auto)`)
         .join(" ");
 }

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

@@ -15,7 +15,7 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     keyExtractor?: KeyExtractor;
     onCsvDownload?: CsvDownloadHandler;
-    rowHeight?: number | ((row: Row) => number);
+    rowHeight?: number | ((row: Row) => number) | "auto";
     headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     className?: string;