@spark-web/data-table 5.2.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @spark-web/data-table
 
+## 5.2.1
+
+### Patch Changes
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **docs:** add CLAUDE.md AI context files to foundation and form packages;
+  patch data-table with manual sort and spinner overlay patterns
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **data-table:** add `isLoading` and `emptyState` props — renders a spinner +
+  "Loading" text or a custom empty node below the table; table now fills its
+  container width by default (`width: 100%`)
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **data-table:** Fix token gaps in CLAUDE.md (header cell padding, font-family,
+  loading/empty state containers, sort icon margin); add Composition section;
+  clarify row hover only applies to clickable rows and must be suppressed when
+  hovering a button inside the row
+
+  **design-system:** Update internal-admin surface rules with MeatballMenu hover
+  suppression rule; fix list-page.md MultiSelect label pattern (gap and text
+  size were contradicting the rules text); update pattern file code examples to
+  match
+
+  **meatball-menu:** Rewrite CLAUDE.md with full structure — What this is NOT,
+  complete token usage table, Composition section, and Do NOTs
+
+  **status-badge:** Rewrite CLAUDE.md with full structure — What this is NOT,
+  complete token usage table with per-tone background mapping, Composition
+  section, and Do NOTs
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **data-table:** align color tokens with @spark-web/table conventions — use
+  `primarySoft` for selected rows, `inputPressed` for hover, `primaryActive` for
+  header text/border; switch sort icons to `SortAscending/DescendingIcon`; add
+  `aria-sort` accessibility attribute; add CLAUDE.md AI context
+- Updated dependencies
+  [[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)]:
+  - @spark-web/box@6.0.1
+  - @spark-web/spinner@5.1.1
+  - @spark-web/text@5.3.1
+
 ## 5.2.0
 
 ### Minor Changes

package/CLAUDE.md

