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={[{ text: 'Total', colspan: '2' }, '5']}
/>
Props
| 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']}
/>