Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsTable
Designer doc
This component has low-level abstraction similar to built-in table elements. For a higher-level abstraction and rendering based on column, please check TableData component.
Example
Basic Usage
In example below, you can pass built-in td props like width to TableCell component. There are also helper props align accepting css text-align property, and boolean ellipsis prop.
Note that TableCell is used to render td or th. It will render td under TableBody, and renders th under TableHead.
View code
Fixed Header
By default, table header is sticky on top relative to TableContainer. So, you just need to specify the max-height of TableContainer so that it scrolls.
View code
How this works is header automatically set sticky prop to top. You can remove this behaviour by specifying sticky={null}. Learn more about sticky prop in the following section.
Fixed Column and Header
For displaying large amounts of data with long columns, you can specify TableCell’s sticky prop to keep a certain column or row visible.
This sticky props accept:
- StickyPositions (top, bottom, left, right). This will set the sticky offset 0.
- Array<StickyPositions>. For example, header column on the top right you can specify ['top', 'right'].
- { [StickyPositions]: number }. To specify the offset, you should pass an object like { right: 120 }.
View code
Densities
Coral’s Table has 3 densities: Compact, Default (default), and Loose. The density prop controls only the padding of th and td elements, with padding increasing from Compact to Loose.
View code
Note that the different densities only affect the horizontal padding of the header, thus keeping the header height consistent.
Accessibility
This component uses html table elements, so there’s no need to specify additional roles and aria attributes. Regarding keyboard interactions, each row is focusable. ArrowDown and ArrowUp can be used to navigate through each row.
References
- WAI ARIA Table: https://www.w3.org/WAI/ARIA/apg/patterns/table/
- Data Grid Example: https://www.w3.org/WAI/ARIA/apg/example-index/grid/dataGrids.html
- Material UI: https://material-ui.com/components/tables/#table
- Ant Design: https://ant.design/components/table/
API
Table
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| density | TableDensities | default | Set the density of the table. |
TableBody
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
TableCell
| Prop name | Type | Default | Description |
|---|---|---|---|
| align | TextAlign | left | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| ellipsis | boolean | ||
| sticky | Sticky |
TableContainer
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
TableHead
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
TableRow
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |