Skip to content
Fulldev UI

Table

A native, styled table element.
Product Color Quantity
Apple Green 2
Banana Yellow 3
Total ‌ 2 
--- 
import { Table } from 'fulldev-ui'
---

<Table
  size="md"
  color="base"
/>
Product Color Quantity
Apple Green 2
Banana Yellow 3
Total 5 
---
import { Table } from 'fulldev-ui'
---


<Table
  header={['Product', 'Color', 'Quantity']}
  body={[
    ['Apple', 'Green', '2'],
    ['Banana', 'Yellow', '3'],
  ]}
  footer={[{ text: 'Total', colspan: '2' }, '5']}
/>

Props

The Table component exists of multiple sub-components. Each sub-component has its own set of props.

<Table>

Prop Type Default
header string[] -
body string[][] -
footer string[] -
size sm | md | lg -
color base | brand -
scheme light | dark -
text string -
html string -
HTML Attributes HTMLAttributes<table> -

<TableHeader>

Prop Type Default
cells string -
HTML Attributes HTMLAttributes<thead> -

<TableBody>

Prop Type Default
rows string[] -
HTML Attributes HTMLAttributes<tbody> -

<TableRow>

Prop Type Default
cells string[] -
HTML Attributes HTMLAttributes<tr> -

<TableCell>

Prop Type Default
text string -
html string -
HTML Attributes HTMLAttributes<td> -

<TableFooter>

Prop Type Default
cells string[] -
HTML Attributes HTMLAttributes<tfoot> -

Examples

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

Product Quantity
Apple 2
Product Quantity
Apple 2
Product Quantity
Apple 2 
---
import { Table } from 'fulldev-ui'


const table = {
  header: ['Product', 'Quantity'],
  body: [['Apple', '2']],
}
---


<Table size="sm" {...table} />
<Table size="md" {...table} />
<Table size="lg" {...table} />

Props vs slots

<Table>
  <TableHeader cells={['First Name', 'Last Name', 'Age']} />
  <TableBody>
    <TableRow cells={['John', 'Doe', '31']} />
    <TableRow cells={['Jane', 'Doe', '29']} />
  </TableBody>
  <TableFooter cells={[{ text: 'Total', colspan: '2' }, '2']} />
</Table>

instead of creating each row with a TableRow component, you can use the rows prop in the TableBody component.

<TableBody
  rows={[
    ['John', 'Doe', '31'],
    ['Jane', 'Doe', '29'],
  ]}
/>