@spark-web/data-table 1.0.0-rc.0 → 1.0.0-rc.10

package/CHANGELOG.md

@@ -1,5 +1,175 @@
 # @spark-web/data-table
 
+## 1.0.0-rc.10
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.10
+  - @spark-web/spinner@2.0.0-rc.10
+  - @spark-web/theme@4.0.0-rc.10
+  - @spark-web/utils@2.0.0-rc.10
+  - @spark-web/a11y@2.0.0-rc.10
+  - @spark-web/text@2.0.0-rc.10
+  - @spark-web/box@2.0.0-rc.10
+
+## 1.0.0-rc.9
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.9
+  - @spark-web/spinner@2.0.0-rc.9
+  - @spark-web/theme@4.0.0-rc.9
+  - @spark-web/utils@2.0.0-rc.9
+  - @spark-web/a11y@2.0.0-rc.9
+  - @spark-web/text@2.0.0-rc.9
+  - @spark-web/box@2.0.0-rc.9
+
+## 1.0.0-rc.8
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.8
+  - @spark-web/spinner@2.0.0-rc.8
+  - @spark-web/theme@4.0.0-rc.8
+  - @spark-web/utils@2.0.0-rc.8
+  - @spark-web/a11y@2.0.0-rc.8
+  - @spark-web/text@2.0.0-rc.8
+  - @spark-web/box@2.0.0-rc.8
+
+## 1.0.0-rc.7
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.7
+  - @spark-web/spinner@2.0.0-rc.7
+  - @spark-web/theme@4.0.0-rc.7
+  - @spark-web/utils@2.0.0-rc.7
+  - @spark-web/a11y@2.0.0-rc.7
+  - @spark-web/text@2.0.0-rc.7
+  - @spark-web/box@2.0.0-rc.7
+
+## 1.0.0-rc.6
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.6
+  - @spark-web/spinner@2.0.0-rc.6
+  - @spark-web/theme@4.0.0-rc.6
+  - @spark-web/utils@2.0.0-rc.6
+  - @spark-web/a11y@2.0.0-rc.6
+  - @spark-web/text@2.0.0-rc.6
+  - @spark-web/box@2.0.0-rc.6
+
+## 1.0.0-rc.5
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.5
+  - @spark-web/spinner@2.0.0-rc.5
+  - @spark-web/theme@4.0.0-rc.5
+  - @spark-web/utils@2.0.0-rc.5
+  - @spark-web/a11y@2.0.0-rc.5
+  - @spark-web/text@2.0.0-rc.5
+  - @spark-web/box@2.0.0-rc.5
+
+## 1.0.0-rc.4
+
+### Major Changes
+
+- bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.4
+  - @spark-web/spinner@2.0.0-rc.4
+  - @spark-web/theme@4.0.0-rc.4
+  - @spark-web/utils@2.0.0-rc.4
+  - @spark-web/a11y@2.0.0-rc.4
+  - @spark-web/text@2.0.0-rc.4
+  - @spark-web/box@2.0.0-rc.4
+
+## 1.0.0-rc.3
+
+### Major Changes
+
+- upgrade package
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.3
+  - @spark-web/spinner@2.0.0-rc.3
+  - @spark-web/theme@4.0.0-rc.3
+  - @spark-web/utils@2.0.0-rc.3
+  - @spark-web/a11y@2.0.0-rc.3
+  - @spark-web/text@2.0.0-rc.3
+  - @spark-web/box@2.0.0-rc.3
+
+## 1.0.0-rc.2
+
+### Major Changes
+
+- add parser
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.2
+  - @spark-web/spinner@2.0.0-rc.2
+  - @spark-web/theme@4.0.0-rc.2
+  - @spark-web/utils@2.0.0-rc.2
+  - @spark-web/a11y@2.0.0-rc.2
+  - @spark-web/text@2.0.0-rc.2
+  - @spark-web/box@2.0.0-rc.2
+
+## 1.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.1
+  - @spark-web/spinner@2.0.0-rc.1
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/a11y@2.0.0-rc.1
+  - @spark-web/text@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
 ## 1.0.0-rc.0
 
 ### Major Changes

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

@@ -0,0 +1,29 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type DataAttributeMap } from '@spark-web/utils/internal';
+import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, 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;
+declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
+declare 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>;
+};
+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

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

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

@@ -0,0 +1,185 @@
+'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 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 DataTable(_ref) {
+  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
+  }));
+  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",
+      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) {
+            return jsxRuntime.jsx(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'
+              }),
+              children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
+            }, 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"]': {
+                background: theme$1.color.background.primaryMuted
+              },
+              ':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) {
+              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);
+            })
+          }), 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

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
-
-// this re-exports the source file
-module.exports = require("../src/index.ts");
-
-unregister();
+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,185 @@
+'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 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 DataTable(_ref) {
+  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
+  }));
+  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",
+      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) {
+            return jsxRuntime.jsx(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'
+              }),
+              children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
+            }, 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"]': {
+                background: theme$1.color.background.primaryMuted
+              },
+              ':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) {
+              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);
+            })
+          }), 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.esm.js

@@ -0,0 +1,170 @@
+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 { Spinner } from '@spark-web/spinner';
+import { useTheme } from '@spark-web/theme';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+export { createColumnHelper, flexRender } from '@tanstack/react-table';
+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"];
+function DataTable(_ref) {
+  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 = useTheme();
+  var enableRowSelection = !!onRowSelectionChange;
+  var table = useReactTable(_objectSpread(_objectSpread({
+    data: items,
+    enableExpanding: enableExpanding,
+    enableMultiRowSelection: enableMultiRowSelection,
+    enableHiding: enableHiding,
+    enableRowSelection: enableRowSelection,
+    onRowSelectionChange: onRowSelectionChange,
+    columns: columns
+  }, tableOptions), {}, {
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: enableExpanding ? getCoreRowModel() : undefined
+  }));
+  var headerGroups = table.getHeaderGroups();
+  var footerGroups = table.getFooterGroups();
+  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) {
+            return jsx(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'
+              }),
+              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+            }, 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({
+              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                background: theme.color.background.primaryMuted
+              },
+              ':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) {
+              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);
+            })
+          }), 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"
+          })
+        })
+      })]
+    }), 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]
+  }));
+}
+
+export { DataTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/data-table",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.10",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,14 +17,14 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@emotion/react": "^11.13.5",
-    "@spark-web/a11y": "^2.0.0-rc.0",
-    "@spark-web/box": "^2.0.0-rc.0",
-    "@spark-web/checkbox": "^2.0.0-rc.0",
-    "@spark-web/spinner": "^2.0.0-rc.0",
-    "@spark-web/text": "^2.0.0-rc.0",
-    "@spark-web/theme": "^4.0.0-rc.0",
-    "@spark-web/utils": "^2.0.0-rc.0",
+    "@emotion/react": "^11.14.0",
+    "@spark-web/a11y": "^2.0.0-rc.10",
+    "@spark-web/box": "^2.0.0-rc.10",
+    "@spark-web/checkbox": "^2.0.0-rc.10",
+    "@spark-web/spinner": "^2.0.0-rc.10",
+    "@spark-web/text": "^2.0.0-rc.10",
+    "@spark-web/theme": "^4.0.0-rc.10",
+    "@spark-web/utils": "^2.0.0-rc.10",
     "@tanstack/react-table": "^8.14.0",
     "react-intersection-observer": "^9.8.2"
   },