Table

Prop	Type	Default
color	'base' \| 'brand'	-
size	'sm' \| 'md' \| 'lg'	-
header	string[]	-
body	string[][]	-
footer	(string \| { text: string	-
colspan	string \| number	-
as	HTMLTag	table
HTML Attributes	Polymorphic<table>	-

Examples

Product	Quantity
Apple	2
Banana	3
Total	5

---
import Table from 'fulldev-ui/components/Table.astro'
---

<Table
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

Product	Quantity
Apple	2
Banana	3
Total	5

Product	Quantity
Apple	2
Banana	3
Total	5

---
import Table from 'fulldev-ui/components/Table.astro'
---

<Table
  color="base"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

<Table
  color="brand"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

Product	Quantity
Apple	2
Banana	3
Total	5

Product	Quantity
Apple	2
Banana	3
Total	5

Product	Quantity
Apple	2
Banana	3
Total	5

---
import Table from 'fulldev-ui/components/Table.astro'
---

<Table
  size="sm"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

<Table
  size="md"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>
<Table
  size="lg"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

Product	Quantity
Apple	2
Banana	3
Total	5

Product	Quantity
Apple	2
Banana	3
Total	5

---
import Table from 'fulldev-ui/components/Table.astro'
---

<Table
  radius="none"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

<Table
  radius="auto"
  header={['Product', 'Quantity']}
  body={[
    ['Apple', '2'],
    ['Banana', '3'],
  ]}
  footer={['Total', '5']}
/>

Overview

Structure

Segment

Typography

Base

Table

Examples