TableData

Designer doc

This component wraps Table component with higher-level abstraction and renders based on column.

The most common problem faced when using standard html table API is the code for th and td are so far away. Imagine you have a table with 20 columns, it’s rather difficult to maintain the correct order during development, it’s a bug prone API.

To solve this problem, what would it look like if we render based on column?

Isn’t it easier to read and maintain?

Example

Basic Usage

Using Column component, you can specify title and render prop. Extraneous props given to Column will be forwarded to TableCell component.

View code

Rows Selection

You can use ColumnSelection component for row selection. In example blow, it uses value and onChange to control and receive callback of selection changes. However, you can also pass onSelect, onSelectAll, onDeselect, and onDeselectAll to have grainer control of the selection behaviour.

View code

Disabled Rows Selection

View code

Accessible Row Click and Selection

One common use case of table is that clicking one row redirect to another page - behaves like a Link. However, <a> cannot be used to replace <tr>. So, our best option is to ensure that table rows that behave like a link are still accessible for keyboard users - which is to click when keyboard Enter, similar to button.

Pressing Space will also select the row if the table has a ColumnSelection.

View code

TablePagination wraps Pagination and Select components, thus it has a very opinionated style and usage. You can pass this component to TableData’s footer prop and control the props you need to it.

View code

By default, page size options are 10, 20, 30 and 40, and the row is hidden if total row is fewer than the smallest option. You can customize sizes prop and set hidden to false to keep it visible.

Moreover, if you’re working on localisation, you can customize the individual components like example below:

View code

Loading

You can use loading prop to display Skeleton when the data is still loading. By default the loadingRowsCount is 5. You can also customize each column loading component with renderLoading.

View code

Empty Placeholder

You can specify emptyPlaceholder prop to customize the display when there’s no data.

View code

Conditional Rendering

To hide a Column component, you can either conditionally render it or to use hidden prop. This hidden props simply helps writing the jsx cleaner. You can also use React.Fragment, TableData can flatten it for you and render it accordingly.

View code

Composition

TableData component allows you to compose columns. Column component is basically like a TableCell, but it defines both title and render prop at the same time. Therefore, keep in mind that Column element is duplicated by TableData internally.

Below example demonstrates:

ColumnAddress: How you can achieve merged cell
ColumnName: Combine two (or more) Columns and reuse

View code

Expandable Table

You can use TableExpandButton component for expandable table. You also need to specify renderExpandableRow to define what to render inside the expandable row. You can control when to render the expandable row using isExpandable properties.

TableExpandButton can also be rendered inside the header to expand/collapse all the expandable row of the table.

View code

Tree Table

Display tree structure data in Table using the render function that is exposed by renderExpandableRow. You can render and control the position of the expand button for expanding the row by rendering TableExpandButton component inside the Column.

If rendered inside the header, TableExpandButton will only expand/collapse all the first level of the tree table.

View code

Caveat

For tree table, users need to control the expandedRows state manually to expand/collapse all layer of expandable rows inside the tree table.

View code

Complete Example

View code

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

Column

Prop name	Type	Default	Description
align	TextAlign
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
cellProps	(record: any, index: number) => TableCellProps
depth	number	0
ellipsis	boolean
hidden	boolean
index	number
loading	boolean		Determines whether the Column is in a loading state, showing skeleton placeholders.
record	any
render	(record: any, index: number) => ReactNode
renderLoading	(record: any, index: number) => ReactNode	() => <Skeleton variant="rect" width="70%" height="100%" />	Customize the component to render on loading state
sticky	ColumnStickyPositions \| ColumnStickyPositions[] \| { left?: number; right?: number; }
title	ReactNode
titleProps	TableCellProps

ColumnSelection