@@ -0,0 +1,217 @@
+# @spark-web/data-table — AI Context
+
+## What this package is
+
+A headless data table built on TanStack React Table v8. One component
+(`DataTable`) accepts column definitions and data, and renders a styled table
+with support for row selection, row expansion, column visibility, sorting, and
+infinite scroll.
+
+## What this package is NOT
+
+- Not responsible for data fetching, sorting logic, filtering, or pagination.
+  The parent owns those — `DataTable` surfaces sort state changes via
+  `onSortingChange`.
+- Not composable. `DataTable` is a single monolithic component — there are no
+  composable sub-component alternatives in this design system.
+
+## Component API
+
+`DataTable<T>` accepts:
+
+- `items: Array<T>` **(required)** — data rows
+- `columns: ColumnDef<T>[]` **(required)** — TanStack column definitions
+- `isLoading?: boolean` — controls the loading state row below the table body
+- `emptyState?: ReactNode` — rendered when `isLoading` is false and `items` is
+  empty
+- `state` — optional controlled state: `rowSelection`, `expanded`,
+  `columnVisibility`, `sorting`
+- `onRowSelectionChange` — enables row selection
+- `onRowClick` / `enableClickableRow` — row click behaviour
+- `onSortingChange` + `enableSorting` + `manualSorting` — sorting
+- `onExpandedChange` + `enableExpanding` + `expandedRowComponent` — expansion
+- `showBottomSpinner` + `onBottomSpinnerShown` — infinite scroll trigge
+- `renderRow` — full custom tbody replacement
+- `className` / `headerClassName` / `footerClassName` / `rowClassName` — style
+  overrides
+
+Always provide `isLoading` and `emptyState` in production usage — omitting them
+leaves the table with no loading indicator or empty state feedback.
+
+## Token usage
+
+All values from `useTheme()` from `@spark-web/theme`. Never use raw hex, px, or
+Tailwind.
+
+### Row states
+
+- Default: no background override (inherits surface)
+- Selected/expanded: `theme.color.background.primarySoft`
+- Hover: `theme.color.background.inputPressed` — applied only when
+  `enableClickableRow` is `true`. NEVER apply row hover to a non-clickable row.
+- Hover suppression: when a row contains a `MeatballMenu`, hovering over the
+  meatball button must NOT trigger the row hover. Implement using CSS `:has()`:
+  ```css
+  ':hover:not(:has(button:hover))': {
+    backgroundcolor: theme.color.background.inputPressed;
+  }
+  ```
+  This ensures the row highlight disappears when the cursor moves over any
+  button within the row, including the meatball trigger.
+
+### Header
+
+- Background: `theme.color.background.surface`
+- Border bottom: `theme.color.background.primaryDark` (via inset box-shadow:
+  `inset 0 -2px 0 0 ${theme.color.background.primaryDark}`)
+- Cell padding: `theme.spacing.medium` (via Box `padding="medium"` on `<th>`)
+- Text color: `theme.color.background.primaryDark`
+- Text transform: `capitalize` (inline CSS on `th`)
+- Sort icon stroke: `theme.color.background.primaryDark` (inline CSS on `svg`)
+- Font family: `theme.typography.fontFamily.sans.name`
+- Font weight: `theme.typography.fontWeight.semibold`
+- Sortable header hover: `theme.backgroundInteractions.primaryLowHover`
+
+### Cell
+
+- Padding: `theme.spacing.large` (all sides, via Box `padding="large"` on
+  `<td>`)
+- Border bottom: `theme.border.width.standard` solid
+  `theme.border.color.standard`
+- Vertical align: `middle` (inline CSS)
+- Text align: `left` (inline CSS)
+
+### Sort icons
+
+Use `SortAscendingIcon` / `SortDescendingIcon` from `@spark-web/icon` at
+`size="xxsmall"` `tone="primaryActive"`. Never `ChevronUpIcon` /
+`ChevronDownIcon` for sort state.
+
+- Icon left margin: `theme.spacing.xsmall` (inline CSS on the `svg` selector)
+
+### Loading state (`isLoading`)
+
+Renders below the table body when `isLoading` is `true`. Does not overlay the
+table — replaces visible data feedback.
+
+- Container padding: `padding="xlarge"` (Box prop)
+- Container gap: `gap="small"` (Box prop)
+- Container alignment: `alignItems="center"`, `justifyContent="center"` (Box
+  props)
+- Text: `<Text tone="muted">Loading</Text>`
+- Spinner: `<Spinner tone="primary" />` — no explicit size; uses Spinner default
+
+### Empty state (`emptyState`)
+
+Renders below the table body when `isLoading` is `false` and `items` is empty.
+
+- Container padding: `padding="xlarge"` (Box prop)
+- Container alignment: `justifyContent="center"` (Box prop)
+- Content: caller-provided `ReactNode` — always pass
+  `<Text tone="muted" size="small">…</Text>`
+
+## Composition
+
+- `Box` from `@spark-web/box` — outer wrapper, `<table>`, `<thead>`, `<tbody>`,
+  `<tfoot>`, `<tr>`, `<th>`, `<td>` elements
+- `SortAscendingIcon` / `SortDescendingIcon` from `@spark-web/icon` — sort state
+  icons in sortable header cells
+- `Spinner` from `@spark-web/spinner` — loading overlay (via `isLoading`) and
+  infinite-scroll bottom spinner (via `showBottomSpinner`)
+- `Text` from `@spark-web/text` — "Loading" label in `isLoading` state
+- `InView` from `react-intersection-observer` — triggers `onBottomSpinnerShown`
+  when the bottom spinner enters the viewport
+
+## Column definitions
+
+Use `createColumnHelper<T>()` from this package for type-safe column defs:
+
+```tsx
+import { createColumnHelper } from '@spark-web/data-table';
+const col = createColumnHelper<MyType>();
+```
+
+Cell renderers receive `info` (`CellContext`) — use `info.getValue()` or
+`info.renderValue()`. Wrap cell content in `<Text size="small">` from
+`@spark-web/text`.
+
+## Manual sort state
+
+When `manualSorting` is `true`, the parent owns sort state and must pass it back
+to `DataTable` via `state.sorting`. Wire it up like this:
+
+```tsx
+const [sorting, setSorting] = useState<SortingState>([]);
+
+<DataTable
+  items={data}
+  columns={columns}
+  enableSorting
+  manualSorting
+  state={{ sorting }}
+  onSortingChange={setSorting}
+/>;
+```
+
+- `enableSorting` — enables the sort UI on column headers
+- `manualSorting` — tells TanStack Table not to sort `items` itself; the parent
+  must re-fetch/re-sort when `onSortingChange` fires
+- `onSortingChange` — receives the new `SortingState`; pass it to your query as
+  an `orderBy` parameter
+- `state.sorting` — controlled sort state, keeps headers in sync with data
+
+To make a specific column sortable, set `enableSorting: true` on its
+`ColumnDef`. To disable sorting on a specific column, set
+`enableSorting: false`.
+
+## Spinner overlay (external loading, before table mounts)
+
+Use `DataTable`'s `isLoading` prop for in-table loading. Only use an external
+Spinner overlay when the table cannot mount yet — e.g. a full-region loading
+state before you have any data at all, or a loading state that covers the entire
+page section including the filter bar:
+
+```tsx
+{
+  isLoading ? (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      gap="small"
+      padding="xlarge"
+    >
+      <Spinner tone="primary" size="xsmall" />
+      <Text tone="muted">Loading</Text>
+    </Box>
+  ) : (
+    <DataTable items={data} columns={columns} isLoading={isFetching} />
+  );
+}
+```
+
+The distinction:
+
+- `isLoading` (initial, no table yet) → external Spinner overlay
+- `isFetching` (refetch while table exists) → pass to `DataTable` `isLoading`
+
+## Do NOTs
+
+- NEVER raw hex values — always use theme color tokens
+- NEVER raw pixel values — always use theme spacing/sizing tokens
+- NEVER Tailwind classes
+- NEVER `ChevronUp/DownIcon` for sort — use `SortAscending/DescendingIcon`
+- NEVER `primaryMuted` for selected rows — use `primarySoft`
+- NEVER `neutralHover` for row hover — use `color.background.inputPressed`
+- NEVER apply row hover to a non-clickable row — only rows with
+  `enableClickableRow` get hover
+- NEVER let row hover fire when the cursor is over a button inside the row — use
+  `:hover:not(:has(button:hover))` to suppress it
+- NEVER put pagination inside `DataTable` — caller handles it externally
+- NEVER render an external `<Spinner>` alongside a mounted `DataTable` — use the
+  `isLoading` prop instead. An external Spinner is only correct before the table
+  can mount (initial page load with no data yet).
+- NEVER pass a string class from `@emotion/css` to `className` or
+  `headerClassName` — these props expect `SerializedStyles` from
+  `@emotion/react`'s `css` tagged template

