@arcfusionz/arc-primitive-ui 0.3.2 → 0.3.3
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.
|
@@ -16,6 +16,8 @@ interface TableRenderState extends Record<string, unknown> {
|
|
|
16
16
|
hoverable: boolean;
|
|
17
17
|
/** Whether column headers stay pinned inside a scrolling container. */
|
|
18
18
|
stickyHeader: boolean;
|
|
19
|
+
/** Whether the first column stays pinned while the container scrolls horizontally. */
|
|
20
|
+
stickyFirstColumn: boolean;
|
|
19
21
|
/** Whether adjacent cells are visually separated. */
|
|
20
22
|
showColumnBorders: boolean;
|
|
21
23
|
}
|
|
@@ -51,6 +53,8 @@ interface TableProps extends Omit<ComponentPropsWithoutRef<"table">, "className"
|
|
|
51
53
|
hoverable?: boolean;
|
|
52
54
|
/** Pin column headers to the top of the nearest scrolling `TableContainer`; give the container a max height for vertical scrolling. */
|
|
53
55
|
stickyHeader?: boolean;
|
|
56
|
+
/** Pin the first column to the left edge of the nearest scrolling `TableContainer` so each row keeps its identifying cell in view. Only visible once the table is wider than the container — give the table a minimum width or enough columns to overflow. Put the row's label in the first column; a checkbox or drag handle should not be what stays pinned. */
|
|
57
|
+
stickyFirstColumn?: boolean;
|
|
54
58
|
/** Draw semantic-border separators between adjacent columns. */
|
|
55
59
|
showColumnBorders?: boolean;
|
|
56
60
|
/** Replace the rendered `table` or inspect the visual state in a render callback. Preserve native table semantics. */
|
|
@@ -21,10 +21,11 @@ const tableLayoutClasses = {
|
|
|
21
21
|
const tableHeaderClasses = "bg-surface [&_tr]:border-b [&_tr]:border-border [&_th]:border-b [&_th]:border-border";
|
|
22
22
|
const tableBodyClasses = "[&_tr:last-child]:border-b-0";
|
|
23
23
|
const tableFooterClasses = "border-t border-border bg-surface font-sans font-semibold text-foreground [&>tr]:border-b-0";
|
|
24
|
-
const tableRowClasses = "border-b border-border transition-colors duration-150 data-selected:bg-
|
|
25
|
-
const tableHeadClasses = "whitespace-nowrap text-left align-middle font-sans text-xs font-semibold
|
|
24
|
+
const tableRowClasses = "border-b border-border transition-colors duration-150 data-selected:bg-primary-50 data-selected:hover:bg-primary-100";
|
|
25
|
+
const tableHeadClasses = "whitespace-nowrap text-left align-middle font-sans text-xs font-semibold capitalize text-muted-foreground";
|
|
26
26
|
const tableCellClasses = "align-middle font-sans text-sm text-foreground";
|
|
27
27
|
const tableCaptionClasses = "px-4 py-3 text-left font-sans text-xs text-muted-foreground";
|
|
28
|
+
const stickyFirstColumnClasses = "[&_thead_tr]:bg-surface [&_tfoot_tr]:bg-surface [&_tbody_tr]:bg-background [&_tr>*:first-child]:sticky [&_tr>*:first-child]:left-0 [&_tr>*:first-child]:bg-inherit [&_tr>*:first-child]:shadow-[inset_-1px_0_0_var(--color-border)] [&_tbody_tr>*:first-child]:z-10 [&_tfoot_tr>*:first-child]:z-10 [&_thead_tr>*:first-child]:z-20";
|
|
28
29
|
const captionSideClasses = {
|
|
29
30
|
top: "caption-top border-b border-border",
|
|
30
31
|
bottom: "caption-bottom border-t border-border"
|
|
@@ -42,7 +43,7 @@ const TableContainer = forwardRef(({ variant = "elevated", render, className, ..
|
|
|
42
43
|
});
|
|
43
44
|
});
|
|
44
45
|
TableContainer.displayName = "TableContainer";
|
|
45
|
-
const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hoverable = true, stickyHeader = false, showColumnBorders = false, render, className, ...rest }, ref) => {
|
|
46
|
+
const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hoverable = true, stickyHeader = false, stickyFirstColumn = false, showColumnBorders = false, render, className, ...rest }, ref) => {
|
|
46
47
|
return useRender({
|
|
47
48
|
defaultTagName: "table",
|
|
48
49
|
render,
|
|
@@ -53,11 +54,12 @@ const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hover
|
|
|
53
54
|
striped,
|
|
54
55
|
hoverable,
|
|
55
56
|
stickyHeader,
|
|
57
|
+
stickyFirstColumn,
|
|
56
58
|
showColumnBorders
|
|
57
59
|
},
|
|
58
60
|
props: {
|
|
59
61
|
...rest,
|
|
60
|
-
className: cn(tableClasses, tableSizeClasses[size], tableLayoutClasses[layout], striped && "[&_tbody_tr:nth-child(even)]:bg-surface", hoverable && "[&_tbody_tr]:hover:bg-
|
|
62
|
+
className: cn(tableClasses, tableSizeClasses[size], tableLayoutClasses[layout], striped && "[&_tbody_tr:nth-child(even)]:bg-surface", hoverable && "[&_tbody_tr]:hover:bg-slate-50", stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-surface", stickyFirstColumn && stickyFirstColumnClasses, showColumnBorders && "[&_tr>*+*]:border-l [&_tr>*+*]:border-border", className)
|
|
61
63
|
}
|
|
62
64
|
});
|
|
63
65
|
});
|