@godxjp/ui 13.17.1 → 13.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,10 +25,16 @@ interface DataTableProps<T> {
|
|
|
25
25
|
hoverable?: boolean;
|
|
26
26
|
/** Pin the header to the top while the body scrolls. Default true. */
|
|
27
27
|
stickyHeader?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Per-row className for state-based row tinting (e.g. flag an invalid or
|
|
30
|
+
* empty record). Returned classes are appended last, so they win over the
|
|
31
|
+
* built-in hover/selected fills. Return `undefined` to leave a row unstyled.
|
|
32
|
+
*/
|
|
33
|
+
rowClassName?: (row: T) => string | undefined;
|
|
28
34
|
className?: string;
|
|
29
35
|
children?: React.ReactNode;
|
|
30
36
|
}
|
|
31
|
-
export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, loading, empty, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
32
38
|
export declare namespace DataTable {
|
|
33
39
|
var Toolbar: ({ children, className, }: {
|
|
34
40
|
children?: React.ReactNode;
|
|
@@ -53,6 +53,7 @@ function DataTable({
|
|
|
53
53
|
striped = false,
|
|
54
54
|
hoverable = false,
|
|
55
55
|
stickyHeader = true,
|
|
56
|
+
rowClassName,
|
|
56
57
|
className,
|
|
57
58
|
children
|
|
58
59
|
}) {
|
|
@@ -101,7 +102,8 @@ function DataTable({
|
|
|
101
102
|
emptyColSpan,
|
|
102
103
|
striped,
|
|
103
104
|
hoverable,
|
|
104
|
-
stickyHeader
|
|
105
|
+
stickyHeader,
|
|
106
|
+
rowClassName
|
|
105
107
|
};
|
|
106
108
|
const hasContent = React.Children.toArray(children).some(
|
|
107
109
|
(c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
|
|
@@ -195,7 +197,8 @@ DataTable.Content = function DataTableContent() {
|
|
|
195
197
|
emptyColSpan,
|
|
196
198
|
striped,
|
|
197
199
|
hoverable,
|
|
198
|
-
stickyHeader
|
|
200
|
+
stickyHeader,
|
|
201
|
+
rowClassName
|
|
199
202
|
} = useDataTableContext();
|
|
200
203
|
const { t } = useTranslation();
|
|
201
204
|
const rowPadding = tableRowHeightClass;
|
|
@@ -329,7 +332,8 @@ DataTable.Content = function DataTableContent() {
|
|
|
329
332
|
(onRowClick || hoverable) && "hover:bg-muted/50",
|
|
330
333
|
// …but the affordance (cursor + focus ring) only when clickable.
|
|
331
334
|
onRowClick && "focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
|
|
332
|
-
isSelected && "bg-muted/30"
|
|
335
|
+
isSelected && "bg-muted/30",
|
|
336
|
+
rowClassName?.(row)
|
|
333
337
|
),
|
|
334
338
|
children: [
|
|
335
339
|
selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
|