- Docs
- components
- Table
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.
🚧 This component is in beta for BackchannelI so documentation and examples are limited. Please refer to the React Aria Table docs for more usage examples.
Preview
Code
Name | Type | Date Modified | |
|---|---|---|---|
| Games | File folder | 6/7/2020 | |
| Program Files | File folder | 4/7/2021 | |
| bootmgr | System file | 11/20/2010 | |
| log.txt | Text Document | 1/18/2016 |
Installation
CLI
Copy & Paste
NPM
PNPM
Bun
Yarn
npx shadcn@latest add https://backchanel.com/default/tableComposed Components
A Table uses the following components, which may also be used standalone or reused in other components.
Checkbox
A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
Basic
Preview
Code
Name | Type | Date Modified | |
|---|---|---|---|
| Games | File folder | 6/7/2020 | |
| Program Files | File folder | 4/7/2021 | |
| bootmgr | System file | 11/20/2010 | |
| log.txt | Text Document | 1/18/2016 |
Sortable
Preview
Code
Name | Height | Mass | Birth Year |
|---|---|---|---|
| No results found. | |||
Resizable
A table must be wrapped with <ResizableTableContainer> to enable resizing. The each column can become resiazble by adding the isResizable prop.
Preview
Code
Name | Type | Date Modified | |
|---|---|---|---|
| Games | File folder | 6/7/2020 | |
| Program Files | File folder | 4/7/2021 | |
| bootmgr | System file | 11/20/2010 | |
| log.txt | Text Document | 1/18/2016 |