@uxf/data-grid 11.34.0 → 11.35.0

package/components.d.ts

@@ -1,18 +1,19 @@
-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 dataGridStories from "./data-grid.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";
 import * as filtersButtonStories from "./filters-button/filters-button.stories";
+import * as filtersStories from "./filters/filters.stories";
 import * as fulltextInputStories from "./fulltext-input/fulltext-input.stories";
-import * as hiddenColumnsStories from "./hidden-columns/hidden-columns.stories";
 import * as hiddenColumnsButtonStories from "./hidden-columns-button/hidden-columns-button.stories";
+import * as hiddenColumnsStories from "./hidden-columns/hidden-columns.stories";
 import * as paginationStories from "./pagination/pagination.stories";
 import * as rowCountsStories from "./row-counts/row-counts.stories";
 import * as rowsPerPageSelectStories from "./rows-per-page-select/rows-per-page-select.stories";
 import * as selectedRowsToolbarStories from "./selected-rows-toolbar/selected-rows-toolbar.stories";
-import * as tableStories from "./table/table.stories";
 import * as tableV2Stories from "./table-v2/table-v2.stories";
+import * as tableStories from "./table/table.stories";
 import * as toolbarControlStories from "./toolbar-control/toolbar-control.stories";
 import * as toolbarCustomsStories from "./toolbar-customs/toolbar-customs.stories";
 import * as toolbarTabsStories from "./toolbar-tabs/toolbar-tabs.stories";
@@ -21,6 +22,10 @@ export declare const components: {
         readonly title: "DataGrid";
         readonly stories: typeof dataGridStories;
     };
