@spark-web/data-table 0.0.0-snapshot-release-20260408010050

package/CLAUDE.md

@@ -0,0 +1,89 @@
+# @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. Unlike `@spark-web/table`, `DataTable` is a single monolithic
+  component. Use `@spark-web/table` when you need composable sub-components
+  without TanStack.
+
+## Component API
+
+`DataTable<T>` accepts:
+
+- `items: Array<T>` — data rows
+- `columns: ColumnDef<T>[]` — TanStack column definitions
+- `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 trigger
+- `renderRow` — full custom tbody replacement
+- `className` / `headerClassName` / `footerClassName` / `rowClassName` — style
+  overrides
+
+## 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` (CSS `:hover`, not a prop)
+
+### Header
+
+- Background: `theme.color.background.surface`
+- Border bottom: `theme.border.color.primaryActive` (via inset box-shadow for
+  sticky support)
+- Text color: `theme.color.foreground.primaryActive`
+- Font weight: `theme.typography.fontWeight.semibold`
+- Sortable header hover: `theme.backgroundInteractions.primaryLowHover`
+
+### Cell
+
+- Padding: `theme.spacing.large` (all sides, via Box `padding` prop)
+- Border bottom: `theme.border.width.standard` solid
+  `theme.border.color.standard`
+
+### Sort icons
+
+Use `SortAscendingIcon` / `SortDescendingIcon` from `@spark-web/icon` at
+`size="xxsmall"` `tone="primaryActive"`. Never `ChevronUpIcon` /
+`ChevronDownIcon` for sort state.
+
+## 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`.
+
+## 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 put pagination inside `DataTable` — caller handles it externally

package/README.md

@@ -0,0 +1,76 @@
+---
+title: DataTable
+storybookPath: data-display-data-table
+isExperimentalPackage: true
+---
+
+The **`DataTable`** component presents a list of data in table form.
+
+It uses _`@tanstack/react-table`_ as a dependency to implement data selection
+and filtering capabilities. As such, certain table options are available as
+`DataTable` props. For example, the `items` and `columns` prop are required
+options.
+
+Currently supported features from `@tanstack/react-table` are the following:
+
+1. Row selection
+2. Multi-row selection
+3. Row expansion
+4. Column visibility
+
+However, certain defaults have been set for the component:
+
+1. `enableHiding` is enabled by default;
+2. `enableMultiRowSelection` is disabled by default, meaning row selection
+   defaults to single-row;
+3. `enableRowSelection` is automatically enabled when a callback value is passed
+   in `onRowSelectionChange`.
+4. The `data` property in React Table options is renamed to `items` to align
+   with the rest of Spark Web's usage of `data` as a data attribute.
+
+## Example
+
+```jsx live
+<DataTable
+  items={[
+    {
+      id: 1,
+      name: 'Ken Adams',
+      category: 'Solar System',
+      amount: 3500,
+    },
+  ]}
+  columns={[
+    {
+      id: 'id',
+      accessorKey: 'id',
+      header: 'ID',
+      cell: info => <Text size="small">{info.renderValue()}</Text>,
+    },
+    {
+      id: 'name',
+      accessorKey: 'name',
+      header: 'Name',
+      cell: info => <Text size="small">{info.renderValue()}</Text>,
+    },
+    {
+      id: 'category',
+      accessorKey: 'category',
+      header: 'Category',
+      cell: info => <Text size="small">{info.renderValue()}</Text>,
+    },
+    {
+      id: 'amount',
+      accessorKey: 'amount',
+      header: 'Amount',
+      cell: info => <Text size="small">{info.renderValue()}</Text>,
+    },
+  ]}
+/>
+```
+
+## Props
+
+### DataTable
+
+<PropsTable displayName="DataTable" />

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

@@ -0,0 +1,30 @@
+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';
+/**
+ * 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;
+type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId' | 'enableSorting' | 'manualSorting'>;
+type DataTableProps<T> = TableSubsetOptions<T> & {
+    className?: SerializedStyles;
+    headerClassName?: SerializedStyles;
+    footerClassName?: SerializedStyles;
+    rowClassName?: (row: Row<T>, index: number) => SerializedStyles;
+    /** Map of data attributes. */
+    data?: DataAttributeMap;
+    items: Array<T>;
+    enableClickableRow?: boolean;
+    showBottomSpinner?: boolean;
+    expandedRowComponent?: (row: Row<T>, table?: Table<T>) => ReactElement<T>;
+    onBottomSpinnerShown?: (isInView: boolean) => void;
+    onRowClick?: (row: Row<T>) => void;
+    renderRow?: (table: Table<T>) => ReactElement<T>;
+    onSortingChange?: OnChangeFn<SortingState>;
+};
+export { createColumnHelper, DataTable, flexRender };
+export type { ColumnDef, ColumnHelper, DataTableProps, Row as DataTableRow, ExpandedState, OnChangeFn, };

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { createColumnHelper, DataTable, flexRender } from "./data-table.js";
+export type { ColumnDef, ColumnHelper, DataTableProps, DataTableRow, ExpandedState, OnChangeFn, } from "./data-table.js";

package/dist/spark-web-data-table.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWRhdGEtdGFibGUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

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

