@uxf/data-grid 11.61.0 → 11.64.4

package/data-grid-v2.js

@@ -32,7 +32,7 @@ function DataGridV2(props) {
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_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: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_c = props.bodyCells) !== null && _c !== void 0 ? _c : body_cell_1.BodyCells, data: (_e = (_d = props.data) === null || _d === void 0 ? void 0 : _d.result) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowClass: props.rowClass, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_c = props.bodyCells) !== null && _c !== void 0 ? _c : body_cell_1.BodyCells, data: (_e = (_d = props.data) === null || _d === void 0 ? void 0 : _d.result) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectable: props.isRowSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
                 react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_g = (_f = props.data) === null || _f === void 0 ? void 0 : _f.count) !== null && _g !== void 0 ? _g : 0, state: props.state, totalCount: (_j = (_h = props.data) === null || _h === void 0 ? void 0 : _h.totalCount) !== null && _j !== void 0 ? _j : 0 }),

package/data-grid-v2.stories.js

@@ -94,6 +94,6 @@ function Default() {
     });
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior, variant: "row" }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, reload: reload, rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/data-grid.js

@@ -33,7 +33,7 @@ function DataGrid(props) {
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_1.DataGridTable, { 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, reload: props.reload, rowClass: props.rowClass, rowHeight: props.rowHeight === "auto" ? undefined : props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_1.DataGridTable, { 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, reload: props.reload, rowClass: props.rowAccent, rowHeight: props.rowHeight === "auto" ? undefined : props.rowHeight, schema: props.schema, state: props.state }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
                 react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, state: props.state, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.61.0",
+    "version": "11.64.4",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",

package/selected-rows-toolbar/selected-rows-toolbar.d.ts

@@ -1,9 +1,9 @@
-import React, { FC } from "react";
+import React, { FunctionComponent } from "react";
 import { DataGridControl } from "../use-data-grid-control";
 export interface SelectedRowsToolbarActionsProps extends DataGridControl {
     reload: () => Promise<any>;
 }
-export type SelectedRowsToolbarActionsComponent = FC<SelectedRowsToolbarActionsProps>;
+export type SelectedRowsToolbarActionsComponent = FunctionComponent<SelectedRowsToolbarActionsProps>;
 export interface DataGridSelectedRowsToolbarProps extends DataGridControl {
     Actions?: SelectedRowsToolbarActionsComponent;
     reload: () => Promise<any>;

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

@@ -1,2 +1,6 @@
-import React, { PropsWithChildren } from "react";
-export declare function ActionCellWrapper(props: PropsWithChildren): React.JSX.Element;
+import React, { ReactNode } from "react";
+interface ActionCellWrapperProps {
+    children?: ReactNode;
+}
+export declare function ActionCellWrapper(props: ActionCellWrapperProps): React.JSX.Element;
+export {};

package/table/no-rows-fallback.d.ts

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
+import React, { FunctionComponent } from "react";
 export interface NoRowsFallbackProps {
     error?: any;
     isLoading: boolean;
 }
-export type NoRowsFallbackComponent = FC<NoRowsFallbackProps>;
+export type NoRowsFallbackComponent = FunctionComponent<NoRowsFallbackProps>;
 export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/table/types.d.ts

@@ -1,7 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { BodyCellComponents, DataGridActionCell } from "../types/components";
-import { KeyExtractor } from "../types/core";
-import { Schema } from "../types/schema";
+import { BodyCellComponents, DataGridActionCell, KeyExtractor, RowAccent, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
 export interface DataGridTableProps<Row> extends DataGridControl {
@@ -12,7 +10,7 @@ export interface DataGridTableProps<Row> extends DataGridControl {
     reload: () => Promise<any>;
     rowHeight?: number | ((row: Row) => number);
     headerRowHeight?: number;
-    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    rowClass?: (row: Row) => RowAccent;
     keyExtractor?: KeyExtractor;
     bodyCells?: BodyCellComponents;
     actionCell?: DataGridActionCell<Row>;

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

@@ -1,2 +1,6 @@
-import React, { PropsWithChildren } from "react";
-export declare function Body(props: PropsWithChildren): React.JSX.Element;
+import React, { ReactNode } from "react";
+interface BodyProps {
+    children?: ReactNode;
+}
+export declare function Body(props: BodyProps): React.JSX.Element;
+export {};

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

@@ -1,2 +1,6 @@
-import React, { PropsWithChildren } from "react";
-export declare function Header(props: PropsWithChildren): React.JSX.Element;
+import React, { ReactNode } from "react";
+interface HeaderProps {
+    children?: ReactNode;
+}
+export declare function Header(props: HeaderProps): React.JSX.Element;
+export {};

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

@@ -1,2 +1,7 @@
-import React, { PropsWithChildren } from "react";
-export declare function Row(props: PropsWithChildren): React.JSX.Element;
+import React, { ReactNode } from "react";
+interface RowProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Row(props: RowProps): React.JSX.Element;
+export {};

package/table-v2/components/row.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = Row;
 const react_1 = __importDefault(require("react"));
 function Row(props) {
-    return react_1.default.createElement("div", { className: "uxf-dg-table__row" }, props.children);
+    var _a;
+    return react_1.default.createElement("div", { className: `uxf-dg-table__row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children);
 }

package/table-v2/no-rows-fallback.d.ts

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
+import React, { FunctionComponent } from "react";
 export interface NoRowsFallbackProps {
     error?: any;
     isLoading: boolean;
 }
-export type NoRowsFallbackComponent = FC<NoRowsFallbackProps>;
+export type NoRowsFallbackComponent = FunctionComponent<NoRowsFallbackProps>;
 export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/table-v2/styles.css

@@ -1,8 +1,8 @@
 :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-font-size: 14px;
+    --uxf-dg-table-cell-padding: 8px;
+    --uxf-dg-table-cell-padding-first-cell: 16px;
+    --uxf-dg-table-cell-padding-last-cell: 16px;
     --uxf-dg-table-action-cell-left-divider-size: 1px;
     --uxf-dg-table-row-divider-size: 1px;
 }
@@ -12,7 +12,9 @@
     --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-cell-bg-color: var(--uxf-color-base-surface-main);
     --uxf-dg-table-action-cell-bg-color: var(--uxf-color-base-surface-main);
+    --uxf-dg-table-row-bg-color-accent: var(--uxf-color-base-surface-main);
     --uxf-dg-table-row-bg-color-odd: var(--uxf-color-base-surface-main);
     --uxf-dg-table-row-bg-color-even: var(--uxf-color-base-surface-main);
     --uxf-dg-table-header-action-cell-bg-color: var(--uxf-color-base-surface-background);
@@ -40,169 +42,220 @@
 
     &::-webkit-scrollbar-thumb,
     &::-webkit-scrollbar-thumb:hover {
-        background-color: theme("colors.lightLow");
+        background-color: var(--uxf-color-base-border-input);
         border-radius: 999px;
-
-        :root .dark & {
-            background-color: theme("colors.darkLow");
-        }
     }
 
-    &__action-cell {
-        align-items: center;
-        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);
-        display: flex;
-        height: 100%;
-        justify-content: flex-end;
-        padding: 0 theme("spacing.2");
-        position: sticky;
-        right: 0;
-        text-align: center;
-        width: 100%;
+    /* ensures no overflowing when no action cell */
+    .uxf-dg-table__row .uxf-dg-table__cell:last-child {
+        .uxf-dg-table__column-resize-handle {
+            right: 0;
 
-        &--header {
-            background-color: var(--uxf-dg-table-header-action-cell-bg-color);
-            z-index: 2;
+            &::before {
+                right: 0;
+            }
         }
     }
+}
 
-    &__row {
-        display: contents;
-    }
+.uxf-dg-table__header {
+    display: contents;
+}
 
-    &__header {
-        display: contents;
-    }
+.uxf-dg-table__body {
+    display: contents;
+}
 
-    &__body {
-        display: contents;
+.uxf-dg-table__row {
+    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(odd) {
+        --uxf-dg-table-cell-bg-color: color-mix(
+            in oklab,
+            var(--uxf-dg-table-row-bg-color-accent),
+            var(--uxf-dg-table-row-bg-color-odd)
+        );
+        --uxf-dg-table-action-cell-bg-color: color-mix(
+            in oklab,
+            var(--uxf-dg-table-row-bg-color-accent),
+            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);
-                }
-            }
+        /* remove in future */
+        @supports not (background-color: color-mix(in oklab, white, white)) {
+            --uxf-dg-table-cell-bg-color: var(--uxf-dg-table-row-bg-color-odd);
+            --uxf-dg-table-action-cell-bg-color: var(--uxf-dg-table-row-bg-color-odd);
         }
     }
 
-    &__cell {
-        align-items: center;
-        border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
-        display: flex;
-        padding: var(--uxf-dg-table-cell-padding);
+    &:nth-child(even) {
+        --uxf-dg-table-cell-bg-color: color-mix(
+            in oklab,
+            var(--uxf-dg-table-row-bg-color-accent),
+            var(--uxf-dg-table-row-bg-color-even)
+        );
+        --uxf-dg-table-action-cell-bg-color: color-mix(
+            in oklab,
+            var(--uxf-dg-table-row-bg-color-accent),
+            var(--uxf-dg-table-row-bg-color-even)
+        );
 
-        &:first-child:not(.uxf-dg-table__select-row-cell, .uxf-dg-table__select-all-rows-cell) {
-            padding-left: var(--uxf-dg-table-cell-padding-first-cell);
+        /* remove in future */
+        @supports not (background-color: color-mix(in oklab, white, white)) {
+            --uxf-dg-table-cell-bg-color: var(--uxf-dg-table-row-bg-color-even);
+            --uxf-dg-table-action-cell-bg-color: var(--uxf-dg-table-row-bg-color-even);
         }
+    }
 
-        &:nth-last-child(1 of .uxf-dg-table__cell) {
-            padding-right: var(--uxf-dg-table-cell-padding-last-cell);
-        }
+    &--success {
+        --uxf-dg-table-row-bg-color-accent: var(--uxf-color-positive-surface-muted);
+    }
 
-        &--header {
-            background-color: var(--uxf-dg-table-header-bg-color);
-            color: var(--uxf-dg-table-header-color);
-            min-height: 36px;
-            position: relative;
-            user-select: none;
+    &--warning {
+        --uxf-dg-table-row-bg-color-accent: var(--uxf-color-warning-surface-muted);
+    }
 
-            &.is-sortable {
-                cursor: pointer;
-                gap: 4px;
-            }
+    &--error {
+        --uxf-dg-table-row-bg-color-accent: var(--uxf-color-negative-surface-muted);
+    }
 
-            .uxf-icon {
-                margin-left: auto;
-                width: 8px;
-            }
-        }
+    &--primary {
+        --uxf-dg-table-row-bg-color-accent: var(--uxf-color-brand-surface-muted);
+    }
 
-        span {
-            @apply truncate;
-        }
+    &--secondary {
+        --uxf-dg-table-row-bg-color-accent: var(--uxf-color-info-surface-muted);
     }
+}
+
+.uxf-dg-table__cell {
+    align-items: center;
+    background-color: color-mix(in oklab, var(--uxf-dg-table-cell-bg-color), var(--uxf-dg-table-row-bg-color-accent));
+    border-top: var(--uxf-dg-table-row-divider-size) solid var(--uxf-dg-table-row-divider-color);
+    display: flex;
+    padding: var(--uxf-dg-table-cell-padding);
 
-    &__select-all-rows-cell {
+    /* remove in future */
+    @supports not (background-color: color-mix(in oklab, white, white)) {
+        background-color: var(--uxf-dg-table-cell-bg-color);
+    }
+
+    &:first-child:not(.uxf-dg-table__select-row-cell, .uxf-dg-table__select-all-rows-cell) {
+        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);
+        min-height: 36px;
         position: relative;
+        user-select: none;
+        white-space: nowrap;
 
-        &::before {
-            background-color: var(--uxf-color-base-border-border);
-            bottom: 0;
-            content: "";
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 1px;
+        &.is-sortable {
+            cursor: pointer;
+            gap: 4px;
         }
 
         .uxf-icon {
-            margin-left: 0;
+            margin-left: auto;
+            width: 8px;
         }
     }
 
-    &__select-all-rows-cell,
-    &__select-row-cell {
-        .uxf-checkbox-input {
-            margin-top: 0;
-        }
+    span {
+        @apply truncate;
     }
+}
 
-    &__column-resize-handle {
-        bottom: 0;
-        cursor: col-resize;
-        position: absolute;
-        right: -8px;
-        top: 0;
-        width: 16px;
+.uxf-dg-table__action-cell {
+    align-items: center;
+    background-color: color-mix(
+        in oklab,
+        var(--uxf-dg-table-action-cell-bg-color),
+        var(--uxf-dg-table-row-bg-color-accent)
+    );
+    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);
+    display: flex;
+    height: 100%;
+    justify-content: flex-end;
+    padding-inline: 8px;
+    position: sticky;
+    right: 0;
+    text-align: center;
+    width: 100%;
+
+    /* remove in future */
+    @supports not (background-color: color-mix(in oklab, white, white)) {
+        background-color: var(--uxf-dg-table-action-cell-bg-color);
+    }
+
+    &--header {
+        background-color: var(--uxf-dg-table-header-action-cell-bg-color);
         z-index: 2;
+    }
+}
 
-        &::before {
-            background-color: var(--uxf-color-base-border-border);
-            bottom: 0;
-            content: "";
-            position: absolute;
-            right: 8px;
-            top: 0;
-            width: 1px;
-        }
+.uxf-dg-table__select-all-rows-cell {
+    position: relative;
 
-        &:hover {
-            &::before {
-                width: 2px;
-            }
-        }
+    &::before {
+        background-color: var(--uxf-color-base-border-border);
+        content: "";
+        inset-block: 0;
+        position: absolute;
+        right: 0;
+        width: 1px;
     }
 
-    /* ensures no overflowing when no action cell */
-    .uxf-dg-table__row .uxf-dg-table__cell:last-child {
-        .uxf-dg-table__column-resize-handle {
-            right: 0;
+    .uxf-icon {
+        margin-left: 0;
+    }
+}
 
-            &::before {
-                right: 0;
-            }
-        }
+.uxf-dg-table__select-all-rows-cell,
+.uxf-dg-table__select-row-cell {
+    .uxf-checkbox-input {
+        margin-top: 0;
     }
+}
+
+.uxf-dg-table__column-resize-handle {
+    cursor: col-resize;
+    inset-block: 0;
+    position: absolute;
+    right: -8px;
+    width: 16px;
+    z-index: 2;
 
-    &__no-rows-fallback {
-        align-items: center;
-        color: theme("colors.gray.600"); /* ?? */
-        display: flex;
-        grid-column: 1/-1;
-        height: 36px;
-        justify-content: center;
-        text-align: center;
+    &::before {
+        background-color: var(--uxf-color-base-border-border);
+        content: "";
+        inset-block: 0;
+        position: absolute;
+        right: 8px;
+        width: 1px;
     }
+
+    &:hover {
+        &::before {
+            width: 2px;
+        }
+    }
+}
+
+.uxf-dg-table__no-rows-fallback {
+    align-items: center;
+    color: var(--uxf-color-base-text-low-emphasis);
+    display: flex;
+    grid-column: 1/-1;
+    height: 36px;
+    justify-content: center;
+    text-align: center;
 }

package/table-v2/table-v2.js

@@ -72,17 +72,20 @@ function DataGridTableV2(props) {
                 }),
                 react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.actionCell) },
                     react_1.default.createElement(components_1.Table.HeaderActionCell, null)))),
-        react_1.default.createElement(components_1.Table.Body, null, (0, is_empty_1.isEmpty)(props.data) ? (react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })) : (props.data.map((row) => (react_1.default.createElement(components_1.Table.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 = 
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                (_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, { column: column, key: column.name },
-                    react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
-            }),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCellWrapper, null,
-                react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row }))))))))));
+        react_1.default.createElement(components_1.Table.Body, null, (0, is_empty_1.isEmpty)(props.data) ? (react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })) : (props.data.map((row) => {
+            var _a, _b;
+            return (react_1.default.createElement(components_1.Table.Row, { className: `${(0, is_not_nil_1.isNotNil)(props.rowAccent) ? "uxf-dg-table__row--" + props.rowAccent(row) : ""} ${(_b = (_a = props.rowClassName) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : ""}`, key: keyExtractor(row) },
+                react_1.default.createElement(show_1.Show, { when: Boolean(props.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 = 
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    (_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, { column: column, key: column.name },
+                        react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
+                }),
+                (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCellWrapper, null,
+                    react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))));
+        })))));
 }

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

@@ -18,6 +18,6 @@ function Default() {
     const reload = () => new Promise(() => null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state }),
-        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement(action_cell_1.ActionCell, null, "Action cell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, reload: reload, schema: schema_1.schema, state: state }),
+        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement(action_cell_1.ActionCell, null, "Action cell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), schema: schema_1.schema, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/table-v2/types.d.ts

@@ -1,5 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { ActionCellComponent, BodyCellComponents, KeyExtractor, Schema } from "../types";
+import { ActionCellComponent, BodyCellComponents, KeyExtractor, RowAccent, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
 export interface DataGridTableProps<Row> extends DataGridControl {
@@ -10,7 +10,8 @@ export interface DataGridTableProps<Row> extends DataGridControl {
     reload: () => Promise<any>;
     rowHeight?: number | ((row: Row) => number) | "auto";
     headerRowHeight?: number;
-    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    rowAccent?: (row: Row) => RowAccent;
+    rowClassName?: (row: Row) => string | Nullish;
     keyExtractor?: KeyExtractor;
     bodyCells?: BodyCellComponents;
     actionCell?: {

package/types/components.d.ts

@@ -1,10 +1,10 @@
-import { ComponentType, FC } from "react";
+import { ComponentType, FunctionComponent } from "react";
 import { Column, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
     reload: () => Promise<any>;
 }
-export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
+export type ActionCellComponent<R> = FunctionComponent<ActionCellProps<R>>;
 export type DataGridActionCell<Row> = {
     width: number;
     Component: ActionCellComponent<Row>;

package/types/core.d.ts

@@ -1,3 +1,4 @@
+import { Nullish } from "@uxf/core/types";
 import { Request, Response, ResultItem } from "./api";
 import { BaseGridType } from "./schema";
 export type KeyExtractor = (row: ResultItem) => number;
@@ -6,6 +7,7 @@ export type Loader = (gridName: string | undefined, request: Request, encodedReq
 export type CallbackRef = {
     reload: () => Promise<any>;
 };
+export type RowAccent = "success" | "warning" | "error" | "primary" | "secondary" | Nullish;
 export type Config<C extends BaseGridType["columns"]> = {
     columns: Partial<{
         [columnName in keyof C]: {

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

@@ -1,3 +1,4 @@
+import { Nullish } from "@uxf/core/types";
 import { FilterHandlers } from "../filter-handler";
 import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
 import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
@@ -6,7 +7,7 @@ import { DataGridToolbarCustomsProps } from "../toolbar-customs";
 import { DataGridControl } from "../use-data-grid-control";
 import { DataGridFetchingResult } from "../use-data-grid-fetching";
 import { BodyCellComponents, ChangeTabFilterBehavior } from "./components";
-import { CsvDownloadHandler, KeyExtractor } from "./core";
+import { CsvDownloadHandler, KeyExtractor, RowAccent } from "./core";
 import { BaseGridType, Schema } from "./schema";
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
@@ -17,7 +18,8 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     onCsvDownload?: CsvDownloadHandler;
     rowHeight?: number | ((row: Row) => number) | "auto";
     headerRowHeight?: number;
-    rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
+    rowAccent?: (row: Row) => RowAccent;
+    rowClassName?: (row: Row) => string | Nullish;
     className?: string;
     customActions?: DataGridToolbarCustomsProps["buttons"];
     actionCell?: DataGridTableProps<Row>["actionCell"];