Skip to content

Commit

Permalink
chore: tune Table readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lunory
Lunory committed Dec 20, 2023
1 parent cda2349 commit 89d3f87
Showing 1 changed file with 27 additions and 27 deletions.
54 changes: 27 additions & 27 deletions src/components/Table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLTableRowElement>) => void` | |
| onRowMouseEnter | Row mouseenter handler | `(item: any, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void` | |
| onRowMouseLeave | Row mouseleave handler | `(item: any, index: number, event: React.MouseEvent<HTMLTableRowElement>) => 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<HTMLTableRowElement>) => void` | |
| onRowMouseEnter | Row mouseenter handler | `(item: any, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void` | |
| onRowMouseLeave | Row mouseleave handler | `(item: any, index: number, event: React.MouseEvent<HTMLTableRowElement>) => 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)` | `— (&mdash;)` |
| 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<string, any>` | |
| 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)` | `— (&mdash;)` |
| 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<string, any>` | |

## Usage with HOC `withTableActions`

Expand Down

0 comments on commit 89d3f87

Please sign in to comment.