@sveltestrap/sveltestrap
Version:
Bootstrap components for Svelte
385 lines (349 loc) • 7.13 kB
text/mdx
import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as TableStories from './Table.stories';
<Meta title="Content/Tables" />
# Tables <small class="bootstrap-docs">[Bootstrap Tables](https://getbootstrap.com/docs/5.3/content/tables/)</small>
The `<Table>` component is a user interface element that enables the display of various forms of data.
<Canvas>
<Story of={TableStories.Basic} />
</Canvas>
<Controls of={TableStories.Basic} />
## Bordered
<Canvas withSource="none">
<Story of={TableStories.Bordered} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table bordered>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
`} />
## Borderless
<Canvas withSource="none">
<Story of={TableStories.Borderless} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table borderless>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
`} />
## Hover
<Canvas withSource="none">
<Story of={TableStories.Hover} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
`} />
## Striped
<Canvas withSource="none">
<Story of={TableStories.Striped} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table striped>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
`} />
## Sizes
<p>
You can change the `<Table>` size by setting the <code>size</code> prop to <code>sm</code>.
</p>
<Canvas withSource="none">
<Story of={TableStories.Sizes} />
</Canvas>
<Source dark language="html" code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
`} />
## Responsive
<p> You can enable horizontal scrolling on the `<Table>` by setting the <code>responsive</code> prop to <code>true</code>. </p>
<Canvas withSource="none">
<Story of={TableStories.Responsive} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Table } from '@sveltestrap/sveltestrap';
</script>
<Table responsive>
<thead>
<tr>
<th>#</th>
{#each Array(15) as _, count}
<th>Header {count + 1}</th>
{/each}
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
{#each Array(15) as _, count}
<td>Cell {count + 1}</td>
{/each}
</tr>
<tr>
<th scope="row">2</th>
{#each Array(15) as _, count}
<td>Cell {count + 1}</td>
{/each}
</tr>
<tr>
<th scope="row">3</th>
{#each Array(15) as _, count}
<td>Cell {count + 1}</td>
{/each}
</tr>
</tbody>
</Table>
`}
/>
## Columns
<Canvas withSource="none">
<Story of={TableStories.Columns} />
</Canvas>
<Source
dark
language="html"
code={`
<script lang="ts">
import { Column, Table } from '@sveltestrap/sveltestrap';
const ROWS = [
{
first: 'Rufus',
last: 'Sarsparilla',
email: 'rufus.sarsparilla@example.com',
dob: new Date(1968, 6, 15)
},
{
first: 'Albert',
last: 'Armadillo',
email: 'albert.armadillo@example.com',
dob: new Date(1972, 7, 17)
},
{
first: 'Arron',
last: 'Douglas',
email: 'arron.douglas@example.com',
dob: new Date(1982, 4, 1)
},
{
first: 'Reginald',
last: 'Rhodes',
email: 'reginald.rhodes@example.com',
dob: new Date(1968, 8, 14)
},
{
first: 'Jimmy',
last: 'Mendoza',
email: 'jimmy.mendoza@example.com',
dob: new Date(1964, 1, 1)
},
{
first: 'Georgia',
last: 'Montgomery',
email: 'georgia.montgomery@example.com',
dob: new Date(1960, 6, 4)
},
{
first: 'Serenity',
last: 'Thomas',
email: 'serenity.thomas@example.com',
dob: new Date(1973, 0, 11)
},
{
first: 'Tonya',
last: 'Elliott',
email: 'tonya.elliott@example.com',
dob: new Date(1954, 7, 17)
},
{
first: 'Maxine',
last: 'Turner',
email: 'maxine.turner@example.com',
dob: new Date(1961, 8, 19)
},
{
first: 'Max',
last: 'Headroom',
email: 'max.headroom@example.com',
dob: new Date(1984, 6, 1)
}
];
</script>
<Table rows={ROWS} let:row>
<Column header="First Name" width="8rem">
{row.first}
</Column>
<Column header="Last Name" width="8rem">
{row.last}
</Column>
<Column header="Email">{row.email}</Column>
<Column header="Birthdate" width="10rem" class="text-right">
{row.dob.toDateString()}
</Column>
</Table>
`} />