Table

Product	Color	Quantity
Apple	Green	2
Banana	Yellow	3
Total		5

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

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

Props

Prop	Type	Default
color	'base' \| 'brand' \| undefined	-
size	'sm' \| 'md' \| 'lg' \| undefined	-
header	string[] \| undefined	-
body	string[][] \| undefined	-
footer	string[] \| undefined	-
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']}
/>

Select Textarea