Prop name	Type	Default	Description
align	TextAlign
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
cellProps	(record: any, index: number) => TableCellProps
depth	number
ellipsis	boolean
hidden	boolean
index	number
isDisabled	(row: any, index: number) => boolean
loading	boolean		Determines whether the Column is in a loading state, showing skeleton placeholders.
onChange	(value: RowKey[], valueObjects: any[]) => void		valueObjects will be returned based on the object data ever received by the TableData component. undefined will be returned in place of the object if TableData component never received object with the particular key.
onDeselect	SelectionCallback<RowKey>
onDeselectAll	AllSelectionCallback<RowKey>
onSelect	SelectionCallback<RowKey>
onSelectAll	AllSelectionCallback<RowKey>
record	any
render	(props: RenderParams<any>) => ReactNode	<T extends unknown>({ children }: RenderParams<T>) => children
renderLoading	(record: any, index: number) => ReactNode		Customize the component to render on loading state
renderTitle	(props: { children: ReactElement<any, string \| JSXElementConstructor<any>>; }) => ReactNode	({ children }: { children: ReactElement }) => children
sticky	ColumnStickyPositions \| ColumnStickyPositions[] \| { left?: number; right?: number; }
titleProps	TableCellProps
value	RowKey[]

TableData

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.
bodyProps	TableBodyProps
data	any[]
emptyPlaceholder	ReactNode	<Result image={<EmptyBox size={64} />} description="No data" />
expandedRows	RowKey[]
footer	ReactNode
headProps	TableHeadProps
headRowProps	TableRowProps
isExpandable	(record: any, index: number) => boolean
loading	boolean		Determines whether the table is in a loading state, showing skeleton placeholders.
loadingRowsCount	number	5	Specifies the number of rows to display in the loading state.
onChangeExpandedRows	(expandedRows: RowKey[], valueObjects: any[]) => void
renderExpandableRow	RenderExpandableRow<any>
renderRow	RenderRow<any>
rowKey	(record: any, index: number) => RowKey
tableProps	TableProps

TableExpandButton

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.
colorType	ColorTypes		Set color based on theme. If color is specified, that prop is used instead of this.
disabled	boolean		Equivalent to button's disabled property.
isExpandable	boolean
keyboardClickKeys	string[]
loading	boolean
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>		Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
radius	string
renderIcon	(props: { depth: number; isExpanded: boolean; }) => ReactNode
size	IconButtonSizes	small
tooltip	ReactNode
tooltipProps	Omit<TooltipProps, "title" \| "children">
variant	IconButtonVariants

TablePagination

Prop name	Type	Default	Description
alignment	PaginationAlignments		Controls how the pagination items (like pages or page text) are aligned in the main container. Center (default): Page items appear in the middle. Right: Page items float to the right, left area can hold other items.
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
children	ReactNode		React children that can be used to override or extend the default pagination items. For example, you can pass <PaginationList /> or <PaginationPageText /> here.
current	number		The controlled current page number (1-based). If used, initialCurrent is ignored and the component becomes controlled.
initialCurrent	number		The initial (uncontrolled) current page number. Defaults to 1.
initialNavSpan	number
initialPageSize	number	20
leftContainerProps	DivProps
leftElement	ReactNode		Defaults to showing total pages and selected items for non-minimal variants.
navSpan	number		The controlled number of pagination elements to show (e.g., 7 shows a maximum of 7 page buttons). Must be an odd number greater than 3 for best display.
numSelected	number		(Optional) Number of selected items (out of totalRow). Used by default to display information like "x selected".
onChange	(page: number) => void		A callback that fires when the current page changes (e.g., user navigates to a new page). Receives the new page number as its argument.
onNavSpanChange	(navSpan: number) => void
onPageSizeChange	(pageSize: number) => void
pageSize	number		The controlled page size (number of items per page). If used, initialPageSize is ignored and the component becomes controlled.
rightContainerProps	DivProps
rightElement	ReactNode		Defaults to showing page navigation for non-minimal variants.
sizes	number[]		Selectable page sizes.
totalRow	number		The total number of rows (items) across all pages. This is used to calculate the number of pages.
variant	PaginationVariants	outlined	The variant of pagination style to use. Outlined (default): Shows outline styling for buttons. Minimal: Shows a simpler pagination, often with only page text or partial controls.

TableRowClickable

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
index	number
isSelected	boolean

Example

Basic Usage

Rows Selection

Disabled Rows Selection

Accessible Row Click and Selection

Pagination

Empty Placeholder

Conditional Rendering

Composition

Expandable Table

Tree Table

Complete Example

References

API

Column

ColumnSelection

TableData

TableExpandButton

TablePagination

TableRowClickable

Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Designer

Get started Foundation Components

Developer

Get started Foundation Components

About us

Coral Team Contact and newsletter

Resources

