@wallarm-org/design-system 0.4.0 → 0.4.1-rc-fix-table-width.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.
- package/dist/components/Stack/Stack.d.ts +1 -0
- package/dist/components/Stack/Stack.js +7 -3
- package/dist/components/Table/Table.js +2 -1
- package/dist/components/Table/TableActionBar/TableActionBarAnchor.d.ts +1 -0
- package/dist/components/Table/TableActionBar/TableActionBarAnchor.js +3 -3
- package/dist/components/Table/TableInner.d.ts +1 -0
- package/dist/components/Table/TableInner.js +2 -1
- package/dist/components/Table/classes.js +1 -1
- package/dist/components/Table/lib/constants.d.ts +1 -1
- package/dist/components/Table/lib/constants.js +1 -1
- package/dist/components/Table/types.d.ts +2 -0
- package/dist/icons/Undo.js +6 -20
- package/dist/icons/Undo2.js +6 -20
- package/dist/icons/UndoDot.js +6 -30
- package/dist/metadata/components.json +31 -5
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ declare const stackVariants: (props?: ({
|
|
|
5
5
|
align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
|
|
6
6
|
justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
|
|
7
7
|
wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
|
|
8
|
+
flexGrow?: boolean | null | undefined;
|
|
8
9
|
spacing?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 32 | 24 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
9
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
11
|
type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import { cn } from "../../utils/cn.js";
|
|
6
6
|
import { getValidChildren } from "./utils.js";
|
|
7
|
-
const stackVariants = cva('flex
|
|
7
|
+
const stackVariants = cva('flex w-full', {
|
|
8
8
|
variants: {
|
|
9
9
|
direction: {
|
|
10
10
|
row: 'flex-row',
|
|
@@ -32,6 +32,9 @@ const stackVariants = cva('flex flex-1 w-full', {
|
|
|
32
32
|
nowrap: 'flex-nowrap',
|
|
33
33
|
reverse: 'flex-wrap-reverse'
|
|
34
34
|
},
|
|
35
|
+
flexGrow: {
|
|
36
|
+
true: 'flex-1'
|
|
37
|
+
},
|
|
35
38
|
spacing: {
|
|
36
39
|
0: '',
|
|
37
40
|
1: 'gap-1',
|
|
@@ -59,7 +62,7 @@ const stackVariants = cva('flex flex-1 w-full', {
|
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
});
|
|
62
|
-
const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', spacing = 4, asChild = false, children, ...props })=>{
|
|
65
|
+
const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', spacing = 4, flexGrow = true, asChild = false, children, ...props })=>{
|
|
63
66
|
const clones = useMemo(()=>getValidChildren(children).map((child, index)=>{
|
|
64
67
|
const key = void 0 !== child.key ? child.key : index;
|
|
65
68
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
@@ -76,7 +79,8 @@ const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wra
|
|
|
76
79
|
align,
|
|
77
80
|
justify,
|
|
78
81
|
wrap,
|
|
79
|
-
spacing
|
|
82
|
+
spacing,
|
|
83
|
+
flexGrow
|
|
80
84
|
})),
|
|
81
85
|
children: clones
|
|
82
86
|
});
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { TableProvider } from "./TableContext/index.js";
|
|
3
3
|
import { TableInner } from "./TableInner.js";
|
|
4
4
|
const Table = (props)=>{
|
|
5
|
-
const { data, isLoading = false, children, 'aria-label': ariaLabel, ...providerProps } = props;
|
|
5
|
+
const { data, isLoading = false, children, className, 'aria-label': ariaLabel, ...providerProps } = props;
|
|
6
6
|
const isEmpty = 0 === data.length && !isLoading;
|
|
7
7
|
const showSettings = !!props.onColumnVisibilityChange || !!props.onColumnOrderChange;
|
|
8
8
|
return /*#__PURE__*/ jsx(TableProvider, {
|
|
@@ -14,6 +14,7 @@ const Table = (props)=>{
|
|
|
14
14
|
virtualized: !!props.virtualized,
|
|
15
15
|
showSettings: showSettings,
|
|
16
16
|
ariaLabel: ariaLabel,
|
|
17
|
+
className: className,
|
|
17
18
|
children: children
|
|
18
19
|
})
|
|
19
20
|
});
|
|
@@ -3,19 +3,19 @@ import { Popover } from "@ark-ui/react/popover";
|
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { cn } from "../../../utils/cn.js";
|
|
5
5
|
import { useTableContext } from "../TableContext/index.js";
|
|
6
|
-
const tableActionBarAnchorVariants = cva(cn('relative outline-none'), {
|
|
6
|
+
const tableActionBarAnchorVariants = cva(cn('w-full relative outline-none'), {
|
|
7
7
|
variants: {
|
|
8
8
|
virtualized: {
|
|
9
9
|
true: 'h-full'
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
-
const TableActionBarAnchor = ({ children })=>{
|
|
13
|
+
const TableActionBarAnchor = ({ className, children })=>{
|
|
14
14
|
const { virtualized } = useTableContext();
|
|
15
15
|
return /*#__PURE__*/ jsx(Popover.Anchor, {
|
|
16
16
|
className: cn(tableActionBarAnchorVariants({
|
|
17
17
|
virtualized
|
|
18
|
-
})),
|
|
18
|
+
}), className),
|
|
19
19
|
children: children
|
|
20
20
|
});
|
|
21
21
|
};
|
|
@@ -9,7 +9,7 @@ import { TableColGroup } from "./TableColGroup.js";
|
|
|
9
9
|
import { useTableContext } from "./TableContext/index.js";
|
|
10
10
|
import { TableHead } from "./TableHead.js";
|
|
11
11
|
import { TableSettingsMenu } from "./TableSettingsMenu/index.js";
|
|
12
|
-
const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, children })=>{
|
|
12
|
+
const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, className, children })=>{
|
|
13
13
|
const { containerRef, table } = useTableContext();
|
|
14
14
|
const scrollRootRef = useRef(null);
|
|
15
15
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
@@ -44,6 +44,7 @@ const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, children })
|
|
|
44
44
|
const tableWidth = Math.max(containerWidth, totalSize);
|
|
45
45
|
return /*#__PURE__*/ jsx(TableActionBarProvider, {
|
|
46
46
|
children: /*#__PURE__*/ jsxs(TableActionBarAnchor, {
|
|
47
|
+
className: className,
|
|
47
48
|
children: [
|
|
48
49
|
/*#__PURE__*/ jsxs(ScrollArea, {
|
|
49
50
|
ref: scrollRootRef,
|
|
@@ -33,7 +33,7 @@ const tableHeadCellVariants = cva(cn(tableCellBase, 'pl-16 pr-4 py-8 text-left t
|
|
|
33
33
|
draggable: false
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
-
const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'has-[>_[data-state=open]]:ring-2 has-[>_[data-state=open]]:ring-inset has-[>_[data-state=open]]:ring-border-strong-brand', 'has-[>_[data-part=context-trigger]]:p-0', '[&>[data-part=context-trigger]]:
|
|
36
|
+
const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-2', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-inset', 'has-[>_[data-state=open][data-part=context-trigger]]:ring-border-strong-brand', 'has-[>_[data-part=context-trigger]]:p-0', '[&>[data-part=context-trigger]]:w-full', '[&>[data-part=context-trigger]]:px-16 [&>[data-part=context-trigger]]:py-8', '[&>[data-part=context-trigger]]:text-left [&>[data-part=context-trigger]]:outline-none'), {
|
|
37
37
|
variants: {
|
|
38
38
|
pinned: {
|
|
39
39
|
true: 'sticky z-10',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const TABLE_SKELETON_ROWS = 6;
|
|
2
|
-
export declare const TABLE_SKELETON_ROWS_APPEND =
|
|
2
|
+
export declare const TABLE_SKELETON_ROWS_APPEND = 6;
|
|
3
3
|
export declare const TABLE_VIRTUALIZATION_OVERSCAN = 5;
|
|
4
4
|
export declare const TABLE_MIN_COLUMN_WIDTH = 96;
|
|
5
5
|
export declare const TABLE_SELECT_COLUMN_ID = "_selection";
|
|
@@ -101,6 +101,8 @@ export interface TableProps<T> {
|
|
|
101
101
|
getRowId?: (row: T, index: number) => string;
|
|
102
102
|
/** Accessible label for the table */
|
|
103
103
|
'aria-label'?: string;
|
|
104
|
+
/** Additional CSS class for the root container */
|
|
105
|
+
className?: string;
|
|
104
106
|
sorting?: TableSortingState;
|
|
105
107
|
onSortingChange?: TableOnChangeFn<TableSortingState>;
|
|
106
108
|
rowSelection?: TableRowSelectionState;
|
package/dist/icons/Undo.js
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SvgIcon } from "./SvgIcon.js";
|
|
3
|
-
const Undo = (props)=>/*#__PURE__*/
|
|
3
|
+
const Undo = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
|
|
4
4
|
...props,
|
|
5
5
|
viewBox: "0 0 24 24",
|
|
6
|
-
children:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
strokeWidth: "2",
|
|
11
|
-
strokeLinecap: "round",
|
|
12
|
-
strokeLinejoin: "round",
|
|
13
|
-
fill: "none"
|
|
14
|
-
}),
|
|
15
|
-
/*#__PURE__*/ jsx("path", {
|
|
16
|
-
d: "M21 17a9 9 0 0 1-9 9 9 9 0 0 1-6-2.3L3 21",
|
|
17
|
-
stroke: "currentColor",
|
|
18
|
-
strokeWidth: "2",
|
|
19
|
-
strokeLinecap: "round",
|
|
20
|
-
strokeLinejoin: "round",
|
|
21
|
-
fill: "none"
|
|
22
|
-
})
|
|
23
|
-
]
|
|
6
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
7
|
+
d: "M20 17C20 14.8783 19.1575 12.8431 17.6572 11.3428C16.1569 9.84248 14.1217 9 12 9C10.0316 9.00225 8.13336 9.73062 6.66797 11.0449L6.66699 11.0439L5.60547 12H9C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13V7C2 6.44772 2.44772 6 3 6C3.55228 6 4 6.44772 4 7V10.7539L5.33105 9.55664L5.33203 9.55566C7.16409 7.91251 9.53805 7.00251 11.999 7H12L12.4961 7.0127C14.9676 7.13537 17.3132 8.17061 19.0713 9.92871C20.9467 11.8041 22 14.3478 22 17C22 17.5523 21.5523 18 21 18C20.4477 18 20 17.5523 20 17Z",
|
|
8
|
+
fill: "currentColor"
|
|
9
|
+
})
|
|
24
10
|
});
|
|
25
11
|
Undo.displayName = 'UndoIcon';
|
|
26
12
|
export { Undo };
|
package/dist/icons/Undo2.js
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SvgIcon } from "./SvgIcon.js";
|
|
3
|
-
const Undo2 = (props)=>/*#__PURE__*/
|
|
3
|
+
const Undo2 = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
|
|
4
4
|
...props,
|
|
5
5
|
viewBox: "0 0 24 24",
|
|
6
|
-
children:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
strokeWidth: "2",
|
|
11
|
-
strokeLinecap: "round",
|
|
12
|
-
strokeLinejoin: "round",
|
|
13
|
-
fill: "none"
|
|
14
|
-
}),
|
|
15
|
-
/*#__PURE__*/ jsx("path", {
|
|
16
|
-
d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11",
|
|
17
|
-
stroke: "currentColor",
|
|
18
|
-
strokeWidth: "2",
|
|
19
|
-
strokeLinecap: "round",
|
|
20
|
-
strokeLinejoin: "round",
|
|
21
|
-
fill: "none"
|
|
22
|
-
})
|
|
23
|
-
]
|
|
6
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
7
|
+
d: "M19 14.5C19 13.9091 18.8833 13.3242 18.6573 12.7783C18.4311 12.2324 18.0996 11.7362 17.6817 11.3184C17.2638 10.9005 16.7677 10.5689 16.2217 10.3428C15.6758 10.1167 15.0909 10 14.5 10H6.41411L9.70708 13.293C10.0976 13.6835 10.0976 14.3165 9.70708 14.707C9.31655 15.0976 8.68354 15.0976 8.29302 14.707L3.29302 9.70703C2.90249 9.31651 2.90249 8.68349 3.29302 8.29297L8.29302 3.29297C8.68354 2.90244 9.31655 2.90244 9.70708 3.29297C10.0976 3.68349 10.0976 4.31651 9.70708 4.70703L6.41411 8H14.5C15.3536 8 16.1987 8.16846 16.9874 8.49512C17.776 8.82177 18.4931 9.29974 19.0967 9.90332C19.7003 10.5069 20.1783 11.2241 20.5049 12.0127C20.8316 12.8013 21 13.6464 21 14.5L20.9922 14.8193C20.9556 15.5638 20.7908 16.2972 20.5049 16.9873C20.1783 17.7759 19.7003 18.4931 19.0967 19.0967C18.4931 19.7003 17.776 20.1782 16.9874 20.5049C16.1987 20.8315 15.3536 21 14.5 21H11C10.4478 21 10 20.5523 10 20C10 19.4477 10.4478 19 11 19H14.5C15.0909 19 15.6758 18.8833 16.2217 18.6572C16.7677 18.4311 17.2638 18.0995 17.6817 17.6816C18.0996 17.2638 18.4311 16.7676 18.6573 16.2217C18.855 15.7442 18.9688 15.2368 18.9942 14.7217L19 14.5Z",
|
|
8
|
+
fill: "currentColor"
|
|
9
|
+
})
|
|
24
10
|
});
|
|
25
11
|
Undo2.displayName = 'Undo2Icon';
|
|
26
12
|
export { Undo2 };
|
package/dist/icons/UndoDot.js
CHANGED
|
@@ -1,36 +1,12 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SvgIcon } from "./SvgIcon.js";
|
|
3
|
-
const UndoDot = (props)=>/*#__PURE__*/
|
|
3
|
+
const UndoDot = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
|
|
4
4
|
...props,
|
|
5
5
|
viewBox: "0 0 24 24",
|
|
6
|
-
children:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
r: "1",
|
|
11
|
-
stroke: "currentColor",
|
|
12
|
-
strokeWidth: "2",
|
|
13
|
-
strokeLinecap: "round",
|
|
14
|
-
strokeLinejoin: "round",
|
|
15
|
-
fill: "none"
|
|
16
|
-
}),
|
|
17
|
-
/*#__PURE__*/ jsx("path", {
|
|
18
|
-
d: "M3 7v6h6",
|
|
19
|
-
stroke: "currentColor",
|
|
20
|
-
strokeWidth: "2",
|
|
21
|
-
strokeLinecap: "round",
|
|
22
|
-
strokeLinejoin: "round",
|
|
23
|
-
fill: "none"
|
|
24
|
-
}),
|
|
25
|
-
/*#__PURE__*/ jsx("path", {
|
|
26
|
-
d: "M21 17a9 9 0 0 1-9 9 9 9 0 0 1-6-2.3L3 21",
|
|
27
|
-
stroke: "currentColor",
|
|
28
|
-
strokeWidth: "2",
|
|
29
|
-
strokeLinecap: "round",
|
|
30
|
-
strokeLinejoin: "round",
|
|
31
|
-
fill: "none"
|
|
32
|
-
})
|
|
33
|
-
]
|
|
6
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
7
|
+
d: "M10 17C10 15.8954 10.8954 15 12 15C13.1046 15 14 15.8954 14 17C14 18.1046 13.1046 19 12 19C10.8954 19 10 18.1046 10 17ZM20 17C20 14.8783 19.1575 12.8431 17.6572 11.3428C16.1569 9.84248 14.1217 9 12 9C10.0316 9.00225 8.13336 9.73062 6.66797 11.0449L6.66699 11.0439L5.60547 12H9C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14H3C2.44772 14 2 13.5523 2 13V7C2 6.44772 2.44772 6 3 6C3.55228 6 4 6.44772 4 7V10.7539L5.33105 9.55664L5.33203 9.55566C7.16409 7.91251 9.53805 7.00251 11.999 7H12L12.4961 7.0127C14.9676 7.13537 17.3132 8.17061 19.0713 9.92871C20.9467 11.8041 22 14.3478 22 17C22 17.5523 21.5523 18 21 18C20.4477 18 20 17.5523 20 17Z",
|
|
8
|
+
fill: "currentColor"
|
|
9
|
+
})
|
|
34
10
|
});
|
|
35
11
|
UndoDot.displayName = 'UndoDotIcon';
|
|
36
12
|
export { UndoDot };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-02-
|
|
2
|
+
"version": "0.4.0",
|
|
3
|
+
"generatedAt": "2026-02-24T14:22:47.865Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -16341,6 +16341,12 @@
|
|
|
16341
16341
|
"required": false,
|
|
16342
16342
|
"defaultValue": "nowrap"
|
|
16343
16343
|
},
|
|
16344
|
+
{
|
|
16345
|
+
"name": "flexGrow",
|
|
16346
|
+
"type": "{ true: string; }",
|
|
16347
|
+
"required": false,
|
|
16348
|
+
"defaultValue": "true"
|
|
16349
|
+
},
|
|
16344
16350
|
{
|
|
16345
16351
|
"name": "spacing",
|
|
16346
16352
|
"type": "complex",
|
|
@@ -16393,6 +16399,12 @@
|
|
|
16393
16399
|
"reverse"
|
|
16394
16400
|
]
|
|
16395
16401
|
},
|
|
16402
|
+
{
|
|
16403
|
+
"name": "flexGrow",
|
|
16404
|
+
"options": [
|
|
16405
|
+
"true"
|
|
16406
|
+
]
|
|
16407
|
+
},
|
|
16396
16408
|
{
|
|
16397
16409
|
"name": "spacing",
|
|
16398
16410
|
"options": [
|
|
@@ -16713,6 +16725,11 @@
|
|
|
16713
16725
|
"type": "{ wrap: string; nowrap: string; reverse: string; }",
|
|
16714
16726
|
"required": false
|
|
16715
16727
|
},
|
|
16728
|
+
{
|
|
16729
|
+
"name": "flexGrow",
|
|
16730
|
+
"type": "{ true: string; }",
|
|
16731
|
+
"required": false
|
|
16732
|
+
},
|
|
16716
16733
|
{
|
|
16717
16734
|
"name": "spacing",
|
|
16718
16735
|
"type": "complex",
|
|
@@ -17014,6 +17031,11 @@
|
|
|
17014
17031
|
"type": "{ wrap: string; nowrap: string; reverse: string; }",
|
|
17015
17032
|
"required": false
|
|
17016
17033
|
},
|
|
17034
|
+
{
|
|
17035
|
+
"name": "flexGrow",
|
|
17036
|
+
"type": "{ true: string; }",
|
|
17037
|
+
"required": false
|
|
17038
|
+
},
|
|
17017
17039
|
{
|
|
17018
17040
|
"name": "spacing",
|
|
17019
17041
|
"type": "complex",
|
|
@@ -18170,6 +18192,10 @@
|
|
|
18170
18192
|
"name": "LoadingState",
|
|
18171
18193
|
"code": "() => (\n <Table data={[]} columns={securityColumns} isLoading />\n)"
|
|
18172
18194
|
},
|
|
18195
|
+
{
|
|
18196
|
+
"name": "LoadingWithData",
|
|
18197
|
+
"code": "() => (\n <Table\n className='h-500'\n data={securityEvents}\n columns={securityColumns}\n getRowId={row => row.id}\n isLoading\n />\n)"
|
|
18198
|
+
},
|
|
18173
18199
|
{
|
|
18174
18200
|
"name": "EmptyState",
|
|
18175
18201
|
"code": "() => (\n <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n <TableEmptyState>\n <VStack align='center' justify='center' spacing={8}>\n <Text size='sm' weight='medium' color='primary'>\n No results found\n </Text>\n <Text size='sm' color='secondary'>\n Try to apply different filter or reset it.\n </Text>\n </VStack>\n </TableEmptyState>\n </Table>\n)"
|
|
@@ -18180,7 +18206,7 @@
|
|
|
18180
18206
|
},
|
|
18181
18207
|
{
|
|
18182
18208
|
"name": "ColumnPinning",
|
|
18183
|
-
"code": "() => {\n const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n left: ['objectName'],\n });\n\n return (\n <
|
|
18209
|
+
"code": "() => {\n const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n left: ['objectName'],\n });\n\n return (\n <Table\n className='max-w-800'\n data={securityEvents}\n columns={securityColumns}\n getRowId={row => row.id}\n columnPinning={columnPinning}\n onColumnPinningChange={setColumnPinning}\n />\n );\n}"
|
|
18184
18210
|
},
|
|
18185
18211
|
{
|
|
18186
18212
|
"name": "ColumnDragAndDrop",
|
|
@@ -18212,11 +18238,11 @@
|
|
|
18212
18238
|
},
|
|
18213
18239
|
{
|
|
18214
18240
|
"name": "Virtualization",
|
|
18215
|
-
"code": "() => {\n const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n return (\n <
|
|
18241
|
+
"code": "() => {\n const largeData = useMemo(() => createLargeSecurityEvents(1000), []);\n\n return (\n <Table\n className='h-500'\n data={largeData}\n columns={securityColumns}\n getRowId={row => row.id}\n virtualized\n />\n );\n}"
|
|
18216
18242
|
},
|
|
18217
18243
|
{
|
|
18218
18244
|
"name": "FullFeatured",
|
|
18219
|
-
"code": "() => {\n const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n left: ['objectName'],\n });\n const [columnOrder, setColumnOrder] = useState<string[]>([]);\n const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n const [expanded, setExpanded] = useState<TableExpandedState>({\n 'group-0': true,\n 'group-1': true,\n });\n\n return (\n <
|
|
18245
|
+
"code": "() => {\n const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n left: ['objectName'],\n });\n const [columnOrder, setColumnOrder] = useState<string[]>([]);\n const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n const [expanded, setExpanded] = useState<TableExpandedState>({\n 'group-0': true,\n 'group-1': true,\n });\n\n return (\n <Table<SecurityHeaderEntry>\n className='h-500'\n data={data}\n columns={fullFeaturedColumns}\n getRowId={row => row.id}\n getSubRows={row => row.children}\n // Grouping\n expanded={expanded}\n onExpandedChange={setExpanded}\n // Sorting\n sorting={sorting}\n onSortingChange={setSorting}\n // Row selection\n rowSelection={rowSelection}\n onRowSelectionChange={setRowSelection}\n // Column resizing\n columnSizing={columnSizing}\n onColumnSizingChange={setColumnSizing}\n // Column pinning\n columnPinning={columnPinning}\n onColumnPinningChange={setColumnPinning}\n // Column DnD ordering\n columnOrder={columnOrder}\n onColumnOrderChange={setColumnOrder}\n // Column visibility + settings\n columnVisibility={columnVisibility}\n onColumnVisibilityChange={setColumnVisibility}\n defaultColumnVisibility={{}}\n defaultColumnOrder={headerColumnIds}\n // Virtual scrolling\n virtualized\n >\n <TableActionBar>\n <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n <Copy /> Duplicate\n </Button>\n <Button color='brand' onClick={() => alert('Delete clicked')}>\n <Trash2 /> Delete\n </Button>\n </TableActionBar>\n </Table>\n );\n}"
|
|
18220
18246
|
}
|
|
18221
18247
|
]
|
|
18222
18248
|
},
|
package/package.json
CHANGED