Table

import { Table } from '@enmovil/ui-design-system';

A table for small datasets, with a scrollable body and fixed columns. Its row type is currently fixed to key, name, age and address, so use Grid for real data.

Properties

Property	Type	Required	Default	Allowed values	Description
columns	ColumnsType<DataType>	Yes	—	—	Columns of the table, each with a title, the dataIndex of the row field it shows, and optionally a width, a fixed side, a sorter or a custom render.
dataSource	DataType[]	Yes	—	—	Rows of the table. The body scrolls vertically past 300px and horizontally when the columns are wider than the table.
pagination	false | TablePaginationConfig	No	—	—	Paging settings, such as { pageSize: 5 }, or false to show all rows without paging. Without it, rows are shown 10 to a page.

dataSource

An array of objects (DataType). Each object has these fields:

Field	Type	Required	Description
key	React.Key	Yes	Unique key of the row.
name	string	Yes	Name value of the row, shown by a column whose dataIndex is name.
age	number	Yes	Age value of the row, shown by a column whose dataIndex is age.
address	string	Yes	Address value of the row, shown by a column whose dataIndex is address.

Other attributes

Table passes 44 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onChange	((pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<DataType> | SorterResult<...>[], extra: TableCurrentDataSource<...>) => void)	Fires when the page, a sort order or a column filter changes.
onScroll	UIEventHandler<HTMLDivElement>	Fires when the table body scrolls. Useful for loading more rows at the bottom.
onRow	GetComponentProps<DataType>	Returns per-row handlers (onClick, onDoubleClick, onMouseEnter, onMouseLeave, onContextMenu). Use it for row click-through and hover highlights.
onHeaderRow	GetComponentProps<readonly ColumnType<DataType>[]>	Returns handlers for the header row, in the same shape as onRow.

Children

Table does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Table example.

Loading playground…

Storybook

Open Table in Storybook to try every story with the full set of controls.