@sveltestrap/sveltestrap/dist/Table/Table.mdx

Bootstrap components for Svelte

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>
`} />