@spark-web/data-table 5.1.1 → 5.2.1

package/dist/spark-web-data-table.cjs.prod.js

@@ -8,6 +8,7 @@ var react = require('@emotion/react');
 var box = require('@spark-web/box');
 var icon = require('@spark-web/icon');
 var spinner = require('@spark-web/spinner');
+var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
 var internal = require('@spark-web/utils/internal');
 var reactTable = require('@tanstack/react-table');
@@ -19,7 +20,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
+var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow", "isLoading", "emptyState"];
+function getAriaSort(column) {
+  if (!column.getCanSort()) return undefined;
+  if (column.getIsSorted() === 'asc') return 'ascending';
+  if (column.getIsSorted() === 'desc') return 'descending';
+  return 'none';
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * DataTable
+ *
+ * @see https://spark.brighte.com.au/package/data-table
+ */
+
 function DataTable(_ref) {
   var _tableOptions$enableS, _tableOptions$manualS;
   var data = _ref.data,
@@ -42,6 +58,8 @@ function DataTable(_ref) {
     onRowClick = _ref.onRowClick,
     onRowSelectionChange = _ref.onRowSelectionChange,
     renderRow = _ref.renderRow,
+    isLoading = _ref.isLoading,
+    emptyState = _ref.emptyState,
     tableOptions = _objectWithoutProperties(_ref, _excluded);
   var theme$1 = theme.useTheme();
   var enableRowSelection = !!onRowSelectionChange;
@@ -64,130 +82,164 @@ function DataTable(_ref) {
   var defaultOnRowClick = function defaultOnRowClick(row) {
     return row.toggleSelected();
   };
-  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    as: "table"
-  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
-    css: className,
-    children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "thead",
-      background: "neutral",
-      css: react.css({
-        // we use box shadow instead of bottom border
-        // to allow the border to stay in the header on scroll
-        // when the table is sticky
-        boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
-      }, headerClassName),
-      children: headerGroups.map(function (headerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: headerGroup.headers.map(function (header) {
-            var _asc$desc;
-            return jsxRuntime.jsxs(box.Box, {
-              as: "th",
-              color: theme$1.color.foreground.muted,
-              padding: "medium",
-              css: react.css({
-                fontFamily: theme$1.typography.fontFamily.sans.name,
-                fontWeight: theme$1.typography.fontWeight.semibold,
-                textAlign: 'left',
-                textTransform: 'uppercase',
-                width: "".concat(header.getSize(), "px"),
-                svg: {
-                  marginLeft: theme$1.spacing.xsmall
-                }
-              }),
-              onClick: header.column.getToggleSortingHandler(),
-              children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
-                asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
-                  size: "xsmall"
-                }),
-                desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
-                  size: "xsmall"
-                })
-              }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
-            }, header.id);
-          })
-        }, headerGroup.id);
-      })
-    }) : null, jsxRuntime.jsxs(box.Box, {
-      as: "tbody",
-      children: [!renderRow ? table.getRowModel().rows.map(function (row) {
-        return jsxRuntime.jsxs(React__default["default"].Fragment, {
-          children: [jsxRuntime.jsx(box.Box, {
+  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, data ? internal.buildDataAttributes(data) : undefined), {}, {
+    children: [jsxRuntime.jsxs(box.Box, {
+      as: "table",
+      width: "full",
+      css: className,
+      children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
+        as: "thead",
+        css: react.css({
+          backgroundColor: theme$1.color.background.surface,
+          // we use box shadow instead of bottom border
+          // to allow the border to stay in the header on scroll
+          // when the table is sticky
+          boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primaryActive)
+        }, headerClassName),
+        children: headerGroups.map(function (headerGroup) {
+          return jsxRuntime.jsx(box.Box, {
             as: "tr",
+            children: headerGroup.headers.map(function (header) {
+              var _asc$desc;
+              return jsxRuntime.jsxs(box.Box, {
+                as: "th",
+                padding: "medium",
+                css: react.css(_objectSpread(_objectSpread({
+                  color: theme$1.color.foreground.primaryActive,
+                  fontFamily: theme$1.typography.fontFamily.sans.name,
+                  fontWeight: theme$1.typography.fontWeight.semibold,
+                  textAlign: 'left',
+                  width: "".concat(header.getSize(), "px"),
+                  cursor: header.column.getCanSort() ? 'pointer' : undefined,
+                  userSelect: header.column.getCanSort() ? 'none' : undefined
+                }, header.column.getCanSort() ? {
+                  '&:hover': {
+                    backgroundColor: theme$1.backgroundInteractions.primaryLowHover
+                  }
+                } : {}), {}, {
+                  svg: {
+                    marginLeft: theme$1.spacing.xsmall
+                  }
+                })),
+                onClick: header.column.getToggleSortingHandler(),
+                "aria-sort": getAriaSort(header.column),
+                children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
+                  asc: jsxRuntime.jsx(icon.SortAscendingIcon, {
+                    size: "xxsmall",
+                    tone: "primaryActive"
+                  }),
+                  desc: jsxRuntime.jsx(icon.SortDescendingIcon, {
+                    size: "xxsmall",
+                    tone: "primaryActive"
+                  })
+                }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
+              }, header.id);
+            })
+          }, headerGroup.id);
+        })
+      }) : null, jsxRuntime.jsxs(box.Box, {
+        as: "tbody",
+        children: [!renderRow ? table.getRowModel().rows.map(function (row) {
+          return jsxRuntime.jsxs(React__default["default"].Fragment, {
+            children: [jsxRuntime.jsx(box.Box, {
+              as: "tr",
+              css: react.css(_objectSpread({
+                '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                  backgroundColor: theme$1.color.background.primarySoft
+                }
+              }, enableClickableRow ? {
+                ':hover:not(:has(button:hover))': {
+                  backgroundColor: theme$1.color.background.inputPressed,
+                  cursor: 'pointer'
+                }
+              } : {}), rowClassName ? rowClassName(row, row.index) : undefined),
+              onClick: function onClick() {
+                return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
+              },
+              "data-is-selected": row.getIsSelected(),
+              "data-is-expanded": row.getIsExpanded(),
+              children: row.getVisibleCells().map(function (cell) {
+                return jsxRuntime.jsx(box.Box, {
+                  as: "td",
+                  padding: "large",
+                  css: react.css({
+                    borderBottomWidth: theme$1.border.width.standard,
+                    borderBottomStyle: 'solid',
+                    borderColor: theme$1.border.color.standard,
+                    verticalAlign: 'middle',
+                    textAlign: 'left'
+                  }),
+                  children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                }, cell.id);
+              })
+            }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
+          }, row.id);
+        }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
+          as: "tr"
+          // @ts-ignore
+          ,
+          css: react.css({
+            columnSpan: 'all'
+          }),
+          onChange: onBottomSpinnerShown,
+          children: jsxRuntime.jsx(box.Box, {
+            as: "td",
+            padding: "large",
+            colSpan: headerGroups.map(function (hg) {
+              return hg.headers.length;
+            }).reduce(function (sum, len) {
+              return len + 1;
+            }, 0),
             css: react.css({
-              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
-                background: theme$1.color.background.primaryMuted
+              textAlign: 'center',
+              verticalAlign: 'middle'
+            }),
+            children: jsxRuntime.jsx(spinner.Spinner, {
+              data: {
+                testId: 'data-table-spinner'
               },
-              ':hover': {
-                background: theme$1.backgroundInteractions.neutralHover,
-                cursor: enableClickableRow ? 'pointer' : undefined
-              }
-            }, rowClassName ? rowClassName(row, row.index) : undefined),
-            onClick: function onClick() {
-              return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
-            },
-            "data-is-selected": row.getIsSelected(),
-            "data-is-expanded": row.getIsExpanded(),
-            children: row.getVisibleCells().map(function (cell) {
+              size: "xsmall"
+            })
+          })
+        })]
+      }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
+        as: "tfoot",
+        css: react.css(footerClassName),
+        children: footerGroups.map(function (footerGroup) {
+          return jsxRuntime.jsx(box.Box, {
+            as: "tr",
+            children: footerGroup.headers.map(function (footer) {
               return jsxRuntime.jsx(box.Box, {
                 as: "td",
-                padding: "large",
-                css: react.css({
-                  borderBottom: '1px',
-                  borderBottomStyle: 'solid',
-                  borderColor: theme$1.border.color.standard,
-                  verticalAlign: 'middle',
-                  textAlign: 'left'
-                }),
-                children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
+                children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
+              }, footer.id);
             })
-          }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
-        }, row.id);
-      }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
-        as: "tr"
-        // @ts-ignore
-        ,
-        css: react.css({
-          columnSpan: 'all'
-        }),
-        onChange: onBottomSpinnerShown,
-        children: jsxRuntime.jsx(box.Box, {
-          as: "td",
-          padding: "large",
-          colSpan: headerGroups.map(function (hg) {
-            return hg.headers.length;
-          }).reduce(function (sum, len) {
-            return len + 1;
-          }, 0),
-          css: react.css({
-            textAlign: 'center',
-            verticalAlign: 'middle'
-          }),
-          children: jsxRuntime.jsx(spinner.Spinner, {
-            data: {
-              testId: 'data-table-spinner'
-            },
-            size: "xsmall"
-          })
+          }, footerGroup.id);
         })
+      }) : null]
+    }), isLoading && jsxRuntime.jsxs(box.Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "xlarge",
+      gap: "small",
+      width: "full",
+      children: [jsxRuntime.jsx(text.Text, {
+        tone: "muted",
+        children: "Loading"
+      }), jsxRuntime.jsx(spinner.Spinner, {
+        data: {
+          testId: 'data-table-loading-spinner'
+        },
+        tone: "primary"
       })]
-    }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "tfoot",
-      css: react.css(footerClassName),
-      children: footerGroups.map(function (footerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: footerGroup.headers.map(function (footer) {
-            return jsxRuntime.jsx(box.Box, {
-              as: "td",
-              children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
-            }, footer.id);
-          })
-        }, footerGroup.id);
-      })
-    }) : null]
+    }), !isLoading && items.length === 0 && emptyState != null && jsxRuntime.jsx(box.Box, {
+      display: "flex",
+      justifyContent: "center",
+      padding: "xlarge",
+      width: "full",
+      children: emptyState
+    })]
   }));
 }
 

