@spark-web/data-table 0.3.4 → 1.0.0-rc.1
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# @spark-web/data-table
|
|
2
2
|
|
|
3
|
+
## 1.0.0-rc.1
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- rc
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies []:
|
|
12
|
+
- @spark-web/checkbox@2.0.0-rc.1
|
|
13
|
+
- @spark-web/spinner@2.0.0-rc.1
|
|
14
|
+
- @spark-web/theme@4.0.0-rc.1
|
|
15
|
+
- @spark-web/utils@2.0.0-rc.1
|
|
16
|
+
- @spark-web/a11y@2.0.0-rc.1
|
|
17
|
+
- @spark-web/text@2.0.0-rc.1
|
|
18
|
+
- @spark-web/box@2.0.0-rc.1
|
|
19
|
+
|
|
20
|
+
## 1.0.0-rc.0
|
|
21
|
+
|
|
22
|
+
### Major Changes
|
|
23
|
+
|
|
24
|
+
- rc versio
|
|
25
|
+
|
|
26
|
+
### Patch Changes
|
|
27
|
+
|
|
28
|
+
- Updated dependencies []:
|
|
29
|
+
- @spark-web/checkbox@2.0.0-rc.0
|
|
30
|
+
- @spark-web/spinner@2.0.0-rc.0
|
|
31
|
+
- @spark-web/theme@4.0.0-rc.0
|
|
32
|
+
- @spark-web/a11y@2.0.0-rc.0
|
|
33
|
+
- @spark-web/text@2.0.0-rc.0
|
|
34
|
+
- @spark-web/box@2.0.0-rc.0
|
|
35
|
+
- @spark-web/utils@2.0.0-rc.0
|
|
36
|
+
|
|
3
37
|
## 0.3.4
|
|
4
38
|
|
|
5
39
|
### Patch Changes
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { SerializedStyles } from '@emotion/react';
|
|
1
2
|
import { type DataAttributeMap } from '@spark-web/utils/internal';
|
|
2
3
|
import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, Table, TableOptions } from '@tanstack/react-table';
|
|
3
4
|
import { createColumnHelper, flexRender } from '@tanstack/react-table';
|
|
@@ -7,13 +8,13 @@ import type { HTMLAttributes, ReactElement } from 'react';
|
|
|
7
8
|
*
|
|
8
9
|
* @see https://spark.brighte.com.au/package/data-table
|
|
9
10
|
*/
|
|
10
|
-
declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
12
|
declare type TableSubsetAttributes = Pick<HTMLAttributes<HTMLTableElement>, 'className'>;
|
|
12
13
|
declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
|
|
13
14
|
declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> & {
|
|
14
|
-
headerClassName?:
|
|
15
|
+
headerClassName?: SerializedStyles;
|
|
15
16
|
footerClassName?: string;
|
|
16
|
-
rowClassName?: (row: Row<T>, index: number) =>
|
|
17
|
+
rowClassName?: (row: Row<T>, index: number) => SerializedStyles;
|
|
17
18
|
/** Map of data attributes. */
|
|
18
19
|
data?: DataAttributeMap;
|
|
19
20
|
items: Array<T>;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
-
var
|
|
7
|
+
var react = require('@emotion/react');
|
|
8
8
|
var box = require('@spark-web/box');
|
|
9
9
|
var spinner = require('@spark-web/spinner');
|
|
10
10
|
var theme = require('@spark-web/theme');
|
|
@@ -64,41 +64,47 @@ function DataTable(_ref) {
|
|
|
64
64
|
as: "table"
|
|
65
65
|
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
66
66
|
className: className,
|
|
67
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
// we use box shadow instead of bottom border
|
|
72
|
-
// to allow the border to stay in the header on scroll
|
|
73
|
-
// when the table is sticky
|
|
74
|
-
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
75
|
-
}, headerClassName)),
|
|
76
|
-
children: headerGroups.map(function (headerGroup) {
|
|
67
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
|
|
68
|
+
children: function children(_ref2) {
|
|
69
|
+
var css = _ref2.css,
|
|
70
|
+
cx = _ref2.cx;
|
|
77
71
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
78
|
-
as: "
|
|
79
|
-
|
|
72
|
+
as: "thead",
|
|
73
|
+
background: "neutral",
|
|
74
|
+
className: cx(css({
|
|
75
|
+
// we use box shadow instead of bottom border
|
|
76
|
+
// to allow the border to stay in the header on scroll
|
|
77
|
+
// when the table is sticky
|
|
78
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
79
|
+
}, headerClassName)),
|
|
80
|
+
children: headerGroups.map(function (headerGroup) {
|
|
80
81
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
81
|
-
as: "
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
as: "tr",
|
|
83
|
+
children: headerGroup.headers.map(function (header) {
|
|
84
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
85
|
+
as: "th",
|
|
86
|
+
color: theme$1.color.foreground.muted,
|
|
87
|
+
padding: "medium",
|
|
88
|
+
css: css({
|
|
89
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
90
|
+
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
91
|
+
textAlign: 'left',
|
|
92
|
+
textTransform: 'uppercase'
|
|
93
|
+
}),
|
|
94
|
+
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
95
|
+
}, header.id);
|
|
96
|
+
})
|
|
97
|
+
}, headerGroup.id);
|
|
92
98
|
})
|
|
93
|
-
}
|
|
94
|
-
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
95
101
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
96
102
|
as: "tbody",
|
|
97
103
|
children: [!renderRow ? table.getRowModel().rows.map(function (row) {
|
|
98
104
|
return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
|
|
99
105
|
children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
100
106
|
as: "tr",
|
|
101
|
-
|
|
107
|
+
css: react.css({
|
|
102
108
|
'&[data-is-selected="true"],&[data-is-expanded="true"]': {
|
|
103
109
|
background: theme$1.color.background.primaryMuted
|
|
104
110
|
},
|
|
@@ -116,7 +122,7 @@ function DataTable(_ref) {
|
|
|
116
122
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
117
123
|
as: "td",
|
|
118
124
|
padding: "large",
|
|
119
|
-
|
|
125
|
+
css: react.css({
|
|
120
126
|
borderBottom: '1px',
|
|
121
127
|
borderBottomStyle: 'solid',
|
|
122
128
|
borderColor: theme$1.border.color.standard,
|
|
@@ -129,8 +135,10 @@ function DataTable(_ref) {
|
|
|
129
135
|
}), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
|
|
130
136
|
}, row.id);
|
|
131
137
|
}) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
|
|
132
|
-
as: "tr"
|
|
133
|
-
|
|
138
|
+
as: "tr"
|
|
139
|
+
// @ts-ignore
|
|
140
|
+
,
|
|
141
|
+
className: react.css({
|
|
134
142
|
columnSpan: 'all'
|
|
135
143
|
}),
|
|
136
144
|
onChange: onBottomSpinnerShown,
|
|
@@ -142,7 +150,7 @@ function DataTable(_ref) {
|
|
|
142
150
|
}).reduce(function (sum, len) {
|
|
143
151
|
return len + 1;
|
|
144
152
|
}, 0),
|
|
145
|
-
|
|
153
|
+
css: react.css({
|
|
146
154
|
textAlign: 'center',
|
|
147
155
|
verticalAlign: 'middle'
|
|
148
156
|
}),
|
|
@@ -154,20 +162,25 @@ function DataTable(_ref) {
|
|
|
154
162
|
})
|
|
155
163
|
})
|
|
156
164
|
})]
|
|
157
|
-
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
children: footerGroups.map(function (footerGroup) {
|
|
165
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
|
|
166
|
+
children: function children(_ref3) {
|
|
167
|
+
var cx = _ref3.cx;
|
|
161
168
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
162
|
-
as: "
|
|
163
|
-
|
|
169
|
+
as: "tfoot",
|
|
170
|
+
className: cx(footerClassName),
|
|
171
|
+
children: footerGroups.map(function (footerGroup) {
|
|
164
172
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
165
|
-
as: "
|
|
166
|
-
children:
|
|
167
|
-
|
|
173
|
+
as: "tr",
|
|
174
|
+
children: footerGroup.headers.map(function (footer) {
|
|
175
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
176
|
+
as: "td",
|
|
177
|
+
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
178
|
+
}, footer.id);
|
|
179
|
+
})
|
|
180
|
+
}, footerGroup.id);
|
|
168
181
|
})
|
|
169
|
-
}
|
|
170
|
-
}
|
|
182
|
+
});
|
|
183
|
+
}
|
|
171
184
|
}) : null]
|
|
172
185
|
}));
|
|
173
186
|
}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
-
var
|
|
7
|
+
var react = require('@emotion/react');
|
|
8
8
|
var box = require('@spark-web/box');
|
|
9
9
|
var spinner = require('@spark-web/spinner');
|
|
10
10
|
var theme = require('@spark-web/theme');
|
|
@@ -64,41 +64,47 @@ function DataTable(_ref) {
|
|
|
64
64
|
as: "table"
|
|
65
65
|
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
66
66
|
className: className,
|
|
67
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
// we use box shadow instead of bottom border
|
|
72
|
-
// to allow the border to stay in the header on scroll
|
|
73
|
-
// when the table is sticky
|
|
74
|
-
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
75
|
-
}, headerClassName)),
|
|
76
|
-
children: headerGroups.map(function (headerGroup) {
|
|
67
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
|
|
68
|
+
children: function children(_ref2) {
|
|
69
|
+
var css = _ref2.css,
|
|
70
|
+
cx = _ref2.cx;
|
|
77
71
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
78
|
-
as: "
|
|
79
|
-
|
|
72
|
+
as: "thead",
|
|
73
|
+
background: "neutral",
|
|
74
|
+
className: cx(css({
|
|
75
|
+
// we use box shadow instead of bottom border
|
|
76
|
+
// to allow the border to stay in the header on scroll
|
|
77
|
+
// when the table is sticky
|
|
78
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
79
|
+
}, headerClassName)),
|
|
80
|
+
children: headerGroups.map(function (headerGroup) {
|
|
80
81
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
81
|
-
as: "
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
as: "tr",
|
|
83
|
+
children: headerGroup.headers.map(function (header) {
|
|
84
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
85
|
+
as: "th",
|
|
86
|
+
color: theme$1.color.foreground.muted,
|
|
87
|
+
padding: "medium",
|
|
88
|
+
css: css({
|
|
89
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
90
|
+
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
91
|
+
textAlign: 'left',
|
|
92
|
+
textTransform: 'uppercase'
|
|
93
|
+
}),
|
|
94
|
+
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
95
|
+
}, header.id);
|
|
96
|
+
})
|
|
97
|
+
}, headerGroup.id);
|
|
92
98
|
})
|
|
93
|
-
}
|
|
94
|
-
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
95
101
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
96
102
|
as: "tbody",
|
|
97
103
|
children: [!renderRow ? table.getRowModel().rows.map(function (row) {
|
|
98
104
|
return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
|
|
99
105
|
children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
100
106
|
as: "tr",
|
|
101
|
-
|
|
107
|
+
css: react.css({
|
|
102
108
|
'&[data-is-selected="true"],&[data-is-expanded="true"]': {
|
|
103
109
|
background: theme$1.color.background.primaryMuted
|
|
104
110
|
},
|
|
@@ -116,7 +122,7 @@ function DataTable(_ref) {
|
|
|
116
122
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
117
123
|
as: "td",
|
|
118
124
|
padding: "large",
|
|
119
|
-
|
|
125
|
+
css: react.css({
|
|
120
126
|
borderBottom: '1px',
|
|
121
127
|
borderBottomStyle: 'solid',
|
|
122
128
|
borderColor: theme$1.border.color.standard,
|
|
@@ -129,8 +135,10 @@ function DataTable(_ref) {
|
|
|
129
135
|
}), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
|
|
130
136
|
}, row.id);
|
|
131
137
|
}) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
|
|
132
|
-
as: "tr"
|
|
133
|
-
|
|
138
|
+
as: "tr"
|
|
139
|
+
// @ts-ignore
|
|
140
|
+
,
|
|
141
|
+
className: react.css({
|
|
134
142
|
columnSpan: 'all'
|
|
135
143
|
}),
|
|
136
144
|
onChange: onBottomSpinnerShown,
|
|
@@ -142,7 +150,7 @@ function DataTable(_ref) {
|
|
|
142
150
|
}).reduce(function (sum, len) {
|
|
143
151
|
return len + 1;
|
|
144
152
|
}, 0),
|
|
145
|
-
|
|
153
|
+
css: react.css({
|
|
146
154
|
textAlign: 'center',
|
|
147
155
|
verticalAlign: 'middle'
|
|
148
156
|
}),
|
|
@@ -154,20 +162,25 @@ function DataTable(_ref) {
|
|
|
154
162
|
})
|
|
155
163
|
})
|
|
156
164
|
})]
|
|
157
|
-
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
children: footerGroups.map(function (footerGroup) {
|
|
165
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
|
|
166
|
+
children: function children(_ref3) {
|
|
167
|
+
var cx = _ref3.cx;
|
|
161
168
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
162
|
-
as: "
|
|
163
|
-
|
|
169
|
+
as: "tfoot",
|
|
170
|
+
className: cx(footerClassName),
|
|
171
|
+
children: footerGroups.map(function (footerGroup) {
|
|
164
172
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
165
|
-
as: "
|
|
166
|
-
children:
|
|
167
|
-
|
|
173
|
+
as: "tr",
|
|
174
|
+
children: footerGroup.headers.map(function (footer) {
|
|
175
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
176
|
+
as: "td",
|
|
177
|
+
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
178
|
+
}, footer.id);
|
|
179
|
+
})
|
|
180
|
+
}, footerGroup.id);
|
|
168
181
|
})
|
|
169
|
-
}
|
|
170
|
-
}
|
|
182
|
+
});
|
|
183
|
+
}
|
|
171
184
|
}) : null]
|
|
172
185
|
}));
|
|
173
186
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
-
import {
|
|
3
|
+
import { ClassNames, css } from '@emotion/react';
|
|
4
4
|
import { Box } from '@spark-web/box';
|
|
5
5
|
import { Spinner } from '@spark-web/spinner';
|
|
6
6
|
import { useTheme } from '@spark-web/theme';
|
|
@@ -57,41 +57,47 @@ function DataTable(_ref) {
|
|
|
57
57
|
as: "table"
|
|
58
58
|
}, data ? buildDataAttributes(data) : undefined), {}, {
|
|
59
59
|
className: className,
|
|
60
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
// we use box shadow instead of bottom border
|
|
65
|
-
// to allow the border to stay in the header on scroll
|
|
66
|
-
// when the table is sticky
|
|
67
|
-
boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
|
|
68
|
-
}, headerClassName)),
|
|
69
|
-
children: headerGroups.map(function (headerGroup) {
|
|
60
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
|
|
61
|
+
children: function children(_ref2) {
|
|
62
|
+
var css = _ref2.css,
|
|
63
|
+
cx = _ref2.cx;
|
|
70
64
|
return /*#__PURE__*/jsx(Box, {
|
|
71
|
-
as: "
|
|
72
|
-
|
|
65
|
+
as: "thead",
|
|
66
|
+
background: "neutral",
|
|
67
|
+
className: cx(css({
|
|
68
|
+
// we use box shadow instead of bottom border
|
|
69
|
+
// to allow the border to stay in the header on scroll
|
|
70
|
+
// when the table is sticky
|
|
71
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
|
|
72
|
+
}, headerClassName)),
|
|
73
|
+
children: headerGroups.map(function (headerGroup) {
|
|
73
74
|
return /*#__PURE__*/jsx(Box, {
|
|
74
|
-
as: "
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
75
|
+
as: "tr",
|
|
76
|
+
children: headerGroup.headers.map(function (header) {
|
|
77
|
+
return /*#__PURE__*/jsx(Box, {
|
|
78
|
+
as: "th",
|
|
79
|
+
color: theme.color.foreground.muted,
|
|
80
|
+
padding: "medium",
|
|
81
|
+
css: css({
|
|
82
|
+
fontFamily: theme.typography.fontFamily.sans.name,
|
|
83
|
+
fontWeight: theme.typography.fontWeight.semibold,
|
|
84
|
+
textAlign: 'left',
|
|
85
|
+
textTransform: 'uppercase'
|
|
86
|
+
}),
|
|
87
|
+
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
|
|
88
|
+
}, header.id);
|
|
89
|
+
})
|
|
90
|
+
}, headerGroup.id);
|
|
85
91
|
})
|
|
86
|
-
}
|
|
87
|
-
}
|
|
92
|
+
});
|
|
93
|
+
}
|
|
88
94
|
}) : null, /*#__PURE__*/jsxs(Box, {
|
|
89
95
|
as: "tbody",
|
|
90
96
|
children: [!renderRow ? table.getRowModel().rows.map(function (row) {
|
|
91
97
|
return /*#__PURE__*/jsxs(React.Fragment, {
|
|
92
98
|
children: [/*#__PURE__*/jsx(Box, {
|
|
93
99
|
as: "tr",
|
|
94
|
-
|
|
100
|
+
css: css({
|
|
95
101
|
'&[data-is-selected="true"],&[data-is-expanded="true"]': {
|
|
96
102
|
background: theme.color.background.primaryMuted
|
|
97
103
|
},
|
|
@@ -109,7 +115,7 @@ function DataTable(_ref) {
|
|
|
109
115
|
return /*#__PURE__*/jsx(Box, {
|
|
110
116
|
as: "td",
|
|
111
117
|
padding: "large",
|
|
112
|
-
|
|
118
|
+
css: css({
|
|
113
119
|
borderBottom: '1px',
|
|
114
120
|
borderBottomStyle: 'solid',
|
|
115
121
|
borderColor: theme.border.color.standard,
|
|
@@ -122,7 +128,9 @@ function DataTable(_ref) {
|
|
|
122
128
|
}), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
|
|
123
129
|
}, row.id);
|
|
124
130
|
}) : renderRow(table), showSpinner && /*#__PURE__*/jsx(InView, {
|
|
125
|
-
as: "tr"
|
|
131
|
+
as: "tr"
|
|
132
|
+
// @ts-ignore
|
|
133
|
+
,
|
|
126
134
|
className: css({
|
|
127
135
|
columnSpan: 'all'
|
|
128
136
|
}),
|
|
@@ -135,7 +143,7 @@ function DataTable(_ref) {
|
|
|
135
143
|
}).reduce(function (sum, len) {
|
|
136
144
|
return len + 1;
|
|
137
145
|
}, 0),
|
|
138
|
-
|
|
146
|
+
css: css({
|
|
139
147
|
textAlign: 'center',
|
|
140
148
|
verticalAlign: 'middle'
|
|
141
149
|
}),
|
|
@@ -147,20 +155,25 @@ function DataTable(_ref) {
|
|
|
147
155
|
})
|
|
148
156
|
})
|
|
149
157
|
})]
|
|
150
|
-
}), footerGroups.length > 0 ? /*#__PURE__*/jsx(
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
children: footerGroups.map(function (footerGroup) {
|
|
158
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
|
|
159
|
+
children: function children(_ref3) {
|
|
160
|
+
var cx = _ref3.cx;
|
|
154
161
|
return /*#__PURE__*/jsx(Box, {
|
|
155
|
-
as: "
|
|
156
|
-
|
|
162
|
+
as: "tfoot",
|
|
163
|
+
className: cx(footerClassName),
|
|
164
|
+
children: footerGroups.map(function (footerGroup) {
|
|
157
165
|
return /*#__PURE__*/jsx(Box, {
|
|
158
|
-
as: "
|
|
159
|
-
children:
|
|
160
|
-
|
|
166
|
+
as: "tr",
|
|
167
|
+
children: footerGroup.headers.map(function (footer) {
|
|
168
|
+
return /*#__PURE__*/jsx(Box, {
|
|
169
|
+
as: "td",
|
|
170
|
+
children: flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
171
|
+
}, footer.id);
|
|
172
|
+
})
|
|
173
|
+
}, footerGroup.id);
|
|
161
174
|
})
|
|
162
|
-
}
|
|
163
|
-
}
|
|
175
|
+
});
|
|
176
|
+
}
|
|
164
177
|
}) : null]
|
|
165
178
|
}));
|
|
166
179
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/data-table",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime": "^7.25.0",
|
|
20
|
-
"@emotion/
|
|
21
|
-
"@spark-web/a11y": "^
|
|
22
|
-
"@spark-web/box": "^
|
|
23
|
-
"@spark-web/checkbox": "^
|
|
24
|
-
"@spark-web/spinner": "^
|
|
25
|
-
"@spark-web/text": "^
|
|
26
|
-
"@spark-web/theme": "^
|
|
27
|
-
"@spark-web/utils": "^
|
|
20
|
+
"@emotion/react": "^11.13.5",
|
|
21
|
+
"@spark-web/a11y": "^2.0.0-rc.1",
|
|
22
|
+
"@spark-web/box": "^2.0.0-rc.1",
|
|
23
|
+
"@spark-web/checkbox": "^2.0.0-rc.1",
|
|
24
|
+
"@spark-web/spinner": "^2.0.0-rc.1",
|
|
25
|
+
"@spark-web/text": "^2.0.0-rc.1",
|
|
26
|
+
"@spark-web/theme": "^4.0.0-rc.1",
|
|
27
|
+
"@spark-web/utils": "^2.0.0-rc.1",
|
|
28
28
|
"@tanstack/react-table": "^8.14.0",
|
|
29
29
|
"react-intersection-observer": "^9.8.2"
|
|
30
30
|
},
|