@spark-web/data-table 0.1.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 +16 -0
- package/README.md +65 -0
- package/dist/declarations/src/data-table.d.ts +21 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/spark-web-data-table.cjs.d.ts +2 -0
- package/dist/spark-web-data-table.cjs.dev.js +124 -0
- package/dist/spark-web-data-table.cjs.js +7 -0
- package/dist/spark-web-data-table.cjs.prod.js +124 -0
- package/dist/spark-web-data-table.esm.js +120 -0
- package/package.json +39 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# @spark-web/data-table
|
|
2
|
+
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#426](https://github.com/brighte-labs/spark-web/pull/426)
|
|
8
|
+
[`c674947`](https://github.com/brighte-labs/spark-web/commit/c6749475b0245718300c290f6e521609012aaf6b)
|
|
9
|
+
Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Initial
|
|
10
|
+
version of DataTable component
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
[[`c674947`](https://github.com/brighte-labs/spark-web/commit/c6749475b0245718300c290f6e521609012aaf6b)]:
|
|
16
|
+
- @spark-web/theme@3.2.1
|
package/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: DataTable
|
|
3
|
+
storybookPath: data-display-data-table
|
|
4
|
+
isExperimentalPackage: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
The **`DataTable`** component presents a list of data in table form.
|
|
8
|
+
|
|
9
|
+
It uses _`@tanstack/react-table`_ as a dependency to implement data selection
|
|
10
|
+
and filtering capabilities. As such, certain table options are available as
|
|
11
|
+
`DataTable` props. For example, the `items` and `columns` prop are required
|
|
12
|
+
options.
|
|
13
|
+
|
|
14
|
+
Currently supported features from `@tanstack/react-table` are the following:
|
|
15
|
+
|
|
16
|
+
1. Row selection
|
|
17
|
+
2. Multi-row selection
|
|
18
|
+
3. Column visibility
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
```jsx live
|
|
23
|
+
<DataTable
|
|
24
|
+
items={[
|
|
25
|
+
{
|
|
26
|
+
id: 1,
|
|
27
|
+
name: 'Ken Adams',
|
|
28
|
+
category: 'Solar System',
|
|
29
|
+
amount: 3500,
|
|
30
|
+
},
|
|
31
|
+
]}
|
|
32
|
+
columns={[
|
|
33
|
+
{
|
|
34
|
+
id: 'id',
|
|
35
|
+
accessorKey: 'id',
|
|
36
|
+
header: 'ID',
|
|
37
|
+
cell: info => <Text size="small">{info.renderValue()}</Text>,
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
id: 'name',
|
|
41
|
+
accessorKey: 'name',
|
|
42
|
+
header: 'Name',
|
|
43
|
+
cell: info => <Text size="small">{info.renderValue()}</Text>,
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 'category',
|
|
47
|
+
accessorKey: 'category',
|
|
48
|
+
header: 'Category',
|
|
49
|
+
cell: info => <Text size="small">{info.renderValue()}</Text>,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: 'amount',
|
|
53
|
+
accessorKey: 'amount',
|
|
54
|
+
header: 'Amount',
|
|
55
|
+
cell: info => <Text size="small">{info.renderValue()}</Text>,
|
|
56
|
+
},
|
|
57
|
+
]}
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Props
|
|
62
|
+
|
|
63
|
+
### DataTable
|
|
64
|
+
|
|
65
|
+
<PropsTable displayName="DataTable" />
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type DataAttributeMap } from '@spark-web/utils/internal';
|
|
2
|
+
import { type ColumnDef, type ColumnHelper, type TableOptions, createColumnHelper } from '@tanstack/react-table';
|
|
3
|
+
import { type HTMLAttributes } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* DataTable
|
|
6
|
+
*
|
|
7
|
+
* @see https://spark.brighte.com.au/package/data-table
|
|
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;
|
|
10
|
+
declare type TableSubsetAttributes = Pick<HTMLAttributes<HTMLTableElement>, 'className'>;
|
|
11
|
+
declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onRowSelectionChange'>;
|
|
12
|
+
declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> & {
|
|
13
|
+
headerClassName?: string;
|
|
14
|
+
footerClassName?: string;
|
|
15
|
+
/** Map of data attributes. */
|
|
16
|
+
data?: DataAttributeMap;
|
|
17
|
+
items: Array<T>;
|
|
18
|
+
enableClickableRow?: boolean;
|
|
19
|
+
};
|
|
20
|
+
export { createColumnHelper, DataTable };
|
|
21
|
+
export type { ColumnDef, ColumnHelper, DataTableProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from "./declarations/src/index";
|
|
2
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWRhdGEtdGFibGUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var css = require('@emotion/css');
|
|
8
|
+
var box = require('@spark-web/box');
|
|
9
|
+
var theme = require('@spark-web/theme');
|
|
10
|
+
var internal = require('@spark-web/utils/internal');
|
|
11
|
+
var reactTable = require('@tanstack/react-table');
|
|
12
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
+
|
|
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
|
+
|
|
23
|
+
function DataTable(_ref) {
|
|
24
|
+
var data = _ref.data,
|
|
25
|
+
items = _ref.items,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
columns = _ref.columns,
|
|
28
|
+
_ref$enableHiding = _ref.enableHiding,
|
|
29
|
+
enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
|
|
30
|
+
_ref$enableMultiRowSe = _ref.enableMultiRowSelection,
|
|
31
|
+
enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
|
|
32
|
+
enableClickableRow = _ref.enableClickableRow,
|
|
33
|
+
headerClassName = _ref.headerClassName,
|
|
34
|
+
footerClassName = _ref.footerClassName,
|
|
35
|
+
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
36
|
+
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
var theme$1 = theme.useTheme();
|
|
38
|
+
var table = reactTable.useReactTable(_objectSpread(_objectSpread({
|
|
39
|
+
data: items,
|
|
40
|
+
enableMultiRowSelection: enableMultiRowSelection,
|
|
41
|
+
enableHiding: enableHiding,
|
|
42
|
+
enableRowSelection: !!onRowSelectionChange,
|
|
43
|
+
onRowSelectionChange: onRowSelectionChange,
|
|
44
|
+
columns: columns
|
|
45
|
+
}, tableOptions), {}, {
|
|
46
|
+
getCoreRowModel: reactTable.getCoreRowModel()
|
|
47
|
+
}));
|
|
48
|
+
var headerGroups = table.getHeaderGroups();
|
|
49
|
+
var footerGroups = table.getFooterGroups();
|
|
50
|
+
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
|
|
51
|
+
as: "table"
|
|
52
|
+
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
53
|
+
className: className,
|
|
54
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("thead", {
|
|
55
|
+
className: css.cx(css.css({
|
|
56
|
+
borderBottom: theme$1.border.width.large,
|
|
57
|
+
borderBottomStyle: 'solid',
|
|
58
|
+
borderColor: theme$1.border.color.primary
|
|
59
|
+
}, headerClassName)),
|
|
60
|
+
children: headerGroups.map(function (headerGroup) {
|
|
61
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
62
|
+
children: headerGroup.headers.map(function (header) {
|
|
63
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
64
|
+
as: "th",
|
|
65
|
+
style: {
|
|
66
|
+
color: theme$1.color.foreground.muted,
|
|
67
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
68
|
+
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
69
|
+
padding: theme$1.spacing.medium,
|
|
70
|
+
textAlign: 'left'
|
|
71
|
+
},
|
|
72
|
+
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
73
|
+
}, header.id);
|
|
74
|
+
})
|
|
75
|
+
}, headerGroup.id);
|
|
76
|
+
})
|
|
77
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("tbody", {
|
|
78
|
+
children: table.getRowModel().rows.map(function (row) {
|
|
79
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
80
|
+
className: css.css({
|
|
81
|
+
'&[data-is-selected="true"]': {
|
|
82
|
+
background: theme$1.color.background.primaryMuted
|
|
83
|
+
},
|
|
84
|
+
':hover': {
|
|
85
|
+
background: theme$1.backgroundInteractions.neutralHover,
|
|
86
|
+
cursor: enableClickableRow ? 'pointer' : undefined
|
|
87
|
+
}
|
|
88
|
+
}),
|
|
89
|
+
onClick: function onClick() {
|
|
90
|
+
return enableClickableRow && row.toggleSelected();
|
|
91
|
+
},
|
|
92
|
+
"data-is-selected": row.getIsSelected(),
|
|
93
|
+
children: row.getVisibleCells().map(function (cell) {
|
|
94
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
95
|
+
as: "td",
|
|
96
|
+
style: {
|
|
97
|
+
padding: theme$1.spacing.large,
|
|
98
|
+
borderBottom: '1px',
|
|
99
|
+
borderBottomStyle: 'solid',
|
|
100
|
+
borderColor: theme$1.border.color.standard,
|
|
101
|
+
verticalAlign: 'middle',
|
|
102
|
+
textAlign: 'left'
|
|
103
|
+
},
|
|
104
|
+
children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
105
|
+
}, cell.id);
|
|
106
|
+
})
|
|
107
|
+
}, row.id);
|
|
108
|
+
})
|
|
109
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("tfoot", {
|
|
110
|
+
className: css.cx(footerClassName),
|
|
111
|
+
children: footerGroups.map(function (footerGroup) {
|
|
112
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
113
|
+
children: footerGroup.headers.map(function (footer) {
|
|
114
|
+
return /*#__PURE__*/jsxRuntime.jsx("td", {
|
|
115
|
+
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
116
|
+
}, footer.id);
|
|
117
|
+
})
|
|
118
|
+
}, footerGroup.id);
|
|
119
|
+
})
|
|
120
|
+
}) : null]
|
|
121
|
+
}));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
exports.DataTable = DataTable;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var css = require('@emotion/css');
|
|
8
|
+
var box = require('@spark-web/box');
|
|
9
|
+
var theme = require('@spark-web/theme');
|
|
10
|
+
var internal = require('@spark-web/utils/internal');
|
|
11
|
+
var reactTable = require('@tanstack/react-table');
|
|
12
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
+
|
|
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
|
+
|
|
23
|
+
function DataTable(_ref) {
|
|
24
|
+
var data = _ref.data,
|
|
25
|
+
items = _ref.items,
|
|
26
|
+
className = _ref.className,
|
|
27
|
+
columns = _ref.columns,
|
|
28
|
+
_ref$enableHiding = _ref.enableHiding,
|
|
29
|
+
enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
|
|
30
|
+
_ref$enableMultiRowSe = _ref.enableMultiRowSelection,
|
|
31
|
+
enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
|
|
32
|
+
enableClickableRow = _ref.enableClickableRow,
|
|
33
|
+
headerClassName = _ref.headerClassName,
|
|
34
|
+
footerClassName = _ref.footerClassName,
|
|
35
|
+
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
36
|
+
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
var theme$1 = theme.useTheme();
|
|
38
|
+
var table = reactTable.useReactTable(_objectSpread(_objectSpread({
|
|
39
|
+
data: items,
|
|
40
|
+
enableMultiRowSelection: enableMultiRowSelection,
|
|
41
|
+
enableHiding: enableHiding,
|
|
42
|
+
enableRowSelection: !!onRowSelectionChange,
|
|
43
|
+
onRowSelectionChange: onRowSelectionChange,
|
|
44
|
+
columns: columns
|
|
45
|
+
}, tableOptions), {}, {
|
|
46
|
+
getCoreRowModel: reactTable.getCoreRowModel()
|
|
47
|
+
}));
|
|
48
|
+
var headerGroups = table.getHeaderGroups();
|
|
49
|
+
var footerGroups = table.getFooterGroups();
|
|
50
|
+
return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
|
|
51
|
+
as: "table"
|
|
52
|
+
}, data ? internal.buildDataAttributes(data) : undefined), {}, {
|
|
53
|
+
className: className,
|
|
54
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("thead", {
|
|
55
|
+
className: css.cx(css.css({
|
|
56
|
+
borderBottom: theme$1.border.width.large,
|
|
57
|
+
borderBottomStyle: 'solid',
|
|
58
|
+
borderColor: theme$1.border.color.primary
|
|
59
|
+
}, headerClassName)),
|
|
60
|
+
children: headerGroups.map(function (headerGroup) {
|
|
61
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
62
|
+
children: headerGroup.headers.map(function (header) {
|
|
63
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
64
|
+
as: "th",
|
|
65
|
+
style: {
|
|
66
|
+
color: theme$1.color.foreground.muted,
|
|
67
|
+
fontFamily: theme$1.typography.fontFamily.sans.name,
|
|
68
|
+
fontWeight: theme$1.typography.fontWeight.semibold,
|
|
69
|
+
padding: theme$1.spacing.medium,
|
|
70
|
+
textAlign: 'left'
|
|
71
|
+
},
|
|
72
|
+
children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
|
|
73
|
+
}, header.id);
|
|
74
|
+
})
|
|
75
|
+
}, headerGroup.id);
|
|
76
|
+
})
|
|
77
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("tbody", {
|
|
78
|
+
children: table.getRowModel().rows.map(function (row) {
|
|
79
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
80
|
+
className: css.css({
|
|
81
|
+
'&[data-is-selected="true"]': {
|
|
82
|
+
background: theme$1.color.background.primaryMuted
|
|
83
|
+
},
|
|
84
|
+
':hover': {
|
|
85
|
+
background: theme$1.backgroundInteractions.neutralHover,
|
|
86
|
+
cursor: enableClickableRow ? 'pointer' : undefined
|
|
87
|
+
}
|
|
88
|
+
}),
|
|
89
|
+
onClick: function onClick() {
|
|
90
|
+
return enableClickableRow && row.toggleSelected();
|
|
91
|
+
},
|
|
92
|
+
"data-is-selected": row.getIsSelected(),
|
|
93
|
+
children: row.getVisibleCells().map(function (cell) {
|
|
94
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
|
|
95
|
+
as: "td",
|
|
96
|
+
style: {
|
|
97
|
+
padding: theme$1.spacing.large,
|
|
98
|
+
borderBottom: '1px',
|
|
99
|
+
borderBottomStyle: 'solid',
|
|
100
|
+
borderColor: theme$1.border.color.standard,
|
|
101
|
+
verticalAlign: 'middle',
|
|
102
|
+
textAlign: 'left'
|
|
103
|
+
},
|
|
104
|
+
children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
105
|
+
}, cell.id);
|
|
106
|
+
})
|
|
107
|
+
}, row.id);
|
|
108
|
+
})
|
|
109
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("tfoot", {
|
|
110
|
+
className: css.cx(footerClassName),
|
|
111
|
+
children: footerGroups.map(function (footerGroup) {
|
|
112
|
+
return /*#__PURE__*/jsxRuntime.jsx("tr", {
|
|
113
|
+
children: footerGroup.headers.map(function (footer) {
|
|
114
|
+
return /*#__PURE__*/jsxRuntime.jsx("td", {
|
|
115
|
+
children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
116
|
+
}, footer.id);
|
|
117
|
+
})
|
|
118
|
+
}, footerGroup.id);
|
|
119
|
+
})
|
|
120
|
+
}) : null]
|
|
121
|
+
}));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
exports.DataTable = DataTable;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import { cx, css } from '@emotion/css';
|
|
4
|
+
import { Box } from '@spark-web/box';
|
|
5
|
+
import { useTheme } from '@spark-web/theme';
|
|
6
|
+
import { buildDataAttributes } from '@spark-web/utils/internal';
|
|
7
|
+
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
8
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
var _excluded = ["data", "items", "className", "columns", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "onRowSelectionChange"];
|
|
11
|
+
////////////////////////////////////////////////////////////////////////////////
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* DataTable
|
|
15
|
+
*
|
|
16
|
+
* @see https://spark.brighte.com.au/package/data-table
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
function DataTable(_ref) {
|
|
20
|
+
var data = _ref.data,
|
|
21
|
+
items = _ref.items,
|
|
22
|
+
className = _ref.className,
|
|
23
|
+
columns = _ref.columns,
|
|
24
|
+
_ref$enableHiding = _ref.enableHiding,
|
|
25
|
+
enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
|
|
26
|
+
_ref$enableMultiRowSe = _ref.enableMultiRowSelection,
|
|
27
|
+
enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
|
|
28
|
+
enableClickableRow = _ref.enableClickableRow,
|
|
29
|
+
headerClassName = _ref.headerClassName,
|
|
30
|
+
footerClassName = _ref.footerClassName,
|
|
31
|
+
onRowSelectionChange = _ref.onRowSelectionChange,
|
|
32
|
+
tableOptions = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
+
var theme = useTheme();
|
|
34
|
+
var table = useReactTable(_objectSpread(_objectSpread({
|
|
35
|
+
data: items,
|
|
36
|
+
enableMultiRowSelection: enableMultiRowSelection,
|
|
37
|
+
enableHiding: enableHiding,
|
|
38
|
+
enableRowSelection: !!onRowSelectionChange,
|
|
39
|
+
onRowSelectionChange: onRowSelectionChange,
|
|
40
|
+
columns: columns
|
|
41
|
+
}, tableOptions), {}, {
|
|
42
|
+
getCoreRowModel: getCoreRowModel()
|
|
43
|
+
}));
|
|
44
|
+
var headerGroups = table.getHeaderGroups();
|
|
45
|
+
var footerGroups = table.getFooterGroups();
|
|
46
|
+
return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
|
|
47
|
+
as: "table"
|
|
48
|
+
}, data ? buildDataAttributes(data) : undefined), {}, {
|
|
49
|
+
className: className,
|
|
50
|
+
children: [headerGroups.length > 0 ? /*#__PURE__*/jsx("thead", {
|
|
51
|
+
className: cx(css({
|
|
52
|
+
borderBottom: theme.border.width.large,
|
|
53
|
+
borderBottomStyle: 'solid',
|
|
54
|
+
borderColor: theme.border.color.primary
|
|
55
|
+
}, headerClassName)),
|
|
56
|
+
children: headerGroups.map(function (headerGroup) {
|
|
57
|
+
return /*#__PURE__*/jsx("tr", {
|
|
58
|
+
children: headerGroup.headers.map(function (header) {
|
|
59
|
+
return /*#__PURE__*/jsx(Box, {
|
|
60
|
+
as: "th",
|
|
61
|
+
style: {
|
|
62
|
+
color: theme.color.foreground.muted,
|
|
63
|
+
fontFamily: theme.typography.fontFamily.sans.name,
|
|
64
|
+
fontWeight: theme.typography.fontWeight.semibold,
|
|
65
|
+
padding: theme.spacing.medium,
|
|
66
|
+
textAlign: 'left'
|
|
67
|
+
},
|
|
68
|
+
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
|
|
69
|
+
}, header.id);
|
|
70
|
+
})
|
|
71
|
+
}, headerGroup.id);
|
|
72
|
+
})
|
|
73
|
+
}) : null, /*#__PURE__*/jsx("tbody", {
|
|
74
|
+
children: table.getRowModel().rows.map(function (row) {
|
|
75
|
+
return /*#__PURE__*/jsx("tr", {
|
|
76
|
+
className: css({
|
|
77
|
+
'&[data-is-selected="true"]': {
|
|
78
|
+
background: theme.color.background.primaryMuted
|
|
79
|
+
},
|
|
80
|
+
':hover': {
|
|
81
|
+
background: theme.backgroundInteractions.neutralHover,
|
|
82
|
+
cursor: enableClickableRow ? 'pointer' : undefined
|
|
83
|
+
}
|
|
84
|
+
}),
|
|
85
|
+
onClick: function onClick() {
|
|
86
|
+
return enableClickableRow && row.toggleSelected();
|
|
87
|
+
},
|
|
88
|
+
"data-is-selected": row.getIsSelected(),
|
|
89
|
+
children: row.getVisibleCells().map(function (cell) {
|
|
90
|
+
return /*#__PURE__*/jsx(Box, {
|
|
91
|
+
as: "td",
|
|
92
|
+
style: {
|
|
93
|
+
padding: theme.spacing.large,
|
|
94
|
+
borderBottom: '1px',
|
|
95
|
+
borderBottomStyle: 'solid',
|
|
96
|
+
borderColor: theme.border.color.standard,
|
|
97
|
+
verticalAlign: 'middle',
|
|
98
|
+
textAlign: 'left'
|
|
99
|
+
},
|
|
100
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
101
|
+
}, cell.id);
|
|
102
|
+
})
|
|
103
|
+
}, row.id);
|
|
104
|
+
})
|
|
105
|
+
}), footerGroups.length > 0 ? /*#__PURE__*/jsx("tfoot", {
|
|
106
|
+
className: cx(footerClassName),
|
|
107
|
+
children: footerGroups.map(function (footerGroup) {
|
|
108
|
+
return /*#__PURE__*/jsx("tr", {
|
|
109
|
+
children: footerGroup.headers.map(function (footer) {
|
|
110
|
+
return /*#__PURE__*/jsx("td", {
|
|
111
|
+
children: flexRender(footer.column.columnDef.footer, footer.getContext())
|
|
112
|
+
}, footer.id);
|
|
113
|
+
})
|
|
114
|
+
}, footerGroup.id);
|
|
115
|
+
})
|
|
116
|
+
}) : null]
|
|
117
|
+
}));
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export { DataTable };
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spark-web/data-table",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/brighte-labs/spark-web.git",
|
|
8
|
+
"directory": "packages/data-table"
|
|
9
|
+
},
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"main": "dist/spark-web-data-table.cjs.js",
|
|
12
|
+
"module": "dist/spark-web-data-table.esm.js",
|
|
13
|
+
"files": [
|
|
14
|
+
"CHANGELOG.md",
|
|
15
|
+
"dist",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@babel/runtime": "^7.19.0",
|
|
20
|
+
"@emotion/css": "^11.11.2",
|
|
21
|
+
"@spark-web/a11y": "^1.4.0",
|
|
22
|
+
"@spark-web/box": "^1.0.9",
|
|
23
|
+
"@spark-web/checkbox": "^1.1.0",
|
|
24
|
+
"@spark-web/text": "^1.2.0",
|
|
25
|
+
"@spark-web/theme": "^3.2.1",
|
|
26
|
+
"@spark-web/utils": "^1.3.0",
|
|
27
|
+
"@tanstack/react-table": "^8.14.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/react": "^18.2.0",
|
|
31
|
+
"react": "^18.2.0"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": ">=17.0.2"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
}
|
|
39
|
+
}
|