package/dist/spark-web-data-table.esm.js

@@ -2,8 +2,9 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { css } from '@emotion/react';
 import { Box } from '@spark-web/box';
-import { ChevronUpIcon, ChevronDownIcon } from '@spark-web/icon';
+import { SortAscendingIcon, SortDescendingIcon } from '@spark-web/icon';
 import { Spinner } from '@spark-web/spinner';
+import { Text } from '@spark-web/text';
 import { useTheme } from '@spark-web/theme';
 import { buildDataAttributes } from '@spark-web/utils/internal';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -12,7 +13,22 @@ import React from 'react';
 import { InView } from 'react-intersection-observer';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
+var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow", "isLoading", "emptyState"];
+function getAriaSort(column) {
+  if (!column.getCanSort()) return undefined;
+  if (column.getIsSorted() === 'asc') return 'ascending';
+  if (column.getIsSorted() === 'desc') return 'descending';
+  return 'none';
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * DataTable
+ *
+ * @see https://spark.brighte.com.au/package/data-table
+ */
+
 function DataTable(_ref) {
   var _tableOptions$enableS, _tableOptions$manualS;
   var data = _ref.data,
@@ -35,6 +51,8 @@ function DataTable(_ref) {
     onRowClick = _ref.onRowClick,
     onRowSelectionChange = _ref.onRowSelectionChange,
     renderRow = _ref.renderRow,
+    isLoading = _ref.isLoading,
+    emptyState = _ref.emptyState,
     tableOptions = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var enableRowSelection = !!onRowSelectionChange;
@@ -57,130 +75,164 @@ function DataTable(_ref) {
   var defaultOnRowClick = function defaultOnRowClick(row) {
     return row.toggleSelected();
   };
-  return jsxs(Box, _objectSpread(_objectSpread({
-    as: "table"
-  }, data ? buildDataAttributes(data) : undefined), {}, {
-    css: className,
-    children: [headerGroups.length > 0 ? jsx(Box, {
-      as: "thead",
-      background: "neutral",
-      css: css({
-        // we use box shadow instead of bottom border
-        // to allow the border to stay in the header on scroll
-        // when the table is sticky
-        boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
-      }, headerClassName),
-      children: headerGroups.map(function (headerGroup) {
-        return jsx(Box, {
-          as: "tr",
-          children: headerGroup.headers.map(function (header) {
-            var _asc$desc;
-            return jsxs(Box, {
-              as: "th",
-              color: theme.color.foreground.muted,
-              padding: "medium",
-              css: css({
-                fontFamily: theme.typography.fontFamily.sans.name,
-                fontWeight: theme.typography.fontWeight.semibold,
-                textAlign: 'left',
-                textTransform: 'uppercase',
-                width: "".concat(header.getSize(), "px"),
-                svg: {
-                  marginLeft: theme.spacing.xsmall
-                }
-              }),
-              onClick: header.column.getToggleSortingHandler(),
-              children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
-                asc: jsx(ChevronUpIcon, {
-                  size: "xsmall"
-                }),
-                desc: jsx(ChevronDownIcon, {
-                  size: "xsmall"
-                })
-              }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
-            }, header.id);
-          })
-        }, headerGroup.id);
-      })
-    }) : null, jsxs(Box, {
-      as: "tbody",
-      children: [!renderRow ? table.getRowModel().rows.map(function (row) {
-        return jsxs(React.Fragment, {
-          children: [jsx(Box, {
+  return jsxs(Box, _objectSpread(_objectSpread({}, data ? buildDataAttributes(data) : undefined), {}, {
+    children: [jsxs(Box, {
+      as: "table",
+      width: "full",
+      css: className,
+      children: [headerGroups.length > 0 ? jsx(Box, {
+        as: "thead",
+        css: css({
+          backgroundColor: theme.color.background.surface,
+          // we use box shadow instead of bottom border
+          // to allow the border to stay in the header on scroll
+          // when the table is sticky
+          boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primaryActive)
+        }, headerClassName),
+        children: headerGroups.map(function (headerGroup) {
+          return jsx(Box, {
             as: "tr",
+            children: headerGroup.headers.map(function (header) {
+              var _asc$desc;
+              return jsxs(Box, {
+                as: "th",
+                padding: "medium",
+                css: css(_objectSpread(_objectSpread({
+                  color: theme.color.foreground.primaryActive,
+                  fontFamily: theme.typography.fontFamily.sans.name,
+                  fontWeight: theme.typography.fontWeight.semibold,
+                  textAlign: 'left',
+                  width: "".concat(header.getSize(), "px"),
+                  cursor: header.column.getCanSort() ? 'pointer' : undefined,
+                  userSelect: header.column.getCanSort() ? 'none' : undefined
+                }, header.column.getCanSort() ? {
+                  '&:hover': {
+                    backgroundColor: theme.backgroundInteractions.primaryLowHover
+                  }
+                } : {}), {}, {
+                  svg: {
+                    marginLeft: theme.spacing.xsmall
+                  }
+                })),
+                onClick: header.column.getToggleSortingHandler(),
+                "aria-sort": getAriaSort(header.column),
+                children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
+                  asc: jsx(SortAscendingIcon, {
+                    size: "xxsmall",
+                    tone: "primaryActive"
+                  }),
+                  desc: jsx(SortDescendingIcon, {
+                    size: "xxsmall",
+                    tone: "primaryActive"
+                  })
+                }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
+              }, header.id);
+            })
+          }, headerGroup.id);
+        })
+      }) : null, jsxs(Box, {
+        as: "tbody",
+        children: [!renderRow ? table.getRowModel().rows.map(function (row) {
+          return jsxs(React.Fragment, {
+            children: [jsx(Box, {
+              as: "tr",
+              css: css(_objectSpread({
+                '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                  backgroundColor: theme.color.background.primarySoft
+                }
+              }, enableClickableRow ? {
+                ':hover:not(:has(button:hover))': {
+                  backgroundColor: theme.color.background.inputPressed,
+                  cursor: 'pointer'
+                }
+              } : {}), rowClassName ? rowClassName(row, row.index) : undefined),
+              onClick: function onClick() {
+                return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
+              },
+              "data-is-selected": row.getIsSelected(),
+              "data-is-expanded": row.getIsExpanded(),
+              children: row.getVisibleCells().map(function (cell) {
+                return jsx(Box, {
+                  as: "td",
+                  padding: "large",
+                  css: css({
+                    borderBottomWidth: theme.border.width.standard,
+                    borderBottomStyle: 'solid',
+                    borderColor: theme.border.color.standard,
+                    verticalAlign: 'middle',
+                    textAlign: 'left'
+                  }),
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                }, cell.id);
+              })
+            }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
+          }, row.id);
+        }) : renderRow(table), showSpinner && jsx(InView, {
+          as: "tr"
+          // @ts-ignore
+          ,
+          css: css({
+            columnSpan: 'all'
+          }),
+          onChange: onBottomSpinnerShown,
+          children: jsx(Box, {
+            as: "td",
+            padding: "large",
+            colSpan: headerGroups.map(function (hg) {
+              return hg.headers.length;
+            }).reduce(function (sum, len) {
+              return len + 1;
+            }, 0),
             css: css({
-              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
-                background: theme.color.background.primaryMuted
+              textAlign: 'center',
+              verticalAlign: 'middle'
+            }),
+            children: jsx(Spinner, {
+              data: {
+                testId: 'data-table-spinner'
               },
-              ':hover': {
-                background: theme.backgroundInteractions.neutralHover,
-                cursor: enableClickableRow ? 'pointer' : undefined
-              }
-            }, rowClassName ? rowClassName(row, row.index) : undefined),
-            onClick: function onClick() {
-              return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
-            },
-            "data-is-selected": row.getIsSelected(),
-            "data-is-expanded": row.getIsExpanded(),
-            children: row.getVisibleCells().map(function (cell) {
+              size: "xsmall"
+            })
+          })
+        })]
+      }), footerGroups.length > 0 ? jsx(Box, {
+        as: "tfoot",
+        css: css(footerClassName),
+        children: footerGroups.map(function (footerGroup) {
+          return jsx(Box, {
+            as: "tr",
+            children: footerGroup.headers.map(function (footer) {
               return jsx(Box, {
                 as: "td",
-                padding: "large",
-                css: css({
-                  borderBottom: '1px',
-                  borderBottomStyle: 'solid',
-                  borderColor: theme.border.color.standard,
-                  verticalAlign: 'middle',
-                  textAlign: 'left'
-                }),
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
+                children: flexRender(footer.column.columnDef.footer, footer.getContext())
+              }, footer.id);
             })
-          }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
-        }, row.id);
-      }) : renderRow(table), showSpinner && jsx(InView, {
-        as: "tr"
-        // @ts-ignore
-        ,
-        css: css({
-          columnSpan: 'all'
-        }),
-        onChange: onBottomSpinnerShown,
-        children: jsx(Box, {
-          as: "td",
-          padding: "large",
-          colSpan: headerGroups.map(function (hg) {
-            return hg.headers.length;
-          }).reduce(function (sum, len) {
-            return len + 1;
-          }, 0),
-          css: css({
-            textAlign: 'center',
-            verticalAlign: 'middle'
-          }),
-          children: jsx(Spinner, {
-            data: {
-              testId: 'data-table-spinner'
-            },
-            size: "xsmall"
-          })
+          }, footerGroup.id);
         })
+      }) : null]
+    }), isLoading && jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "xlarge",
+      gap: "small",
+      width: "full",
+      children: [jsx(Text, {
+        tone: "muted",
+        children: "Loading"
+      }), jsx(Spinner, {
+        data: {
+          testId: 'data-table-loading-spinner'
+        },
+        tone: "primary"
       })]
-    }), footerGroups.length > 0 ? jsx(Box, {
-      as: "tfoot",
-      css: css(footerClassName),
-      children: footerGroups.map(function (footerGroup) {
-        return jsx(Box, {
-          as: "tr",
-          children: footerGroup.headers.map(function (footer) {
-            return jsx(Box, {
-              as: "td",
-              children: flexRender(footer.column.columnDef.footer, footer.getContext())
-            }, footer.id);
-          })
-        }, footerGroup.id);
-      })
-    }) : null]
+    }), !isLoading && items.length === 0 && emptyState != null && jsx(Box, {
+      display: "flex",
+      justifyContent: "center",
+      padding: "xlarge",
+      width: "full",
+      children: emptyState
+    })]
   }));
 }