From 89d3f879f8a2c6ea98e75171146744240425742d Mon Sep 17 00:00:00 2001 From: Angelina Gadzhieva Date: Wed, 20 Dec 2023 17:49:58 +0300 Subject: [PATCH] chore: tune Table readme --- src/components/Table/README.md | 54 +++++++++++++++++----------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 191fb573fb..2a32e0970c 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -24,36 +24,36 @@ Additional functionality is enabled via HOCs: ## Properties -| Name | Description | Type | Default | -| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------: | :---------: | -| data | Data | `any[]` | | -| columns | Column parameters | `TableColumnConfig[]` | | -| verticalAlign | Vertical alignment of contents | `"top"` `"middle"` | | -| getRowId | The row ID, used when selecting and sorting rows. If you skip a row, its ID will be the value of the field in the row data with the same name as the column ID | `string` `((item: any, index: number) => string)` | | -| getRowClassNames | Row CSS classes | `(item: any, index: number) => string[]` | | -| isRowDisabled | Condition for disabling columns | `(item: any, index: number) => boolean` | | -| onRowClick | Row click handler | `(item: any, index: number, event: React.MouseEvent) => void` | | -| onRowMouseEnter | Row mouseenter handler | `(item: any, index: number, event: React.MouseEvent) => void` | | -| onRowMouseLeave | Row mouseleave handler | `(item: any, index: number, event: React.MouseEvent) => void` | | -| emptyMessage | The message returned if data is missing. | `string` | `"No data"` | -| className | Table CSS class | `string` | | -| edgePadding | Adds horizontal padding for edge cells | `boolean` | | +| Name | Description | Type | Default | +| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------: | :---------: | +| data | Data | `any[]` | | +| columns | Column parameters | `TableColumnConfig[]` | | +| verticalAlign | Vertical alignment of contents | `"top"` `"middle"` | | +| getRowId | The row ID, used when selecting and sorting rows. If you skip a row, its ID will be the value of the field in the row data with the same name as the column ID | `string` `((item: any, index: number) => string)` | | +| getRowClassNames | Row CSS classes | `(item: any, index: number) => string[]` | | +| isRowDisabled | Condition for disabling columns | `(item: any, index: number) => boolean` | | +| onRowClick | Row click handler | `(item: any, index: number, event: React.MouseEvent) => void` | | +| onRowMouseEnter | Row mouseenter handler | `(item: any, index: number, event: React.MouseEvent) => void` | | +| onRowMouseLeave | Row mouseleave handler | `(item: any, index: number, event: React.MouseEvent) => void` | | +| emptyMessage | The message returned if data is missing. | `string` | `"No data"` | +| className | Table CSS class | `string` | | +| edgePadding | Adds horizontal padding for edge cells | `boolean` | | +| stickyHorizontalScroll | A horizontal sticky scroll in a table. NB: A table cannot have a fixed height and a sticky scroll at the same time. A sticky scroll will not work if the table has an overflow. | `boolean` | `false` | +| stickyHorizontalScrollBreakpoint | The threshold that the parent block should reach before making a scroll sticky. This is useful in the console, for example, when the groupActions bar closes the scroll. | `number` | `0` | ### TableColumnConfig -| Name | Description | Type | Default | -| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------: | :---------------------------------------------------------: | -| id | Column ID | `any[]` | | -| name | Column name (header) | `string` `(() => React.ReactNode)` | column ID | -| placeholder | The stub when there is no data in a cell | `string` `((item: any, index: number) => React.ReactNode)` | `— (—)` | -| template | Cell contents. If you skip a row, the cell contents will be the value of the field with the same name as this row. | `string` `((item: any, index: number) => React.ReactNode)` | The value of the field with the name equal to the column ID | -| align | Content alignment | `"left"` `"center"` `"right"` | | -| sticky | Sticky column | `"left"` `"right"` | | -| primary | Distinguishes a column among other | `boolean` | | -| width | Column width in px | `number` | | -| stickyHorizontalScroll | A horizontal sticky scroll in a table. NB: A table cannot have a fixed height and a sticky scroll at the same time. A sticky scroll will not work if the table has an overflow. | `boolean` | `false` | -| stickyHorizontalScrollBreakpoint | The threshold that the parent block should reach before making a scroll sticky. This is useful in the console, for example, when the groupActions bar closes the scroll. | `number` | `0` | -| meta | Various data, HOC settings | `Record` | | +| Name | Description | Type | Default | +| :---------- | :----------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------: | :---------------------------------------------------------: | +| id | Column ID | `any[]` | | +| name | Column name (header) | `string` `(() => React.ReactNode)` | column ID | +| placeholder | The stub when there is no data in a cell | `string` `((item: any, index: number) => React.ReactNode)` | `— (—)` | +| template | Cell contents. If you skip a row, the cell contents will be the value of the field with the same name as this row. | `string` `((item: any, index: number) => React.ReactNode)` | The value of the field with the name equal to the column ID | +| align | Content alignment | `"left"` `"center"` `"right"` | | +| sticky | Sticky column | `"left"` `"right"` | | +| primary | Distinguishes a column among other | `boolean` | | +| width | Column width in px | `number` | | +| meta | Various data, HOC settings | `Record` | | ## Usage with HOC `withTableActions`