@@ -0,0 +1,226 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@emotion/react');
+var box = require('@spark-web/box');
+var icon = require('@spark-web/icon');
+var spinner = require('@spark-web/spinner');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var reactIntersectionObserver = require('react-intersection-observer');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+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"];
+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,
+    items = _ref.items,
+    className = _ref.className,
+    columns = _ref.columns,
+    _ref$enableExpanding = _ref.enableExpanding,
+    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
+    _ref$enableHiding = _ref.enableHiding,
+    enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
+    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
+    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
+    enableClickableRow = _ref.enableClickableRow,
+    headerClassName = _ref.headerClassName,
+    footerClassName = _ref.footerClassName,
+    showSpinner = _ref.showBottomSpinner,
+    rowClassName = _ref.rowClassName,
+    expandedRowComponent = _ref.expandedRowComponent,
+    onBottomSpinnerShown = _ref.onBottomSpinnerShown,
+    onRowClick = _ref.onRowClick,
+    onRowSelectionChange = _ref.onRowSelectionChange,
+    renderRow = _ref.renderRow,
+    tableOptions = _objectWithoutProperties(_ref, _excluded);
+  var theme$1 = theme.useTheme();
+  var enableRowSelection = !!onRowSelectionChange;
+  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
+    data: items,
+    enableExpanding: enableExpanding,
+    enableMultiRowSelection: enableMultiRowSelection,
+    enableHiding: enableHiding,
+    enableRowSelection: enableRowSelection,
+    onRowSelectionChange: onRowSelectionChange,
+    columns: columns
+  }, tableOptions), {}, {
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined,
+    enableSorting: (_tableOptions$enableS = tableOptions.enableSorting) !== null && _tableOptions$enableS !== void 0 ? _tableOptions$enableS : false,
+    manualSorting: (_tableOptions$manualS = tableOptions.manualSorting) !== null && _tableOptions$manualS !== void 0 ? _tableOptions$manualS : false
+  }));
+  var headerGroups = table.getHeaderGroups();
+  var footerGroups = table.getFooterGroups();
+  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",
+      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({
+              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                backgroundColor: theme$1.color.background.primarySoft
+              },
+              ':hover': {
+                backgroundColor: theme$1.color.background.inputPressed,
+                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) {
+              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({
+            textAlign: 'center',
+            verticalAlign: 'middle'
+          }),
+          children: jsxRuntime.jsx(spinner.Spinner, {
+            data: {
+              testId: 'data-table-spinner'
+            },
+            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",
+              children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
+            }, footer.id);
+          })
+        }, footerGroup.id);
+      })
+    }) : null]
+  }));
+}
+
+Object.defineProperty(exports, 'createColumnHelper', {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});
+Object.defineProperty(exports, 'flexRender', {
+  enumerable: true,
+  get: function () { return reactTable.flexRender; }
+});
+exports.DataTable = DataTable;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-data-table.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-data-table.cjs.dev.js");
+}

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

@@ -0,0 +1,226 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@emotion/react');
+var box = require('@spark-web/box');
+var icon = require('@spark-web/icon');
+var spinner = require('@spark-web/spinner');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var reactIntersectionObserver = require('react-intersection-observer');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+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"];
+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,
+    items = _ref.items,
+    className = _ref.className,
+    columns = _ref.columns,
+    _ref$enableExpanding = _ref.enableExpanding,
+    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
+    _ref$enableHiding = _ref.enableHiding,
+    enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
+    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
+    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
+    enableClickableRow = _ref.enableClickableRow,
+    headerClassName = _ref.headerClassName,
+    footerClassName = _ref.footerClassName,
+    showSpinner = _ref.showBottomSpinner,
+    rowClassName = _ref.rowClassName,
+    expandedRowComponent = _ref.expandedRowComponent,
+    onBottomSpinnerShown = _ref.onBottomSpinnerShown,
+    onRowClick = _ref.onRowClick,
+    onRowSelectionChange = _ref.onRowSelectionChange,
+    renderRow = _ref.renderRow,
+    tableOptions = _objectWithoutProperties(_ref, _excluded);
+  var theme$1 = theme.useTheme();
+  var enableRowSelection = !!onRowSelectionChange;
+  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
+    data: items,
+    enableExpanding: enableExpanding,
+    enableMultiRowSelection: enableMultiRowSelection,
+    enableHiding: enableHiding,
+    enableRowSelection: enableRowSelection,
+    onRowSelectionChange: onRowSelectionChange,
+    columns: columns
+  }, tableOptions), {}, {
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined,
+    enableSorting: (_tableOptions$enableS = tableOptions.enableSorting) !== null && _tableOptions$enableS !== void 0 ? _tableOptions$enableS : false,
+    manualSorting: (_tableOptions$manualS = tableOptions.manualSorting) !== null && _tableOptions$manualS !== void 0 ? _tableOptions$manualS : false
+  }));
+  var headerGroups = table.getHeaderGroups();
+  var footerGroups = table.getFooterGroups();
+  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",
+      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({
+              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                backgroundColor: theme$1.color.background.primarySoft
+              },
+              ':hover': {
+                backgroundColor: theme$1.color.background.inputPressed,
+                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) {
+              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({
+            textAlign: 'center',
+            verticalAlign: 'middle'
+          }),
+          children: jsxRuntime.jsx(spinner.Spinner, {
+            data: {
+              testId: 'data-table-spinner'
+            },
+            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",
+              children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
+            }, footer.id);
+          })
+        }, footerGroup.id);
+      })
+    }) : null]
+  }));
+}
+
+Object.defineProperty(exports, 'createColumnHelper', {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});
+Object.defineProperty(exports, 'flexRender', {
+  enumerable: true,
+  get: function () { return reactTable.flexRender; }
+});
+exports.DataTable = DataTable;