Figma UI kit Icon library Coral branding

TableData

This component wraps Table component with higher-level abstraction and renders based on column.

The most common problem faced when using standard html table API is the code for th and td are so far away. Imagine you have a table with 20 columns, it’s rather difficult to maintain the correct order during development, it’s a bug prone API.

To solve this problem, what would it look like if we render based on column?

Isn’t it easier to read and maintain?

Example

Basic Usage

Using Column component, you can specify title and render prop. Extraneous props given to Column will be forwarded to TableCell component.

Rows Selection

You can use ColumnSelection component for row selection. In example blow, it uses value and onChange to control and receive callback of selection changes. However, you can also pass onSelect, onSelectAll, onDeselect, and onDeselectAll to have grainer control of the selection behaviour.

Disabled Rows Selection

Accessible Row Click and Selection

Pressing Space will also select the row if the table has a ColumnSelection.

Pagination

TablePagination wraps Pagination and Select components, thus it has a very opinionated style and usage. You can pass this component to TableData’s footer prop and control the props you need to it.

By default, page size options are 10, 20, 30 and 40, and the row is hidden if total row is fewer than the smallest option. You can customize sizes prop and set hidden to false to keep it visible.

Moreover, if you’re working on localisation, you can customize the individual components like example below:

Loading

You can use loading prop to display Skeleton when the data is still loading. By default the loadingRowsCount is 5. You can also customize each column loading component with renderLoading.

Empty Placeholder

You can specify emptyPlaceholder prop to customize the display when there’s no data.

Conditional Rendering

To hide a Column component, you can either conditionally render it or to use hidden prop. This hidden props simply helps writing the jsx cleaner. You can also use React.Fragment, TableData can flatten it for you and render it accordingly.

Composition

TableData component allows you to compose columns. Column component is basically like a TableCell, but it defines both title and render prop at the same time. Therefore, keep in mind that Column element is duplicated by TableData internally.

Below example demonstrates:

Expandable Table

You can use TableExpandButton component for expandable table. You also need to specify renderExpandableRow to define what to render inside the expandable row. You can control when to render the expandable row using isExpandable properties.

TableExpandButton can also be rendered inside the header to expand/collapse all the expandable row of the table.

Tree Table

Display tree structure data in Table using the render function that is exposed by renderExpandableRow. You can render and control the position of the expand button for expanding the row by rendering TableExpandButton component inside the Column.

If rendered inside the header, TableExpandButton will only expand/collapse all the first level of the tree table.

Caveat

For tree table, users need to control the expandedRows state manually to expand/collapse all layer of expandable rows inside the tree table.

Complete Example

References

API

Column

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Determines whether the Column is in a loading state, showing skeleton placeholders.

Customize the component to render on loading state

ColumnSelection

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Determines whether the Column is in a loading state, showing skeleton placeholders.

valueObjects will be returned based on the object data ever received by the TableData component.

undefined will be returned in place of the object if TableData component never received object with the particular key.

Customize the component to render on loading state

TableData

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Determines whether the table is in a loading state, showing skeleton placeholders.

Specifies the number of rows to display in the loading state.

TableExpandButton

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Set color based on theme. If color is specified, that prop is used instead of this.

Equivalent to button's disabled property.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

TablePagination

Controls how the pagination items (like pages or page text) are aligned in the main container.

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

React children that can be used to override or extend the default pagination items. For example, you can pass <PaginationList /> or <PaginationPageText /> here.

The controlled current page number (1-based). If used, initialCurrent is ignored and the component becomes controlled.

The initial (uncontrolled) current page number. Defaults to 1.

Defaults to showing total pages and selected items for non-minimal variants.

The controlled number of pagination elements to show (e.g., 7 shows a maximum of 7 page buttons). Must be an odd number greater than 3 for best display.

(Optional) Number of selected items (out of totalRow). Used by default to display information like "x selected".

A callback that fires when the current page changes (e.g., user navigates to a new page). Receives the new page number as its argument.

The controlled page size (number of items per page). If used, initialPageSize is ignored and the component becomes controlled.

Defaults to showing page navigation for non-minimal variants.

Selectable page sizes.

The total number of rows (items) across all pages. This is used to calculate the number of pages.

The variant of pagination style to use.

TableRowClickable

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.