@spark-web/data-table 5.2.0 → 5.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +63 -0
  2. package/CLAUDE.md +262 -0
  3. package/dist/declarations/src/data-table.d.ts +6 -2
  4. package/dist/spark-web-data-table.cjs.dev.js +173 -117
  5. package/dist/spark-web-data-table.cjs.prod.js +173 -117
  6. package/dist/spark-web-data-table.esm.js +174 -118
  7. package/package.json +5 -4
package/dist/spark-web-data-table.cjs.dev.js CHANGED
@@ -8,6 +8,7 @@ var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
9
  var icon = require('@spark-web/icon');
10
10
  var spinner = require('@spark-web/spinner');
11
+ var text = require('@spark-web/text');
11
12
  var theme = require('@spark-web/theme');
12
13
  var internal = require('@spark-web/utils/internal');
13
14
  var reactTable = require('@tanstack/react-table');
@@ -19,7 +20,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
19
20
 
20
21
  var React__default = /*#__PURE__*/_interopDefault(React);
21
22
 
22
- var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
23
+ var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow", "isLoading", "emptyState"];
24
+ function getAriaSort(column) {
25
+ if (!column.getCanSort()) return undefined;
26
+ if (column.getIsSorted() === 'asc') return 'ascending';
27
+ if (column.getIsSorted() === 'desc') return 'descending';
28
+ return 'none';
29
+ }
30
+
31
+ ////////////////////////////////////////////////////////////////////////////////
32
+
33
+ /**
34
+ * DataTable
35
+ *
36
+ * @see https://spark.brighte.com.au/package/data-table
37
+ */
38
+
23
39
  function DataTable(_ref) {
24
40
  var _tableOptions$enableS, _tableOptions$manualS;
25
41
  var data = _ref.data,
@@ -42,6 +58,8 @@ function DataTable(_ref) {
42
58
  onRowClick = _ref.onRowClick,
43
59
  onRowSelectionChange = _ref.onRowSelectionChange,
44
60
  renderRow = _ref.renderRow,
61
+ isLoading = _ref.isLoading,
62
+ emptyState = _ref.emptyState,
45
63
  tableOptions = _objectWithoutProperties(_ref, _excluded);
46
64
  var theme$1 = theme.useTheme();
47
65
  var enableRowSelection = !!onRowSelectionChange;
@@ -64,130 +82,168 @@ function DataTable(_ref) {
64
82
  var defaultOnRowClick = function defaultOnRowClick(row) {
65
83
  return row.toggleSelected();
66
84
  };
67
- return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
68
- as: "table"
69
- }, data ? internal.buildDataAttributes(data) : undefined), {}, {
70
- css: className,
71
- children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- css: react.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) {
81
- return jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- var _asc$desc;
85
- return jsxRuntime.jsxs(box.Box, {
86
- as: "th",
87
- color: theme$1.color.foreground.muted,
88
- padding: "medium",
89
- css: react.css({
90
- fontFamily: theme$1.typography.fontFamily.sans.name,
91
- fontWeight: theme$1.typography.fontWeight.semibold,
92
- textAlign: 'left',
93
- textTransform: 'uppercase',
94
- width: "".concat(header.getSize(), "px"),
95
- svg: {
96
- marginLeft: theme$1.spacing.xsmall
97
- }
98
- }),
99
- onClick: header.column.getToggleSortingHandler(),
100
- children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
101
- asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
102
- size: "xsmall"
103
- }),
104
- desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
105
- size: "xsmall"
106
- })
107
- }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
108
- }, header.id);
109
- })
110
- }, headerGroup.id);
111
- })
112
- }) : null, jsxRuntime.jsxs(box.Box, {
113
- as: "tbody",
114
- children: [!renderRow ? table.getRowModel().rows.map(function (row) {
115
- return jsxRuntime.jsxs(React__default["default"].Fragment, {
116
- children: [jsxRuntime.jsx(box.Box, {
85
+ return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
86
+ children: [jsxRuntime.jsxs(box.Box, {
87
+ as: "table",
88
+ width: "full",
89
+ css: className,
90
+ children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
91
+ as: "thead",
92
+ css: react.css({
93
+ backgroundColor: theme$1.color.background.surface,
94
+ // we use box shadow instead of bottom border
95
+ // to allow the border to stay in the header on scroll
96
+ // when the table is sticky
97
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primaryActive)
98
+ }, headerClassName),
99
+ children: headerGroups.map(function (headerGroup) {
100
+ return jsxRuntime.jsx(box.Box, {
117
101
  as: "tr",
102
+ children: headerGroup.headers.map(function (header) {
103
+ var _asc$desc;
104
+ return jsxRuntime.jsxs(box.Box, {
105
+ as: "th",
106
+ padding: "medium",
107
+ css: react.css(_objectSpread(_objectSpread({
108
+ color: theme$1.color.foreground.primaryActive,
109
+ fontFamily: theme$1.typography.fontFamily.sans.name,
110
+ fontWeight: theme$1.typography.fontWeight.semibold,
111
+ textAlign: 'left',
112
+ width: "".concat(header.getSize(), "px"),
113
+ cursor: header.column.getCanSort() ? 'pointer' : undefined,
114
+ userSelect: header.column.getCanSort() ? 'none' : undefined
115
+ }, header.column.getCanSort() ? {
116
+ '&:hover': {
117
+ backgroundColor: theme$1.backgroundInteractions.primaryLowHover
118
+ }
119
+ } : {}), {}, {
120
+ svg: {
121
+ marginLeft: theme$1.spacing.xsmall
122
+ }
123
+ })),
124
+ onClick: header.column.getToggleSortingHandler(),
125
+ "aria-sort": getAriaSort(header.column),
126
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
127
+ asc: jsxRuntime.jsx(icon.SortAscendingIcon, {
128
+ size: "xxsmall",
129
+ tone: "primaryActive"
130
+ }),
131
+ desc: jsxRuntime.jsx(icon.SortDescendingIcon, {
132
+ size: "xxsmall",
133
+ tone: "primaryActive"
134
+ })
135
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
136
+ }, header.id);
137
+ })
138
+ }, headerGroup.id);
139
+ })
140
+ }) : null, jsxRuntime.jsxs(box.Box, {
141
+ as: "tbody",
142
+ children: [!renderRow ? table.getRowModel().rows.map(function (row) {
143
+ return jsxRuntime.jsxs(React__default["default"].Fragment, {
144
+ children: [jsxRuntime.jsx(box.Box, {
145
+ as: "tr",
146
+ css: react.css(_objectSpread({
147
+ '&[data-is-selected="true"],&[data-is-expanded="true"]': {
148
+ backgroundColor: theme$1.color.background.primarySoft
149
+ }
150
+ }, enableClickableRow ? {
151
+ ':hover:not(:has(button:hover))': {
152
+ backgroundColor: theme$1.color.background.inputPressed,
153
+ cursor: 'pointer'
154
+ }
155
+ } : {}), rowClassName ? rowClassName(row, row.index) : undefined),
156
+ onClick: function onClick() {
157
+ return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
158
+ },
159
+ "data-is-selected": row.getIsSelected(),
160
+ "data-is-expanded": row.getIsExpanded(),
161
+ children: row.getVisibleCells().map(function (cell) {
162
+ return jsxRuntime.jsx(box.Box, {
163
+ as: "td",
164
+ padding: "large",
165
+ css: react.css({
166
+ borderBottomWidth: theme$1.border.width.standard,
167
+ borderBottomStyle: 'solid',
168
+ borderColor: theme$1.border.color.standard,
169
+ verticalAlign: 'middle',
170
+ textAlign: 'left',
171
+ // row-as-link: the anchor supplies its own padding
172
+ '&:has(> a)': {
173
+ padding: 0
174
+ }
175
+ }),
176
+ children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
177
+ }, cell.id);
178
+ })
179
+ }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
180
+ }, row.id);
181
+ }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
182
+ as: "tr"
183
+ // @ts-ignore
184
+ ,
185
+ css: react.css({
186
+ columnSpan: 'all'
187
+ }),
188
+ onChange: onBottomSpinnerShown,
189
+ children: jsxRuntime.jsx(box.Box, {
190
+ as: "td",
191
+ padding: "large",
192
+ colSpan: headerGroups.map(function (hg) {
193
+ return hg.headers.length;
194
+ }).reduce(function (sum, len) {
195
+ return len + 1;
196
+ }, 0),
118
197
  css: react.css({
119
- '&[data-is-selected="true"],&[data-is-expanded="true"]': {
120
- background: theme$1.color.background.primaryMuted
198
+ textAlign: 'center',
199
+ verticalAlign: 'middle'
200
+ }),
201
+ children: jsxRuntime.jsx(spinner.Spinner, {
202
+ data: {
203
+ testId: 'data-table-spinner'
121
204
  },
122
- ':hover': {
123
- background: theme$1.backgroundInteractions.neutralHover,
124
- cursor: enableClickableRow ? 'pointer' : undefined
125
- }
126
- }, rowClassName ? rowClassName(row, row.index) : undefined),
127
- onClick: function onClick() {
128
- return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
129
- },
130
- "data-is-selected": row.getIsSelected(),
131
- "data-is-expanded": row.getIsExpanded(),
132
- children: row.getVisibleCells().map(function (cell) {
205
+ size: "xsmall"
206
+ })
207
+ })
208
+ })]
209
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
210
+ as: "tfoot",
211
+ css: react.css(footerClassName),
212
+ children: footerGroups.map(function (footerGroup) {
213
+ return jsxRuntime.jsx(box.Box, {
214
+ as: "tr",
215
+ children: footerGroup.headers.map(function (footer) {
133
216
  return jsxRuntime.jsx(box.Box, {
134
217
  as: "td",
135
- padding: "large",
136
- css: react.css({
137
- borderBottom: '1px',
138
- borderBottomStyle: 'solid',
139
- borderColor: theme$1.border.color.standard,
140
- verticalAlign: 'middle',
141
- textAlign: 'left'
142
- }),
143
- children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
144
- }, cell.id);
218
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
219
+ }, footer.id);
145
220
  })
146
- }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
147
- }, row.id);
148
- }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
149
- as: "tr"
150
- // @ts-ignore
151
- ,
152
- css: react.css({
153
- columnSpan: 'all'
154
- }),
155
- onChange: onBottomSpinnerShown,
156
- children: jsxRuntime.jsx(box.Box, {
157
- as: "td",
158
- padding: "large",
159
- colSpan: headerGroups.map(function (hg) {
160
- return hg.headers.length;
161
- }).reduce(function (sum, len) {
162
- return len + 1;
163
- }, 0),
164
- css: react.css({
165
- textAlign: 'center',
166
- verticalAlign: 'middle'
167
- }),
168
- children: jsxRuntime.jsx(spinner.Spinner, {
169
- data: {
170
- testId: 'data-table-spinner'
171
- },
172
- size: "xsmall"
173
- })
221
+ }, footerGroup.id);
174
222
  })
223
+ }) : null]
224
+ }), isLoading && jsxRuntime.jsxs(box.Box, {
225
+ display: "flex",
226
+ alignItems: "center",
227
+ justifyContent: "center",
228
+ padding: "xlarge",
229
+ gap: "small",
230
+ width: "full",
231
+ children: [jsxRuntime.jsx(text.Text, {
232
+ tone: "muted",
233
+ children: "Loading"
234
+ }), jsxRuntime.jsx(spinner.Spinner, {
235
+ data: {
236
+ testId: 'data-table-loading-spinner'
237
+ },
238
+ tone: "primary"
175
239
  })]
176
- }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
177
- as: "tfoot",
178
- css: react.css(footerClassName),
179
- children: footerGroups.map(function (footerGroup) {
180
- return jsxRuntime.jsx(box.Box, {
181
- as: "tr",
182
- children: footerGroup.headers.map(function (footer) {
183
- return jsxRuntime.jsx(box.Box, {
184
- as: "td",
185
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
186
- }, footer.id);
187
- })
188
- }, footerGroup.id);
189
- })
190
- }) : null]
240
+ }), !isLoading && items.length === 0 && emptyState != null && jsxRuntime.jsx(box.Box, {
241
+ display: "flex",
242
+ justifyContent: "center",
243
+ padding: "xlarge",
244
+ width: "full",
245
+ children: emptyState
246
+ })]
191
247
  }));
