@spark-web/data-table 5.1.0-rc.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +36 -10
  2. package/dist/declarations/src/data-table.d.ts +3 -2
  3. package/dist/spark-web-data-table.cjs.dev.js +18 -4
  4. package/dist/spark-web-data-table.cjs.prod.js +18 -4
  5. package/dist/spark-web-data-table.esm.js +18 -4
  6. package/package.json +12 -11
package/CHANGELOG.md CHANGED
@@ -1,21 +1,47 @@
1
1
  # @spark-web/data-table
2
2
 
3
- ## 5.1.0-rc.0
3
+ ## 5.1.0
4
4
 
5
5
  ### Minor Changes
6
6
 
7
- - update react version and other packages
7
+ - [#732](https://github.com/brighte-labs/spark-web/pull/732)
8
+ [`330f514`](https://github.com/brighte-labs/spark-web/commit/330f51443f1a6bb65945d32437165a3af87045d5)
9
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - added
10
+ sorting functionality
11
+
12
+ ## 5.0.3
8
13
 
9
14
  ### Patch Changes
10
15
 
11
- - Updated dependencies []:
12
- - @spark-web/checkbox@5.1.0-rc.0
13
- - @spark-web/spinner@5.1.0-rc.0
14
- - @spark-web/theme@5.12.0-rc.0
15
- - @spark-web/utils@5.1.0-rc.0
16
- - @spark-web/a11y@5.3.0-rc.0
17
- - @spark-web/text@5.3.0-rc.0
18
- - @spark-web/box@6.0.0-rc.0
16
+ - [#731](https://github.com/brighte-labs/spark-web/pull/731)
17
+ [`3ce0a81`](https://github.com/brighte-labs/spark-web/commit/3ce0a816c62e7897112d7045d3a8c333ce497d21)
18
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - make
19
+ column size configurable
20
+
21
+ ## 5.0.2
22
+
23
+ ### Patch Changes
24
+
25
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
26
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
27
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
28
+
29
+ - Updated dependencies
30
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
31
+ - @spark-web/box@5.2.2
32
+ - @spark-web/checkbox@5.0.4
33
+ - @spark-web/text@5.2.3
34
+ - @spark-web/theme@5.12.1
35
+
36
+ ## 5.0.1
37
+
38
+ ### Patch Changes
39
+
40
+ - Updated dependencies
41
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
42
+ - @spark-web/theme@5.12.0
43
+ - @spark-web/checkbox@5.0.3
44
+ - @spark-web/text@5.2.2
19
45
 
20
46
  ## 5.0.0
21
47
 
package/dist/declarations/src/data-table.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { SerializedStyles } from '@emotion/react';
2
2
  import { type DataAttributeMap } from '@spark-web/utils/internal';
3
- import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, Table, TableOptions } from '@tanstack/react-table';
3
+ import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, SortingState, Table, TableOptions } from '@tanstack/react-table';
4
4
  import { createColumnHelper, flexRender } from '@tanstack/react-table';
5
5
  import type { ReactElement } from 'react';
6
6
  /**
@@ -9,7 +9,7 @@ import type { ReactElement } from 'react';
9
9
  * @see https://spark.brighte.com.au/package/data-table
10
10
  */
11
11
  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;
12
- declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
12
+ declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId' | 'enableSorting' | 'manualSorting'>;
13
13
  declare type DataTableProps<T> = TableSubsetOptions<T> & {
14
14
  className?: SerializedStyles;
15
15
  headerClassName?: SerializedStyles;
@@ -24,6 +24,7 @@ declare type DataTableProps<T> = TableSubsetOptions<T> & {
24
24
  onBottomSpinnerShown?: (isInView: boolean) => void;
25
25
  onRowClick?: (row: Row<T>) => void;
26
26
  renderRow?: (table: Table<T>) => ReactElement<T>;
27
+ onSortingChange?: OnChangeFn<SortingState>;
27
28
  };
28
29
  export { createColumnHelper, DataTable, flexRender };
29
30
  export type { ColumnDef, ColumnHelper, DataTableProps, Row as DataTableRow, ExpandedState, OnChangeFn, };
package/dist/spark-web-data-table.cjs.dev.js CHANGED
@@ -6,6 +6,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
7
  var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
+ var icon = require('@spark-web/icon');
9
10
  var spinner = require('@spark-web/spinner');
10
11
  var theme = require('@spark-web/theme');
11
12
  var internal = require('@spark-web/utils/internal');
@@ -20,6 +21,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
20
21
 
21
22
  var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
22
23
  function DataTable(_ref) {
24
+ var _tableOptions$enableS, _tableOptions$manualS;
23
25
  var data = _ref.data,
24
26
  items = _ref.items,
25
27
  className = _ref.className,
@@ -53,7 +55,9 @@ function DataTable(_ref) {
53
55
  columns: columns
54
56
  }, tableOptions), {}, {
55
57
  getCoreRowModel: reactTable.getCoreRowModel(),
56
- getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined
58
+ getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined,
59
+ enableSorting: (_tableOptions$enableS = tableOptions.enableSorting) !== null && _tableOptions$enableS !== void 0 ? _tableOptions$enableS : false,
60
+ manualSorting: (_tableOptions$manualS = tableOptions.manualSorting) !== null && _tableOptions$manualS !== void 0 ? _tableOptions$manualS : false
57
61
  }));
58
62
  var headerGroups = table.getHeaderGroups();
59
63
  var footerGroups = table.getFooterGroups();
@@ -77,7 +81,8 @@ function DataTable(_ref) {
77
81
  return jsxRuntime.jsx(box.Box, {
78
82
  as: "tr",
79
83
  children: headerGroup.headers.map(function (header) {
80
- return jsxRuntime.jsx(box.Box, {
84
+ var _asc$desc;
85
+ return jsxRuntime.jsxs(box.Box, {
81
86
  as: "th",
82
87
  color: theme$1.color.foreground.muted,
83
88
  padding: "medium",
@@ -85,9 +90,18 @@ function DataTable(_ref) {
85
90
  fontFamily: theme$1.typography.fontFamily.sans.name,
86
91
  fontWeight: theme$1.typography.fontWeight.semibold,
87
92
  textAlign: 'left',
88
- textTransform: 'uppercase'
93
+ textTransform: 'uppercase',
94
+ width: "".concat(header.getSize(), "px")
89
95
  }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
96
+ onClick: header.column.getToggleSortingHandler(),
97
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
98
+ asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
99
+ size: "xsmall"
100
+ }),
101
+ desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
102
+ size: "xsmall"
103
+ })
104
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
91
105
  }, header.id);
92
106
  })
93
107
  }, headerGroup.id);
