@spark-web/data-table 0.1.1 → 0.2.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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @spark-web/data-table
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#437](https://github.com/brighte-labs/spark-web/pull/437)
|
|
8
|
+
[`871e8a5`](https://github.com/brighte-labs/spark-web/commit/871e8a5993e13676379ca3b3e388a2fa884db15c)
|
|
9
|
+
Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Add new
|
|
10
|
+
`showBottomSpinner` and `onBottomSpinnerShown` props to show loading spinner
|
|
11
|
+
below table body
|
|
12
|
+
|
|
13
|
+
Updated default header styles to be uppercase
|
|
14
|
+
|
|
15
|
+
Changed default border implementation to be box-shadow based instead of
|
|
16
|
+
border-bottom based
|
|
17
|
+
|
|
3
18
|
## 0.1.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -17,6 +17,16 @@ Currently supported features from `@tanstack/react-table` are the following:
|
|
|
17
17
|
2. Multi-row selection
|
|
18
18
|
3. Column visibility
|
|
19
19
|
|
|
20
|
+
However, certain defaults have been set for the component:
|
|
21
|
+
|
|
22
|
+
1. `enableHiding` is enabled by default;
|
|
23
|
+
2. `enableMultiRowSelection` is disabled by default, meaning row selection
|
|
24
|
+
defaults to single-row;
|
|
25
|
+
3. `enableRowSelection` is automatically enabled when a callback value is passed
|
|
26
|
+
in `onRowSelectionChange`.
|
|
27
|
+
4. The `data` property in React Table options is renamed to `items` to align
|
|
28
|
+
with the rest of Spark Web's usage of `data` as a data attribute.
|
|
29
|
+
|
|
20
30
|
## Example
|
|
21
31
|
|
|
22
32
|
```jsx live
|
|
@@ -6,7 +6,7 @@ import { type HTMLAttributes } from 'react';
|
|
|
6
6
|
*
|
|
7
7
|
* @see https://spark.brighte.com.au/package/data-table
|
|
8
8
|
*/
|
|
9
|
-
declare function DataTable<T>({ data, items, className, columns, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, onRowSelectionChange, ...tableOptions }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function DataTable<T>({ data, items, className, columns, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, onBottomSpinnerShown, onRowSelectionChange, ...tableOptions }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
declare type TableSubsetAttributes = Pick<HTMLAttributes<HTMLTableElement>, 'className'>;
|
|
11
11
|
declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onRowSelectionChange'>;
|
|
12
12
|
declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> & {
|
|
@@ -16,6 +16,8 @@ declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> &
|
|
|
16
16
|
data?: DataAttributeMap;
|
|
17
17
|
items: Array<T>;
|
|
18
18
|
enableClickableRow?: boolean;
|
|
19
|
+
showBottomSpinner?: boolean;
|
|
20
|
+
onBottomSpinnerShown?: (isInView: boolean) => void;
|
|
19
21
|
};
|
|
20
22
|
export { createColumnHelper, DataTable };
|
|
21
23
|
export type { ColumnDef, ColumnHelper, DataTableProps };
|
|
@@ -6,20 +6,14 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
7
|
var css = require('@emotion/css');
|
|
8
8
|
var box = require('@spark-web/box');
|
|
9
|
+
var spinner = require('@spark-web/spinner');
|
|
9
10
|
var theme = require('@spark-web/theme');
|
|
10
11
|
var internal = require('@spark-web/utils/internal');
|
|
11
12
|
var reactTable = require('@tanstack/react-table');
|
|
13
|
+
var reactIntersectionObserver = require('react-intersection-observer');
|
|
12
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
15
|
|
|
14
|
-
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "onRowSelectionChange"];
|
|
15
|
-
////////////////////////////////////////////////////////////////////////////////
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* DataTable
|
|
19
|
-
*
|
|
20
|
-
* @see https://spark.brighte.com.au/package/data-table
|
|
21
|
-
*/
|
|
22
|
-
|
|
16
|
+
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "onBottomSpinnerShown", "onRowSelectionChange"];
|
|
23
17
|
function DataTable(_ref) {
|
|
24
18
|
var data = _ref.data,
|
|
25
19
|
items = _ref.items,
|
|
@@ -32,6 +26,8 @@ function DataTable(_ref) {
|
|
|
32
26
|
enableClickableRow = _ref.enableClickableRow,
|
|
33
27
|
headerClassName = _ref.headerClassName,
|
|
34
28
|
footerClassName = _ref.footerClassName,
|
|
29
|
+
showSpinner = _ref.showBottomSpinner,
|
|
30
|
+
onBottomSpinnerShown = _ref.onBottomSpinnerShown,
|
|
35
31
|
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
36
32
|
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
37
33
|
var theme$1 = theme.useTheme();
|
|
@@ -51,32 +47,39 @@ function DataTable(_ref) {
|
|
|
51
47
|
as: "table"
|
|
52
48
|
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
53
49
|
className: className,
|
|
54
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
50
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
51
|
+
as: "thead",
|
|
52
|
+
background: "neutral",
|
|
55
53
|
className: css.cx(css.css({
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
// we use box shadow instead of bottom border
|
|
55
|
+
// to allow the border to stay in the header on scroll
|
|
56
|
+
// when the table is sticky
|
|
57
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
59
58
|
}, headerClassName)),
|
|
60
59
|
children: headerGroups.map(function (headerGroup) {
|
|
61
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
60
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
61
|
+
as: "tr",
|
|
62
62
|
children: headerGroup.headers.map(function (header) {
|
|
63
63
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
64
64
|
as: "th",
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
color: theme$1.color.foreground.muted,
|
|
66
|
+
padding: "medium",
|
|
67
|
+
className: css.css({
|
|
67
68
|
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
68
69
|
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
70
|
+
textAlign: 'left',
|
|
71
|
+
textTransform: 'uppercase'
|
|
72
|
+
}),
|
|
72
73
|
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
73
74
|
}, header.id);
|
|
74
75
|
})
|
|
75
76
|
}, headerGroup.id);
|
|
76
77
|
})
|
|
77
|
-
}) : null, /*#__PURE__*/jsxRuntime.
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
79
|
+
as: "tbody",
|
|
80
|
+
children: [table.getRowModel().rows.map(function (row) {
|
|
81
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
82
|
+
as: "tr",
|
|
80
83
|
className: css.css({
|
|
81
84
|
'&[data-is-selected="true"]': {
|
|
82
85
|
background: theme$1.color.background.primaryMuted
|
|
@@ -93,25 +96,53 @@ function DataTable(_ref) {
|
|
|
93
96
|
children: row.getVisibleCells().map(function (cell) {
|
|
94
97
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
95
98
|
as: "td",
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
padding: "large",
|
|
100
|
+
className: css.css({
|
|
98
101
|
borderBottom: '1px',
|
|
99
102
|
borderBottomStyle: 'solid',
|
|
100
103
|
borderColor: theme$1.border.color.standard,
|
|
101
104
|
verticalAlign: 'middle',
|
|
102
105
|
textAlign: 'left'
|
|
103
|
-
},
|
|
106
|
+
}),
|
|
104
107
|
children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
105
108
|
}, cell.id);
|
|
106
109
|
})
|
|
107
110
|
}, row.id);
|
|
108
|
-
})
|
|
109
|
-
|
|
111
|
+
}), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
|
|
112
|
+
as: "tr",
|
|
113
|
+
className: css.css({
|
|
114
|
+
columnSpan: 'all'
|
|
115
|
+
}),
|
|
116
|
+
onChange: onBottomSpinnerShown,
|
|
117
|
+
children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
118
|
+
as: "td",
|
|
119
|
+
padding: "large",
|
|
120
|
+
colSpan: headerGroups.map(function (hg) {
|
|
121
|
+
return hg.headers.length;
|
|
122
|
+
}).reduce(function (sum, len) {
|
|
123
|
+
return len + 1;
|
|
124
|
+
}, 0),
|
|
125
|
+
className: css.css({
|
|
126
|
+
textAlign: 'center',
|
|
127
|
+
verticalAlign: 'middle'
|
|
128
|
+
}),
|
|
129
|
+
children: /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
|
|
130
|
+
data: {
|
|
131
|
+
testId: 'data-table-spinner'
|
|
132
|
+
},
|
|
133
|
+
size: "xsmall"
|
|
134
|
+
})
|
|
135
|
+
})
|
|
136
|
+
})]
|
|
137
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
138
|
+
as: "tfoot",
|
|
110
139
|
className: css.cx(footerClassName),
|
|
111
140
|
children: footerGroups.map(function (footerGroup) {
|
|
112
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
141
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
142
|
+
as: "tr",
|
|
113
143
|
children: footerGroup.headers.map(function (footer) {
|
|
114
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
144
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
145
|
+
as: "td",
|
|
115
146
|
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
116
147
|
}, footer.id);
|
|
117
148
|
})
|
|
@@ -6,20 +6,14 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
7
|
var css = require('@emotion/css');
|
|
8
8
|
var box = require('@spark-web/box');
|
|
9
|
+
var spinner = require('@spark-web/spinner');
|
|
9
10
|
var theme = require('@spark-web/theme');
|
|
10
11
|
var internal = require('@spark-web/utils/internal');
|
|
11
12
|
var reactTable = require('@tanstack/react-table');
|
|
13
|
+
var reactIntersectionObserver = require('react-intersection-observer');
|
|
12
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
15
|
|
|
14
|
-
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "onRowSelectionChange"];
|
|
15
|
-
////////////////////////////////////////////////////////////////////////////////
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* DataTable
|
|
19
|
-
*
|
|
20
|
-
* @see https://spark.brighte.com.au/package/data-table
|
|
21
|
-
*/
|
|
22
|
-
|
|
16
|
+
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "onBottomSpinnerShown", "onRowSelectionChange"];
|
|
23
17
|
function DataTable(_ref) {
|
|
24
18
|
var data = _ref.data,
|
|
25
19
|
items = _ref.items,
|
|
@@ -32,6 +26,8 @@ function DataTable(_ref) {
|
|
|
32
26
|
enableClickableRow = _ref.enableClickableRow,
|
|
33
27
|
headerClassName = _ref.headerClassName,
|
|
34
28
|
footerClassName = _ref.footerClassName,
|
|
29
|
+
showSpinner = _ref.showBottomSpinner,
|
|
30
|
+
onBottomSpinnerShown = _ref.onBottomSpinnerShown,
|
|
35
31
|
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
36
32
|
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
37
33
|
var theme$1 = theme.useTheme();
|
|
@@ -51,32 +47,39 @@ function DataTable(_ref) {
|
|
|
51
47
|
as: "table"
|
|
52
48
|
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
53
49
|
className: className,
|
|
54
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(
|
|
50
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
51
|
+
as: "thead",
|
|
52
|
+
background: "neutral",
|
|
55
53
|
className: css.cx(css.css({
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
// we use box shadow instead of bottom border
|
|
55
|
+
// to allow the border to stay in the header on scroll
|
|
56
|
+
// when the table is sticky
|
|
57
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
|
|
59
58
|
}, headerClassName)),
|
|
60
59
|
children: headerGroups.map(function (headerGroup) {
|
|
61
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
60
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
61
|
+
as: "tr",
|
|
62
62
|
children: headerGroup.headers.map(function (header) {
|
|
63
63
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
64
64
|
as: "th",
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
color: theme$1.color.foreground.muted,
|
|
66
|
+
padding: "medium",
|
|
67
|
+
className: css.css({
|
|
67
68
|
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
68
69
|
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
70
|
+
textAlign: 'left',
|
|
71
|
+
textTransform: 'uppercase'
|
|
72
|
+
}),
|
|
72
73
|
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
73
74
|
}, header.id);
|
|
74
75
|
})
|
|
75
76
|
}, headerGroup.id);
|
|
76
77
|
})
|
|
77
|
-
}) : null, /*#__PURE__*/jsxRuntime.
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
|
|
79
|
+
as: "tbody",
|
|
80
|
+
children: [table.getRowModel().rows.map(function (row) {
|
|
81
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
82
|
+
as: "tr",
|
|
80
83
|
className: css.css({
|
|
81
84
|
'&[data-is-selected="true"]': {
|
|
82
85
|
background: theme$1.color.background.primaryMuted
|
|
@@ -93,25 +96,53 @@ function DataTable(_ref) {
|
|
|
93
96
|
children: row.getVisibleCells().map(function (cell) {
|
|
94
97
|
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
95
98
|
as: "td",
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
padding: "large",
|
|
100
|
+
className: css.css({
|
|
98
101
|
borderBottom: '1px',
|
|
99
102
|
borderBottomStyle: 'solid',
|
|
100
103
|
borderColor: theme$1.border.color.standard,
|
|
101
104
|
verticalAlign: 'middle',
|
|
102
105
|
textAlign: 'left'
|
|
103
|
-
},
|
|
106
|
+
}),
|
|
104
107
|
children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
105
108
|
}, cell.id);
|
|
106
109
|
})
|
|
107
110
|
}, row.id);
|
|
108
|
-
})
|
|
109
|
-
|
|
111
|
+
}), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
|
|
112
|
+
as: "tr",
|
|
113
|
+
className: css.css({
|
|
114
|
+
columnSpan: 'all'
|
|
115
|
+
}),
|
|
116
|
+
onChange: onBottomSpinnerShown,
|
|
117
|
+
children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
118
|
+
as: "td",
|
|
119
|
+
padding: "large",
|
|
120
|
+
colSpan: headerGroups.map(function (hg) {
|
|
121
|
+
return hg.headers.length;
|
|
122
|
+
}).reduce(function (sum, len) {
|
|
123
|
+
return len + 1;
|
|
124
|
+
}, 0),
|
|
125
|
+
className: css.css({
|
|
126
|
+
textAlign: 'center',
|
|
127
|
+
verticalAlign: 'middle'
|
|
128
|
+
}),
|
|
129
|
+
children: /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
|
|
130
|
+
data: {
|
|
131
|
+
testId: 'data-table-spinner'
|
|
132
|
+
},
|
|
133
|
+
size: "xsmall"
|
|
134
|
+
})
|
|
135
|
+
})
|
|
136
|
+
})]
|
|
137
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
138
|
+
as: "tfoot",
|
|
110
139
|
className: css.cx(footerClassName),
|
|
111
140
|
children: footerGroups.map(function (footerGroup) {
|
|
112
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
141
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
142
|
+
as: "tr",
|
|
113
143
|
children: footerGroup.headers.map(function (footer) {
|
|
114
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
144
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
145
|
+
as: "td",
|
|
115
146
|
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
116
147
|
}, footer.id);
|
|
117
148
|
})
|
|
@@ -2,21 +2,15 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
|
2
2
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
3
|
import { cx, css } from '@emotion/css';
|
|
4
4
|
import { Box } from '@spark-web/box';
|
|
5
|
+
import { Spinner } from '@spark-web/spinner';
|
|
5
6
|
import { useTheme } from '@spark-web/theme';
|
|
6
7
|
import { buildDataAttributes } from '@spark-web/utils/internal';
|
|
7
8
|
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
8
9
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
10
|
+
import { InView } from 'react-intersection-observer';
|
|
9
11
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
12
|
|
|
11
|
-
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "onRowSelectionChange"];
|
|
12
|
-
////////////////////////////////////////////////////////////////////////////////
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* DataTable
|
|
16
|
-
*
|
|
17
|
-
* @see https://spark.brighte.com.au/package/data-table
|
|
18
|
-
*/
|
|
19
|
-
|
|
13
|
+
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "onBottomSpinnerShown", "onRowSelectionChange"];
|
|
20
14
|
function DataTable(_ref) {
|
|
21
15
|
var data = _ref.data,
|
|
22
16
|
items = _ref.items,
|
|
@@ -29,6 +23,8 @@ function DataTable(_ref) {
|
|
|
29
23
|
enableClickableRow = _ref.enableClickableRow,
|
|
30
24
|
headerClassName = _ref.headerClassName,
|
|
31
25
|
footerClassName = _ref.footerClassName,
|
|
26
|
+
showSpinner = _ref.showBottomSpinner,
|
|
27
|
+
onBottomSpinnerShown = _ref.onBottomSpinnerShown,
|
|
32
28
|
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
33
29
|
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
34
30
|
var theme = useTheme();
|
|
@@ -48,32 +44,39 @@ function DataTable(_ref) {
|
|
|
48
44
|
as: "table"
|
|
49
45
|
}, data ? buildDataAttributes(data) : undefined), {}, {
|
|
50
46
|
className: className,
|
|
51
|
-
children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(
|
|
47
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(Box, {
|
|
48
|
+
as: "thead",
|
|
49
|
+
background: "neutral",
|
|
52
50
|
className: cx(css({
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
// we use box shadow instead of bottom border
|
|
52
|
+
// to allow the border to stay in the header on scroll
|
|
53
|
+
// when the table is sticky
|
|
54
|
+
boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
|
|
56
55
|
}, headerClassName)),
|
|
57
56
|
children: headerGroups.map(function (headerGroup) {
|
|
58
|
-
return /*#__PURE__*/jsx(
|
|
57
|
+
return /*#__PURE__*/jsx(Box, {
|
|
58
|
+
as: "tr",
|
|
59
59
|
children: headerGroup.headers.map(function (header) {
|
|
60
60
|
return /*#__PURE__*/jsx(Box, {
|
|
61
61
|
as: "th",
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
color: theme.color.foreground.muted,
|
|
63
|
+
padding: "medium",
|
|
64
|
+
className: css({
|
|
64
65
|
fontFamily: theme.typography.fontFamily.sans.name,
|
|
65
66
|
fontWeight: theme.typography.fontWeight.semibold,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
},
|
|
67
|
+
textAlign: 'left',
|
|
68
|
+
textTransform: 'uppercase'
|
|
69
|
+
}),
|
|
69
70
|
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
|
|
70
71
|
}, header.id);
|
|
71
72
|
})
|
|
72
73
|
}, headerGroup.id);
|
|
73
74
|
})
|
|
74
|
-
}) : null, /*#__PURE__*/
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
}) : null, /*#__PURE__*/jsxs(Box, {
|
|
76
|
+
as: "tbody",
|
|
77
|
+
children: [table.getRowModel().rows.map(function (row) {
|
|
78
|
+
return /*#__PURE__*/jsx(Box, {
|
|
79
|
+
as: "tr",
|
|
77
80
|
className: css({
|
|
78
81
|
'&[data-is-selected="true"]': {
|
|
79
82
|
background: theme.color.background.primaryMuted
|
|
@@ -90,25 +93,53 @@ function DataTable(_ref) {
|
|
|
90
93
|
children: row.getVisibleCells().map(function (cell) {
|
|
91
94
|
return /*#__PURE__*/jsx(Box, {
|
|
92
95
|
as: "td",
|
|
93
|
-
|
|
94
|
-
|
|
96
|
+
padding: "large",
|
|
97
|
+
className: css({
|
|
95
98
|
borderBottom: '1px',
|
|
96
99
|
borderBottomStyle: 'solid',
|
|
97
100
|
borderColor: theme.border.color.standard,
|
|
98
101
|
verticalAlign: 'middle',
|
|
99
102
|
textAlign: 'left'
|
|
100
|
-
},
|
|
103
|
+
}),
|
|
101
104
|
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
102
105
|
}, cell.id);
|
|
103
106
|
})
|
|
104
107
|
}, row.id);
|
|
105
|
-
})
|
|
106
|
-
|
|
108
|
+
}), showSpinner && /*#__PURE__*/jsx(InView, {
|
|
109
|
+
as: "tr",
|
|
110
|
+
className: css({
|
|
111
|
+
columnSpan: 'all'
|
|
112
|
+
}),
|
|
113
|
+
onChange: onBottomSpinnerShown,
|
|
114
|
+
children: /*#__PURE__*/jsx(Box, {
|
|
115
|
+
as: "td",
|
|
116
|
+
padding: "large",
|
|
117
|
+
colSpan: headerGroups.map(function (hg) {
|
|
118
|
+
return hg.headers.length;
|
|
119
|
+
}).reduce(function (sum, len) {
|
|
120
|
+
return len + 1;
|
|
121
|
+
}, 0),
|
|
122
|
+
className: css({
|
|
123
|
+
textAlign: 'center',
|
|
124
|
+
verticalAlign: 'middle'
|
|
125
|
+
}),
|
|
126
|
+
children: /*#__PURE__*/jsx(Spinner, {
|
|
127
|
+
data: {
|
|
128
|
+
testId: 'data-table-spinner'
|
|
129
|
+
},
|
|
130
|
+
size: "xsmall"
|
|
131
|
+
})
|
|
132
|
+
})
|
|
133
|
+
})]
|
|
134
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsx(Box, {
|
|
135
|
+
as: "tfoot",
|
|
107
136
|
className: cx(footerClassName),
|
|
108
137
|
children: footerGroups.map(function (footerGroup) {
|
|
109
|
-
return /*#__PURE__*/jsx(
|
|
138
|
+
return /*#__PURE__*/jsx(Box, {
|
|
139
|
+
as: "tr",
|
|
110
140
|
children: footerGroup.headers.map(function (footer) {
|
|
111
|
-
return /*#__PURE__*/jsx(
|
|
141
|
+
return /*#__PURE__*/jsx(Box, {
|
|
142
|
+
as: "td",
|
|
112
143
|
children: flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
113
144
|
}, footer.id);
|
|
114
145
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/data-table",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,10 +21,12 @@
|
|
|
21
21
|
"@spark-web/a11y": "^1.4.0",
|
|
22
22
|
"@spark-web/box": "^1.0.9",
|
|
23
23
|
"@spark-web/checkbox": "^1.1.0",
|
|
24
|
+
"@spark-web/spinner": "^1.1.0",
|
|
24
25
|
"@spark-web/text": "^1.2.0",
|
|
25
26
|
"@spark-web/theme": "^3.2.1",
|
|
26
27
|
"@spark-web/utils": "^1.3.0",
|
|
27
|
-
"@tanstack/react-table": "^8.14.0"
|
|
28
|
+
"@tanstack/react-table": "^8.14.0",
|
|
29
|
+
"react-intersection-observer": "^9.8.2"
|
|
28
30
|
},
|
|
29
31
|
"devDependencies": {
|
|
30
32
|
"@types/react": "^18.2.0",
|