@versini/ui-table 6.6.3 → 6.7.0
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.
- package/README.md +46 -0
- package/dist/Table/Table.d.ts +2 -2
- package/dist/Table/Table.js +17 -7
- package/dist/Table/TableContext.js +2 -2
- package/dist/Table/utilities.d.ts +2 -1
- package/dist/Table/utilities.js +13 -5
- package/dist/TableConstants/TableConstants.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -43,3 +43,49 @@ function App() {
|
|
|
43
43
|
);
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
|
+
|
|
47
|
+
### Active Row
|
|
48
|
+
|
|
49
|
+
Use the `active` prop on `TableRow` to highlight a row with a left border indicator:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import {
|
|
53
|
+
Table,
|
|
54
|
+
TableBody,
|
|
55
|
+
TableCell,
|
|
56
|
+
TableHead,
|
|
57
|
+
TableRow
|
|
58
|
+
} from "@versini/ui-table";
|
|
59
|
+
import { useState } from "react";
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
const [activeRowId, setActiveRowId] = useState<number | null>(1);
|
|
63
|
+
const data = [
|
|
64
|
+
{ id: 1, name: "John Doe", email: "john@example.com" },
|
|
65
|
+
{ id: 2, name: "Jane Smith", email: "jane@example.com" }
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<Table>
|
|
70
|
+
<TableHead>
|
|
71
|
+
<TableRow>
|
|
72
|
+
<TableCell>Name</TableCell>
|
|
73
|
+
<TableCell>Email</TableCell>
|
|
74
|
+
</TableRow>
|
|
75
|
+
</TableHead>
|
|
76
|
+
<TableBody>
|
|
77
|
+
{data.map((row) => (
|
|
78
|
+
<TableRow
|
|
79
|
+
key={row.id}
|
|
80
|
+
active={activeRowId === row.id}
|
|
81
|
+
onClick={() => setActiveRowId(row.id)}
|
|
82
|
+
>
|
|
83
|
+
<TableCell>{row.name}</TableCell>
|
|
84
|
+
<TableCell>{row.email}</TableCell>
|
|
85
|
+
</TableRow>
|
|
86
|
+
))}
|
|
87
|
+
</TableBody>
|
|
88
|
+
</Table>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
package/dist/Table/Table.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ export declare const Table: ({ children, mode, caption, compact, disabled, summa
|
|
|
3
3
|
export declare const TableHead: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare const TableFooter: ({ children, className, ...otherProps }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export declare const TableBody: ({ children, ...otherProps }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export declare const TableRow: ({ children, className, ...otherProps }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export declare const TableCell: ({ children, component, className, align, ...otherProps }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const TableRow: ({ children, className, active, ...otherProps }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const TableCell: ({ children, component, className, align, _active, ...otherProps }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare const TableCellSort: ({ align, children, buttonClassName, className, component, focusMode, mode, onClick, sortDirection, sortedCell, cellId, ...otherProps }: TableCellSortProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/Table/Table.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-table v6.
|
|
3
|
-
©
|
|
2
|
+
@versini/ui-table v6.7.0
|
|
3
|
+
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { ButtonSort_private } from "@versini/ui-button/private";
|
|
8
8
|
import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
|
|
9
|
-
import { useContext } from "react";
|
|
9
|
+
import react, { useContext } from "react";
|
|
10
10
|
import { TableContext } from "./TableContext.js";
|
|
11
11
|
import { CELL_WRAPPER_BODY, CELL_WRAPPER_FOOTER, CELL_WRAPPER_HEAD, TableCellSortDirections, getTableCellClasses, getTableCellSortButtonClasses, getTableClasses, getTableFooterClasses, getTableHeadClasses, getTableRowClasses } from "./utilities.js";
|
|
12
12
|
|
|
@@ -140,20 +140,29 @@ const TableBody = ({ children, ...otherProps })=>{
|
|
|
140
140
|
children: children
|
|
141
141
|
});
|
|
142
142
|
};
|
|
143
|
-
const TableRow = ({ children, className, ...otherProps })=>{
|
|
143
|
+
const TableRow = ({ children, className, active = false, ...otherProps })=>{
|
|
144
144
|
const context = useContext(TableContext);
|
|
145
145
|
const rowClass = getTableRowClasses({
|
|
146
146
|
mode: context.mode,
|
|
147
147
|
cellWrapper: context.cellWrapper,
|
|
148
148
|
className
|
|
149
149
|
});
|
|
150
|
+
// Pass _active to the first child cell when row is active and in body
|
|
151
|
+
const enhancedChildren = active && context.cellWrapper === CELL_WRAPPER_BODY ? react.Children.map(children, (child, index)=>{
|
|
152
|
+
if (index === 0 && /*#__PURE__*/ react.isValidElement(child)) {
|
|
153
|
+
return /*#__PURE__*/ react.cloneElement(child, {
|
|
154
|
+
_active: true
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return child;
|
|
158
|
+
}) : children;
|
|
150
159
|
return /*#__PURE__*/ jsx("tr", {
|
|
151
160
|
className: rowClass,
|
|
152
161
|
...otherProps,
|
|
153
|
-
children:
|
|
162
|
+
children: enhancedChildren
|
|
154
163
|
});
|
|
155
164
|
};
|
|
156
|
-
const TableCell = ({ children, component, className, align, ...otherProps })=>{
|
|
165
|
+
const TableCell = ({ children, component, className, align, _active, ...otherProps })=>{
|
|
157
166
|
const context = useContext(TableContext);
|
|
158
167
|
const Component = component || (context.cellWrapper === CELL_WRAPPER_HEAD ? "th" : "td");
|
|
159
168
|
const { mainClasses, alignClasses } = getTableCellClasses({
|
|
@@ -161,7 +170,8 @@ const TableCell = ({ children, component, className, align, ...otherProps })=>{
|
|
|
161
170
|
className,
|
|
162
171
|
mode: context.mode,
|
|
163
172
|
compact: context.compact,
|
|
164
|
-
align
|
|
173
|
+
align,
|
|
174
|
+
active: _active
|
|
165
175
|
});
|
|
166
176
|
return align ? /*#__PURE__*/ jsx(Component, {
|
|
167
177
|
className: mainClasses,
|
|
@@ -45,8 +45,9 @@ export declare const getTableRowClasses: ({ mode, className, cellWrapper, }: {
|
|
|
45
45
|
cellWrapper?: string;
|
|
46
46
|
className?: string;
|
|
47
47
|
}) => string;
|
|
48
|
-
export declare const getTableCellClasses: ({ cellWrapper, className, compact, mode, align, }: {
|
|
48
|
+
export declare const getTableCellClasses: ({ cellWrapper, className, compact, mode, align, active, }: {
|
|
49
49
|
mode: string;
|
|
50
|
+
active?: boolean;
|
|
50
51
|
cellWrapper?: string;
|
|
51
52
|
className?: string;
|
|
52
53
|
compact?: boolean;
|
package/dist/Table/utilities.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-table v6.
|
|
3
|
-
©
|
|
2
|
+
@versini/ui-table v6.7.0
|
|
3
|
+
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import clsx from "clsx";
|
|
@@ -16,7 +16,7 @@ import { TableCellSortDirections } from "../TableConstants/TableConstants.js";
|
|
|
16
16
|
const CELL_WRAPPER_HEAD = "thead";
|
|
17
17
|
const CELL_WRAPPER_FOOTER = "tfoot";
|
|
18
18
|
const CELL_WRAPPER_BODY = "tbody";
|
|
19
|
-
// Re-export moved constant for backward compatibility (tree-shakable now)
|
|
19
|
+
// Re-export moved constant for backward compatibility (tree-shakable now).
|
|
20
20
|
|
|
21
21
|
const getTableSpinnerClasses = ({ mode })=>{
|
|
22
22
|
return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
|
|
@@ -114,7 +114,7 @@ const getTableRowClasses = ({ mode, className, cellWrapper })=>{
|
|
|
114
114
|
"hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
|
|
115
115
|
}, className);
|
|
116
116
|
};
|
|
117
|
-
const getTableCellClasses = ({ cellWrapper, className, compact, mode, align })=>{
|
|
117
|
+
const getTableCellClasses = ({ cellWrapper, className, compact, mode, align, active = false })=>{
|
|
118
118
|
return {
|
|
119
119
|
alignClasses: clsx({
|
|
120
120
|
"flex justify-start text-left": align === "left",
|
|
@@ -128,7 +128,15 @@ const getTableCellClasses = ({ cellWrapper, className, compact, mode, align })=>
|
|
|
128
128
|
"dark:text-copy-light": mode === "alt-system",
|
|
129
129
|
"px-4 py-3": !compact && (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER),
|
|
130
130
|
"p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
|
|
131
|
-
"px-2 py-1.5": compact
|
|
131
|
+
"px-2 py-1.5": compact,
|
|
132
|
+
/**
|
|
133
|
+
* Active state - left border indicator on first cell using pseudo-element
|
|
134
|
+
* Inset slightly from top/bottom to avoid overlapping row borders.
|
|
135
|
+
*/ "relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1": active,
|
|
136
|
+
"before:bg-table-active-dark": active && mode === "dark",
|
|
137
|
+
"before:bg-table-active-light": active && mode === "light",
|
|
138
|
+
"before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
|
|
139
|
+
"before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
|
|
132
140
|
}, className)
|
|
133
141
|
};
|
|
134
142
|
};
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-table",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.7.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@testing-library/jest-dom": "6.9.1",
|
|
49
|
-
"@versini/ui-types": "8.
|
|
49
|
+
"@versini/ui-types": "8.3.0"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@tailwindcss/typography": "0.5.19",
|
|
53
|
-
"@versini/ui-button": "11.
|
|
53
|
+
"@versini/ui-button": "11.3.0",
|
|
54
54
|
"@versini/ui-icons": "4.15.2",
|
|
55
55
|
"clsx": "2.1.1",
|
|
56
56
|
"tailwindcss": "4.1.18"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"sideEffects": [
|
|
59
59
|
"**/*.css"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "bd6eff3f29dfa61a45b389362fff5d0e65080828"
|
|
62
62
|
}
|