Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Table

A table component that displays data in a row and column structure.

code

Expend code


    <Table
      headers={['table 1', 'table 2', 'table 3', 'table 4']}
      data={[
        { 'table 1': 'value 1', 'table 2': 'value 2', 'table 3': 'value 3', 'table 4': 'value 4' },
        { 'table 1': 'value 5', 'table 2': 'value 6', 'table 3': 'value 7', 'table 4': 'value 8' },
        { 'table 1': 'value 9', 'table 2': 'value 10', 'table 3': 'value 11', 'table 4': 'value 12' },
      ]}
    />


    <Table
      headers={['table 1', 'table 2', 'table 3', 'table 4']}
      data={[
        { 'table 1': 'value 1', 'table 2': 'value 2', 'table 3': 'value 3', 'table 4': 'value 4' },
        { 'table 1': 'value 5', 'table 2': 'value 6', 'table 3': 'value 7', 'table 4': 'value 8' },
        { 'table 1': 'value 9', 'table 2': 'value 10', 'table 3': 'value 11', 'table 4': 'value 12' },
      ]}
    />

DataTable

A data table component that can display various data and columns.

code

Expend code


    <DataTable
      data={[
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
        { id: 3, name: 'Alice Smith', email: 'alice@example.com' },
      ]}
      columns={[
        { header: 'ID', accessor: 'id' },
        { header: 'Name', accessor: 'name' },
        { header: 'Email', accessor: 'email' },
      ]}
    />


    <DataTable
      data={[
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
        { id: 3, name: 'Alice Smith', email: 'alice@example.com' },
      ]}
      columns={[
        { header: 'ID', accessor: 'id' },
        { header: 'Name', accessor: 'name' },
        { header: 'Email', accessor: 'email' },
      ]}
    />

Table

The properties of the Table component.

Prop	Type	Default	Description
headers	string[]	[]	Defines the column headers of the table.
data	Array<Record<string, any>>	[]	An array of objects containing data for each row.
className	string	""	Additional classes that can be applied to the top-level div element of the table.

DataTable

The properties of the DataTable component.

Prop	Type	Default	Description
className	string	""	Additional classes that can be applied to the top-level div element of the data table.
data	Array<Record<string, any>>	[]	The array of data to be displayed in the table.
columns	Array<{ header: string, accessor: keyof T }>	[]	An array defining the headers and accessors of the columns.
onSelectedRowsChange	(selectedRows: T[]) => void	undefined	Callback function that is triggered when the selected rows change.