@uxf/data-grid 11.112.1 → 11.114.0

package/_store/reducer.js

@@ -118,7 +118,6 @@ const reducer = (state, action) => {
                 },
             };
         case "CHANGE_TAB": {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             const tabHistory = (_d = state.tabRequests[action.tab.name]) !== null && _d !== void 0 ? _d : empty_object_1.EMPTY_OBJECT;
             return {
                 ...state,

package/data-grid.js

@@ -32,7 +32,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: (_c = props.filterHandlers) !== null && _c !== void 0 ? _c : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.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, hasStickyHeader: props.hasStickyHeader, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.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, hasStickyHeader: props.hasStickyHeader, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: 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/filters/filters.js

@@ -10,7 +10,6 @@ function DataGridFilters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         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}".`);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.112.1",
+    "version": "11.114.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -41,11 +41,11 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@uxf/core": "11.111.2",
-        "@uxf/core-react": "11.111.2",
-        "@uxf/localize": "11.111.2",
-        "@uxf/styles": "11.111.2",
-        "@uxf/ui": "11.112.1",
+        "@uxf/core": "11.114.0",
+        "@uxf/core-react": "11.114.0",
+        "@uxf/localize": "11.114.0",
+        "@uxf/styles": "11.114.0",
+        "@uxf/ui": "11.114.0",
         "dayjs": "^1.11.19",
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0"
@@ -56,11 +56,11 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@types/react": "18.3.27",
         "@types/react-dom": "18.3.7",
-        "@uxf/core": "11.111.2",
-        "@uxf/core-react": "11.111.2",
-        "@uxf/localize": "11.111.2",
-        "@uxf/styles": "11.111.2",
-        "@uxf/ui": "11.112.1",
+        "@uxf/core": "11.114.0",
+        "@uxf/core-react": "11.114.0",
+        "@uxf/localize": "11.114.0",
+        "@uxf/styles": "11.114.0",
+        "@uxf/ui": "11.114.0",
         "dayjs": "^1.11.19",
         "react": "18.3.1",
         "react-dom": "18.3.1"

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

@@ -2,7 +2,7 @@ import { Nullish } from "@uxf/core/types";
 import { BaseGridType, Column } from "../../types";
 import { DataGridControl } from "../../use-data-grid-control";
 import { DataGridTableProps } from "../types";
-export declare function useResizableColumns<GridType extends BaseGridType>(columns: Column[], actionCell: DataGridTableProps<GridType>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish): {
+export declare function useResizableColumns<GridType extends BaseGridType>(columns: Column[], actionCell: DataGridTableProps<GridType>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish, hasStickyHeader: boolean): {
     tableRef: import("react").RefObject<HTMLDivElement>;
     headerRef: import("react").RefObject<HTMLDivElement>;
     bodyRef: import("react").RefObject<HTMLDivElement>;

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

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
 const COLUMN_ABSOLUTE_MIN_WIDTH = 50;
 const COLUMN_PADDING = 24;
-function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
+function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth, hasStickyHeader) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
     const headerRef = (0, react_1.useRef)(null);
@@ -23,7 +23,7 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
                 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 = (_d = (_c = headerRef.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) + ((_g = (_f = tableRef.current) === null || _f === void 0 ? void 0 : _f.offsetLeft) !== null && _g !== void 0 ? _g : 0);
+                    const columnOffsetLeft = ((_e = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _e !== void 0 ? _e : 0) + (hasStickyHeader ? ((_g = (_f = tableRef.current) === null || _f === void 0 ? void 0 : _f.offsetLeft) !== null && _g !== void 0 ? _g : 0) : 0);
                     const clickPositionX = e.clientX + tableScrollLeft;
                     const width = clickPositionX - columnOffsetLeft;
                     return width >= columnMinWidth ? width : columnMinWidth;
@@ -71,7 +71,7 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
             window.removeEventListener("mousemove", onMouseMove);
             window.removeEventListener("mouseup", onMouseUp);
         };
-    }, [columns, actions, actionCellWidth, activeIndex, selectRowsCellWidth]);
+    }, [columns, actions, actionCellWidth, activeIndex, selectRowsCellWidth, hasStickyHeader]);
     const onAutoSize = (index) => {
         var _a, _b;
         const table = tableRef.current;

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 export interface NoRowsFallbackProps {
-    error?: any;
+    error?: unknown;
     isLoading: boolean;
 }
 export type NoRowsFallbackComponent = FunctionComponent<NoRowsFallbackProps>;

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

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoRowsFallback = NoRowsFallback;
 const translations_1 = require("@uxf/core-react/translations");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 function NoRowsFallback(props) {
     const t = (0, translations_1.useUxfTranslation)();
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dg-table__no-rows-fallback", props.isLoading && "is-loading", props.error && "is-error") }, props.isLoading ? (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:loading"))) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dg-table__no-rows-fallback", props.isLoading && "is-loading", (0, is_not_nil_1.isNotNil)(props.error) && "is-error") }, props.isLoading ? (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:loading"))) : (0, is_not_nil_1.isNotNil)(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, t("uxf-data-grid-no-rows-fallback:error")))) : (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:no-records")))));
 }

package/table-v2/styles.css

