@redis-ui/table 2.4.0 → 2.18.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/dist/Table/Table.cjs +85 -136
- package/dist/Table/Table.context.cjs +16 -1
- package/dist/Table/Table.context.d.ts +22 -4
- package/dist/Table/Table.context.js +16 -1
- package/dist/Table/Table.d.ts +83 -3
- package/dist/Table/Table.js +86 -137
- package/dist/Table/Table.style.cjs +33 -17
- package/dist/Table/Table.style.d.ts +5 -2
- package/dist/Table/Table.style.js +34 -18
- package/dist/Table/Table.types.d.ts +21 -22
- package/dist/Table/components/Compose/Compose.cjs +42 -0
- package/dist/Table/components/Compose/Compose.d.ts +13 -0
- package/dist/Table/components/Compose/Compose.js +42 -0
- package/dist/Table/components/EmptyState/EmptyState.cjs +31 -0
- package/dist/Table/components/EmptyState/EmptyState.d.ts +6 -0
- package/dist/Table/components/EmptyState/EmptyState.js +31 -0
- package/dist/Table/components/ExpandRowButton/ExpandRowButton.cjs +1 -0
- package/dist/Table/components/ExpandRowButton/ExpandRowButton.js +1 -0
- package/dist/Table/components/HiddenCaption/HiddenCaption.cjs +13 -0
- package/dist/Table/components/HiddenCaption/HiddenCaption.d.ts +3 -0
- package/dist/Table/components/HiddenCaption/HiddenCaption.js +13 -0
- package/dist/Table/components/PluggableTable/PluggableTable.cjs +19 -0
- package/dist/Table/components/PluggableTable/PluggableTable.d.ts +10 -0
- package/dist/Table/components/PluggableTable/PluggableTable.js +19 -0
- package/dist/Table/components/PluggableTable/compositionComponents.cjs +21 -0
- package/dist/Table/components/PluggableTable/compositionComponents.d.ts +67 -0
- package/dist/Table/components/PluggableTable/compositionComponents.js +21 -0
- package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.cjs +29 -0
- package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.d.ts +7 -0
- package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.js +29 -0
- package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.test.d.ts +1 -0
- package/dist/Table/components/RowSelection/RowSelectionButton.cjs +15 -0
- package/dist/Table/components/RowSelection/RowSelectionButton.d.ts +6 -0
- package/dist/Table/components/RowSelection/RowSelectionButton.js +15 -0
- package/dist/Table/components/RowSelection/RowSelectionButton.test.d.ts +1 -0
- package/dist/Table/components/TableBody/TableBody.cjs +33 -0
- package/dist/Table/components/TableBody/TableBody.d.ts +23 -0
- package/dist/Table/components/TableBody/TableBody.js +33 -0
- package/dist/Table/components/TableBody/components/Compose/Compose.cjs +10 -0
- package/dist/Table/components/TableBody/components/Compose/Compose.d.ts +3 -0
- package/dist/Table/components/TableBody/components/Compose/Compose.js +10 -0
- package/dist/Table/components/TableBodyCell/TableBodyCell.cjs +22 -0
- package/dist/Table/components/TableBodyCell/TableBodyCell.d.ts +12 -0
- package/dist/Table/components/TableBodyCell/TableBodyCell.js +22 -0
- package/dist/Table/components/TableBodyCell/components/Compose/Compose.cjs +5 -0
- package/dist/Table/components/TableBodyCell/components/Compose/Compose.d.ts +3 -0
- package/dist/Table/components/TableBodyCell/components/Compose/Compose.js +5 -0
- package/dist/Table/components/TableBodyRow/TableBodyRow.cjs +38 -0
- package/dist/Table/components/TableBodyRow/TableBodyRow.d.ts +20 -0
- package/dist/Table/components/TableBodyRow/TableBodyRow.js +38 -0
- package/dist/Table/components/TableBodyRow/TableBodyRowExpandable.cjs +33 -0
- package/dist/Table/components/TableBodyRow/TableBodyRowExpandable.d.ts +2 -0
- package/dist/Table/components/TableBodyRow/TableBodyRowExpandable.js +33 -0
- package/dist/Table/components/TableBodyRow/components/Compose/Compose.cjs +17 -0
- package/dist/Table/components/TableBodyRow/components/Compose/Compose.d.ts +4 -0
- package/dist/Table/components/TableBodyRow/components/Compose/Compose.js +17 -0
- package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.cjs +3 -4
- package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.d.ts +1 -1
- package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.js +3 -4
- package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.cjs +1 -1
- package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.js +1 -1
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.cjs +9 -4
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.d.ts +1 -1
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.js +9 -4
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.style.cjs +2 -2
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.style.js +2 -2
- package/dist/Table/components/TableExpandedRow/TableExpandedRow.types.d.ts +3 -5
- package/dist/Table/components/TableHeader/TableHeader.cjs +28 -0
- package/dist/Table/components/TableHeader/TableHeader.d.ts +21 -0
- package/dist/Table/components/TableHeader/TableHeader.js +28 -0
- package/dist/Table/components/TableHeader/components/Compose/Compose.cjs +5 -0
- package/dist/Table/components/TableHeader/components/Compose/Compose.d.ts +3 -0
- package/dist/Table/components/TableHeader/components/Compose/Compose.js +5 -0
- package/dist/Table/components/TableHeaderCell/SRSortingNotification.cjs +19 -0
- package/dist/Table/components/TableHeaderCell/SRSortingNotification.d.ts +1 -0
- package/dist/Table/components/TableHeaderCell/SRSortingNotification.js +19 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.cjs +23 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.context.cjs +15 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.context.d.ts +8 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.context.js +15 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.d.ts +16 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.js +23 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.test.d.ts +1 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.types.d.ts +13 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.cjs +79 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.d.ts +10 -0
- package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.js +79 -0
- package/dist/Table/components/TableHeaderCell/components/Compose/Compose.cjs +40 -0
- package/dist/Table/components/TableHeaderCell/components/Compose/Compose.d.ts +9 -0
- package/dist/Table/components/TableHeaderCell/components/Compose/Compose.js +40 -0
- package/dist/Table/components/TableHeaderCell/components/Heading/Heading.cjs +34 -0
- package/dist/Table/components/TableHeaderCell/components/Heading/Heading.d.ts +5 -0
- package/dist/Table/components/TableHeaderCell/components/Heading/Heading.js +34 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.cjs +16 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.d.ts +8 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.js +16 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.cjs +23 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.d.ts +5 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.js +23 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.cjs +6 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.d.ts +2 -0
- package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.js +6 -0
- package/dist/Table/components/TableHeaderRow/TableHeaderRow.cjs +27 -0
- package/dist/Table/components/TableHeaderRow/TableHeaderRow.d.ts +12 -0
- package/dist/Table/components/TableHeaderRow/TableHeaderRow.js +27 -0
- package/dist/Table/components/TableHeaderRow/components/Compose/Compose.cjs +5 -0
- package/dist/Table/components/TableHeaderRow/components/Compose/Compose.d.ts +3 -0
- package/dist/Table/components/TableHeaderRow/components/Compose/Compose.js +5 -0
- package/dist/Table/components/TablePagination/TablePagination.cjs +63 -78
- package/dist/Table/components/TablePagination/TablePagination.d.ts +23 -3
- package/dist/Table/components/TablePagination/TablePagination.js +64 -79
- package/dist/Table/components/TablePagination/TablePagination.style.cjs +78 -53
- package/dist/Table/components/TablePagination/TablePagination.style.d.ts +17 -49
- package/dist/Table/components/TablePagination/TablePagination.style.js +80 -55
- package/dist/Table/components/TablePagination/components/Compose/Compose.cjs +41 -0
- package/dist/Table/components/TablePagination/components/Compose/Compose.d.ts +3 -0
- package/dist/Table/components/TablePagination/components/Compose/Compose.js +41 -0
- package/dist/Table/components/TableRoot/TableRoot.cjs +5 -0
- package/dist/Table/components/TableRoot/TableRoot.d.ts +1 -0
- package/dist/Table/components/TableRoot/TableRoot.js +5 -0
- package/dist/Table/index.d.ts +3 -6
- package/dist/Table/plugins/ClickableRowPlugin.cjs +48 -0
- package/dist/Table/plugins/ClickableRowPlugin.d.ts +25 -0
- package/dist/Table/plugins/ClickableRowPlugin.js +48 -0
- package/dist/Table/plugins/ExpandableRowPlugin.cjs +38 -0
- package/dist/Table/plugins/ExpandableRowPlugin.d.ts +22 -0
- package/dist/Table/plugins/ExpandableRowPlugin.js +38 -0
- package/dist/Table/plugins/PaginationPlugin.cjs +45 -0
- package/dist/Table/plugins/PaginationPlugin.d.ts +16 -0
- package/dist/Table/plugins/PaginationPlugin.js +45 -0
- package/dist/Table/plugins/RowSelectionPlugin.cjs +28 -0
- package/dist/Table/plugins/RowSelectionPlugin.d.ts +12 -0
- package/dist/Table/plugins/RowSelectionPlugin.js +28 -0
- package/dist/Table/plugins/SortingPlugin.cjs +44 -0
- package/dist/Table/plugins/SortingPlugin.d.ts +18 -0
- package/dist/Table/plugins/SortingPlugin.js +44 -0
- package/dist/Table/tanStackExtendedTypes.d.ts +11 -0
- package/dist/Table/utils/plugin.utils.cjs +49 -0
- package/dist/Table/utils/plugin.utils.d.ts +17 -0
- package/dist/Table/utils/plugin.utils.js +49 -0
- package/dist/Table/utils/plugin.utils.test.d.ts +1 -0
- package/dist/index.cjs +60 -0
- package/dist/index.js +61 -1
- package/dist/node_modules/@radix-ui/react-primitive/dist/index.cjs +55 -0
- package/dist/node_modules/@radix-ui/react-primitive/dist/index.js +37 -0
- package/dist/node_modules/@radix-ui/react-slot/dist/index.cjs +100 -0
- package/dist/node_modules/@radix-ui/react-slot/dist/index.js +82 -0
- package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.cjs +51 -0
- package/dist/node_modules/@radix-ui/react-visually-hidden/dist/index.js +33 -0
- package/dist/node_modules/@tanstack/react-table/build/lib/index.cjs +7 -0
- package/dist/node_modules/@tanstack/react-table/build/lib/index.js +8 -1
- package/dist/node_modules/@tanstack/table-core/build/lib/index.cjs +361 -4
- package/dist/node_modules/@tanstack/table-core/build/lib/index.js +361 -4
- package/package.json +7 -5
package/dist/Table/Table.cjs
CHANGED
|
@@ -1,173 +1,122 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const index$1 = require("../node_modules/@tanstack/react-table/build/lib/index.cjs");
|
|
6
|
-
const redisUiIcons = require("@redislabsdev/redis-ui-icons");
|
|
7
|
-
const index = require("../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
|
|
8
|
-
const TablePagination = require("./components/TablePagination/TablePagination.cjs");
|
|
9
4
|
const ExpandRowButton = require("./components/ExpandRowButton/ExpandRowButton.cjs");
|
|
10
5
|
const TableExpandedRow = require("./components/TableExpandedRow/TableExpandedRow.cjs");
|
|
11
6
|
const TableAnimatedExpandedRow = require("./components/TableExpandedRow/TableAnimatedExpandedRow.cjs");
|
|
7
|
+
const RowSelectionButton = require("./components/RowSelection/RowSelectionButton.cjs");
|
|
8
|
+
const HeaderMultiRowSelectionButton = require("./components/RowSelection/HeaderMultiRowSelectionButton.cjs");
|
|
9
|
+
const RowSelectionPlugin = require("./plugins/RowSelectionPlugin.cjs");
|
|
10
|
+
const ExpandableRowPlugin = require("./plugins/ExpandableRowPlugin.cjs");
|
|
11
|
+
const PaginationPlugin = require("./plugins/PaginationPlugin.cjs");
|
|
12
|
+
const SortingPlugin = require("./plugins/SortingPlugin.cjs");
|
|
13
|
+
const ClickableRowPlugin = require("./plugins/ClickableRowPlugin.cjs");
|
|
12
14
|
const Table_context = require("./Table.context.cjs");
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const getTrue = () => true;
|
|
16
|
-
const DEFAULT_PAGINATION = {
|
|
17
|
-
pageIndex: 0,
|
|
18
|
-
pageSize: 10
|
|
19
|
-
};
|
|
15
|
+
const PluggableTable = require("./components/PluggableTable/PluggableTable.cjs");
|
|
16
|
+
const compositionComponents = require("./components/PluggableTable/compositionComponents.cjs");
|
|
20
17
|
const Table = Object.assign(({
|
|
21
18
|
columns,
|
|
19
|
+
caption,
|
|
22
20
|
onRowClick,
|
|
23
21
|
data,
|
|
24
|
-
|
|
22
|
+
getRowId,
|
|
25
23
|
emptyState,
|
|
26
24
|
maxHeight,
|
|
27
25
|
stripedRows = false,
|
|
26
|
+
// sorting
|
|
27
|
+
enableSorting,
|
|
28
|
+
defaultSorting,
|
|
28
29
|
onSortingChange,
|
|
29
30
|
sorting,
|
|
30
|
-
manualSorting
|
|
31
|
+
manualSorting,
|
|
32
|
+
// row expansion
|
|
31
33
|
getIsRowExpandable,
|
|
32
34
|
renderExpandedRow,
|
|
33
35
|
expandRowOnClick,
|
|
34
|
-
expandedRowComponent
|
|
36
|
+
expandedRowComponent,
|
|
37
|
+
// pagination
|
|
35
38
|
pagination,
|
|
36
39
|
defaultPagination,
|
|
37
40
|
onPaginationChange,
|
|
38
41
|
manualPagination,
|
|
39
42
|
totalRowCount,
|
|
40
43
|
pageSizes,
|
|
41
|
-
paginationEnabled
|
|
44
|
+
paginationEnabled,
|
|
45
|
+
// row selection
|
|
46
|
+
rowSelection,
|
|
47
|
+
defaultRowSelection,
|
|
48
|
+
onRowSelectionChange,
|
|
49
|
+
rowSelectionMode,
|
|
50
|
+
getRowCanSelect
|
|
42
51
|
}) => {
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
onChange: onSortingChange
|
|
52
|
+
const clickableRowPluginData = ClickableRowPlugin.useClickableRowPlugin({
|
|
53
|
+
onRowClick: onRowClick && ((row) => onRowClick(row.original)),
|
|
54
|
+
shouldClickOnEnter: true
|
|
47
55
|
});
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
56
|
+
const sortingPluginData = SortingPlugin.useSortingPlugin({
|
|
57
|
+
enableSorting,
|
|
58
|
+
defaultSorting,
|
|
59
|
+
onSortingChange,
|
|
60
|
+
sorting,
|
|
61
|
+
manualSorting
|
|
52
62
|
});
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
onPaginationChange
|
|
63
|
+
const paginationPluginData = PaginationPlugin.usePaginationPlugin({
|
|
64
|
+
pagination,
|
|
65
|
+
defaultPagination,
|
|
66
|
+
onPaginationChange,
|
|
57
67
|
manualPagination,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
const table = index$1.useReactTable({
|
|
62
|
-
data,
|
|
63
|
-
columns,
|
|
64
|
-
getCoreRowModel: index$2.getCoreRowModel(),
|
|
65
|
-
getSortedRowModel: index$2.getSortedRowModel(),
|
|
66
|
-
state: {
|
|
67
|
-
sorting: sortingState,
|
|
68
|
-
...paginationEnabled && {
|
|
69
|
-
pagination: paginationState
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
manualSorting,
|
|
73
|
-
onSortingChange: setSortingState,
|
|
74
|
-
getExpandedRowModel: isExpandable ? index$2.getExpandedRowModel() : void 0,
|
|
75
|
-
getRowCanExpand: isExpandable ? getIsRowExpandable && ((row) => getIsRowExpandable(row.original)) || getTrue : void 0,
|
|
76
|
-
...paginationEnabled && paginationSettings
|
|
68
|
+
totalRowCount,
|
|
69
|
+
pageSizes,
|
|
70
|
+
paginationEnabled
|
|
77
71
|
});
|
|
78
|
-
const {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
72
|
+
const expandableRowPluginData = ExpandableRowPlugin.useExpandableRowPlugin({
|
|
73
|
+
expandRowOnClick,
|
|
74
|
+
getRowCanExpand: getIsRowExpandable && ((row) => getIsRowExpandable(row.original)),
|
|
75
|
+
renderExpandedRow,
|
|
76
|
+
expandedRowComponent
|
|
77
|
+
});
|
|
78
|
+
const rowSelectionPluginData = RowSelectionPlugin.useRowSelectionPlugin({
|
|
79
|
+
rowSelection,
|
|
80
|
+
defaultRowSelection,
|
|
81
|
+
onRowSelectionChange,
|
|
82
|
+
rowSelectionMode,
|
|
83
|
+
getRowCanSelect
|
|
84
|
+
});
|
|
85
|
+
return jsxRuntime.jsxRuntimeExports.jsx(Table.PluggableTable, {
|
|
86
|
+
...{
|
|
87
|
+
data,
|
|
88
|
+
columns,
|
|
89
|
+
maxHeight,
|
|
90
|
+
stripedRows,
|
|
91
|
+
caption,
|
|
92
|
+
emptyStateRender: emptyState
|
|
93
|
+
},
|
|
94
|
+
tableOptions: {
|
|
95
|
+
getRowId
|
|
91
96
|
},
|
|
92
|
-
|
|
93
|
-
children: [jsxRuntime.jsxRuntimeExports.jsxs(Table_style.Table, {
|
|
94
|
-
children: [jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHead, {
|
|
95
|
-
children: table.getHeaderGroups().map((headerGroup) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableHeaderRow, {
|
|
96
|
-
children: headerGroup.headers.map((header) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
|
|
97
|
-
onClick: header.column.getToggleSortingHandler(),
|
|
98
|
-
style: {
|
|
99
|
-
width: header.column.getSize()
|
|
100
|
-
},
|
|
101
|
-
children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.HeaderCellInnerWrapper, {
|
|
102
|
-
size: "XS",
|
|
103
|
-
children: [header.isPlaceholder ? null : index$1.flexRender(header.column.columnDef.header, header.getContext()), {
|
|
104
|
-
asc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowUpIcon, {
|
|
105
|
-
size: "S",
|
|
106
|
-
color: "neutral700"
|
|
107
|
-
}),
|
|
108
|
-
desc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowDownIcon, {
|
|
109
|
-
size: "S",
|
|
110
|
-
color: "neutral700"
|
|
111
|
-
})
|
|
112
|
-
}[header.column.getIsSorted()] ?? null]
|
|
113
|
-
})
|
|
114
|
-
}, header.id))
|
|
115
|
-
}, headerGroup.id))
|
|
116
|
-
}), jsxRuntime.jsxRuntimeExports.jsxs(Table_style.TableBody, {
|
|
117
|
-
maxHeight,
|
|
118
|
-
children: [!rows.length ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
|
|
119
|
-
"$stripedRows": false,
|
|
120
|
-
children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
|
|
121
|
-
colSpan: columns.length,
|
|
122
|
-
children: emptyState ? emptyState() : "No data to display"
|
|
123
|
-
})
|
|
124
|
-
}) : null, rows.map((row) => {
|
|
125
|
-
const isRowExpandable = isExpandable && row.getCanExpand();
|
|
126
|
-
const isRowExpanded = isRowExpandable && row.getIsExpanded();
|
|
127
|
-
const handleClick = () => {
|
|
128
|
-
isRowExpandable && expandRowOnClick && row.toggleExpanded();
|
|
129
|
-
onRowClick == null ? void 0 : onRowClick(row.original);
|
|
130
|
-
};
|
|
131
|
-
return jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
|
|
132
|
-
children: [jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
|
|
133
|
-
tabIndex: 0,
|
|
134
|
-
"data-row-type": "regular",
|
|
135
|
-
...isRowExpandable ? {
|
|
136
|
-
"aria-expanded": isRowExpanded
|
|
137
|
-
} : null,
|
|
138
|
-
"$stripedRows": stripedRows,
|
|
139
|
-
"$hasOnClick": !!onRowClick || isRowExpandable,
|
|
140
|
-
onClick: handleClick,
|
|
141
|
-
onKeyDown: (event) => {
|
|
142
|
-
if (event.key === "Enter" && event.target === event.currentTarget) {
|
|
143
|
-
handleClick();
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
children: row.getVisibleCells().map((cell) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
|
|
147
|
-
style: {
|
|
148
|
-
width: cell.column.getSize()
|
|
149
|
-
},
|
|
150
|
-
children: index$1.flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
151
|
-
}, cell.id))
|
|
152
|
-
}), isRowExpandable && // 2nd row is a custom 1 cell row for expanded part
|
|
153
|
-
jsxRuntime.jsxRuntimeExports.jsx(ExpandedRow, {
|
|
154
|
-
"data-row-type": "expanded",
|
|
155
|
-
"data-expanded": isRowExpanded,
|
|
156
|
-
expanded: isRowExpanded,
|
|
157
|
-
row,
|
|
158
|
-
renderExpandedRow
|
|
159
|
-
})]
|
|
160
|
-
}, row.id);
|
|
161
|
-
})]
|
|
162
|
-
})]
|
|
163
|
-
}), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.default, {
|
|
164
|
-
pageSizes
|
|
165
|
-
})]
|
|
166
|
-
})
|
|
97
|
+
pluginsData: [clickableRowPluginData, sortingPluginData, paginationPluginData, expandableRowPluginData, rowSelectionPluginData]
|
|
167
98
|
});
|
|
168
99
|
}, {
|
|
169
100
|
ExpandRowButton: ExpandRowButton.ExpandRowButton,
|
|
170
101
|
ExpandedRow: TableExpandedRow.TableExpandedRow,
|
|
171
|
-
AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow
|
|
102
|
+
AnimatedExpandedRow: TableAnimatedExpandedRow.TableAnimatedExpandedRow,
|
|
103
|
+
RowSelectionButton: RowSelectionButton.RowSelectionButton,
|
|
104
|
+
HeaderMultiRowSelectionButton: HeaderMultiRowSelectionButton.HeaderMultiRowSelectionButton,
|
|
105
|
+
// plugins
|
|
106
|
+
useClickableRowPlugin: ClickableRowPlugin.useClickableRowPlugin,
|
|
107
|
+
useSortingPlugin: SortingPlugin.useSortingPlugin,
|
|
108
|
+
usePaginationPlugin: PaginationPlugin.usePaginationPlugin,
|
|
109
|
+
useExpandableRowPlugin: ExpandableRowPlugin.useExpandableRowPlugin,
|
|
110
|
+
useRowSelectionPlugin: RowSelectionPlugin.useRowSelectionPlugin,
|
|
111
|
+
// contexts
|
|
112
|
+
useTableContext: Table_context.useTableContext,
|
|
113
|
+
useComposeContext: Table_context.useComposeContext,
|
|
114
|
+
useClickableRowContext: ClickableRowPlugin.useClickableRowContext,
|
|
115
|
+
useExpandableRowContext: ExpandableRowPlugin.useExpandableRowContext,
|
|
116
|
+
usePaginationContext: PaginationPlugin.usePaginationContext,
|
|
117
|
+
useSortingContext: SortingPlugin.useSortingContext,
|
|
118
|
+
// composition components
|
|
119
|
+
PluggableTable: PluggableTable.PluggableTable,
|
|
120
|
+
...compositionComponents.compositionComponents
|
|
172
121
|
});
|
|
173
122
|
exports.default = Table;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const TableContext = React.createContext(null);
|
|
5
|
+
const TableContextProvider = TableContext.Provider;
|
|
5
6
|
const useTableContext = () => {
|
|
6
7
|
const tableContext = React.useContext(TableContext);
|
|
7
8
|
if (!tableContext) {
|
|
@@ -9,5 +10,19 @@ const useTableContext = () => {
|
|
|
9
10
|
}
|
|
10
11
|
return tableContext;
|
|
11
12
|
};
|
|
12
|
-
|
|
13
|
+
const usePluginContext = (pluginScope) => {
|
|
14
|
+
var _a;
|
|
15
|
+
return (_a = useTableContext().plugins) == null ? void 0 : _a[pluginScope];
|
|
16
|
+
};
|
|
17
|
+
const useComposeContext = (defaults) => {
|
|
18
|
+
const context = useTableContext();
|
|
19
|
+
const entries = Object.keys(defaults).map((key) => {
|
|
20
|
+
var _a;
|
|
21
|
+
return [key, ((_a = context.components) == null ? void 0 : _a[key]) || defaults[key]];
|
|
22
|
+
});
|
|
23
|
+
return Object.fromEntries(entries);
|
|
24
|
+
};
|
|
25
|
+
exports.TableContextProvider = TableContextProvider;
|
|
26
|
+
exports.useComposeContext = useComposeContext;
|
|
27
|
+
exports.usePluginContext = usePluginContext;
|
|
13
28
|
exports.useTableContext = useTableContext;
|
|
@@ -1,7 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
import { ComponentProps, ComponentType } from 'react';
|
|
2
2
|
import { Table } from '@tanstack/react-table';
|
|
3
|
-
|
|
3
|
+
import type { TableHeaderRow } from './components/TableHeaderRow/TableHeaderRow';
|
|
4
|
+
import type { TableHeaderCell } from './components/TableHeaderCell/TableHeaderCell';
|
|
5
|
+
import type { TableBodyRow } from './components/TableBodyRow/TableBodyRow';
|
|
6
|
+
import type { TableBodyCell } from './components/TableBodyCell/TableBodyCell';
|
|
7
|
+
export type CompositionContextProps<T extends object> = {
|
|
8
|
+
TableHeaderRow: ComponentType<ComponentProps<typeof TableHeaderRow<T>>>;
|
|
9
|
+
TableHeaderCell: ComponentType<ComponentProps<typeof TableHeaderCell<T>>>;
|
|
10
|
+
TableBodyRow: ComponentType<ComponentProps<typeof TableBodyRow<T>>>;
|
|
11
|
+
TableBodyCell: ComponentType<ComponentProps<typeof TableBodyCell<T>>>;
|
|
12
|
+
};
|
|
13
|
+
export type TableMainContextProps = {
|
|
14
|
+
stripedRows?: boolean;
|
|
15
|
+
maxHeight?: string;
|
|
16
|
+
};
|
|
17
|
+
export type TableContextProps<T extends object> = TableMainContextProps & {
|
|
4
18
|
table: Table<T>;
|
|
19
|
+
plugins?: Record<string, unknown>;
|
|
20
|
+
components?: Partial<CompositionContextProps<T>>;
|
|
5
21
|
};
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const useTableContext: () => TableContextProps<
|
|
22
|
+
export declare const TableContextProvider: import("react").Provider<TableContextProps<any> | null>;
|
|
23
|
+
export declare const useTableContext: <T extends object = object>() => TableContextProps<T>;
|
|
24
|
+
export declare const usePluginContext: <T>(pluginScope: string) => T | undefined;
|
|
25
|
+
export declare const useComposeContext: <T extends object, C extends CompositionContextProps<T> = CompositionContextProps<T>>(defaults: Partial<C>) => C;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createContext, useContext } from "react";
|
|
2
2
|
const TableContext = createContext(null);
|
|
3
|
+
const TableContextProvider = TableContext.Provider;
|
|
3
4
|
const useTableContext = () => {
|
|
4
5
|
const tableContext = useContext(TableContext);
|
|
5
6
|
if (!tableContext) {
|
|
@@ -7,7 +8,21 @@ const useTableContext = () => {
|
|
|
7
8
|
}
|
|
8
9
|
return tableContext;
|
|
9
10
|
};
|
|
11
|
+
const usePluginContext = (pluginScope) => {
|
|
12
|
+
var _a;
|
|
13
|
+
return (_a = useTableContext().plugins) == null ? void 0 : _a[pluginScope];
|
|
14
|
+
};
|
|
15
|
+
const useComposeContext = (defaults) => {
|
|
16
|
+
const context = useTableContext();
|
|
17
|
+
const entries = Object.keys(defaults).map((key) => {
|
|
18
|
+
var _a;
|
|
19
|
+
return [key, ((_a = context.components) == null ? void 0 : _a[key]) || defaults[key]];
|
|
20
|
+
});
|
|
21
|
+
return Object.fromEntries(entries);
|
|
22
|
+
};
|
|
10
23
|
export {
|
|
11
|
-
|
|
24
|
+
TableContextProvider,
|
|
25
|
+
useComposeContext,
|
|
26
|
+
usePluginContext,
|
|
12
27
|
useTableContext
|
|
13
28
|
};
|
package/dist/Table/Table.d.ts
CHANGED
|
@@ -1,7 +1,87 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './tanStackExtendedTypes';
|
|
3
|
+
import type { Row } from '@tanstack/react-table';
|
|
1
4
|
import { TableProps } from './Table.types';
|
|
2
|
-
declare const Table: (<T extends object>({ columns, onRowClick, data,
|
|
5
|
+
declare const Table: (<T extends object>({ columns, caption, onRowClick, data, getRowId, emptyState, maxHeight, stripedRows, enableSorting, defaultSorting, onSortingChange, sorting, manualSorting, getIsRowExpandable, renderExpandedRow, expandRowOnClick, expandedRowComponent, pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled, rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: TableProps<T>) => import("react/jsx-runtime").JSX.Element) & {
|
|
6
|
+
Compose: <T_1 extends object>({ data, columns, pluginsData, tableOptions, components, maxHeight, stripedRows, ...restProps }: import("./components/Compose/Compose").TableComposeProps<T_1>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
Root: import("styled-components").StyledComponent<"table", any, {}, never>;
|
|
8
|
+
SRCaption: ({ caption }: {
|
|
9
|
+
caption?: string | undefined;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
Header: (<T_2 extends object>(props: import("./components/TableHeader/TableHeader").RestTableHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
12
|
+
Compose: import("styled-components").StyledComponent<"thead", any, {}, never>;
|
|
13
|
+
Row: (<T_3 extends object>(props: import("./components/TableHeaderRow/TableHeaderRow").OwnTableHeaderRowProps<T_3> & import("./components/TableHeaderRow/TableHeaderRow").RestTableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
|
|
14
|
+
Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
15
|
+
};
|
|
16
|
+
Cell: (<T_4 extends object>(props: import("./components/TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_4> & import("./components/TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
|
|
17
|
+
Compose: <T_5 extends object>(props: import("./components/TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_5> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
|
|
18
|
+
SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
|
|
19
|
+
Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
|
|
20
|
+
SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
21
|
+
};
|
|
22
|
+
SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
23
|
+
};
|
|
24
|
+
Heading: (props: import("./components/TableHeaderCell/components/Heading/Heading").RestTableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
EmptyState: ({ emptyStateRender, ...restProps }: import("./components/EmptyState/EmptyState").EmptyStateProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
28
|
+
Body: (<T_6 extends object>(props: import("./components/TableBody/TableBody").RestTableBodyProps) => import("react/jsx-runtime").JSX.Element | null) & {
|
|
29
|
+
Compose: (props: import("./components/TableBody/components/Compose/Compose").TableBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
Row: (<T_7 extends object>(props: import("./components/TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_7> & import("./components/TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
|
|
31
|
+
Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
|
|
32
|
+
useHandleClickableRow: <T_8 extends object>({ row, onClick, onKeyDown }: {
|
|
33
|
+
row: Row<T_8>;
|
|
34
|
+
onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
|
|
35
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLTableRowElement> | undefined;
|
|
36
|
+
}) => {
|
|
37
|
+
onClick: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
|
|
38
|
+
onKeyDown: ((event: import("react").KeyboardEvent<HTMLTableRowElement>) => void) | undefined;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
ExpandableRow: <T_9 extends object>(props: import("./components/TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_9> & import("./components/TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
|
|
42
|
+
Cell: (<T_10 extends object>(props: import("./components/TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_10> & import("./components/TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
|
|
43
|
+
Compose: import("styled-components").StyledComponent<"td", any, {}, never>;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
Pagination: (() => import("react/jsx-runtime").JSX.Element | null) & {
|
|
47
|
+
Compose: ({ children }: import("@redislabsdev/redis-ui-components").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
48
|
+
Bar: import("styled-components").StyledComponent<"nav", any, {
|
|
49
|
+
'aria-label': string;
|
|
50
|
+
} & {
|
|
51
|
+
'aria-label': string;
|
|
52
|
+
}, "aria-label">;
|
|
53
|
+
Split: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
54
|
+
InfoLabel: import("styled-components").StyledComponent<({ renderer, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
|
|
55
|
+
PageSelect: import("styled-components").StyledComponent<{
|
|
56
|
+
({ ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
}, any, {}, never>;
|
|
59
|
+
PageSizeSelect: import("styled-components").StyledComponent<{
|
|
60
|
+
({ pageSizes, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
|
|
61
|
+
Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
62
|
+
}, any, {}, never>;
|
|
63
|
+
NavigationButton: import("styled-components").StyledComponent<({ navType, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
|
|
64
|
+
PageSizeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
65
|
+
PageNavGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
66
|
+
PageSelectGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
67
|
+
};
|
|
68
|
+
SRSortingNotification: typeof import("./components/TableHeaderCell/SRSortingNotification").SRSortingNotification;
|
|
3
69
|
ExpandRowButton: ({ row, expandedIcon, collapsedIcon, ...restProps }: import("./components/ExpandRowButton/ExpandRowButton").ExpandRowButtonProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
-
ExpandedRow: <
|
|
5
|
-
AnimatedExpandedRow: <
|
|
70
|
+
ExpandedRow: <T_11 extends object>({ row, keepInDom, rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_11>) => import("react/jsx-runtime").JSX.Element | null;
|
|
71
|
+
AnimatedExpandedRow: <T_12 extends object>({ rowRef, ...restProps }: import("./components/TableExpandedRow").TableExpandedRowProps<T_12>) => import("react/jsx-runtime").JSX.Element;
|
|
72
|
+
RowSelectionButton: <T_13 extends object>({ row, ...restProps }: import("./components/RowSelection/RowSelectionButton").RowSelectionButtonProps<T_13>) => import("react/jsx-runtime").JSX.Element;
|
|
73
|
+
HeaderMultiRowSelectionButton: <T_14 extends object>({ table, managePage, ...restProps }: import("./components/RowSelection/HeaderMultiRowSelectionButton").HeaderMultiRowSelectionButtonProps<T_14>) => import("react/jsx-runtime").JSX.Element;
|
|
74
|
+
useClickableRowPlugin: <T_15 extends object>({ getCanRowClick, onRowClick, shouldClickOnEnter }: Partial<import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_15>>) => import(".").TablePluginData<T_15>;
|
|
75
|
+
useSortingPlugin: <T_16 extends object>({ defaultSorting, onSortingChange, sorting, manualSorting, enableSorting }: import("./plugins/SortingPlugin").TableSortingParams) => import(".").TablePluginData<T_16>;
|
|
76
|
+
usePaginationPlugin: <T_17 extends object>({ pagination, defaultPagination, onPaginationChange, manualPagination, totalRowCount, pageSizes, paginationEnabled }: import("./plugins/PaginationPlugin").TablePaginationParams) => import(".").TablePluginData<T_17>;
|
|
77
|
+
useExpandableRowPlugin: <T_18 extends object>({ getRowCanExpand, renderExpandedRow, expandRowOnClick, expandedRowComponent }: import("./plugins/ExpandableRowPlugin").TableExpandableRowParams<T_18>) => import(".").TablePluginData<T_18>;
|
|
78
|
+
useRowSelectionPlugin: <T_19 extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: import("./plugins/RowSelectionPlugin").TableRowSelectionParams<T_19>) => import(".").TablePluginData<T_19>;
|
|
79
|
+
useTableContext: <T_20 extends object = object>() => import("./Table.context").TableContextProps<T_20>;
|
|
80
|
+
useComposeContext: <T_21 extends object, C extends import("./Table.context").CompositionContextProps<T_21> = import("./Table.context").CompositionContextProps<T_21>>(defaults: Partial<C>) => C;
|
|
81
|
+
useClickableRowContext: <T_22 extends object>() => import("./plugins/ClickableRowPlugin").TableClickableRowContext<T_22> | undefined;
|
|
82
|
+
useExpandableRowContext: <T_23 extends object>() => import("./plugins/ExpandableRowPlugin").TableExpandableRowContext<T_23> | undefined;
|
|
83
|
+
usePaginationContext: () => import("./plugins/PaginationPlugin").TablePaginationContext | undefined;
|
|
84
|
+
useSortingContext: () => import("./plugins/SortingPlugin").TableSortingContext | undefined;
|
|
85
|
+
PluggableTable: <T_24 extends object>({ caption, emptyStateRender, ...restProps }: import("./components/PluggableTable/PluggableTable").PluggableTableProps<T_24>) => import("react/jsx-runtime").JSX.Element;
|
|
6
86
|
};
|
|
7
87
|
export default Table;
|