@uxf/data-grid 11.23.2 → 11.24.1

package/_story-utils/grid-type.d.ts

@@ -8,6 +8,7 @@ export type GridType = {
         link: "url";
         day: "date";
         dayAndTime: "datetime";
+        hidden: "hidden";
     };
     filters: {
         text: "text";

package/_story-utils/schema.js

@@ -11,6 +11,7 @@ exports.schema = {
         { name: "link", type: "url", label: "Link" },
         { name: "day", type: "date", label: "Date" },
         { name: "dayAndTime", type: "datetime", label: "Datetime" },
+        { name: "hidden", type: "hidden", label: "Hidden", hidden: true },
     ],
     filters: [
         { name: "text", type: "text", label: "Text" },

package/data-grid.stories.js

@@ -34,6 +34,29 @@ const data_grid_1 = require("./data-grid");
 const table_1 = require("./table");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
+const actionCell = {
+    width: 100,
+    Component: () => {
+        const actionCellActions = (0, buildArray_1.buildArray)()
+            .add({
+            icon: "arrow-right",
+            isIconButton: true,
+            href: "https://www.uxf.cz",
+            target: "_blank",
+        })
+            .add({
+            icon: "file",
+            label: "Download",
+            onClick: console.log,
+        })
+            .add({
+            icon: "cloud",
+            label: "Reload",
+            onClick: console.log,
+        });
+        return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
+    },
+};
 function Default() {
     const [noBorder, setNoBorder] = (0, react_1.useState)(false);
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({
@@ -54,29 +77,7 @@ function Default() {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value), name: "noBorder" }),
-        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, noBorder: noBorder, isRowSelectable: true, actionCell: {
-                width: 100,
-                Component: () => {
-                    const actionCellActions = (0, buildArray_1.buildArray)()
-                        .add({
-                        icon: "arrow-right",
-                        isIconButton: true,
-                        href: "https://www.uxf.cz",
-                        target: "_blank",
-                    })
-                        .add({
-                        icon: "file",
-                        label: "Download",
-                        onClick: console.log,
-                    })
-                        .add({
-                        icon: "cloud",
-                        label: "Reload",
-                        onClick: console.log,
-                    });
-                    return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
-                },
-            } }),
+        react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/hidden-columns/hidden-columns.js

@@ -8,7 +8,9 @@ const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importDefault(require("react"));
 /** @deprecated Use DataGridHiddenColumns */
 function HiddenColumns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns
+        .filter((column) => !column.hidden)
+        .map((column) => {
         var _a, _b, _c, _d;
         return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden), onChange: (value) => value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name), name: column.name }));
     })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.23.2",
+  "version": "11.24.1",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@uxf/core": "11.22.0",
     "@uxf/core-react": "11.22.0",
-    "@uxf/ui": "11.23.0",
+    "@uxf/ui": "11.24.0",
     "dayjs": "1.11.10",
     "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",

package/table/hooks/use-react-data-grid-columns.js

@@ -37,6 +37,9 @@ function useReactDataGridColumns(props, state) {
             columns.push(react_data_grid_1.SelectColumn);
         }
         for (const schemaColumn of schema.columns) {
+            if (schemaColumn.hidden) {
+                continue;
+            }
             const isHidden = (_b = (_a = userConfigColumns === null || userConfigColumns === void 0 ? void 0 : userConfigColumns[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) !== null && _b !== void 0 ? _b : (_c = schemaColumn.config) === null || _c === void 0 ? void 0 : _c.isHidden;
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (isHidden) {

package/table/table.js

@@ -34,8 +34,9 @@ const react_data_grid_1 = __importDefault(require("react-data-grid"));
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
 const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
+const no_rows_fallback_1 = require("./no-rows-fallback");
 const defaultKeyExtractor = (r) => r.id;
-const DefaultNoRowsFallback = () => react_1.default.createElement("div", null, "no rows");
+const DefaultNoRowsFallback = no_rows_fallback_1.NoRowsFallback;
 /** @deprecated will be remove, use DataGridTableV2 */
 function Table(props) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -84,7 +85,7 @@ function Table(props) {
         rows: props.data,
     });
     return (react_1.default.createElement(show_1.Show, { when: isMounted },
-        react_1.default.createElement(react_data_grid_1.default, { ref: rdgVisuals.ref, style: reactDataGridStyles, className: rdgVisuals.className, columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rdgVisuals.rowHeight, headerRowHeight: rdgVisuals.headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components })));
+        react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: onSelectRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, rows: props.data, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), sortColumns: sortColumns, style: reactDataGridStyles })));
 }
 exports.Table = Table;
 /** @deprecated will be remove, use DataGridTableV2 */

package/table/types.d.ts

@@ -1,5 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { ActionCellComponent, BodyCellComponents } from "../types/components";
+import { BodyCellComponents, DataGridActionCell } from "../types/components";
 import { KeyExtractor } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
@@ -16,10 +16,7 @@ export interface TableProps<Row> extends DataGridControl {
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     keyExtractor?: KeyExtractor;
     bodyCells?: BodyCellComponents<any, any>;
-    actionCell?: {
-        width: number;
-        Component: ActionCellComponent<Row>;
-    };
+    actionCell?: DataGridActionCell<Row>;
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }

package/table-v2/table-v2.js

@@ -18,7 +18,9 @@ const DefaultBodyCell = () => "Unknown body cell.";
 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, _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.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
+    const visibleColumns = props.schema.columns
+        .filter((column) => !column.hidden)
+        .filter((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.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.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

package/types/components.d.ts

@@ -1,5 +1,9 @@
 import { ComponentType, FC } from "react";
 import { BaseGridType, Columns, Filter } from "./schema";
+export type DataGridActionCell<Row> = {
+    width: number;
+    Component: ActionCellComponent<Row>;
+};
 export interface ActionCellProps<R> {
     row: R;
     reload: () => void;

package/types/schema.d.ts

@@ -23,6 +23,7 @@ export type Column<Name, Type> = {
     label: string | ReactElement;
     type: Type;
     sort?: boolean;
+    hidden?: boolean;
     config?: ColumnConfig;
 };
 export type ColumnConfig = {