@commercetools-uikit/data-table 19.22.4 → 19.22.6
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) | | `[]` | The list of columns to be rendered.
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. |
|
|
66
|
+
| `customColumns` | `Array: TColumn<Row>[]`<br/>[See signature.](#signature-customcolumns) | | | The list of columns to be rendered.
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. |
|
|
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
|
|
|
@@ -289,4 +273,3 @@ shouldIgnoreRowClick?: boolean;
|
|
|
289
273
|
```ts
|
|
290
274
|
(row: Row) => ReactNode;
|
|
291
275
|
```
|
|
292
|
-
````
|
|
@@ -996,7 +996,7 @@ DataTable.displayName = 'DataTable';
|
|
|
996
996
|
var DataTable$1 = DataTable;
|
|
997
997
|
|
|
998
998
|
// NOTE: This string will be replaced on build time with the package version.
|
|
999
|
-
var version = "19.22.
|
|
999
|
+
var version = "19.22.6";
|
|
1000
1000
|
|
|
1001
1001
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
1002
1002
|
enumerable: true,
|
|
@@ -787,7 +787,7 @@ DataTable.displayName = 'DataTable';
|
|
|
787
787
|
var DataTable$1 = DataTable;
|
|
788
788
|
|
|
789
789
|
// NOTE: This string will be replaced on build time with the package version.
|
|
790
|
-
var version = "19.22.
|
|
790
|
+
var version = "19.22.6";
|
|
791
791
|
|
|
792
792
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
793
793
|
enumerable: true,
|
|
@@ -973,6 +973,6 @@ DataTable.displayName = 'DataTable';
|
|
|
973
973
|
var DataTable$1 = DataTable;
|
|
974
974
|
|
|
975
975
|
// NOTE: This string will be replaced on build time with the package version.
|
|
976
|
-
var version = "19.22.
|
|
976
|
+
var version = "19.22.6";
|
|
977
977
|
|
|
978
978
|
export { DataTable$1 as default, version };
|
|
@@ -85,37 +85,17 @@ export type TDataTableProps<Row extends TRow = TRow> = {
|
|
|
85
85
|
*/
|
|
86
86
|
rows: Row[];
|
|
87
87
|
/**
|
|
88
|
+
* The list of columns to be rendered.
|
|
88
89
|
* Each object requires a unique `key` which should correspond to property key of
|
|
89
90
|
* the items of `rows` that you want to render under this column, and a `label`
|
|
90
91
|
* which defines the name shown on the header.
|
|
91
|
-
* The list of columns to be rendered.
|
|
92
|
-
*
|
|
93
|
-
* Column item shape:
|
|
94
|
-
*
|
|
95
|
-
* ```
|
|
96
|
-
* {
|
|
97
|
-
* key: string;
|
|
98
|
-
* label: ReactNode;
|
|
99
|
-
* width?: string;
|
|
100
|
-
* align?: 'left' | 'center' | 'right';
|
|
101
|
-
* onClick?: (event: MouseEventHandler) => void;
|
|
102
|
-
* renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode;
|
|
103
|
-
* headerIcon?: ReactNode;
|
|
104
|
-
* isTruncated?: boolean;
|
|
105
|
-
* isSortable?: boolean;
|
|
106
|
-
* disableResizing?: boolean;
|
|
107
|
-
* shouldIgnoreRowClick?: boolean;
|
|
108
|
-
* }
|
|
109
|
-
* ```
|
|
110
|
-
*
|
|
111
|
-
* [Colum signatures with description](/?path=/docs/components-datatable-readme--props#signatures)
|
|
112
92
|
*/
|
|
113
93
|
columns?: TColumn<Row>[];
|
|
114
94
|
/**
|
|
95
|
+
* The list of columns to be rendered.
|
|
115
96
|
* 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
|
|
116
97
|
* the items of `rows` that you want to render under this column, and a `label`
|
|
117
98
|
* which defines the name shown on the header.
|
|
118
|
-
* The list of columns to be rendered.
|
|
119
99
|
*/
|
|
120
100
|
customColumns?: TColumn<Row>[];
|
|
121
101
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/data-table",
|
|
3
3
|
"description": "A component for rendering tabular data.",
|
|
4
|
-
"version": "19.22.
|
|
4
|
+
"version": "19.22.6",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "19.22.
|
|
25
|
-
"@commercetools-uikit/data-table-manager": "19.22.
|
|
26
|
-
"@commercetools-uikit/design-system": "19.22.
|
|
27
|
-
"@commercetools-uikit/hooks": "19.22.
|
|
28
|
-
"@commercetools-uikit/icons": "19.22.
|
|
29
|
-
"@commercetools-uikit/secondary-icon-button": "19.22.
|
|
30
|
-
"@commercetools-uikit/utils": "19.22.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "19.22.6",
|
|
25
|
+
"@commercetools-uikit/data-table-manager": "19.22.6",
|
|
26
|
+
"@commercetools-uikit/design-system": "19.22.6",
|
|
27
|
+
"@commercetools-uikit/hooks": "19.22.6",
|
|
28
|
+
"@commercetools-uikit/icons": "19.22.6",
|
|
29
|
+
"@commercetools-uikit/secondary-icon-button": "19.22.6",
|
|
30
|
+
"@commercetools-uikit/utils": "19.22.6",
|
|
31
31
|
"@emotion/react": "^11.10.5",
|
|
32
32
|
"@emotion/styled": "^11.10.5",
|
|
33
33
|
"lodash": "4.17.21",
|