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

The Datatable component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

DatatableBody

The DatatableBody component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

DatatableCell

The DatatableCell component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

DatatableHeader

The DatatableHeader component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

DatatableNoData

The DatatableNoData component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

However, DatatableNoData doesn't accept any children.

Loading API documentation...

DatatableRow

The DatatableRow component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...