Datatable
The Datatable
component is a versatile component for displaying tabular data. It allows customization of styles, sizes, and densities, providing flexibility to fit various design requirements. The Datatable
component utilizes the following subcomponents:
- DatatableHeader: Defines the header section of the datatable.
- DatatableBody: Contains the body rows of the datatable.
- DatatableRow: Used to define individual rows within the datatable.
- DatatableCell: Represents individual cells within a datatable row.
- DatatableNoData: Displayed when there is no data to show in the datatable, including an optional reload button.
Basic example
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
<Datatable size="medium" marginDensity="medium" arrayStyle="lines">
<DatatableHeader>
<DatatableRow>
<DatatableCell>Title</DatatableCell>
<DatatableCell>Title</DatatableCell>
</DatatableRow>
</DatatableHeader>
<DatatableBody>
<DatatableRow>
<DatatableCell>Data cell</DatatableCell>
<DatatableCell>Data cell</DatatableCell>
</DatatableRow>
<DatatableRow>
<DatatableCell>Data cell</DatatableCell>
<DatatableCell>Data cell</DatatableCell>
</DatatableRow>
<DatatableRow>
<DatatableCell>Data cell</DatatableCell>
<DatatableCell>Data cell</DatatableCell>
</DatatableRow>
</DatatableBody>
</Datatable>
Props
Sizes
Defines the size of the datatable. Options include 'small'
, 'medium'
, and 'large'
.
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
<Datatable size="small">...</Datatable>
<Datatable size="medium">...</Datatable>
<Datatable size="large">...</Datatable>
Array style
Determines the style of the datatable. Options include 'flat'
, 'grid'
, 'lines'
, and 'zebras'
.
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
<Datatable arrayStyle="flat">...</Datatable>
<Datatable arrayStyle="grid">...</Datatable>
<Datatable arrayStyle="lines">...</Datatable>
<Datatable arrayStyle="zebras">...</Datatable>
Margin density
Specifies the margin density of the datatable. Options include 'small'
, 'medium'
, and 'large'
.
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Title
Title
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
<Datatable marginDensity="small">...</Datatable>
<Datatable marginDensity="medium">...</Datatable>
<Datatable marginDensity="large">...</Datatable>
No Data State
error_outlineUnable to load the table data.
<DatatableNoData></DatatableNoData>
No Data State with sizes
error_outlineUnable to load the table data.
error_outlineUnable to load the table data.
error_outline
Unable to load the table data.
<DatatableNoData size='small'/>
<DatatableNoData size='medium'/>
<DatatableNoData size='large'/>
API
Datatable
Loading API documentation...
DatatableNoData
Loading API documentation...