@uxf/data-grid 11.60.2 → 11.60.3

package/data-grid-v2.stories.js

@@ -63,11 +63,12 @@ const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithC
     perPage: 100,
     columns: {
         text: { width: 200 },
-        tel: { minWidth: 160, width: 600 },
+        tel: { minWidth: 160, width: 400 },
         mail: { minWidth: 200 },
-        bool: { width: 80 },
+        bool: { width: 120 },
         chips: { minWidth: 200 },
         toMany: { minWidth: 200 },
+        money: { width: "2fr" },
     },
     filters: {
         text: { placeholder: "Custom placeholder ..." },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.60.2",
+    "version": "11.60.3",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",

package/table-v2/table-v2.js

@@ -9,6 +9,7 @@ const empty_array_1 = require("@uxf/core/constants/empty-array");
 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 format_css_value_1 = require("@uxf/styles/units/format-css-value");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importDefault(require("react"));
 const components_1 = require("./components");
@@ -31,11 +32,19 @@ 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; 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),
-    }));
+        .map((column) => {
+        var _a;
+        const userColumnConfig = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name];
+        const hasUserConfigWidthOrMinWidth = (userColumnConfig === null || userColumnConfig === void 0 ? void 0 : userColumnConfig.width) || (userColumnConfig === null || userColumnConfig === void 0 ? void 0 : userColumnConfig.minWidth);
+        return hasUserConfigWidthOrMinWidth ? userColumnConfig : column.config;
+    })
+        .map((columnConfig) => {
+        var _a;
+        return ({
+            width: (0, is_nil_1.isNil)(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.width) ? "1fr" : ((_a = (0, format_css_value_1.formatCssValue)(columnConfig.width)) !== null && _a !== void 0 ? _a : ""),
+            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/utils/get-grid-template-columns.js

@@ -11,9 +11,12 @@ function getGridTemplateColumns(config) {
     return (0, build_array_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
-        .map((col) => col.minWidth
-        ? `minmax(${col.minWidth},${col.width})`
-        : `minmax(${COLUMN_DEFAULT_MIN_WIDTH},${col.width})`)
+        .map((col) => {
+        var _a;
+        return col.width.includes("fr")
+            ? `minmax(${(_a = col.minWidth) !== null && _a !== void 0 ? _a : COLUMN_DEFAULT_MIN_WIDTH}, ${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/schema.d.ts

@@ -13,9 +13,10 @@ export type BaseGridType = {
     columns: any;
     filters: any;
 };
+export type ColumnWidthUnit = number | `${number}fr`;
 export type ColumnConfig = {
     isHidden?: boolean;
-    width?: number;
+    width?: ColumnWidthUnit;
     minWidth?: number;
 };
 export type Column<Name, Type> = {