+    readonly "data-grid-v2": {
+        readonly title: "DataGridV2";
+        readonly stories: typeof dataGridV2Stories;
+    };
     readonly "data-grid-custom-example": {
         readonly title: "DataGridCustomExample";
         readonly stories: typeof dataGridCustomExampleStories;

package/components.js

@@ -25,95 +25,100 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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 dataGridStories = __importStar(require("./data-grid.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"));
 const filtersButtonStories = __importStar(require("./filters-button/filters-button.stories"));
+const filtersStories = __importStar(require("./filters/filters.stories"));
 const fulltextInputStories = __importStar(require("./fulltext-input/fulltext-input.stories"));
-const hiddenColumnsStories = __importStar(require("./hidden-columns/hidden-columns.stories"));
 const hiddenColumnsButtonStories = __importStar(require("./hidden-columns-button/hidden-columns-button.stories"));
+const hiddenColumnsStories = __importStar(require("./hidden-columns/hidden-columns.stories"));
 const paginationStories = __importStar(require("./pagination/pagination.stories"));
 const rowCountsStories = __importStar(require("./row-counts/row-counts.stories"));
 const rowsPerPageSelectStories = __importStar(require("./rows-per-page-select/rows-per-page-select.stories"));
 const selectedRowsToolbarStories = __importStar(require("./selected-rows-toolbar/selected-rows-toolbar.stories"));
-const tableStories = __importStar(require("./table/table.stories"));
 const tableV2Stories = __importStar(require("./table-v2/table-v2.stories"));
+const tableStories = __importStar(require("./table/table.stories"));
 const toolbarControlStories = __importStar(require("./toolbar-control/toolbar-control.stories"));
 const toolbarCustomsStories = __importStar(require("./toolbar-customs/toolbar-customs.stories"));
 const toolbarTabsStories = __importStar(require("./toolbar-tabs/toolbar-tabs.stories"));
 exports.components = {
     "data-grid": {
         title: "DataGrid",
-        stories: dataGridStories
+        stories: dataGridStories,
+    },
+    "data-grid-v2": {
+        title: "DataGridV2",
+        stories: dataGridV2Stories,
     },
     "data-grid-custom-example": {
         title: "DataGridCustomExample",
-        stories: dataGridCustomExampleStories
+        stories: dataGridCustomExampleStories,
     },
     "export-button": {
         title: "ExportButton",
-        stories: exportButtonStories
+        stories: exportButtonStories,
     },
     "filter-list": {
         title: "FilterList",
-        stories: filterListStories
+        stories: filterListStories,
     },
-    "filters": {
+    filters: {
         title: "Filters",
-        stories: filtersStories
+        stories: filtersStories,
     },
     "filters-button": {
         title: "FiltersButton",
-        stories: filtersButtonStories
+        stories: filtersButtonStories,
     },
     "fulltext-input": {
         title: "FulltextInput",
-        stories: fulltextInputStories
+        stories: fulltextInputStories,
     },
     "hidden-columns": {
         title: "HiddenColumns",
-        stories: hiddenColumnsStories
+        stories: hiddenColumnsStories,
     },
     "hidden-columns-button": {
         title: "HiddenColumnsButton",
-        stories: hiddenColumnsButtonStories
+        stories: hiddenColumnsButtonStories,
     },
-    "pagination": {
+    pagination: {
         title: "Pagination",
-        stories: paginationStories
+        stories: paginationStories,
     },
     "row-counts": {
         title: "RowCounts",
-        stories: rowCountsStories
+        stories: rowCountsStories,
     },
     "rows-per-page-select": {
         title: "RowsPerPageSelect",
-        stories: rowsPerPageSelectStories
+        stories: rowsPerPageSelectStories,
     },
     "selected-rows-toolbar": {
         title: "SelectedRowsToolbar",
-        stories: selectedRowsToolbarStories
+        stories: selectedRowsToolbarStories,
     },
-    "table": {
+    table: {
         title: "Table",
-        stories: tableStories
+        stories: tableStories,
     },
     "table-v2": {
         title: "TableV2",
-        stories: tableV2Stories
+        stories: tableV2Stories,
     },
     "toolbar-control": {
         title: "ToolbarControl",
-        stories: toolbarControlStories
+        stories: toolbarControlStories,
     },
     "toolbar-customs": {
         title: "ToolbarCustoms",
-        stories: toolbarCustomsStories
+        stories: toolbarCustomsStories,
     },
     "toolbar-tabs": {
         title: "ToolbarTabs",
-        stories: toolbarTabsStories
+        stories: toolbarTabsStories,
     },
 };

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,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.34.0",
+  "version": "11.35.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -31,9 +31,9 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.33.0",
-    "@uxf/ui": "11.34.0",
+    "@uxf/core": "11.35.0",
+    "@uxf/core-react": "11.35.0",
+    "@uxf/ui": "11.35.0",
     "dayjs": "1.11.13",
     "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",

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;
 

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

@@ -6,13 +6,14 @@ 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) {
+function mapColumnSizesToGridTemplateColumns(columnSizes, actionCellWidth, selectRowCheckboxWidth) {
     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)}`;
+    const columnSizesWithSelectRows = (0, is_not_nil_1.isNotNil)(selectRowCheckboxWidth)
+        ? `${(0, rem_1.rem)(selectRowCheckboxWidth)} ${normalizedColumnSizes.join(" ")}`
+        : normalizedColumnSizes.join(" ");
+    return (0, is_nil_1.isNil)(actionCellWidth) ? columnSizesWithSelectRows : `${columnSizesWithSelectRows} ${(0, rem_1.rem)(actionCellWidth)}`;
 }
-function useResizableColumns(columns, actionCell, actions) {
+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 +36,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 = mapColumnSizesToGridTemplateColumns(gridColumns, actionCellWidth, selectRowsCellWidth);
             }
         };
         const onMouseUp = () => {
@@ -56,7 +57,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,33 @@
     --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");
+        }
+    }
+
     &__row {
         display: contents;
     }
@@ -58,6 +82,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 +111,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,51 @@ 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_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 { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null);
     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
         .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)
+    const gridTemplateColumnsWithoutSelectable = (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)}`;
+    const gridTemplateColumns = props.isRowSelectable
+        ? `${(0, rem_1.rem)(SELECT_ROWS_CELL_WIDTH)} ${gridTemplateColumnsWithoutSelectable}`
+        : gridTemplateColumnsWithoutSelectable;
+    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 +60,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 =