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

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 +45 -10
  2. package/dist/declarations/src/data-table.d.ts +3 -2
  3. package/dist/spark-web-data-table.cjs.dev.js +21 -4
  4. package/dist/spark-web-data-table.cjs.prod.js +21 -4
  5. package/dist/spark-web-data-table.esm.js +21 -4
  6. package/package.json +12 -11
package/CHANGELOG.md CHANGED
@@ -1,21 +1,56 @@
1
1
  # @spark-web/data-table
2
2
 
3
- ## 5.1.0-rc.0
3
+ ## 5.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#737](https://github.com/brighte-labs/spark-web/pull/737)
8
+ [`43060b0`](https://github.com/brighte-labs/spark-web/commit/43060b0d1b9a97dbaff145c327d2426b0240bb1f)
9
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - added
10
+ spacing between sort icon and column header + added default sorting value
11
+
12
+ ## 5.1.0
4
13
 
5
14
  ### Minor Changes
6
15
 
7
- - update react version and other packages
16
+ - [#732](https://github.com/brighte-labs/spark-web/pull/732)
17
+ [`330f514`](https://github.com/brighte-labs/spark-web/commit/330f51443f1a6bb65945d32437165a3af87045d5)
18
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - added
19
+ sorting functionality
20
+
21
+ ## 5.0.3
8
22
 
9
23
  ### Patch Changes
10
24
 
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
25
+ - [#731](https://github.com/brighte-labs/spark-web/pull/731)
26
+ [`3ce0a81`](https://github.com/brighte-labs/spark-web/commit/3ce0a816c62e7897112d7045d3a8c333ce497d21)
27
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - make
28
+ column size configurable
29
+
30
+ ## 5.0.2
31
+
32
+ ### Patch Changes
33
+
34
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
35
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
36
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
37
+
38
+ - Updated dependencies
39
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
40
+ - @spark-web/box@5.2.2
41
+ - @spark-web/checkbox@5.0.4
42
+ - @spark-web/text@5.2.3
43
+ - @spark-web/theme@5.12.1
44
+
45
+ ## 5.0.1
46
+
47
+ ### Patch Changes
48
+
49
+ - Updated dependencies
50
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
51
+ - @spark-web/theme@5.12.0
52
+ - @spark-web/checkbox@5.0.3
53
+ - @spark-web/text@5.2.2
19
54
 
20
55
  ## 5.0.0
21
56
 
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,21 @@ 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"),
95
+ svg: {
96
+ marginLeft: theme$1.spacing.xsmall
97
+ }
89
98
  }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
99
+ onClick: header.column.getToggleSortingHandler(),
100
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
101
+ asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
102
+ size: "xsmall"
103
+ }),
104
+ desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
105
+ size: "xsmall"
106
+ })
107
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
91
108
  }, header.id);
92
109
  })
93
110
  }, 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,21 @@ 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"),
95
+ svg: {
96
+ marginLeft: theme$1.spacing.xsmall
97
+ }
89
98
  }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
99
+ onClick: header.column.getToggleSortingHandler(),
100
+ children: [header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
101
+ asc: jsxRuntime.jsx(icon.ChevronUpIcon, {
102
+ size: "xsmall"
103
+ }),
104
+ desc: jsxRuntime.jsx(icon.ChevronDownIcon, {
105
+ size: "xsmall"
106
+ })
107
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
91
108
  }, header.id);
92
109
  })
93
110
  }, 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,21 @@ 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"),
88
+ svg: {
89
+ marginLeft: theme.spacing.xsmall
90
+ }
82
91
  }),
83
- children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
92
+ onClick: header.column.getToggleSortingHandler(),
93
+ children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), (_asc$desc = {
94
+ asc: jsx(ChevronUpIcon, {
95
+ size: "xsmall"
96
+ }),
97
+ desc: jsx(ChevronDownIcon, {
98
+ size: "xsmall"
99
+ })
100
+ }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
84
101
  }, header.id);
85
102
  })
86
103
  }, 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.1",
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"