192
248
  }
193
249
 
package/dist/spark-web-data-table.cjs.prod.js CHANGED
@@ -8,6 +8,7 @@ var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
9
  var icon = require('@spark-web/icon');
10
10
  var spinner = require('@spark-web/spinner');
11
+ var text = require('@spark-web/text');
11
12
  var theme = require('@spark-web/theme');
12
13
  var internal = require('@spark-web/utils/internal');
13
14
  var reactTable = require('@tanstack/react-table');
@@ -19,7 +20,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
19
20
 
20
21
  var React__default = /*#__PURE__*/_interopDefault(React);
21
22
 
22
- var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
23
+ var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow", "isLoading", "emptyState"];
24
+ function getAriaSort(column) {
25
+ if (!column.getCanSort()) return undefined;
26
+ if (column.getIsSorted() === 'asc') return 'ascending';
27
+ if (column.getIsSorted() === 'desc') return 'descending';
28
+ return 'none';
29
+ }
30
+
31
+ ////////////////////////////////////////////////////////////////////////////////
32
+
33
+ /**
34
+ * DataTable
35
+ *
36
+ * @see https://spark.brighte.com.au/package/data-table
37
+ */
38
+
23
39
  function DataTable(_ref) {
24
40
  var _tableOptions$enableS, _tableOptions$manualS;
25
41
  var data = _ref.data,
@@ -42,6 +58,8 @@ function DataTable(_ref) {
42
58
  onRowClick = _ref.onRowClick,
43
59
  onRowSelectionChange = _ref.onRowSelectionChange,
44
60
  renderRow = _ref.renderRow,
61
+ isLoading = _ref.isLoading,
62
+ emptyState = _ref.emptyState,
45
63
  tableOptions = _objectWithoutProperties(_ref, _excluded);
46
64
  var theme$1 = theme.useTheme();
47
65
  var enableRowSelection = !!onRowSelectionChange;
@@ -64,130 +82,168 @@ function DataTable(_ref) {
64
82
  var defaultOnRowClick = function defaultOnRowClick(row) {
65
83
  return row.toggleSelected();
66
84
  };
67
- return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
68
- as: "table"
69
- }, data ? internal.buildDataAttributes(data) : undefined), {}, {
70
- css: className,
71
- children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
72
- as: "thead",
73
- background: "neutral",
74
- css: react.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) {
81
- return jsxRuntime.jsx(box.Box, {
82
- as: "tr",
83
- children: headerGroup.headers.map(function (header) {
84
- var _asc$desc;
85
- return jsxRuntime.jsxs(box.Box, {
86
- as: "th",
87
- color: theme$1.color.foreground.muted,
88
- padding: "medium",
89
- css: react.css({
90
- fontFamily: theme$1.typography.fontFamily.sans.name,
91
- fontWeight: theme$1.typography.fontWeight.semibold,
92
- textAlign: 'left',
93
- textTransform: 'uppercase',
94
- width: "".concat(header.getSize(), "px"),
95
- svg: {
96
- marginLeft: theme$1.spacing.xsmall
97
- }
98
- }),
99
- onClick: header.column.getToggleSortingHandler(),
100
- children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
101
- asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
102
- size: "xsmall"
103
- }),
104
- desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
105
- size: "xsmall"
106
- })
107
- }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
108
- }, header.id);
109
- })
110
- }, headerGroup.id);
111
- })
112
- }) : null, jsxRuntime.jsxs(box.Box, {
113
- as: "tbody",
114
- children: [!renderRow ? table.getRowModel().rows.map(function (row) {
115
- return jsxRuntime.jsxs(React__default["default"].Fragment, {
116
- children: [jsxRuntime.jsx(box.Box, {
85
+ return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
86
+ children: [jsxRuntime.jsxs(box.Box, {
87
+ as: "table",
88
+ width: "full",
89
+ css: className,
90
+ children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
91
+ as: "thead",
92
+ css: react.css({
93
+ backgroundColor: theme$1.color.background.surface,
94
+ // we use box shadow instead of bottom border
95
+ // to allow the border to stay in the header on scroll
96
+ // when the table is sticky
97
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primaryActive)
98
+ }, headerClassName),
99
+ children: headerGroups.map(function (headerGroup) {
100
+ return jsxRuntime.jsx(box.Box, {
117
101
  as: "tr",
102
+ children: headerGroup.headers.map(function (header) {
103
+ var _asc$desc;
104
+ return jsxRuntime.jsxs(box.Box, {
105
+ as: "th",
106
+ padding: "medium",
107
+ css: react.css(_objectSpread(_objectSpread({
108
+ color: theme$1.color.foreground.primaryActive,
109
+ fontFamily: theme$1.typography.fontFamily.sans.name,
110
+ fontWeight: theme$1.typography.fontWeight.semibold,
111
+ textAlign: 'left',
112
+ width: "".concat(header.getSize(), "px"),
113
+ cursor: header.column.getCanSort() ? 'pointer' : undefined,
114
+ userSelect: header.column.getCanSort() ? 'none' : undefined
115
+ }, header.column.getCanSort() ? {
116
+ '&:hover': {
117
+ backgroundColor: theme$1.backgroundInteractions.primaryLowHover
118
+ }
119
+ } : {}), {}, {
120
+ svg: {
121
+ marginLeft: theme$1.spacing.xsmall
122
+ }
123
+ })),
124
+ onClick: header.column.getToggleSortingHandler(),
125
+ "aria-sort": getAriaSort(header.column),
126
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
127
+ asc: jsxRuntime.jsx(icon.SortAscendingIcon, {
128
+ size: "xxsmall",
129
+ tone: "primaryActive"
130
+ }),
131
+ desc: jsxRuntime.jsx(icon.SortDescendingIcon, {
132
+ size: "xxsmall",
133
+ tone: "primaryActive"
134
+ })
135
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
136
+ }, header.id);
137
+ })
138
+ }, headerGroup.id);
139
+ })
140
+ }) : null, jsxRuntime.jsxs(box.Box, {
141
+ as: "tbody",
142
+ children: [!renderRow ? table.getRowModel().rows.map(function (row) {
143
+ return jsxRuntime.jsxs(React__default["default"].Fragment, {
144
+ children: [jsxRuntime.jsx(box.Box, {
145
+ as: "tr",
146
+ css: react.css(_objectSpread({
147
+ '&[data-is-selected="true"],&[data-is-expanded="true"]': {
148
+ backgroundColor: theme$1.color.background.primarySoft
149
+ }
150
+ }, enableClickableRow ? {
151
+ ':hover:not(:has(button:hover))': {
152
+ backgroundColor: theme$1.color.background.inputPressed,
153
+ cursor: 'pointer'
154
+ }
155
+ } : {}), rowClassName ? rowClassName(row, row.index) : undefined),
156
+ onClick: function onClick() {
157
+ return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
158
+ },
159
+ "data-is-selected": row.getIsSelected(),
160
+ "data-is-expanded": row.getIsExpanded(),
161
+ children: row.getVisibleCells().map(function (cell) {
162
+ return jsxRuntime.jsx(box.Box, {
163
+ as: "td",
164
+ padding: "large",
165
+ css: react.css({
166
+ borderBottomWidth: theme$1.border.width.standard,
167
+ borderBottomStyle: 'solid',
168
+ borderColor: theme$1.border.color.standard,
169
+ verticalAlign: 'middle',
170
+ textAlign: 'left',
171
+ // row-as-link: the anchor supplies its own padding
172
+ '&:has(> a)': {
173
+ padding: 0
174
+ }
175
+ }),
176
+ children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
177
+ }, cell.id);
178
+ })
179
+ }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
180
+ }, row.id);
181
+ }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
182
+ as: "tr"
183
+ // @ts-ignore
184
+ ,
185
+ css: react.css({
186
+ columnSpan: 'all'
187
+ }),
188
+ onChange: onBottomSpinnerShown,
189
+ children: jsxRuntime.jsx(box.Box, {
190
+ as: "td",
191
+ padding: "large",
192
+ colSpan: headerGroups.map(function (hg) {
193
+ return hg.headers.length;
194
+ }).reduce(function (sum, len) {
195
+ return len + 1;
196
+ }, 0),
118
197
  css: react.css({
119
- '&[data-is-selected="true"],&[data-is-expanded="true"]': {
120
- background: theme$1.color.background.primaryMuted
198
+ textAlign: 'center',
199
+ verticalAlign: 'middle'
200
+ }),
201
+ children: jsxRuntime.jsx(spinner.Spinner, {
202
+ data: {
203
+ testId: 'data-table-spinner'
121
204
  },
122
- ':hover': {
123
- background: theme$1.backgroundInteractions.neutralHover,
124
- cursor: enableClickableRow ? 'pointer' : undefined
125
- }
126
- }, rowClassName ? rowClassName(row, row.index) : undefined),
127
- onClick: function onClick() {
128
- return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
129
- },
130
- "data-is-selected": row.getIsSelected(),
131
- "data-is-expanded": row.getIsExpanded(),
132
- children: row.getVisibleCells().map(function (cell) {
205
+ size: "xsmall"
206
+ })
207
+ })
208
+ })]
209
+ }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
210
+ as: "tfoot",
211
+ css: react.css(footerClassName),
212
+ children: footerGroups.map(function (footerGroup) {
213
+ return jsxRuntime.jsx(box.Box, {
214
+ as: "tr",
215
+ children: footerGroup.headers.map(function (footer) {
133
216
  return jsxRuntime.jsx(box.Box, {
134
217
  as: "td",
135
- padding: "large",
136
- css: react.css({
137
- borderBottom: '1px',
138
- borderBottomStyle: 'solid',
139
- borderColor: theme$1.border.color.standard,
140
- verticalAlign: 'middle',
141
- textAlign: 'left'
142
- }),
143
- children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
144
- }, cell.id);
218
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
219
+ }, footer.id);
145
220
  })
146
- }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
147
- }, row.id);
148
- }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
149
- as: "tr"
150
- // @ts-ignore
151
- ,
152
- css: react.css({
153
- columnSpan: 'all'
154
- }),
155
- onChange: onBottomSpinnerShown,
156
- children: jsxRuntime.jsx(box.Box, {
157
- as: "td",
158
- padding: "large",
159
- colSpan: headerGroups.map(function (hg) {
160
- return hg.headers.length;
161
- }).reduce(function (sum, len) {
162
- return len + 1;
163
- }, 0),
164
- css: react.css({
165
- textAlign: 'center',
166
- verticalAlign: 'middle'
167
- }),
168
- children: jsxRuntime.jsx(spinner.Spinner, {
169
- data: {
170
- testId: 'data-table-spinner'
171
- },
172
- size: "xsmall"
173
- })
221
+ }, footerGroup.id);
174
222
  })
223
+ }) : null]
224
+ }), isLoading && jsxRuntime.jsxs(box.Box, {
225
+ display: "flex",
226
+ alignItems: "center",
227
+ justifyContent: "center",
228
+ padding: "xlarge",
229
+ gap: "small",
230
+ width: "full",
231
+ children: [jsxRuntime.jsx(text.Text, {
232
+ tone: "muted",
233
+ children: "Loading"
234
+ }), jsxRuntime.jsx(spinner.Spinner, {
235
+ data: {
236
+ testId: 'data-table-loading-spinner'
237
+ },
238
+ tone: "primary"
175
239
  })]
176
- }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
177
- as: "tfoot",
178
- css: react.css(footerClassName),
179
- children: footerGroups.map(function (footerGroup) {
180
- return jsxRuntime.jsx(box.Box, {
181
- as: "tr",
182
- children: footerGroup.headers.map(function (footer) {
183
- return jsxRuntime.jsx(box.Box, {
184
- as: "td",
185
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
186
- }, footer.id);
187
- })
188
- }, footerGroup.id);
189
- })
190
- }) : null]
240
+ }), !isLoading && items.length === 0 && emptyState != null && jsxRuntime.jsx(box.Box, {
241
+ display: "flex",
242
+ justifyContent: "center",
243
+ padding: "xlarge",
244
+ width: "full",
245
+ children: emptyState
246
+ })]
191
247
  }));
192
248
  }
193
249