@uxf/data-grid 11.34.1 → 11.36.0

package/components.d.ts

@@ -1,5 +1,6 @@
 import * as dataGridStories from "./data-grid.stories";
 import * as dataGridCustomExampleStories from "./data-grid-custom-example.stories";
+import * as dataGridV2Stories from "./data-grid-v2.stories";
 import * as exportButtonStories from "./export-button/export-button.stories";
 import * as filterListStories from "./filter-list/filter-list.stories";
 import * as filtersStories from "./filters/filters.stories";
@@ -25,6 +26,10 @@ export declare const components: {
         readonly title: "DataGridCustomExample";
         readonly stories: typeof dataGridCustomExampleStories;
     };
+    readonly "data-grid-v2": {
+        readonly title: "DataGridV2";
+        readonly stories: typeof dataGridV2Stories;
+    };
     readonly "export-button": {
         readonly title: "ExportButton";
         readonly stories: typeof exportButtonStories;

package/components.js

@@ -27,6 +27,7 @@ exports.components = void 0;
 // generated file
 const dataGridStories = __importStar(require("./data-grid.stories"));
 const dataGridCustomExampleStories = __importStar(require("./data-grid-custom-example.stories"));
+const dataGridV2Stories = __importStar(require("./data-grid-v2.stories"));
 const exportButtonStories = __importStar(require("./export-button/export-button.stories"));
 const filterListStories = __importStar(require("./filter-list/filter-list.stories"));
 const filtersStories = __importStar(require("./filters/filters.stories"));
@@ -52,6 +53,10 @@ exports.components = {
         title: "DataGridCustomExample",
         stories: dataGridCustomExampleStories
     },
+    "data-grid-v2": {
+        title: "DataGridV2",
+        stories: dataGridV2Stories
+    },
     "export-button": {
         title: "ExportButton",
         stories: exportButtonStories

package/data-grid-v2.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { BaseGridType, DataGridProps } from "./types";
+export declare function DataGridV2<GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>): React.JSX.Element;

package/data-grid-v2.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridV2 = DataGridV2;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const react_1 = __importDefault(require("react"));
+const body_cell_1 = require("./body-cell");
+const filter_handler_1 = require("./filter-handler");
+const filter_list_1 = require("./filter-list");
+const footer_1 = require("./footer");
+const linear_progress_1 = require("./linear-progress");
+const pagination_1 = require("./pagination");
+const root_1 = require("./root");
+const row_counts_1 = require("./row-counts");
+const rows_per_page_select_1 = require("./rows-per-page-select");
+const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
+const table_v2_1 = require("./table-v2");
+const no_rows_fallback_1 = require("./table/no-rows-fallback");
+const toolbar_1 = require("./toolbar");
+const toolbar_control_1 = require("./toolbar-control");
+const toolbar_customs_1 = require("./toolbar-customs");
+const toolbar_tabs_1 = require("./toolbar-tabs");
+const classes_1 = require("./utils/classes");
+const DefaultSelectedRowsToolbarActions = () => null;
+function DataGridV2(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(root_1.DataGridRoot, { className: props.className, noBorder: props.noBorder },
+            react_1.default.createElement(toolbar_1.DataGridToolbar, { noBorder: props.noBorder },
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, onCsvDownload: props.onCsvDownload, schema: props.schema, state: props.state }),
+                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, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { 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(footer_1.DataGridFooter, { noBorder: props.noBorder },
+                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 }),
+                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions, actions: props.actions, state: props.state })));
+}

package/data-grid-v2.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/data-grid-v2.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const buildArray_1 = require("@uxf/core/utils/buildArray");
+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");
+const schema_1 = require("./_story-utils/schema");
+const data_grid_v2_1 = require("./data-grid-v2");
+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 merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
+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 });
+    },
+};
+const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, {
+    perPage: 100,
+    columns: {
+        bool: { width: 80 },
+    },
+    filters: {
+        text: { placeholder: "Custom placeholder ..." },
+    },
+});
+function Default() {
+    const [noBorder, setNoBorder] = (0, react_1.useState)(false);
+    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 { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
+        loader: loader_1.loader,
+        schema: schema_1.schema,
+        state,
+    });
+    return (react_1.default.createElement("div", { className: "p-10" },
+        react_1.default.createElement(toggle_1.Toggle, { label: "No border", name: "noBorder", onChange: (value) => setNoBorder(Boolean(value)), value: noBorder }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, data: data, error: error, isLoading: isLoading, isRowSelectable: true, noBorder: noBorder, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}

package/data-grid.js

@@ -38,6 +38,6 @@ function DataGrid(props) {
             react_1.default.createElement(footer_1.DataGridFooter, { noBorder: props.noBorder },
                 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 }),
-                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0, state: props.state }))),
+                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
         react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions, actions: props.actions, state: props.state })));
 }

