@uxf/data-grid 11.111.2 → 11.112.0

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, 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, 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(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/data-grid.stories.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const build_array_1 = require("@uxf/core/utils/build-array");
 const radio_group_1 = require("@uxf/ui/radio-group");
+const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importStar(require("react"));
 const json_renderer_1 = require("./_story-utils/json-renderer");
 const loader_1 = require("./_story-utils/loader");
@@ -84,6 +85,7 @@ const FILTER_BEHAVIOR_OPTIONS = [
 ];
 function Default() {
     const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
+    const [hasStickyHeader, setHasStickyHeader] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
         schema: schema_1.schema,
         initialUserConfig: {
@@ -111,6 +113,7 @@ 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, variant: "row" }),
-        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, getCsvDownloadUrl: () => "", isLoading: isLoading, isRowsSelectable: true, reload: reload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(toggle_1.Toggle, { label: "Sticky header", name: "stickyHeader", onChange: (value) => setHasStickyHeader(value !== null && value !== void 0 ? value : false), size: "sm", value: hasStickyHeader }),
+        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, getCsvDownloadUrl: () => "", hasStickyHeader: hasStickyHeader, isLoading: isLoading, isRowsSelectable: true, reload: reload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.111.2",
+    "version": "11.112.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -45,7 +45,7 @@
         "@uxf/core-react": "11.111.2",
         "@uxf/localize": "11.111.2",
         "@uxf/styles": "11.111.2",
-        "@uxf/ui": "11.111.2",
+        "@uxf/ui": "11.112.0",
         "dayjs": "^1.11.19",
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0"
@@ -60,7 +60,7 @@
         "@uxf/core-react": "11.111.2",
         "@uxf/localize": "11.111.2",
         "@uxf/styles": "11.111.2",
-        "@uxf/ui": "11.111.2",
+        "@uxf/ui": "11.112.0",
         "dayjs": "^1.11.19",
         "react": "18.3.1",
         "react-dom": "18.3.1"

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

@@ -1,6 +1,9 @@
-import React, { ReactNode } from "react";
+import React, { ForwardedRef, ReactNode } from "react";
 interface BodyProps {
     children?: ReactNode;
+    gridTemplateColumns: string;
+    gridTemplateRows?: string;
+    ref?: ForwardedRef<HTMLDivElement>;
 }
 export declare function Body(props: BodyProps): React.JSX.Element;
 export {};

package/table-v2/components/body.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Body = Body;
 const react_1 = __importDefault(require("react"));
 function Body(props) {
-    return react_1.default.createElement("div", { className: "uxf-dg-table__body" }, props.children);
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__body", ref: props.ref, style: { gridTemplateColumns: props.gridTemplateColumns, gridTemplateRows: props.gridTemplateRows } }, props.children));
 }

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

@@ -1,6 +1,9 @@
-import React, { ReactNode } from "react";
+import React, { ForwardedRef, ReactNode } from "react";
 interface HeaderProps {
     children?: ReactNode;
+    gridTemplateColumns: string;
+    isSticky?: boolean;
+    ref?: ForwardedRef<HTMLDivElement>;
 }
 export declare function Header(props: HeaderProps): React.JSX.Element;
 export {};

package/table-v2/components/header.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = Header;
 const react_1 = __importDefault(require("react"));
 function Header(props) {
-    return react_1.default.createElement("div", { className: "uxf-dg-table__header" }, props.children);
+    return (react_1.default.createElement("div", { className: `uxf-dg-table__header ${props.isSticky ? "uxf-dg-table__header--is-sticky is-sticky" : ""}`, ref: props.ref, style: { gridTemplateColumns: props.gridTemplateColumns } }, props.children));
 }

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

@@ -1,7 +1,5 @@
 import React, { ReactNode } from "react";
 export interface RootProps {
-    gridTemplateColumns: string;
-    gridTemplateRows?: string;
     children: ReactNode;
 }
 export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;

package/table-v2/components/root.js

@@ -36,6 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Root = void 0;
 const react_1 = __importStar(require("react"));
 function RootComponent(props, ref) {
-    return (react_1.default.createElement("div", { className: "uxf-dg-table", ref: ref, style: { gridTemplateColumns: props.gridTemplateColumns, gridTemplateRows: props.gridTemplateRows } }, props.children));
+    return (react_1.default.createElement("div", { className: "uxf-dg-table", ref: ref }, props.children));
 }
 exports.Root = (0, react_1.forwardRef)(RootComponent);

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

@@ -4,6 +4,8 @@ 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): {
     tableRef: import("react").RefObject<HTMLDivElement>;
+    headerRef: import("react").RefObject<HTMLDivElement>;
+    bodyRef: import("react").RefObject<HTMLDivElement>;
     columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     onResizeStart(index: number): void;
     onAutoSize: (index: number) => void;

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

@@ -10,28 +10,40 @@ const COLUMN_PADDING = 24;
 function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
+    const headerRef = (0, react_1.useRef)(null);
+    const bodyRef = (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((column, i) => {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 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 = (_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 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 clickPositionX = e.clientX + tableScrollLeft;
                     const width = clickPositionX - columnOffsetLeft;
                     return width >= columnMinWidth ? width : columnMinWidth;
                 }
-                return (_f = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _f !== void 0 ? _f : columnMinWidth;
+                return (_h = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _h !== void 0 ? _h : 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)({
+            if (headerRef.current) {
+                headerRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
+                    actionColumnWidth: actionCellWidth,
+                    columns: gridColumns.map((size) => ({
+                        width: (0, rem_1.rem)(size),
+                        minWidth: null,
+                    })),
+                    selectRowColumnWidth: selectRowsCellWidth,
+                });
+            }
+            if (bodyRef.current) {
+                bodyRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
                     actionColumnWidth: actionCellWidth,
                     columns: gridColumns.map((size) => ({
                         width: (0, rem_1.rem)(size),
@@ -100,6 +112,8 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
     };
     return {
         tableRef,
+        headerRef,
+        bodyRef,
         columnRefs,
         onResizeStart(index) {
             setActiveIndex(index);

package/table-v2/hooks/use-synced-scroll.d.ts

@@ -0,0 +1 @@
+export declare const useSyncedScroll: () => (element: HTMLElement | null) => void;

package/table-v2/hooks/use-synced-scroll.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncedScroll = void 0;
+const react_1 = require("react");
+const useSyncedScroll = () => {
+    const containersRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const containers = containersRef.current;
+        if (!containers) {
+            return;
+        }
+        const abortController = new AbortController();
+        const syncScroll = (scrollingContainer) => {
+            const scrollLeft = scrollingContainer.scrollLeft;
+            const scrollTop = scrollingContainer.scrollTop;
+            containers.forEach((container) => {
+                if (container !== scrollingContainer) {
+                    container.scrollLeft = scrollLeft;
+                    container.scrollTop = scrollTop;
+                }
+            });
+        };
+        const handleScroll = (scrollEvent) => {
+            const scrollingContainer = scrollEvent.target;
+            syncScroll(scrollingContainer);
+        };
+        containers.forEach((container) => {
+            container.addEventListener("scroll", handleScroll, { passive: true, signal: abortController.signal });
+        });
+        return () => {
+            abortController.abort();
+        };
+    }, []);
+    const setContainerRef = (element) => {
+        if (element) {
+            if (!containersRef.current) {
+                containersRef.current = [];
+            }
+            if (!containersRef.current.includes(element)) {
+                containersRef.current.push(element);
+            }
+        }
+    };
+    return setContainerRef;
+};
+exports.useSyncedScroll = useSyncedScroll;

package/table-v2/styles.css

@@ -26,9 +26,7 @@
     border: 1px solid var(--uxf-dg-table-border-color);
     border-top-color: transparent;
     color: var(--uxf-dg-table-text-color);
-    display: grid;
     font-size: var(--uxf-dg-table-font-size);
-    overflow-x: auto;
     width: 100%;
 
     &::-webkit-scrollbar {
@@ -59,11 +57,26 @@
 }
 
 .uxf-dg-table__header {
-    display: contents;
+    display: grid;
+    overflow-x: auto;
+    z-index: 1;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    /* Hide scrollbars in .uxf-dg-table__header */
+    &::-webkit-scrollbar {
+        display: none !important;
+    }
+
+    &--is-sticky {
+        position: sticky;
+        top: 0;
+    }
 }
 
 .uxf-dg-table__body {
-    display: contents;
+    display: grid;
+    overflow-x: auto;
 }
 
 .uxf-dg-table__row {

package/table-v2/table-v2.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridTableV2 = DataGridTableV2;
 const show_1 = require("@uxf/core-react/components/show");
+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");
@@ -16,6 +17,7 @@ const components_1 = require("./components");
 const header_select_all_rows_checkbox_1 = require("./components/header-select-all-rows-checkbox");
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
 const use_resizable_columns_1 = require("./hooks/use-resizable-columns");
+const use_synced_scroll_1 = require("./hooks/use-synced-scroll");
 const no_rows_fallback_1 = require("./no-rows-fallback");
 const get_grid_template_columns_1 = require("./utils/get-grid-template-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
@@ -33,7 +35,7 @@ function DataGridTableV2(props) {
             props.state.userConfig.columnsOrder.indexOf(b.name)
         : 0);
     const selectedRowColumnWidth = props.isRowsSelectable ? SELECT_ROWS_CELL_WIDTH : null;
-    const { tableRef, columnRefs, onResizeStart, onAutoSize } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
+    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 gridTemplateBasicColumns = visibleColumns
         .map((column) => {
@@ -63,8 +65,9 @@ function DataGridTableV2(props) {
         props.actions.setSelectedRows(newSelectedRows);
     };
     const NoRowsFallback = (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback;
-    return (react_1.default.createElement(components_1.Table, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: tableRef },
-        react_1.default.createElement(components_1.Table.Header, null,
+    const syncedScrollRef = (0, use_synced_scroll_1.useSyncedScroll)();
+    return (react_1.default.createElement(components_1.Table, { ref: tableRef },
+        react_1.default.createElement(components_1.Table.Header, { gridTemplateColumns: gridTemplateColumns, isSticky: props.hasStickyHeader, ref: (0, compose_refs_1.composeRefs)(syncedScrollRef, headerRef) },
             react_1.default.createElement(components_1.Table.Row, null,
                 react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowsSelectable) },
                     react_1.default.createElement(header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox, { actions: props.actions, data: props.data, isRowSelectDisabled: props.isRowSelectDisabled, keyExtractor: keyExtractor, state: props.state })),
@@ -76,7 +79,7 @@ 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, null, (0, is_empty_1.isEmpty)(props.data) ? (react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })) : (props.data.map((row) => {
+        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) },

package/table-v2/types.d.ts

@@ -19,6 +19,7 @@ export interface DataGridTableProps<GridType extends BaseGridType> extends DataG
         Component: ActionCellComponent<InferDataGridRow<Schema<GridType>>>;
     };
     NoRowsFallback?: NoRowsFallbackComponent;
+    hasStickyHeader?: boolean;
     isRowSelectDisabled?: (row: InferDataGridRow<Schema<GridType>>) => boolean;
     isRowsSelectable?: boolean;
 }

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

@@ -27,14 +27,15 @@ export type DataGridBaseProps<GridType extends BaseGridType> = {
     customActions?: DataGridToolbarCustomsProps["buttons"];
     filterHandlers?: FilterHandlers;
     fulltextInputPlaceholder?: string;
-    isWithTabCounts?: boolean;
     getCsvDownloadUrl?: CsvDownloadGetUrl;
     gridName?: string;
+    hasStickyHeader?: boolean;
     headerRowHeight?: number;
     isDebug?: boolean;
     isHiddenColumnsSortable?: boolean;
     isRowSelectDisabled?: (row: InferDataGridRow<Schema<GridType>>) => boolean;
     isRowsSelectable?: boolean;
+    isWithTabCounts?: boolean;
     keyExtractor?: KeyExtractor;
     rowAccent?: (row: InferDataGridRow<Schema<GridType>>) => RowAccent;
     rowClassName?: (row: InferDataGridRow<Schema<GridType>>) => string | Nullish;