package/dist/declarations/src/data-table.d.ts

@@ -2,13 +2,13 @@ import type { SerializedStyles } from '@emotion/react';
 import { type DataAttributeMap } from '@spark-web/utils/internal';
 import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, SortingState, Table, TableOptions } from '@tanstack/react-table';
 import { createColumnHelper, flexRender } from '@tanstack/react-table';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 /**
  * DataTable
  *
  * @see https://spark.brighte.com.au/package/data-table
  */
-declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, isLoading, emptyState, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId' | 'enableSorting' | 'manualSorting'>;
 type DataTableProps<T> = TableSubsetOptions<T> & {
     className?: SerializedStyles;
@@ -25,6 +25,10 @@ type DataTableProps<T> = TableSubsetOptions<T> & {
     onRowClick?: (row: Row<T>) => void;
     renderRow?: (table: Table<T>) => ReactElement<T>;
     onSortingChange?: OnChangeFn<SortingState>;
+    /** When true, renders a centered spinner + "Loading" text below the table. */
+    isLoading?: boolean;
+    /** Rendered below the table when not loading and items is empty. */
+    emptyState?: ReactNode;
 };
 export { createColumnHelper, DataTable, flexRender };
 export type { ColumnDef, ColumnHelper, DataTableProps, Row as DataTableRow, ExpandedState, OnChangeFn, };

package/dist/spark-web-data-table.cjs.dev.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.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
+    })]
   }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/data-table",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
   "module": "dist/spark-web-data-table.esm.js",
   "files": [
     "CHANGELOG.md",
+    "CLAUDE.md",
     "dist",
     "README.md"
   ],
@@ -19,11 +20,11 @@
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
     "@spark-web/a11y": "^5.3.0",
-    "@spark-web/box": "^6.0.0",
+    "@spark-web/box": "^6.0.1",
     "@spark-web/checkbox": "^5.1.0",
     "@spark-web/icon": "^5.1.0",
-    "@spark-web/spinner": "^5.1.0",
-    "@spark-web/text": "^5.3.0",
+    "@spark-web/spinner": "^5.1.1",
+    "@spark-web/text": "^5.3.1",
     "@spark-web/theme": "^5.13.0",
     "@spark-web/utils": "^5.1.0",
     "@tanstack/react-table": "^8.14.0",