package/data-grid.stories.js

@@ -85,7 +85,7 @@ function Default() {
         schema: schema_1.schema,
         state,
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", name: "noBorder", onChange: (value) => setNoBorder(Boolean(value)), value: noBorder }),
         react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, data: data, error: error, isLoading: isLoading, isRowSelectable: true, noBorder: noBorder, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));

package/package.json

@@ -1,55 +1,55 @@
 {
-  "name": "@uxf/data-grid",
-  "version": "11.34.1",
-  "description": "UXF DataGrid",
-  "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
-  "main": "index.js",
-  "bin": {
-    "uxf-data-grid-generator": "bin/uxf-data-grid-generator.js"
-  },
-  "typings": "index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/uxf-npm/data-grid.git"
-  },
-  "license": "MIT",
-  "keywords": [
-    "data-table",
-    "data-grid",
-    "uxf"
-  ],
-  "scripts": {
-    "dev": "next dev",
-    "build": "tsc -P tsconfig.json",
-    "gen:icons": "icons-gen",
-    "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader",
-    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
-    "test": "npm run-script typecheck",
-    "typecheck": "tsc --noEmit --skipLibCheck"
-  },
-  "dependencies": {
-    "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.33.0",
-    "@uxf/ui": "11.34.1",
-    "dayjs": "1.11.13",
-    "deepmerge": "4.3.1",
-    "fast-glob": "3.3.2",
-    "qs": "6.13.0",
-    "react-data-grid": "7.0.0-beta.39",
-    "yargs": "17.7.2"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
-}
+    "name": "@uxf/data-grid",
+    "version": "11.36.0",
+    "description": "UXF DataGrid",
+    "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
+    "main": "index.js",
+    "bin": {
+        "uxf-data-grid-generator": "bin/uxf-data-grid-generator.js"
+    },
+    "typings": "index.d.ts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://gitlab.com/uxf-npm/data-grid.git"
+    },
+    "license": "MIT",
+    "keywords": [
+        "data-table",
+        "data-grid",
+        "uxf"
+    ],
+    "scripts": {
+        "dev": "next dev",
+        "build": "tsc -P tsconfig.json",
+        "gen:icons": "icons-gen",
+        "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader",
+        "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
+        "test": "npm run-script typecheck",
+        "typecheck": "tsc --noEmit --skipLibCheck"
+    },
+    "dependencies": {
+        "@uxf/core": "11.35.0",
+        "@uxf/core-react": "11.36.0",
+        "@uxf/ui": "11.36.0",
+        "dayjs": "1.11.13",
+        "deepmerge": "4.3.1",
+        "fast-glob": "3.3.2",
+        "qs": "6.13.0",
+        "react-data-grid": "7.0.0-beta.39",
+        "yargs": "17.7.2"
+    },
+    "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "18.3.5",
+        "@types/react-dom": "18.3.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
+}

package/styles.css

@@ -165,10 +165,6 @@
         gap: theme("spacing.4");
         justify-content: flex-end;
         padding: theme("spacing.2");
