Skip to main content
Version: 57.2.0

DataTable

DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible.

Package: @terreno/ui
Categories: Pattern
Props interface: DataTableProps
Story source: demo/stories/DataTable.stories.tsx

Live demo

Props

PropTypeRequiredDescription
columnsarrayYes
dataarrayYes
alternateRowBackgroundboolean
customColumnComponentMapDataTableCustomComponentMap
defaultTextSizeunion
getRowTestIDreflectionReturns a stable key for row test ids. Defaults to row index when omitted.
headerHeightnumber
moreContentComponentComponentTypeWhen tapping the eye icon, a modal is shown with more info about the row.
moreContentExtraDataarray
pagenumber
pinnedColumnsnumber
rowHeightnumber
setPagereflection
setSortColumnreflection
sortColumnColumnSortInterface
testIDstringRoot test id for the primary interactive element or container.
testIDsDataTableTestIDs
totalPagesnumber