@commercetools-uikit/data-table 19.20.1 → 19.22.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.
package/README.md
CHANGED
|
@@ -59,44 +59,28 @@ export default Example;
|
|
|
59
59
|
|
|
60
60
|
## Properties
|
|
61
61
|
|
|
62
|
-
| Props
|
|
63
|
-
|
|
|
64
|
-
| `rows`
|
|
65
|
-
| `columns`
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `maxWidth` | `union`<br/>Possible values:<br/>`number , string` | | | The max width (a number of pixels or a css value string with units) for which the table
is allowed to grow. If unset, the table will grow horizontally to fill its parent. |
|
|
85
|
-
| `maxHeight` | `union`<br/>Possible values:<br/>`number , string` | | | The max height (a number of pixels or a css value string with units) for which the table
is allowed to grow. If unset, the table will grow vertically to fill its parent and we are able to have a sticky header. |
|
|
86
|
-
| `onRowClick` | `Function`<br/>[See signature.](#signature-onRowClick) | | | A callback function, called when a user clicks on a row. |
|
|
87
|
-
| `isCondensed` | `boolean` | | `true` | Set this to `true` to reduce the paddings of all cells, allowing the table to display
more data in less space. |
|
|
88
|
-
| `onColumnResized` | `Function`<br/>[See signature.](#signature-onColumnResized) | | | A callback function, called when a column has been resized.
Use this callback to get the resized column widths and save them, to be able to restore the
value once the user comes back to the page. |
|
|
89
|
-
| `disableSelfContainment` | `boolean` | | `false` | Set this to `true` to take control of the containment of the table and doing it on a parent element.
This means that the table will grow in size without adding scrollbars on itself,
both vertically and horizontally and, as a consequence, the `maxHeight` and `maxWidth` props are ignored.
If you need to enforce these constraints, you must also apply them on the parent element.
Additionally, the sticky behaviour of the header will get fixed relatively to the closest
parent element with `position: relative`. |
|
|
90
|
-
| `disableHeaderStickiness` | `boolean` | | | Set this to `true` to prevent the header from being sticky.
The header can be sticky only if the table does not have a `maxHeight` set. |
|
|
91
|
-
| `itemRenderer` | `Function`<br/>[See signature.](#signature-itemRenderer) | | `(row, column) => row[column.key]` | The default function used to render the content of each item in a cell.
In case a column has its own `renderItem` render function, it will take precedence over this function. |
|
|
92
|
-
| `wrapHeaderLabels` | `boolean` | | `true` | Set this to `false` to ensure that every column can render their label in one line.
By default the header cell grows in height in case the label does not fit in one line. |
|
|
93
|
-
| `verticalCellAlignment` | `union`<br/>Possible values:<br/>`'top' , 'center' , 'bottom'` | | `'top'` | The default cell vertical alignment of each row (not the table header). |
|
|
94
|
-
| `horizontalCellAlignment` | `union`<br/>Possible values:<br/>`'left' , 'center' , 'right'` | | `'left'` | The default cell horizontal alignment.
In case a column has its own `align` property, it will take precedence over this value. |
|
|
95
|
-
| `sortedBy` | `string` | | | The key of the column for which the data is currently sorted by. |
|
|
96
|
-
| `onSortChange` | `Function`<br/>[See signature.](#signature-onSortChange) | | | A callback function, called when a sortable column's header is clicked.
It's required when the `isSortable` flag is set on at least one column. |
|
|
97
|
-
| `sortDirection` | `union`<br/>Possible values:<br/>`'desc' , 'asc'` | | | The sorting direction. |
|
|
98
|
-
| `renderNestedRow` | `Function`<br/>[See signature.](#signature-renderNestedRow) | | | Custom row renderer for nested rows. |
|
|
99
|
-
| `maxExpandableHeight` | `number` | | | If this is provided, then it should control the height of the expanded rows. In the event where there is more content than the maxHeight,
a scrollbar should make provision for the overflow. |
|
|
62
|
+
| Props | Type | Required | Default | Description |
|
|
63
|
+
| ------------------------- | ---------------------------------------------------------------------- | :------: | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
64
|
+
| `rows` | `Array: Row[]` | ✅ | | The list of data that needs to be rendered in the table. Each object in the list can
have any shape as long as it has a unique identifier.
The data is rendered by using the callback render function `itemRenderer`. |
|
|
65
|
+
| `columns` | `Array: TColumn<Row>[]`<br/>[See signature.](#signature-columns) | | `[]` | Each object requires a unique `key` which should correspond to property key of
the items of `rows` that you want to render under this column, and a `label`
which defines the name shown on the header.
The list of columns to be rendered.Column item shape: [See signature.](#signature-columns). |
|
|
66
|
+
| `customColumns` | `Array: TColumn<Row>[]`<br/>[See signature.](#signature-customColumns) | | | The columns of the nested items to be rendered in the table. Just like the columns, Each object requires a unique `key` which should correspond to property key of
the items of `rows` that you want to render under this column, and a `label`
which defines the name shown on the header.
The list of columns to be rendered. |
|
|
67
|
+
| `footer` | `ReactNode` | | | Element to render within the `tfoot` (footer) element of the table. |
|
|
68
|
+
| `maxWidth` | `union`<br/>Possible values:<br/>`number , string` | | | The max width (a number of pixels or a css value string with units) for which the table
is allowed to grow. If unset, the table will grow horizontally to fill its parent. |
|
|
69
|
+
| `maxHeight` | `union`<br/>Possible values:<br/>`number , string` | | | The max height (a number of pixels or a css value string with units) for which the table
is allowed to grow. If unset, the table will grow vertically to fill its parent and we are able to have a sticky header. |
|
|
70
|
+
| `onRowClick` | `Function`<br/>[See signature.](#signature-onRowClick) | | | A callback function, called when a user clicks on a row. |
|
|
71
|
+
| `isCondensed` | `boolean` | | `true` | Set this to `true` to reduce the paddings of all cells, allowing the table to display
more data in less space. |
|
|
72
|
+
| `onColumnResized` | `Function`<br/>[See signature.](#signature-onColumnResized) | | | A callback function, called when a column has been resized.
Use this callback to get the resized column widths and save them, to be able to restore the
value once the user comes back to the page. |
|
|
73
|
+
| `disableSelfContainment` | `boolean` | | `false` | Set this to `true` to take control of the containment of the table and doing it on a parent element.
This means that the table will grow in size without adding scrollbars on itself,
both vertically and horizontally and, as a consequence, the `maxHeight` and `maxWidth` props are ignored.
If you need to enforce these constraints, you must also apply them on the parent element.
Additionally, the sticky behaviour of the header will get fixed relatively to the closest
parent element with `position: relative`. |
|
|
74
|
+
| `disableHeaderStickiness` | `boolean` | | | Set this to `true` to prevent the header from being sticky.
The header can be sticky only if the table does not have a `maxHeight` set. |
|
|
75
|
+
| `itemRenderer` | `Function`<br/>[See signature.](#signature-itemRenderer) | | `(row, column) => row[column.key]` | The default function used to render the content of each item in a cell.
In case a column has its own `renderItem` render function, it will take precedence over this function. |
|
|
76
|
+
| `wrapHeaderLabels` | `boolean` | | `true` | Set this to `false` to ensure that every column can render their label in one line.
By default the header cell grows in height in case the label does not fit in one line. |
|
|
77
|
+
| `verticalCellAlignment` | `union`<br/>Possible values:<br/>`'top' , 'center' , 'bottom'` | | `'top'` | The default cell vertical alignment of each row (not the table header). |
|
|
78
|
+
| `horizontalCellAlignment` | `union`<br/>Possible values:<br/>`'left' , 'center' , 'right'` | | `'left'` | The default cell horizontal alignment.
In case a column has its own `align` property, it will take precedence over this value. |
|
|
79
|
+
| `sortedBy` | `string` | | | The key of the column for which the data is currently sorted by. |
|
|
80
|
+
| `onSortChange` | `Function`<br/>[See signature.](#signature-onSortChange) | | | A callback function, called when a sortable column's header is clicked.
It's required when the `isSortable` flag is set on at least one column. |
|
|
81
|
+
| `sortDirection` | `union`<br/>Possible values:<br/>`'desc' , 'asc'` | | | The sorting direction. |
|
|
82
|
+
| `renderNestedRow` | `Function`<br/>[See signature.](#signature-renderNestedRow) | | | Custom row renderer for nested rows. |
|
|
83
|
+
| `maxExpandableHeight` | `number` | | | If this is provided, then it should control the height of the expanded rows. In the event where there is more content than the maxHeight,
a scrollbar should make provision for the overflow. |
|
|
100
84
|
|
|
101
85
|
## Signatures
|
|
102
86
|
|
|
@@ -178,7 +162,7 @@ shouldIgnoreRowClick?: boolean;
|
|
|
178
162
|
*/
|
|
179
163
|
shouldIgnoreRowClick?: boolean;
|
|
180
164
|
}
|
|
181
|
-
|
|
165
|
+
```
|
|
182
166
|
|
|
183
167
|
### Signature `customColumns`
|
|
184
168
|
|
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
|
-
var _pt = require('prop-types');
|
|
7
|
-
var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
|
|
8
|
-
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
9
5
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
10
6
|
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
|
|
11
7
|
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
|
|
@@ -14,6 +10,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
14
10
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
15
11
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
16
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
15
|
+
var _pt = require('prop-types');
|
|
16
|
+
var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
|
|
17
|
+
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
17
18
|
var react$1 = require('react');
|
|
18
19
|
var isEqual = require('lodash/isEqual');
|
|
19
20
|
var utils = require('@commercetools-uikit/utils');
|
|
@@ -32,9 +33,6 @@ var dataTableManagerProvider = require('@commercetools-uikit/data-table-manager/
|
|
|
32
33
|
|
|
33
34
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
34
35
|
|
|
35
|
-
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
36
|
-
var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
|
|
37
|
-
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
38
36
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
39
37
|
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
|
|
40
38
|
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
|
|
@@ -43,6 +41,9 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
43
41
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
44
42
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
45
43
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
44
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
45
|
+
var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
|
|
46
|
+
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
46
47
|
var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
|
|
47
48
|
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
|
|
48
49
|
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
|
|
@@ -383,7 +384,7 @@ const TableRow = /*#__PURE__*/_styled__default["default"]("tr", process.env.NODE
|
|
|
383
384
|
label: "TableRow"
|
|
384
385
|
})("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRhdGEtdGFibGUuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpSXNEIiwiZmlsZSI6ImRhdGEtdGFibGUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgUm93RXhwYW5kQ29sbGFwc2VCdXR0b24gfSBmcm9tICcuL2NlbGwuc3R5bGVzJztcbmltcG9ydCB7IEJhc2VIZWFkZXJDZWxsIH0gZnJvbSAnLi9oZWFkZXItY2VsbC5zdHlsZXMnO1xuaW1wb3J0IGNvbnZlcnROdW1lcmljRGltZW5zaW9uVG9QaXhlbFZhbHVlIGZyb20gJy4vdXRpbHMvY29udmVydC1udW1lcmljLWRpbWVuc2lvbi10by1waXhlbC12YWx1ZSc7XG5pbXBvcnQgdHlwZSB7IFREYXRhVGFibGVQcm9wcyB9IGZyb20gJy4vZGF0YS10YWJsZSc7XG5cbnR5cGUgVEdldENsaWNrYWJsZVJvd1N0eWxlUHJvcHMgPSB7XG4gIGlzUm93Q2xpY2thYmxlOiBib29sZWFuO1xufTtcblxuY29uc3QgZ2V0Q2xpY2thYmxlUm93U3R5bGUgPSAocHJvcHM6IFRHZXRDbGlja2FibGVSb3dTdHlsZVByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc1Jvd0NsaWNrYWJsZSkge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAmOmhvdmVyIHRkIHtcbiAgICAgICAgYmFja2dyb3VuZDogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07XG4gICAgICB9XG4gICAgYDtcbiAgfVxuICByZXR1cm4gJyc7XG59O1xuXG50eXBlIFRHZXREaXNhYmxlZFNlbGZDb250YWlubWVudFN0eWxlcyA9IHtcbiAgZGlzYWJsZVNlbGZDb250YWlubWVudDogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzID0gKFxuICBwcm9wczogVEdldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzXG4pID0+IHtcbiAgaWYgKHByb3BzLmRpc2FibGVTZWxmQ29udGFpbm1lbnQpIHtcbiAgICByZXR1cm4gY3NzYFxuICAgICAgcG9zaXRpb246IHVuc2V0O1xuICAgICAgb3ZlcmZsb3cteDogdW5zZXQ7XG4gICAgICBvdmVyZmxvdy15OiB1bnNldDtcbiAgICBgO1xuICB9XG4gIHJldHVybiAnJztcbn07XG5cbnR5cGUgVFRhYmxlQ29udGFpbmVyID0ge1xuICBpc0JlaW5nUmVzaXplZD86IGJvb2xlYW47XG4gIG1heFdpZHRoPzogc3RyaW5nIHwgbnVtYmVyO1xuICBtYXhIZWlnaHQ/OiBzdHJpbmcgfCBudW1iZXI7XG4gIGRpc2FibGVTZWxmQ29udGFpbm1lbnQ6IGJvb2xlYW47XG59O1xuXG5jb25zdCBUYWJsZUNvbnRhaW5lciA9IHN0eWxlZC5kaXY8VFRhYmxlQ29udGFpbmVyPmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB6LWluZGV4OiAwO1xuICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3cxN307XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDk1fTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG5cbiAgJHsocHJvcHMpID0+XG4gICAgLy8gdGhpcyBpcyBuZWVkZWQgaW4gb3JkZXIgdG8gaGF2ZSBhIHN0aWNreSBoZWFkZXJcbiAgICBwcm9wcy5tYXhIZWlnaHQgPyBgb3ZlcmZsb3cteDogYXV0bztgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMubWF4V2lkdGggJiYgIXByb3BzLmRpc2FibGVTZWxmQ29udGFpbm1lbnRcbiAgICAgID8gYG1heC13aWR0aDogJHtjb252ZXJ0TnVtZXJpY0RpbWVuc2lvblRvUGl4ZWxWYWx1ZShwcm9wcy5tYXhXaWR0aCl9O2BcbiAgICAgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuaXNCZWluZ1Jlc2l6ZWQgJiZcbiAgICBgXG4gICAgKiB7XG4gICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICB9YH1cblxuICAke2dldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzfVxuYDtcblxudHlwZSBUVGFibGVHcmlkID0ge1xuICByZXNpemVkVG90YWxXaWR0aD86IG51bWJlcjtcbiAgY29sdW1ucz86IFREYXRhVGFibGVQcm9wc1snY29sdW1ucyddO1xuICBkaXNhYmxlU2VsZkNvbnRhaW5tZW50OiBib29sZWFuO1xuICBtYXhIZWlnaHQ/OiBzdHJpbmcgfCBudW1iZXI7XG59O1xuXG5jb25zdCBUYWJsZUdyaWQgPSBzdHlsZWQudGFibGU8VFRhYmxlR3JpZD5gXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIC8qIHN0eWxlbGludC1kaXNhYmxlIGZ1bmN0aW9uLXdoaXRlc3BhY2UtYWZ0ZXIgKi9cbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy5jb2x1bW5zICYmXG4gICAgcHJvcHMuY29sdW1ucy5tYXAoKGNvbHVtbikgPT4gY29sdW1uLndpZHRoIHx8ICdhdXRvJykuam9pbignICcpfTtcbiAgLyogc3R5bGVsaW50LWVuYWJsZSBmdW5jdGlvbi13aGl0ZXNwYWNlLWFmdGVyICovXG5cbiAgJHsocHJvcHMpID0+XG4gICAgLy8gdGhpcyBpcyBuZWVkZWQgaW4gb3JkZXIgdG8gaGF2ZSBhIHN0aWNreSBoZWFkZXJcbiAgICBwcm9wcy5tYXhIZWlnaHQgPyBgb3ZlcmZsb3cteTogYXV0bztgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMubWF4SGVpZ2h0ICYmICFwcm9wcy5kaXNhYmxlU2VsZkNvbnRhaW5tZW50XG4gICAgICA/IGBtYXgtaGVpZ2h0OiAke2NvbnZlcnROdW1lcmljRGltZW5zaW9uVG9QaXhlbFZhbHVlKHByb3BzLm1heEhlaWdodCl9O2BcbiAgICAgIDogJyd9XG5cbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMucmVzaXplZFRvdGFsV2lkdGggPyBgbWF4LXdpZHRoOiAke3Byb3BzLnJlc2l6ZWRUb3RhbFdpZHRofXB4O2AgOiAnJ31cblxuICAke2dldERpc2FibGVkU2VsZkNvbnRhaW5tZW50U3R5bGVzfVxuYDtcblxuY29uc3QgVGFibGVIZWFkZXIgPSBzdHlsZWQudGhlYWRgXG4gIGRpc3BsYXk6IGNvbnRlbnRzO1xuICAvKiBBZGRzIHJpZ2h0IGJvcmRlciB0aGF0IGRvZXNuJ3QgYWZmZWN0IGNvbHVtbiB3aWR0aFxuICAqICB0byBlYWNoIGhlYWRlciBjZWxsIHdoZW4gdGFibGUgaGVhZGVyIGlzIGhvdmVyZWRcbiAgKi9cbiAgOmhvdmVyIHtcbiAgICAke0Jhc2VIZWFkZXJDZWxsfTpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgdG9wOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBib3R0b206ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgfVxuICAgIC8qIERvZXMgbm90IGRpc3BsYXkgYm9yZGVyIG9uIGZhciByaWdodCAobGFzdCkgaGVhZGVyIGNlbGwgKi9cbiAgICAke0Jhc2VIZWFkZXJDZWxsfTpsYXN0LWNoaWxkOmJlZm9yZSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgVGFibGVCb2R5ID0gc3R5bGVkLnRib2R5YFxuICBkaXNwbGF5OiBjb250ZW50cztcbmA7XG5cbmNvbnN0IFRhYmxlUm93ID0gc3R5bGVkLnRyPFRHZXRDbGlja2FibGVSb3dTdHlsZVByb3BzPmBcbiAgZGlzcGxheTogY29udGVudHM7XG4gICR7Z2V0Q2xpY2thYmxlUm93U3R5bGV9XG4gIDpob3ZlciwgOmZvY3VzLXdpdGhpbiB7XG4gICAgJHtSb3dFeHBhbmRDb2xsYXBzZUJ1dHRvbn0ge1xuICAgICAgb3BhY2l0eTogMTtcbiAgICB9XG4gIH1cbmA7XG5cbmV4cG9ydCB7IFRhYmxlQ29udGFpbmVyLCBUYWJsZUdyaWQsIFRhYmxlSGVhZGVyLCBUYWJsZUJvZHksIFRhYmxlUm93IH07XG4iXX0= */"));
|
|
385
386
|
|
|
386
|
-
const defaultProps
|
|
387
|
+
const defaultProps = {
|
|
387
388
|
horizontalCellAlignment: 'left'
|
|
388
389
|
};
|
|
389
390
|
const Footer = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
|
|
@@ -393,7 +394,7 @@ const Footer = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_
|
|
|
393
394
|
label: "Footer"
|
|
394
395
|
})("box-sizing:border-box;display:block;", getPaddingStyle, " ", getHorizontalAlignmentStyle, " background-color:", designSystem.designTokens.colorSurface, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";width:100%;", props => props.resizedTotalWidth ? `max-width: ${props.resizedTotalWidth}px;` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JrQyIsImZpbGUiOiJmb290ZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyBnZXRQYWRkaW5nU3R5bGUsIGdldEhvcml6b250YWxBbGlnbm1lbnRTdHlsZSB9IGZyb20gJy4vY2VsbC5zdHlsZXMnO1xuXG50eXBlIFRGb290ZXIgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGlzQ29uZGVuc2VkPzogYm9vbGVhbjtcbiAgaG9yaXpvbnRhbENlbGxBbGlnbm1lbnQ/OiAnbGVmdCcgfCAnY2VudGVyJyB8ICdyaWdodCc7XG4gIHJlc2l6ZWRUb3RhbFdpZHRoPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRGb290ZXIsICdob3Jpem9udGFsQ2VsbEFsaWdubWVudCc+ID0ge1xuICBob3Jpem9udGFsQ2VsbEFsaWdubWVudDogJ2xlZnQnLFxufTtcblxuY29uc3QgRm9vdGVyID0gc3R5bGVkLmRpdjxURm9vdGVyPmBcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogYmxvY2s7XG4gICR7Z2V0UGFkZGluZ1N0eWxlfVxuICAke2dldEhvcml6b250YWxBbGlnbm1lbnRTdHlsZX1cbiAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgd2lkdGg6IDEwMCU7XG4gICR7KHByb3BzKSA9PlxuICAgIHByb3BzLnJlc2l6ZWRUb3RhbFdpZHRoID8gYG1heC13aWR0aDogJHtwcm9wcy5yZXNpemVkVG90YWxXaWR0aH1weDtgIDogJyd9XG5gO1xuRm9vdGVyLmRpc3BsYXlOYW1lID0gJ0Zvb3Rlcic7XG5cbkZvb3Rlci5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5leHBvcnQgZGVmYXVsdCBGb290ZXI7XG4iXX0= */"));
|
|
395
396
|
Footer.displayName = 'Footer';
|
|
396
|
-
Footer.defaultProps = defaultProps
|
|
397
|
+
Footer.defaultProps = defaultProps;
|
|
397
398
|
var Footer$1 = Footer;
|
|
398
399
|
|
|
399
400
|
const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
|
|
@@ -430,6 +431,7 @@ const isFixedWidthValue = value => {
|
|
|
430
431
|
};
|
|
431
432
|
var isFixedWidthValue$1 = isFixedWidthValue;
|
|
432
433
|
|
|
434
|
+
const _excluded$3 = ["sortDirection", "disableHeaderStickiness", "horizontalCellAlignment"];
|
|
433
435
|
function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
434
436
|
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
435
437
|
const HeaderCellWrapper = props => {
|
|
@@ -469,21 +471,23 @@ const HeaderCellWrapper = props => {
|
|
|
469
471
|
});
|
|
470
472
|
};
|
|
471
473
|
HeaderCellWrapper.displayName = 'HeaderCellWrapper';
|
|
472
|
-
const
|
|
473
|
-
sortDirection
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
474
|
+
const HeaderCell = _ref => {
|
|
475
|
+
let _ref$sortDirection = _ref.sortDirection,
|
|
476
|
+
sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
|
|
477
|
+
_ref$disableHeaderSti = _ref.disableHeaderStickiness,
|
|
478
|
+
disableHeaderStickiness = _ref$disableHeaderSti === void 0 ? false : _ref$disableHeaderSti,
|
|
479
|
+
_ref$horizontalCellAl = _ref.horizontalCellAlignment,
|
|
480
|
+
horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
|
|
481
|
+
props = _objectWithoutProperties(_ref, _excluded$3);
|
|
478
482
|
let sortableHeaderProps = {};
|
|
479
483
|
let SortingIcon;
|
|
480
484
|
if (props.isSortable) {
|
|
481
485
|
const isActive = props.sortedBy === props.columnKey;
|
|
482
|
-
const nextSortDirection = !isActive ||
|
|
483
|
-
SortingIcon =
|
|
486
|
+
const nextSortDirection = !isActive || sortDirection === 'desc' ? 'asc' : 'desc';
|
|
487
|
+
SortingIcon = sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
|
|
484
488
|
sortableHeaderProps = {
|
|
485
489
|
as: 'button',
|
|
486
|
-
label:
|
|
490
|
+
label: sortDirection,
|
|
487
491
|
onClick: () => props.onClick && props.onClick(props.columnKey, nextSortDirection),
|
|
488
492
|
isActive,
|
|
489
493
|
isSortable: true
|
|
@@ -495,11 +499,11 @@ const HeaderCell = props => {
|
|
|
495
499
|
columnKey: props.columnKey,
|
|
496
500
|
onColumnResized: props.onColumnResized,
|
|
497
501
|
disableResizing: props.disableResizing,
|
|
498
|
-
disableHeaderStickiness:
|
|
502
|
+
disableHeaderStickiness: disableHeaderStickiness,
|
|
499
503
|
children: jsxRuntime.jsxs(HeaderCellInner, _objectSpread$3(_objectSpread$3({
|
|
500
504
|
shouldWrap: props.shouldWrap,
|
|
501
505
|
isCondensed: props.isCondensed,
|
|
502
|
-
horizontalCellAlignment:
|
|
506
|
+
horizontalCellAlignment: horizontalCellAlignment
|
|
503
507
|
}, sortableHeaderProps), {}, {
|
|
504
508
|
children: [jsxRuntime.jsxs(HeaderLabelWrapper, {
|
|
505
509
|
children: [jsxRuntime.jsx(HeaderLabelTextWrapper, {
|
|
@@ -533,21 +537,22 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
533
537
|
sortDirection: _pt__default["default"].oneOf(['desc', 'asc']),
|
|
534
538
|
disableResizing: _pt__default["default"].bool,
|
|
535
539
|
onColumnResized: _pt__default["default"].func,
|
|
536
|
-
disableHeaderStickiness: _pt__default["default"].bool
|
|
537
|
-
horizontalCellAlignment: _pt__default["default"].oneOf(['left', 'center', 'right'])
|
|
540
|
+
disableHeaderStickiness: _pt__default["default"].bool,
|
|
541
|
+
horizontalCellAlignment: _pt__default["default"].oneOf(['left', 'center', 'right']),
|
|
538
542
|
iconComponent: _pt__default["default"].node
|
|
539
543
|
} : {};
|
|
540
544
|
HeaderCell.displayName = 'HeaderCell';
|
|
541
|
-
HeaderCell.defaultProps = defaultProps$3;
|
|
542
545
|
var HeaderCell$1 = HeaderCell;
|
|
543
546
|
|
|
547
|
+
const _excluded$2 = ["isTruncated", "shouldRenderBottomBorder"];
|
|
544
548
|
function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
545
549
|
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
546
|
-
const
|
|
547
|
-
isTruncated
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
550
|
+
const DataCell = _ref => {
|
|
551
|
+
let _ref$isTruncated = _ref.isTruncated,
|
|
552
|
+
isTruncated = _ref$isTruncated === void 0 ? false : _ref$isTruncated,
|
|
553
|
+
_ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
|
|
554
|
+
shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
|
|
555
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
551
556
|
if (props.shouldRenderCollapseButton) {
|
|
552
557
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.handleRowCollapseClick === 'function', 'DataTable: "handleRowCollapseClick" is required when shouldRenderCollapseButton is true.') : void 0;
|
|
553
558
|
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.isRowCollapsed === 'boolean', 'DataTable: "isRowCollapsed" is required when shouldRenderCollapseButton is true.') : void 0;
|
|
@@ -556,14 +561,17 @@ const DataCell = props => {
|
|
|
556
561
|
return jsxRuntime.jsxs(BaseCell, {
|
|
557
562
|
onClick: props.onCellClick,
|
|
558
563
|
shouldIgnoreRowClick: props.shouldIgnoreRowClick,
|
|
559
|
-
shouldClipContent:
|
|
560
|
-
shouldRenderBottomBorder:
|
|
564
|
+
shouldClipContent: isTruncated && !props.shouldRenderResizingIndicator,
|
|
565
|
+
shouldRenderBottomBorder: shouldRenderBottomBorder,
|
|
561
566
|
children: [jsxRuntime.jsx(CellInner, _objectSpread$2(_objectSpread$2({
|
|
562
567
|
isCondensed: props.isCondensed,
|
|
563
|
-
isTruncated:
|
|
568
|
+
isTruncated: isTruncated,
|
|
564
569
|
verticalCellAlignment: props.verticalCellAlignment,
|
|
565
570
|
horizontalCellAlignment: props.horizontalCellAlignment
|
|
566
|
-
}, utils.filterDataAttributes(
|
|
571
|
+
}, utils.filterDataAttributes(_objectSpread$2({
|
|
572
|
+
isTruncated,
|
|
573
|
+
shouldRenderBottomBorder
|
|
574
|
+
}, props))), {}, {
|
|
567
575
|
children: props.children
|
|
568
576
|
})), props.shouldRenderCollapseButton && jsxRuntime.jsx(RowExpandCollapseButton, {
|
|
569
577
|
label: "Expand/Collapse Row",
|
|
@@ -588,32 +596,36 @@ DataCell.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
588
596
|
shouldIgnoreRowClick: _pt__default["default"].bool,
|
|
589
597
|
verticalCellAlignment: _pt__default["default"].oneOf(['top', 'center', 'bottom']),
|
|
590
598
|
horizontalCellAlignment: _pt__default["default"].oneOf(['left', 'center', 'right']),
|
|
591
|
-
shouldRenderBottomBorder: _pt__default["default"].bool
|
|
599
|
+
shouldRenderBottomBorder: _pt__default["default"].bool,
|
|
592
600
|
shouldRenderCollapseButton: _pt__default["default"].bool.isRequired,
|
|
593
601
|
shouldRenderResizingIndicator: _pt__default["default"].bool.isRequired,
|
|
594
602
|
handleRowCollapseClick: _pt__default["default"].func,
|
|
595
603
|
isRowCollapsed: _pt__default["default"].bool
|
|
596
604
|
} : {};
|
|
597
605
|
DataCell.displayName = 'DataCell';
|
|
598
|
-
DataCell.defaultProps = defaultProps$2;
|
|
599
606
|
var DataCell$1 = DataCell;
|
|
600
607
|
|
|
601
|
-
const
|
|
608
|
+
const _excluded$1 = ["isCondensed", "shouldClipContent", "verticalCellAlignment", "horizontalCellAlignment", "shouldRenderBottomBorder", "itemRenderer"];
|
|
609
|
+
const defaultItemRenderer = (row, column, _isRowCollapsed) => {
|
|
602
610
|
// @ts-ignore
|
|
603
611
|
return row[column.key];
|
|
604
612
|
};
|
|
605
|
-
const
|
|
606
|
-
isCondensed: true,
|
|
607
|
-
shouldClipContent: false,
|
|
608
|
-
verticalCellAlignment: 'top',
|
|
609
|
-
horizontalCellAlignment: 'left',
|
|
610
|
-
shouldRenderBottomBorder: true,
|
|
611
|
-
itemRenderer: defaultItemRenderer
|
|
612
|
-
};
|
|
613
|
-
const DataRow = props => {
|
|
613
|
+
const DataRow = _ref => {
|
|
614
614
|
var _context, _context2;
|
|
615
|
-
|
|
616
|
-
|
|
615
|
+
let _ref$isCondensed = _ref.isCondensed,
|
|
616
|
+
isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed;
|
|
617
|
+
_ref.shouldClipContent;
|
|
618
|
+
let _ref$verticalCellAlig = _ref.verticalCellAlignment,
|
|
619
|
+
verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
|
|
620
|
+
_ref$horizontalCellAl = _ref.horizontalCellAlignment,
|
|
621
|
+
horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
|
|
622
|
+
_ref$shouldRenderBott = _ref.shouldRenderBottomBorder,
|
|
623
|
+
shouldRenderBottomBorder = _ref$shouldRenderBott === void 0 ? true : _ref$shouldRenderBott,
|
|
624
|
+
_ref$itemRenderer = _ref.itemRenderer,
|
|
625
|
+
itemRenderer = _ref$itemRenderer === void 0 ? defaultItemRenderer : _ref$itemRenderer,
|
|
626
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
627
|
+
const _ref2 = react$1.useContext(ColumnResizingContext),
|
|
628
|
+
getIsColumnBeingResized = _ref2.getIsColumnBeingResized;
|
|
617
629
|
const rowHasTruncatedColumn = _someInstanceProperty__default["default"](_context = props.columns).call(_context, column => column.isTruncated);
|
|
618
630
|
const _useState = react$1.useState(rowHasTruncatedColumn),
|
|
619
631
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -637,17 +649,17 @@ const DataRow = props => {
|
|
|
637
649
|
children: _mapInstanceProperty__default["default"](_context2 = props.columns).call(_context2, (column, columnIndex) => jsxRuntime.jsx(DataCell$1, {
|
|
638
650
|
"data-testid": `cell-${props.rowIndex}-${column.key}`,
|
|
639
651
|
isTruncated: column.isTruncated && isRowCollapsed,
|
|
640
|
-
isCondensed:
|
|
652
|
+
isCondensed: isCondensed,
|
|
641
653
|
isRowCollapsed: isRowCollapsed,
|
|
642
|
-
verticalCellAlignment:
|
|
643
|
-
horizontalCellAlignment: column.align ? column.align :
|
|
654
|
+
verticalCellAlignment: verticalCellAlignment,
|
|
655
|
+
horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
|
|
644
656
|
shouldIgnoreRowClick: column.shouldIgnoreRowClick,
|
|
645
657
|
handleRowCollapseClick: handleRowCollapseClick,
|
|
646
658
|
shouldRenderCollapseButton: shouldRenderCollapseButton(props.columns.length, columnIndex),
|
|
647
659
|
onCellClick: props.onRowClick && !column.shouldIgnoreRowClick ? () => props.onRowClick?.(props.row, props.rowIndex, column.key) : undefined,
|
|
648
|
-
shouldRenderBottomBorder:
|
|
660
|
+
shouldRenderBottomBorder: shouldRenderBottomBorder,
|
|
649
661
|
shouldRenderResizingIndicator: getIsColumnBeingResized(columnIndex),
|
|
650
|
-
children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) :
|
|
662
|
+
children: column.renderItem ? column.renderItem(props.row, isRowCollapsed) : itemRenderer(props.row, column, isRowCollapsed)
|
|
651
663
|
}, `${props.row.id}-${column.key}`))
|
|
652
664
|
});
|
|
653
665
|
};
|
|
@@ -659,7 +671,6 @@ DataRow.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
659
671
|
shouldRenderBottomBorder: _pt__default["default"].bool.isRequired,
|
|
660
672
|
onExpandRow: _pt__default["default"].func
|
|
661
673
|
} : {};
|
|
662
|
-
DataRow.defaultProps = defaultProps$1;
|
|
663
674
|
DataRow.displayName = 'DataRow';
|
|
664
675
|
var DataRow$1 = DataRow;
|
|
665
676
|
|
|
@@ -815,6 +826,7 @@ const useManualColumnResizing = tableRef => {
|
|
|
815
826
|
};
|
|
816
827
|
var useManualColumnResizing$1 = useManualColumnResizing;
|
|
817
828
|
|
|
829
|
+
const _excluded = ["columns", "isCondensed", "wrapHeaderLabels", "verticalCellAlignment", "horizontalCellAlignment", "disableSelfContainment", "itemRenderer"];
|
|
818
830
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
819
831
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
820
832
|
const getColumnsLayoutInfo = columns => _reduceInstanceProperty__default["default"](columns).call(columns, (acc, currentValue) => [...acc, {
|
|
@@ -826,24 +838,29 @@ const shouldRenderRowBottomBorder = (rowIndex, rowCount, footer) => {
|
|
|
826
838
|
if (rowIndex + 1 < rowCount) return true;
|
|
827
839
|
return false;
|
|
828
840
|
};
|
|
829
|
-
const
|
|
830
|
-
columns: [],
|
|
831
|
-
isCondensed: true,
|
|
832
|
-
wrapHeaderLabels: true,
|
|
833
|
-
verticalCellAlignment: 'top',
|
|
834
|
-
horizontalCellAlignment: 'left',
|
|
835
|
-
disableSelfContainment: false,
|
|
836
|
-
// @ts-ignore
|
|
837
|
-
itemRenderer: (row, column) => row[column.key]
|
|
838
|
-
};
|
|
839
|
-
const DataTable = props => {
|
|
841
|
+
const DataTable = _ref => {
|
|
840
842
|
var _context;
|
|
843
|
+
let _ref$columns = _ref.columns,
|
|
844
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
845
|
+
_ref$isCondensed = _ref.isCondensed,
|
|
846
|
+
isCondensed = _ref$isCondensed === void 0 ? true : _ref$isCondensed,
|
|
847
|
+
_ref$wrapHeaderLabels = _ref.wrapHeaderLabels,
|
|
848
|
+
wrapHeaderLabels = _ref$wrapHeaderLabels === void 0 ? true : _ref$wrapHeaderLabels,
|
|
849
|
+
_ref$verticalCellAlig = _ref.verticalCellAlignment,
|
|
850
|
+
verticalCellAlignment = _ref$verticalCellAlig === void 0 ? 'top' : _ref$verticalCellAlig,
|
|
851
|
+
_ref$horizontalCellAl = _ref.horizontalCellAlignment,
|
|
852
|
+
horizontalCellAlignment = _ref$horizontalCellAl === void 0 ? 'left' : _ref$horizontalCellAl,
|
|
853
|
+
_ref$disableSelfConta = _ref.disableSelfContainment,
|
|
854
|
+
disableSelfContainment = _ref$disableSelfConta === void 0 ? false : _ref$disableSelfConta,
|
|
855
|
+
_ref$itemRenderer = _ref.itemRenderer,
|
|
856
|
+
itemRenderer = _ref$itemRenderer === void 0 ? (row, column) => row[column.key] : _ref$itemRenderer,
|
|
857
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
841
858
|
const _useDataTableManagerC = dataTableManagerProvider.useDataTableManagerContext(),
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
const isValueFromProvider = Boolean(
|
|
845
|
-
const columnsData = isValueFromProvider ?
|
|
846
|
-
const condensedValue = isValueFromProvider &&
|
|
859
|
+
contextColumns = _useDataTableManagerC.columns,
|
|
860
|
+
contextIsCondensed = _useDataTableManagerC.isCondensed;
|
|
861
|
+
const isValueFromProvider = Boolean(contextColumns && contextColumns.length !== 0);
|
|
862
|
+
const columnsData = isValueFromProvider ? contextColumns : columns;
|
|
863
|
+
const condensedValue = isValueFromProvider && contextIsCondensed !== undefined ? contextIsCondensed : isCondensed;
|
|
847
864
|
|
|
848
865
|
// TODO - initial poc for the nested rows
|
|
849
866
|
// const [openedItemIds, setOpenedItemIds] = useState<string[]>([]);
|
|
@@ -884,13 +901,19 @@ const DataTable = props => {
|
|
|
884
901
|
maxWidth: props.maxWidth,
|
|
885
902
|
maxHeight: props.maxHeight,
|
|
886
903
|
isBeingResized: columnResizingReducer.getIsAnyColumnBeingResized(),
|
|
887
|
-
disableSelfContainment: !!
|
|
904
|
+
disableSelfContainment: !!disableSelfContainment,
|
|
888
905
|
children: [jsxRuntime.jsx(TableGrid, _objectSpread(_objectSpread({
|
|
889
906
|
ref: tableRef
|
|
890
|
-
}, utils.filterDataAttributes(
|
|
907
|
+
}, utils.filterDataAttributes(_objectSpread({
|
|
908
|
+
isCondensed,
|
|
909
|
+
wrapHeaderLabels,
|
|
910
|
+
verticalCellAlignment,
|
|
911
|
+
horizontalCellAlignment,
|
|
912
|
+
disableSelfContainment
|
|
913
|
+
}, props))), {}, {
|
|
891
914
|
columns: columnsData,
|
|
892
915
|
maxHeight: props.maxHeight,
|
|
893
|
-
disableSelfContainment: !!
|
|
916
|
+
disableSelfContainment: !!disableSelfContainment,
|
|
894
917
|
resizedTotalWidth: resizedTotalWidth,
|
|
895
918
|
children: jsxRuntime.jsxs(ColumnResizingContext.Provider, {
|
|
896
919
|
value: columnResizingReducer,
|
|
@@ -898,13 +921,13 @@ const DataTable = props => {
|
|
|
898
921
|
children: jsxRuntime.jsx(TableRow, {
|
|
899
922
|
isRowClickable: false,
|
|
900
923
|
children: _mapInstanceProperty__default["default"](columnsData).call(columnsData, column => jsxRuntime.jsx(HeaderCell$1, {
|
|
901
|
-
shouldWrap:
|
|
924
|
+
shouldWrap: wrapHeaderLabels,
|
|
902
925
|
isCondensed: condensedValue,
|
|
903
926
|
iconComponent: column.headerIcon,
|
|
904
927
|
onColumnResized: props.onColumnResized,
|
|
905
928
|
disableResizing: column.disableResizing,
|
|
906
|
-
horizontalCellAlignment: column.align ? column.align :
|
|
907
|
-
disableHeaderStickiness: props.disableHeaderStickiness,
|
|
929
|
+
horizontalCellAlignment: column.align ? column.align : horizontalCellAlignment,
|
|
930
|
+
disableHeaderStickiness: Boolean(props.disableHeaderStickiness),
|
|
908
931
|
columnWidth: column.width
|
|
909
932
|
/* Sorting Props */,
|
|
910
933
|
onClick: props.onSortChange && props.onSortChange,
|
|
@@ -917,12 +940,13 @@ const DataTable = props => {
|
|
|
917
940
|
})
|
|
918
941
|
}), jsxRuntime.jsx(TableBody, {
|
|
919
942
|
children: _mapInstanceProperty__default["default"](_context = props.rows).call(_context, (row, rowIndex) => react.createElement(DataRow$1, _objectSpread(_objectSpread({}, props), {}, {
|
|
943
|
+
itemRenderer: itemRenderer,
|
|
920
944
|
isCondensed: condensedValue,
|
|
921
945
|
columns: columnsData,
|
|
922
946
|
row: row,
|
|
923
947
|
key: row.id,
|
|
924
948
|
rowIndex: rowIndex,
|
|
925
|
-
shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || hasTableBeenResized,
|
|
949
|
+
shouldClipContent: columnResizingReducer.getIsAnyColumnBeingResized() || Boolean(hasTableBeenResized),
|
|
926
950
|
shouldRenderBottomBorder: shouldRenderRowBottomBorder(rowIndex, props.rows.length, props.footer)
|
|
927
951
|
})))
|
|
928
952
|
})]
|
|
@@ -930,7 +954,7 @@ const DataTable = props => {
|
|
|
930
954
|
})), props.footer && jsxRuntime.jsx(Footer$1, {
|
|
931
955
|
"data-testid": "footer",
|
|
932
956
|
isCondensed: condensedValue,
|
|
933
|
-
horizontalCellAlignment:
|
|
957
|
+
horizontalCellAlignment: horizontalCellAlignment,
|
|
934
958
|
resizedTotalWidth: resizedTotalWidth,
|
|
935
959
|
children: props.footer
|
|
936
960
|
})]
|
|
@@ -950,7 +974,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
950
974
|
isSortable: _pt__default["default"].bool,
|
|
951
975
|
disableResizing: _pt__default["default"].bool,
|
|
952
976
|
shouldIgnoreRowClick: _pt__default["default"].bool
|
|
953
|
-
}))
|
|
977
|
+
})),
|
|
954
978
|
customColumns: _pt__default["default"].arrayOf(_pt__default["default"].shape({
|
|
955
979
|
key: _pt__default["default"].string.isRequired,
|
|
956
980
|
label: _pt__default["default"].node.isRequired,
|
|
@@ -972,7 +996,7 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
972
996
|
onColumnResized: _pt__default["default"].func,
|
|
973
997
|
disableSelfContainment: _pt__default["default"].bool,
|
|
974
998
|
disableHeaderStickiness: _pt__default["default"].bool,
|
|
975
|
-
itemRenderer: _pt__default["default"].func
|
|
999
|
+
itemRenderer: _pt__default["default"].func,
|
|
976
1000
|
wrapHeaderLabels: _pt__default["default"].bool,
|
|
977
1001
|
verticalCellAlignment: _pt__default["default"].oneOf(['top', 'center', 'bottom']),
|
|
978
1002
|
horizontalCellAlignment: _pt__default["default"].oneOf(['left', 'center', 'right']),
|
|
@@ -982,12 +1006,11 @@ DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
982
1006
|
renderNestedRow: _pt__default["default"].func,
|
|
983
1007
|
maxExpandableHeight: _pt__default["default"].number
|
|
984
1008
|
} : {};
|
|
985
|
-
DataTable.defaultProps = defaultProps;
|
|
986
1009
|
DataTable.displayName = 'DataTable';
|
|
987
1010
|
var DataTable$1 = DataTable;
|
|
988
1011
|
|
|
989
1012
|
// NOTE: This string will be replaced on build time with the package version.
|
|
990
|
-
var version = "19.
|
|
1013
|
+
var version = "19.22.0";
|
|
991
1014
|
|
|
992
1015
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
993
1016
|
enumerable: true,
|