package/dist/spark-web-data-table.cjs.prod.js CHANGED
@@ -6,6 +6,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
7
  var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
+ var icon = require('@spark-web/icon');
9
10
  var spinner = require('@spark-web/spinner');
10
11
  var theme = require('@spark-web/theme');
11
12
  var internal = require('@spark-web/utils/internal');
@@ -20,6 +21,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
20
21
 
21
22
  var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
22
23
  function DataTable(_ref) {
24
+ var _tableOptions$enableS, _tableOptions$manualS;
23
25
  var data = _ref.data,
24
26
  items = _ref.items,
25
27
  className = _ref.className,
@@ -53,7 +55,9 @@ function DataTable(_ref) {
53
55
  columns: columns
54
56
  }, tableOptions), {}, {
55
57
  getCoreRowModel: reactTable.getCoreRowModel(),
56
- getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined
58
+ getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined,
59
+ enableSorting: (_tableOptions$enableS = tableOptions.enableSorting) !== null && _tableOptions$enableS !== void 0 ? _tableOptions$enableS : false,
60
+ manualSorting: (_tableOptions$manualS = tableOptions.manualSorting) !== null && _tableOptions$manualS !== void 0 ? _tableOptions$manualS : false
57
61
  }));
58
62
  var headerGroups = table.getHeaderGroups();
59
63
  var footerGroups = table.getFooterGroups();
@@ -77,7 +81,8 @@ function DataTable(_ref) {
77
81
  return jsxRuntime.jsx(box.Box, {
78
82
  as: "tr",
79
83
  children: headerGroup.headers.map(function (header) {
80
- return jsxRuntime.jsx(box.Box, {
84
+ var _asc$desc;
85
+ return jsxRuntime.jsxs(box.Box, {
81
86
  as: "th",
82
87
  color: theme$1.color.foreground.muted,
83
88
  padding: "medium",
@@ -85,9 +90,18 @@ function DataTable(_ref) {
85
90
  fontFamily: theme$1.typography.fontFamily.sans.name,
86
91
  fontWeight: theme$1.typography.fontWeight.semibold,
87
92
  textAlign: 'left',
88
- textTransform: 'uppercase'
93
+ textTransform: 'uppercase',
94
+ width: "".concat(header.getSize(), "px")
89
95
  }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
96
+ onClick: header.column.getToggleSortingHandler(),
97
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
98
+ asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
99
+ size: "xsmall"
100
+ }),
101
+ desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
102
+ size: "xsmall"
103
+ })
104
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
91
105
  }, header.id);
92
106
  })
93
107
  }, headerGroup.id);