-
-        &.no-border {
-            padding-inline: 0;
-        }
     }
 
     &__linear-progress {
@@ -178,7 +174,7 @@
         overflow: hidden;
         position: absolute;
         right: 0;
-        z-index: 1;
+        z-index: 5;
 
         &.is-loading::before {
             animation: datagridlineanim 1s linear infinite;
@@ -295,6 +291,8 @@
     }
 
     &__table {
+        margin-top: 1px;
+
         &::-webkit-scrollbar {
             height: 8px;
             width: 8px;
@@ -317,7 +315,6 @@
 
     &__toolbar {
         align-items: center;
-        border-bottom: 1px solid theme("colors.lightBorder");
         display: flex;
         flex-wrap: wrap;
         gap: theme("spacing.2");
@@ -374,8 +371,6 @@
 
         &-nav {
             &--desktop {
-                @apply space-x-4;
-
                 display: none;
                 margin-bottom: -1px;
 
@@ -494,17 +489,17 @@
     }
 
     &__hidden-columns-empty-box {
-        background-color: var(--uxf-color-warning-surface-muted);
-        border: theme("borderWidth.DEFAULT") solid var(--uxf-color-warning-border);
+        background-color: theme("colors.warning_surface_muted");
+        border: theme("borderWidth.DEFAULT") solid theme("colors.warning_border");
         border-radius: theme("borderRadius.lg");
-        color: var(--uxf-color-base-text-high-emphasis);
+        color: theme("colors.base_text_high_emphasis");
         display: flex;
         gap: 12px;
         margin: 8px 0;
         padding: 8px 16px;
 
         .uxf-icon {
-            color: var(--uxf-color-warning-icon-on-muted);
+            color: theme("colors.warning_icon_on_muted");
             margin-top: 4px;
         }
     }

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { KeyExtractor } from "../../types";
+import { DataGridTableProps } from "../types";
+interface SelectRowCheckboxProps extends Pick<DataGridTableProps<any>, "state" | "data" | "actions"> {
+    keyExtractor: KeyExtractor;
+}
+export declare function HeaderSelectAllRowsCheckbox(props: SelectRowCheckboxProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSelectAllRowsCheckbox = HeaderSelectAllRowsCheckbox;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+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 isIndeterminate = !isAllRowsSelected && (0, is_not_empty_1.isNotEmpty)(selectedRows);
+    const selectAllRowsHandler = () => {
+        props.actions.setSelectedRows(isAllRowsSelected ? [] : props.data);
+    };
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__select-all-rows-cell" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, indeterminate: isIndeterminate, label: "Vybrat v\u0161e", name: "select-all-rows", onChange: selectAllRowsHandler, value: isAllRowsSelected })));
+}

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

@@ -3,7 +3,9 @@ import { Body } from "./body";
 import { Cell } from "./cell";
 import { Header } from "./header";
 import { HeaderActionCell } from "./header-action-cell";
+import { HeaderSelectAllRowsCheckbox } from "./header-select-all-rows-checkbox";
 import { Row } from "./row";
+import { SelectRowCheckbox } from "./select-row-checkbox";
 export declare const Table: import("react").ForwardRefExoticComponent<import("./root").RootProps & import("react").RefAttributes<HTMLDivElement>> & {
     Body: typeof Body;
     Row: typeof Row;
@@ -12,4 +14,6 @@ export declare const Table: import("react").ForwardRefExoticComponent<import("./
     ActionCell: typeof ActionCell;
     HeaderActionCell: typeof HeaderActionCell;
     Header: typeof Header;
+    SelectRowCheckbox: typeof SelectRowCheckbox;
+    HeaderSelectAllRowsCheckbox: typeof HeaderSelectAllRowsCheckbox;
 };

package/table-v2/components/index.js

@@ -7,8 +7,10 @@ const cell_1 = require("./cell");
 const header_1 = require("./header");
 const header_action_cell_1 = require("./header-action-cell");
 const header_cell_1 = require("./header-cell");
+const header_select_all_rows_checkbox_1 = require("./header-select-all-rows-checkbox");
 const root_1 = require("./root");
 const row_1 = require("./row");
+const select_row_checkbox_1 = require("./select-row-checkbox");
 exports.Table = Object.assign(root_1.Root, {
     Body: body_1.Body,
     Row: row_1.Row,
@@ -17,4 +19,6 @@ exports.Table = Object.assign(root_1.Root, {
     ActionCell: action_cell_1.ActionCell,
     HeaderActionCell: header_action_cell_1.HeaderActionCell,
     Header: header_1.Header,
+    SelectRowCheckbox: select_row_checkbox_1.SelectRowCheckbox,
+    HeaderSelectAllRowsCheckbox: header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox,
 });

package/table-v2/components/select-row-checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SelectRowCheckboxProps {
+    isRowSelected: boolean;
+    onSelectRowChange: () => void;
+}
+export declare function SelectRowCheckbox(props: SelectRowCheckboxProps): React.JSX.Element;
+export {};

package/table-v2/components/select-row-checkbox.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectRowCheckbox = SelectRowCheckbox;
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+const react_1 = __importDefault(require("react"));
+function SelectRowCheckbox(props) {
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__cell uxf-dg-table__select-row-cell" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: "*:mt-0", hiddenLabel: true, label: "Vybrat", name: "select-row", onChange: props.onSelectRowChange, value: props.isRowSelected })));
+}

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

@@ -1,7 +1,8 @@
+import { Nullish } from "@uxf/core/types";
 import { Column } from "../../types";
 import { DataGridControl } from "../../use-data-grid-control";
-import { TableProps } from "../types";
-export declare function useResizableColumns(columns: Column<any, any>[], actionCell: TableProps<any>["actionCell"], actions: DataGridControl["actions"]): {
+import { DataGridTableProps } from "../types";
+export declare function useResizableColumns(columns: Column<any, any>[], actionCell: DataGridTableProps<any>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish): {
     tableRef: import("react").RefObject<HTMLDivElement>;
     columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     onResizeStart(index: number): void;

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

@@ -2,17 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResizableColumns = useResizableColumns;
 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 rem_1 = require("@uxf/styles/units/rem");
 const react_1 = require("react");
-function mapColumnSizesToGridTemplateColumns(columnSizes, actionCellWidth) {
-    const normalizedColumnSizes = columnSizes.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "1fr"));
-    return (0, is_nil_1.isNil)(actionCellWidth)
-        ? `${normalizedColumnSizes.join(" ")}`
-        : `${normalizedColumnSizes.join(" ")} ${(0, rem_1.rem)(actionCellWidth)}`;
-}
-function useResizableColumns(columns, actionCell, actions) {
+const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
+function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
     const columnRefs = (0, react_1.useRef)([]);
@@ -35,7 +29,7 @@ function useResizableColumns(columns, actionCell, actions) {
             // TODO @vejvis - jak tohle udělat lépe??
             tempColumnSizes = gridColumns;
             if (tableRef.current) {
-                tableRef.current.style.gridTemplateColumns = mapColumnSizesToGridTemplateColumns(gridColumns, actionCellWidth);
+                tableRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)(gridColumns.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "1fr")), actionCellWidth, selectRowsCellWidth);
             }
         };
         const onMouseUp = () => {
@@ -56,7 +50,7 @@ function useResizableColumns(columns, actionCell, actions) {
             window.removeEventListener("mousemove", onMouseMove);
             window.removeEventListener("mouseup", onMouseUp);
         };
-    }, [columns, actions, actionCellWidth, activeIndex]);
+    }, [columns, actions, actionCellWidth, activeIndex, selectRowsCellWidth]);
     return {
         tableRef,
         columnRefs,

package/table-v2/styles.css

@@ -1,12 +1,15 @@
 :root {
     --uxf-dg-table-font-size: theme("fontSize.sm");
     --uxf-dg-table-cell-padding: theme("spacing.2");
+    --uxf-dg-table-cell-padding-first-cell: theme("spacing.4");
+    --uxf-dg-table-cell-padding-last-cell: theme("spacing.4");
     --uxf-dg-table-action-cell-left-divider-size: 1px;
     --uxf-dg-table-row-divider-size: 1px;
 }
 
 .uxf-dg-table {
     --uxf-dg-table-text-color: var(--uxf-color-base-text-high-emphasis);
+    --uxf-dg-table-border-color: var(--uxf-color-base-border-border);
     --uxf-dg-table-action-cell-left-divider-color: var(--uxf-color-base-border-border);
     --uxf-dg-table-row-divider-color: var(--uxf-color-base-border-border);
     --uxf-dg-table-action-cell-bg-color: var(--uxf-color-base-surface-main);
@@ -18,12 +21,39 @@
     --uxf-dg-table-header-divider-size: var(--uxf-dg-table-row-divider-size);
     --uxf-dg-table-header-divider-color: var(--uxf-dg-table-row-divider-color);
 
+    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 {
+        height: 8px;
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: theme("colors.lightLow");
+        border-radius: 999px;
+
+        :root .dark & {
+            background-color: theme("colors.darkLow");
+        }
+    }
+
+    /* TODO tohle by asi nemělo mít classu uxf-data-grid */
+    .uxf-data-grid__action-cell-wrapper {
+        justify-content: flex-end;
+        padding: 0 theme("spacing.2");
+    }
+
     &__row {
         display: contents;
     }
@@ -58,6 +88,14 @@
         display: flex;
         padding: var(--uxf-dg-table-cell-padding);
 
+        &:first-child {
+            padding-left: var(--uxf-dg-table-cell-padding-first-cell);
+        }
+
+        &:nth-last-child(1 of .uxf-dg-table__cell) {
+            padding-right: var(--uxf-dg-table-cell-padding-last-cell);
+        }
+
         &--header {
             background-color: var(--uxf-dg-table-header-bg-color);
             color: var(--uxf-dg-table-header-color);
@@ -79,6 +117,31 @@
         }
     }
 
+    &__select-all-rows-cell {
+        position: relative;
+
+        &::before {
+            background-color: var(--uxf-color-base-border-border);
+            bottom: 0;
+            content: "";
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 1px;
+        }
+
+        .uxf-icon {
+            margin-left: 0;
+        }
+    }
+
+    &__select-all-rows-cell,
+    &__select-row-cell {
+        .uxf-checkbox-input {
+            margin-top: 0;
+        }
+    }
+
     &__action-cell {
         background-color: var(--uxf-dg-table-action-cell-bg-color);
         border-left: var(--uxf-dg-table-action-cell-left-divider-size) solid

package/table-v2/table-v2.js

@@ -6,34 +6,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridTableV2 = void 0;
 exports.TableV2 = TableV2;
 const show_1 = require("@uxf/core-react/components/show");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importDefault(require("react"));
 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 get_grid_template_columns_1 = require("./utils/get-grid-template-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
+const SELECT_ROWS_CELL_WIDTH = 40;
 const defaultKeyExtractor = (r) => r.id;
 const DefaultBodyCell = () => "Unknown body cell.";
 /** @deprecated Use DataGridTableV2 */
 function TableV2(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
     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 selectedRowColumnWidth = props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null;
+    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 gridTemplateColumnsWithoutAction = visibleColumns
+    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)))
-        .join(" ");
-    const gridTemplateColumns = (0, is_nil_1.isNil)((_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width)
-        ? gridTemplateColumnsWithoutAction
-        : `${gridTemplateColumnsWithoutAction} ${(0, rem_1.rem)(props.actionCell.width)}`;
+        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)));
+    const gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)(gridTemplateBasicColumns, selectedRowColumnWidth, (_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width);
+    const selectedRows = (_e = props.state.selectedRows) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY;
+    const selectRowHandler = (rowId) => () => {
+        const isRowSelected = selectedRows.find((r) => keyExtractor(r) === rowId);
+        const newSelectedRows = isRowSelected
+            ? selectedRows.filter((row) => keyExtractor(row) !== rowId)
+            : [...selectedRows, props.data.find((row) => keyExtractor(row) === rowId)];
+        props.actions.setSelectedRows(newSelectedRows);
+    };
     return (react_1.default.createElement(components_1.Table, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: tableRef },
         react_1.default.createElement(components_1.Table.Header, null,
             react_1.default.createElement(components_1.Table.Row, null,
+                react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowSelectable) },
+                    react_1.default.createElement(header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox, { actions: props.actions, data: props.data, keyExtractor: keyExtractor, state: props.state })),
                 visibleColumns.map((column, index) => {
                     var _a;
                     return (react_1.default.createElement(components_1.Table.HeaderCell, { column: column, key: column.name, onClick: column.sort ? () => props.actions.sort(column.name) : undefined, onResizeStart: () => onResizeStart(index), ref: (el) => {
@@ -43,6 +56,8 @@ function TableV2(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, props.data.map((row) => (react_1.default.createElement(components_1.Table.Row, { key: keyExtractor(row) },
+            react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowSelectable) },
+                react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { isRowSelected: selectedRows.find((r) => keyExtractor(r) === keyExtractor(row)), onSelectRowChange: selectRowHandler(keyExtractor(row)) })),
             visibleColumns.map((column) => {
                 var _a, _b, _c, _d;
                 const BodyCell = 

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

@@ -0,0 +1,2 @@
+import { Nullish } from "@uxf/core/types";
+export declare function getGridTemplateColumns(columns: string[], selectRowColumnWidth: number | Nullish, actionColumnWidth: number | Nullish): string;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridTemplateColumns = getGridTemplateColumns;
+const buildArray_1 = require("@uxf/core/utils/buildArray");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const rem_1 = require("@uxf/styles/units/rem");
+function getGridTemplateColumns(columns, selectRowColumnWidth, actionColumnWidth) {
+    return (0, buildArray_1.buildArray)()
+        .when((0, is_not_nil_1.isNotNil)(selectRowColumnWidth), (0, rem_1.rem)(selectRowColumnWidth !== null && selectRowColumnWidth !== void 0 ? selectRowColumnWidth : 0))
+        .add(columns.join(" "))
+        .when((0, is_not_nil_1.isNotNil)(actionColumnWidth), `minmax(${(0, rem_1.rem)(actionColumnWidth !== null && actionColumnWidth !== void 0 ? actionColumnWidth : 0)}, auto)`)
+        .join(" ");
+}