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

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

@@ -0,0 +1,211 @@
+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 { SortAscendingIcon, SortDescendingIcon } from '@spark-web/icon';
+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 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 = 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,
+    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 jsxs(Box, _objectSpread(_objectSpread({
+    as: "table"
+  }, data ? buildDataAttributes(data) : undefined), {}, {
+    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({
+              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
+                backgroundColor: theme.color.background.primarySoft
+              },
+              ':hover': {
+                backgroundColor: theme.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 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({
+            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

@@ -0,0 +1,43 @@
+{
+  "name": "@spark-web/data-table",
+  "version": "0.0.0-snapshot-release-20260408010050",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/data-table"
+  },
+  "license": "MIT",
+  "main": "dist/spark-web-data-table.cjs.js",
+  "module": "dist/spark-web-data-table.esm.js",
+  "files": [
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.14.0",
+    "@spark-web/a11y": "^5.3.0",
+    "@spark-web/box": "^6.0.0",
+    "@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/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0",
+    "@tanstack/react-table": "^8.14.0",
+    "react-intersection-observer": "^9.8.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}