Data Display
Table
A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
| Name | Date created | |
|---|---|---|
| Bob | bob@aol.com | 5/5/2020 |
| Fred | fred@yahoo.com | 4/7/2021 |
| Ted | ted@gmail.com | 11/20/2010 |
| Joe | joe@outlook.com | 1/18/2016 |
Selection#
| Name | Date created | ||
|---|---|---|---|
| Bob | bob@aol.com | 5/5/2020 | |
| Fred | fred@yahoo.com | 4/7/2021 | |
| Ted | ted@gmail.com | 11/20/2010 | |
| Joe | joe@outlook.com | 1/18/2016 |
Alignment#
| Name | Type | Date modified |
|---|---|---|
| Games | File folder | 6/7/2020 |
| Program Files | File folder | 4/7/2021 |
Component props#
Table#
| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | "none" | "single" | "multiple" |
| selectedKeys | string[] | Controlled selected row keys |
| defaultSelectedKeys | string[] | Default selected row keys |
| onSelectionChange | (keys: Selection) => void | Called when selection changes |
TableColumn / TableCell#
| Name | Type | Description |
|---|---|---|
| align | Alignment | "start" | "center" | "end" |