@uxf/data-grid 11.15.1 → 11.15.3

package/_store/reducer.js

@@ -28,7 +28,7 @@ function getInitialState(schema, init, initialUserConfig) {
 exports.getInitialState = getInitialState;
 // eslint-disable-next-line complexity
 const reducer = (state, action) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     switch (action.type) {
         case "CHANGE_PAGE":
             return {
@@ -86,16 +86,20 @@ const reducer = (state, action) => {
                 },
             };
         case "SORT":
-            return {
-                ...state,
-                request: {
-                    ...state.request,
-                    s: {
-                        name: action.columnName,
-                        dir: action.direction,
+            if (((_a = state.request.s) === null || _a === void 0 ? void 0 : _a.name) === action.columnName) {
+                return (0, deepmerge_1.default)(state, {
+                    request: {
+                        s: {
+                            dir: ((_b = state.request.s) === null || _b === void 0 ? void 0 : _b.dir) === "asc" ? "desc" : "asc",
+                        },
                     },
+                });
+            }
+            return (0, deepmerge_1.default)(state, {
+                request: {
+                    s: { name: action.columnName, dir: (_c = action.direction) !== null && _c !== void 0 ? _c : "asc" },
                 },
-            };
+            });
         case "SORT_CLEAR":
             return {
                 ...state,
@@ -115,24 +119,24 @@ const reducer = (state, action) => {
             };
         case "CHANGE_TAB":
             // eslint-disable-next-line no-case-declarations,@typescript-eslint/no-unnecessary-condition
-            const tabHistory = (_a = state.tabRequests[action.tab.name]) !== null && _a !== void 0 ? _a : {};
+            const tabHistory = (_d = state.tabRequests[action.tab.name]) !== null && _d !== void 0 ? _d : {};
             return {
                 ...state,
                 request: {
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    f: (_b = tabHistory.f) !== null && _b !== void 0 ? _b : [],
-                    s: (_d = (_c = tabHistory.s) !== null && _c !== void 0 ? _c : action.tab.s) !== null && _d !== void 0 ? _d : state.request.s,
+                    f: (_e = tabHistory.f) !== null && _e !== void 0 ? _e : [],
+                    s: (_g = (_f = tabHistory.s) !== null && _f !== void 0 ? _f : action.tab.s) !== null && _g !== void 0 ? _g : state.request.s,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    search: (_e = tabHistory.search) !== null && _e !== void 0 ? _e : "",
+                    search: (_h = tabHistory.search) !== null && _h !== void 0 ? _h : "",
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    page: (_f = tabHistory.page) !== null && _f !== void 0 ? _f : 0,
+                    page: (_j = tabHistory.page) !== null && _j !== void 0 ? _j : 0,
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    perPage: (_g = tabHistory.perPage) !== null && _g !== void 0 ? _g : state.request.perPage,
+                    perPage: (_k = tabHistory.perPage) !== null && _k !== void 0 ? _k : state.request.perPage,
                     tab: action.tab.name,
                 },
                 tabRequests: {
                     ...state.tabRequests,
-                    [(_h = state.request.tab) !== null && _h !== void 0 ? _h : "__DEFAULT_TAB__"]: state.request,
+                    [(_l = state.request.tab) !== null && _l !== void 0 ? _l : "__DEFAULT_TAB__"]: state.request,
                 },
             };
         case "SET_SELECTED_ROWS":
@@ -148,7 +152,7 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            ...((_k = (_j = state.userConfig.columns) === null || _j === void 0 ? void 0 : _j[action.name]) !== null && _k !== void 0 ? _k : {}),
+                            ...((_o = (_m = state.userConfig.columns) === null || _m === void 0 ? void 0 : _m[action.name]) !== null && _o !== void 0 ? _o : {}),
                             isHidden: true,
                         },
                     },
@@ -162,7 +166,7 @@ const reducer = (state, action) => {
                     columns: {
                         ...state.userConfig.columns,
                         [action.name]: {
-                            ...((_m = (_l = state.userConfig.columns) === null || _l === void 0 ? void 0 : _l[action.name]) !== null && _m !== void 0 ? _m : {}),
+                            ...((_q = (_p = state.userConfig.columns) === null || _p === void 0 ? void 0 : _p[action.name]) !== null && _q !== void 0 ? _q : {}),
                             isHidden: false,
                         },
                     },

package/{icons-config/index.js → icons-config.js}

@@ -1,4 +1,4 @@
-const uiIcons = require("@uxf/ui/utils/icons-config");
+const uiIcons = require("@uxf/ui/icons-config");
 
 /** @type {import('@uxf/icons-generator/types').Config['icons']} */
 module.exports = {
@@ -56,6 +56,21 @@ module.exports = {
         height: 512,
         data: `<path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z" fill="currentColor"/>`,
     },
+    sort: {
+        width: 320,
+        height: 512,
+        data: `<path d="M70.6 176H249.4L160 86.6 70.6 176zm112-134.6l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128c12.5-12.5 32.8-12.5 45.3 0zM70.6 336L160 425.4 249.4 336H70.6zm112 134.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z" fill="currentColor"/>`,
+    },
+    "sort-up": {
+        width: 320,
+        height: 512,
+        data: `<path d="M160 86.6L70.6 176H249.4L160 86.6zM137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128z" fill="currentColor"/>`,
+    },
+    "sort-down": {
+        width: 320,
+        height: 512,
+        data: `<path d="M160 425.4L70.6 336H249.4L160 425.4zm-22.6 45.3c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" fill="currentColor"/>`,
+    },
     warning: {
         width: 512,
         height: 512,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.15.1",
+  "version": "11.15.3",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@uxf/core": "11.11.3",
-    "@uxf/ui": "11.15.1",
+    "@uxf/ui": "11.15.3",
     "dayjs": "1.11.10",
     "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",

package/table-v2/components/action-cell.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function ActionCell(props: PropsWithChildren): React.JSX.Element;

package/table-v2/components/action-cell.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = void 0;
+const react_1 = __importDefault(require("react"));
+function ActionCell(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__action-cell" }, props.children);
+}
+exports.ActionCell = ActionCell;

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

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function Body(props: PropsWithChildren): React.JSX.Element;

package/table-v2/components/body.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body = void 0;
+const react_1 = __importDefault(require("react"));
+function Body(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__body" }, props.children);
+}
+exports.Body = Body;

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

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function Cell(props: PropsWithChildren): React.JSX.Element;

package/table-v2/components/cell.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const react_1 = __importDefault(require("react"));
+function Cell(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__cell" }, props.children);
+}
+exports.Cell = Cell;

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

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

package/table-v2/components/header-action-cell.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderActionCell = void 0;
+const react_1 = __importDefault(require("react"));
+function HeaderActionCell() {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__action-cell uxf-dg-table__action-cell--header" });
+}
+exports.HeaderActionCell = HeaderActionCell;

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

@@ -0,0 +1,10 @@
+import { Nullish } from "@uxf/core/types";
+import React from "react";
+import { Column, DataGridSort } from "../../types";
+export interface HeaderCellProps {
+    column: Column<any, any>;
+    onResizeStart: () => void;
+    sort: DataGridSort | Nullish;
+    onClick?: () => void;
+}
+export declare const HeaderCell: React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLDivElement>>;

package/table-v2/components/header-cell.js

@@ -0,0 +1,47 @@
+"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.HeaderCell = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
+function HeaderCellComponent(props, ref) {
+    var _a, _b;
+    const iconName = !props.column.sort
+        ? null
+        : ((_a = props.sort) === null || _a === void 0 ? void 0 : _a.dir) === "asc"
+            ? "sort-up"
+            : ((_b = props.sort) === null || _b === void 0 ? void 0 : _b.dir) === "desc"
+                ? "sort-down"
+                : "sort";
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-dg-table__cell uxf-dg-table__cell--header", props.column.sort && "is-sortable"), onClick: props.onClick },
+        props.column.label,
+        iconName && react_1.default.createElement(icon_1.Icon, { name: iconName, className: "ml-auto" }),
+        react_1.default.createElement("button", { className: "uxf-dg-table__column-resize-handle", onMouseDown: props.onResizeStart, onClick: (event) => event.stopPropagation() })));
+}
+exports.HeaderCell = (0, react_1.forwardRef)(HeaderCellComponent);
+exports.HeaderCell.displayName = "HeaderCell";

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

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function Header(props: PropsWithChildren): React.JSX.Element;

package/table-v2/components/header.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+function Header(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__header" }, props.children);
+}
+exports.Header = Header;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ActionCell } from "./action-cell";
+import { Body } from "./body";
+import { Cell } from "./cell";
+import { Header } from "./header";
+import { HeaderActionCell } from "./header-action-cell";
+import { Row } from "./row";
+export declare const Table: import("react").ForwardRefExoticComponent<import("./root").RootProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Body: typeof Body;
+    Row: typeof Row;
+    HeaderCell: import("react").ForwardRefExoticComponent<import("./header-cell").HeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
+    Cell: typeof Cell;
+    ActionCell: typeof ActionCell;
+    HeaderActionCell: typeof HeaderActionCell;
+    Header: typeof Header;
+};

package/table-v2/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const action_cell_1 = require("./action-cell");
+const body_1 = require("./body");
+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 root_1 = require("./root");
+const row_1 = require("./row");
+exports.Table = Object.assign(root_1.Root, {
+    Body: body_1.Body,
+    Row: row_1.Row,
+    HeaderCell: header_cell_1.HeaderCell,
+    Cell: cell_1.Cell,
+    ActionCell: action_cell_1.ActionCell,
+    HeaderActionCell: header_action_cell_1.HeaderActionCell,
+    Header: header_1.Header,
+});

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,31 @@
+"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.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));
+}
+exports.Root = (0, react_1.forwardRef)(RootComponent);

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

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare function Row(props: PropsWithChildren): React.JSX.Element;

package/table-v2/components/row.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const react_1 = __importDefault(require("react"));
+function Row(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__row" }, props.children);
+}
+exports.Row = Row;

package/table-v2/styles.css

@@ -1,40 +1,92 @@
-.uxf-data-grid__table-v2 {
+:root {
+    --uxf-dg-table-font-size: theme("fontSize.sm");
+    --uxf-dg-table-cell-padding: theme("spacing.2");
+    --uxf-dg-table-action-cell-bg-color: theme("colors.white");
+    --uxf-dg-table-action-cell-left-divider-color: theme("colors.lightBorder");
+    --uxf-dg-table-action-cell-left-divider-size: 1px;
+    --uxf-dg-table-row-divider-size: 1px;
+    --uxf-dg-table-row-divider-color: theme("colors.lightBorder");
+    --uxf-dg-table-row-bg-color-odd: theme("colors.white");
+    --uxf-dg-table-row-bg-color-even: theme("colors.white");
+    --uxf-dg-table-header-action-cell-bg-color: theme("colors.neutral.50");
+    --uxf-dg-table-header-bg-color: theme("colors.neutral.50");
+    --uxf-dg-table-header-color: theme("colors.neutral.400");
+    --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);
+}
+
+.uxf-dg-table {
     display: grid;
-    font-size: theme("fontSize.sm");
+    font-size: var(--uxf-dg-table-font-size);
     overflow-x: auto;
     width: 100%;
 
-    .uxf-data-grid__row {
+    &__row {
+        display: contents;
+    }
+
+    &__header {
         display: contents;
     }
 
-    .uxf-data-grid__cell {
+    &__body {
+        display: contents;
+
+        .uxf-dg-table__row {
+            &:nth-child(odd) {
+                .uxf-dg-table__cell,
+                .uxf-dg-table__action-cell {
+                    background-color: var(--uxf-dg-table-row-bg-color-odd);
+                }
+            }
+
+            &:nth-child(even) {
+                .uxf-dg-table__cell,
+                .uxf-dg-table__action-cell {
+                    background-color: var(--uxf-dg-table-row-bg-color-even);
+                }
+            }
+        }
+    }
+
+    &__cell {
         align-items: center;
-        border-top: 1px solid theme("colors.lightBorder");
+        border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
         display: flex;
-        padding: 8px;
-    }
+        padding: var(--uxf-dg-table-cell-padding);
+
+        &--header {
+            background-color: var(--uxf-dg-table-header-bg-color);
+            color: var(--uxf-dg-table-header-color);
+            position: relative;
+            user-select: none;
 
-    .uxf-data-grid__cell-header {
-        background-color: theme("colors.neutral.50");
-        color: theme("colors.neutral.400");
-        position: relative;
-        user-select: none;
+            &.is-sortable {
+                cursor: pointer;
+            }
+
+            .uxf-icon {
+                margin-left: auto;
+                width: 12px;
+            }
+        }
     }
 
-    .uxf-data-grid__cell-action {
-        background-color: theme("colors.white");
-        border-left: 1px solid theme("colors.lightBorder");
+    &__action-cell {
+        background-color: var(--uxf-dg-table-action-cell-bg-color);
+        border-left: var(--uxf-dg-table-action-cell-left-divider-size) solid
+            var(--uxf-dg-table-action-cell-left-divider-color);
+        border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
         position: sticky;
         right: 0;
 
-        &.uxf-data-grid__cell-header {
-            background-color: theme("colors.neutral.50");
+        &--header {
+            background-color: var(--uxf-dg-table-header-action-cell-bg-color);
             z-index: 2;
         }
     }
 
-    .uxf-data-grid__cell-resize-handle {
+    &__column-resize-handle {
         bottom: 0;
         cursor: col-resize;
         position: absolute;

package/table-v2/table-v2.js

@@ -4,13 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableV2 = void 0;
+const show_1 = require("@uxf/core/components/show");
 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 use_resizable_columns_1 = require("./hooks/use-resizable-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
 const defaultKeyExtractor = (r) => r.id;
+const DefaultBodyCell = () => null;
 function TableV2(props) {
     var _a, _b, _c, _d;
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
@@ -24,23 +27,23 @@ function TableV2(props) {
     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)}`;
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__table-v2", ref: tableRef, style: { gridTemplateColumns, gridTemplateRows } },
-        react_1.default.createElement("div", { className: "uxf-data-grid__row" },
-            visibleColumns.map((column, index) => (react_1.default.createElement("div", { key: column.name, className: "uxf-data-grid__cell uxf-data-grid__cell-header", ref: (el) => (columnRefs.current[index] = el) },
-                column.label,
-                react_1.default.createElement("div", { className: "uxf-data-grid__cell-resize-handle", onMouseDown: () => onResizeStart(index) })))),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement("div", { className: "uxf-data-grid__cell uxf-data-grid__cell-header uxf-data-grid__cell-action" }))),
-        props.data.map((row) => (react_1.default.createElement("div", { className: "uxf-data-grid__row", key: keyExtractor(row) },
+    return (react_1.default.createElement(components_1.Table, { ref: tableRef, gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows },
+        react_1.default.createElement(components_1.Table.Header, null,
+            react_1.default.createElement(components_1.Table.Row, null,
+                visibleColumns.map((column, index) => {
+                    var _a;
+                    return (react_1.default.createElement(components_1.Table.HeaderCell, { key: column.name, ref: (el) => (columnRefs.current[index] = el), column: column, onResizeStart: () => onResizeStart(index), sort: ((_a = props.state.request.s) === null || _a === void 0 ? void 0 : _a.name) === column.name ? props.state.request.s : null, onClick: column.sort ? () => props.actions.sort(column.name) : undefined }));
+                }),
+                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) },
             visibleColumns.map((column) => {
-                var _a, _b, _c;
-                const BodyCell = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default;
-                if (!BodyCell) {
-                    return null;
-                }
-                return (react_1.default.createElement("div", { className: "uxf-data-grid__cell", key: column.name },
+                var _a, _b, _c, _d;
+                const BodyCell = (_d = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DefaultBodyCell;
+                return (react_1.default.createElement(components_1.Table.Cell, { key: column.name },
                     react_1.default.createElement(BodyCell, { column: column, row: row, value: row[column.name], reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })));
             }),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement("div", { className: "uxf-data-grid__cell  uxf-data-grid__cell-action" },
-                react_1.default.createElement(props.actionCell.Component, { row: row, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } }))))))));
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCell, null,
+                react_1.default.createElement(props.actionCell.Component, { row: row, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })))))))));
 }
 exports.TableV2 = TableV2;

package/table-v2/table-v2.stories.js

@@ -13,7 +13,7 @@ const hidden_columns_button_1 = require("../hidden-columns-button");
 const use_data_grid_control_1 = require("../use-data-grid-control");
 const table_v2_1 = require("./table-v2");
 function Default() {
-    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema, isDebug: true });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { schema: schema_1.schema, state: state, actions: actions }),
         react_1.default.createElement(table_v2_1.TableV2, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true, actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") } }),

package/use-data-grid-control/actions-factory.d.ts

@@ -6,7 +6,7 @@ export declare function createActions(dispatch: Dispatch<any>): {
     changePerPage: (perPage: number) => void;
     filter: (name: string, value: any, op?: string) => void;
     filterClear: (name: string) => void;
-    sort: (columnName: string, direction: string) => void;
+    sort: (columnName: string, direction?: string | null) => void;
     sortClear: () => void;
     search: (search: string) => void;
     changeTab: (tab: Tab) => void;

package/use-data-grid-control/actions-factory.js

@@ -7,7 +7,7 @@ function createActions(dispatch) {
         changePerPage: (perPage) => dispatch({ type: "CHANGE_PER_PAGE", perPage }),
         filter: (name, value, op) => dispatch({ type: "FILTER", name, value, op }),
         filterClear: (name) => dispatch({ type: "FILTER_CLEAR", name }),
-        sort: (columnName, direction) => dispatch({ type: "SORT", columnName, direction }),
+        sort: (columnName, direction = null) => dispatch({ type: "SORT", columnName, direction }),
         sortClear: () => dispatch({ type: "SORT_CLEAR" }),
         search: (search) => dispatch({ type: "FULLTEXT", search }),
         changeTab: (tab) => dispatch({ type: "CHANGE_TAB", tab }),

package/use-data-grid-control/use-data-grid-control.d.ts

@@ -15,7 +15,7 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
         changePerPage: (perPage: number) => void;
         filter: (name: string, value: any, op?: string | undefined) => void;
         filterClear: (name: string) => void;
-        sort: (columnName: string, direction: string) => void;
+        sort: (columnName: string, direction?: string | null) => void;
         sortClear: () => void;
         search: (search: string) => void;
         changeTab: (tab: import("../types/schema").Tab) => void;