@@ -77,6 +77,10 @@
 .uxf-dg-table__body {
     display: grid;
     overflow-x: auto;
+
+    &:empty {
+        display: none;
+    }
 }
 
 .uxf-dg-table__row {

package/table-v2/table-v2.js

@@ -9,6 +9,7 @@ const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 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_empty_1 = require("@uxf/core/utils/is-not-empty");
 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");
@@ -35,8 +36,8 @@ function DataGridTableV2(props) {
             props.state.userConfig.columnsOrder.indexOf(b.name)
         : 0);
     const selectedRowColumnWidth = props.isRowsSelectable ? SELECT_ROWS_CELL_WIDTH : null;
-    const { tableRef, headerRef, bodyRef, columnRefs, onResizeStart, onAutoSize } = (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 { tableRef, headerRef, bodyRef, columnRefs, onResizeStart, onAutoSize } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth, (_b = props.hasStickyHeader) !== null && _b !== void 0 ? _b : false);
+    const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
     const gridTemplateBasicColumns = visibleColumns
         .map((column) => {
         var _a;
@@ -79,20 +80,20 @@ function DataGridTableV2(props) {
                 }),
                 react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.actionCell) },
                     react_1.default.createElement(components_1.Table.HeaderActionCell, null)))),
-        react_1.default.createElement(components_1.Table.Body, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: (0, compose_refs_1.composeRefs)(syncedScrollRef, bodyRef) }, (0, is_empty_1.isEmpty)(props.data) ? (react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })) : (props.data.map((row) => {
-            var _a, _b;
-            return (react_1.default.createElement(components_1.Table.Row, { className: `${(0, is_not_nil_1.isNotNil)(props.rowAccent) ? "uxf-dg-table__row--" + props.rowAccent(row) : ""} ${(_b = (_a = props.rowClassName) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : ""}`, key: keyExtractor(row) },
-                react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowsSelectable) },
-                    react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { isRowSelectDisabled: props.isRowSelectDisabled ? props.isRowSelectDisabled(row) : false, isRowSelected: selectedRows.find((r) => keyExtractor(r) === keyExtractor(row)), onSelectRowChange: selectRowHandler(keyExtractor(row)) })),
-                visibleColumns.map((column) => {
-                    var _a, _b, _c, _d;
-                    const BodyCell = 
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    (_d = (_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) !== null && _d !== void 0 ? _d : DefaultBodyCell;
-                    return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
-                        react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
-                }),
-                (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCellWrapper, null,
-                    react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))));
-        })))));
+        react_1.default.createElement(components_1.Table.Body, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: (0, compose_refs_1.composeRefs)(syncedScrollRef, bodyRef) }, (0, is_not_empty_1.isNotEmpty)(props.data) &&
+            props.data.map((row) => {
+                var _a, _b;
+                return (react_1.default.createElement(components_1.Table.Row, { className: `${(0, is_not_nil_1.isNotNil)(props.rowAccent) ? "uxf-dg-table__row--" + props.rowAccent(row) : ""} ${(_b = (_a = props.rowClassName) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : ""}`, key: keyExtractor(row) },
+                    react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowsSelectable) },
+                        react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { isRowSelectDisabled: props.isRowSelectDisabled ? props.isRowSelectDisabled(row) : false, isRowSelected: selectedRows.find((r) => keyExtractor(r) === keyExtractor(row)), onSelectRowChange: selectRowHandler(keyExtractor(row)) })),
+                    visibleColumns.map((column) => {
+                        var _a, _b, _c, _d;
+                        const BodyCell = (_d = (_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) !== null && _d !== void 0 ? _d : DefaultBodyCell;
+                        return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
+                            react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
+                    }),
+                    (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCellWrapper, null,
+                        react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))));
+            })),
+        (0, is_empty_1.isEmpty)(props.data) && react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })));
 }

package/table-v2/types.d.ts

@@ -9,7 +9,6 @@ export interface DataGridTableProps<GridType extends BaseGridType> extends DataG
     error?: unknown | Nullish;
     reload: () => Promise<any>;
     rowHeight?: number | ((row: InferDataGridRow<Schema<GridType>>) => number) | "auto";
-    headerRowHeight?: number;
     rowAccent?: (row: InferDataGridRow<Schema<GridType>>) => RowAccent;
     rowClassName?: (row: InferDataGridRow<Schema<GridType>>) => string | Nullish;
     keyExtractor?: KeyExtractor;

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

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

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGridTemplateRows = getGridTemplateRows;
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const rem_1 = require("@uxf/styles/units/rem");
-function getGridTemplateRows(rows, headerRowHeight, rowHeight) {
+function getGridTemplateRows(rows, 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 `repeat(${rows.length}, ${(0, rem_1.rem)(rowHeight)})`;
     }
-    return `${headerRowHeight} ${rows.map(rowHeight).join(" ")}`;
+    return `${rows.map(rowHeight).join(" ")}`;
 }

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

@@ -30,7 +30,6 @@ export type DataGridBaseProps<GridType extends BaseGridType> = {
     getCsvDownloadUrl?: CsvDownloadGetUrl;
     gridName?: string;
     hasStickyHeader?: boolean;
-    headerRowHeight?: number;
     isDebug?: boolean;
     isHiddenColumnsSortable?: boolean;
     isRowSelectDisabled?: (row: InferDataGridRow<Schema<GridType>>) => boolean;