package/dist/spark-web-data-table.esm.js CHANGED
@@ -2,6 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
3
  import { css } from '@emotion/react';
4
4
  import { Box } from '@spark-web/box';
5
+ import { ChevronUpIcon, ChevronDownIcon } from '@spark-web/icon';
5
6
  import { Spinner } from '@spark-web/spinner';
6
7
  import { useTheme } from '@spark-web/theme';
7
8
  import { buildDataAttributes } from '@spark-web/utils/internal';
@@ -13,6 +14,7 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
13
14
 
14
15
  var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
15
16
  function DataTable(_ref) {
17
+ var _tableOptions$enableS, _tableOptions$manualS;
16
18
  var data = _ref.data,
17
19
  items = _ref.items,
18
20
  className = _ref.className,
@@ -46,7 +48,9 @@ function DataTable(_ref) {
46
48
  columns: columns
47
49
  }, tableOptions), {}, {
48
50
  getCoreRowModel: getCoreRowModel(),
49
- getExpandedRowModel: enableExpanding ? getCoreRowModel() : undefined
51
+ getExpandedRowModel: enableExpanding ? getCoreRowModel() : undefined,
52
+ enableSorting: (_tableOptions$enableS = tableOptions.enableSorting) !== null && _tableOptions$enableS !== void 0 ? _tableOptions$enableS : false,
53
+ manualSorting: (_tableOptions$manualS = tableOptions.manualSorting) !== null && _tableOptions$manualS !== void 0 ? _tableOptions$manualS : false
50
54
  }));
51
55
  var headerGroups = table.getHeaderGroups();
52
56
  var footerGroups = table.getFooterGroups();
@@ -70,7 +74,8 @@ function DataTable(_ref) {
70
74
  return jsx(Box, {
71
75
  as: "tr",
72
76
  children: headerGroup.headers.map(function (header) {
73
- return jsx(Box, {
77
+ var _asc$desc;
78
+ return jsxs(Box, {
74
79
  as: "th",
75
80
  color: theme.color.foreground.muted,
76
81
  padding: "medium",
@@ -78,9 +83,18 @@ function DataTable(_ref) {
78
83
  fontFamily: theme.typography.fontFamily.sans.name,
79
84
  fontWeight: theme.typography.fontWeight.semibold,
80
85
  textAlign: 'left',
81
- textTransform: 'uppercase'
86
+ textTransform: 'uppercase',
87
+ width: "".concat(header.getSize(), "px")
82
88
  }),
83
- children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
89
+ onClick: header.column.getToggleSortingHandler(),
90
+ children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
91
+ asc: jsx(ChevronUpIcon, {
92
+ size: "xsmall"
93
+ }),
94
+ desc: jsx(ChevronDownIcon, {
95
+ size: "xsmall"
96
+ })
97
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
84
98
  }, header.id);
85
99
  })
86
100
  }, headerGroup.id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/data-table",
3
- "version": "5.1.0-rc.0",
3
+ "version": "5.1.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -18,22 +18,23 @@
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.25.0",
20
20
  "@emotion/react": "^11.14.0",
21
- "@spark-web/a11y": "^5.3.0-rc.0",
22
- "@spark-web/box": "^6.0.0-rc.0",
23
- "@spark-web/checkbox": "^5.1.0-rc.0",
24
- "@spark-web/spinner": "^5.1.0-rc.0",
25
- "@spark-web/text": "^5.3.0-rc.0",
26
- "@spark-web/theme": "^5.12.0-rc.0",
27
- "@spark-web/utils": "^5.1.0-rc.0",
21
+ "@spark-web/a11y": "^5.0.0",
22
+ "@spark-web/box": "^5.2.2",
23
+ "@spark-web/checkbox": "^5.0.4",
24
+ "@spark-web/icon": "^5.0.0",
25
+ "@spark-web/spinner": "^5.0.1",
26
+ "@spark-web/text": "^5.2.3",
27
+ "@spark-web/theme": "^5.12.1",
28
+ "@spark-web/utils": "^5.0.0",
28
29
  "@tanstack/react-table": "^8.14.0",
29
30
  "react-intersection-observer": "^9.8.2"
30
31
  },
31
32
  "devDependencies": {
32
- "@types/react": "^19.1.0",
33
- "react": "^19.1.0"
33
+ "@types/react": "^18.2.0",
34
+ "react": "^18.2.0"
34
35
  },
35
36
  "peerDependencies": {
36
- "react": ">=19.1.0"
37
+ "react": ">=17.0.2"
37
38
  },
38
39
  "publishConfig": {
39
40
  "access": "public"