{/* table.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './table.stories.json';
import templateSource from './table.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />


> ### [Bootstrap Documentation on Tables](https://getbootstrap.com/docs/5.3/content/tables/)
> * [Overview](https://getbootstrap.com/docs/5.3/content/tables/#overview)
> * [Variants](https://getbootstrap.com/docs/5.3/content/tables/#variants)
> * [Accented tables](https://getbootstrap.com/docs/5.3/content/tables/#accented-tables)
> * [Striped rows](https://getbootstrap.com/docs/5.3/content/tables/#striped-rows)
> * [Striped columns](https://getbootstrap.com/docs/5.3/content/tables/#striped-columns)
> * [Hoverable rows](https://getbootstrap.com/docs/5.3/content/tables/#hoverable-rows)
> * [Active tables](https://getbootstrap.com/docs/5.3/content/tables/#active-tables)
> * [How do the variants and accented tables work?](https://getbootstrap.com/docs/5.3/content/tables/#how-do-the-variants-and-accented-tables-work)
> * [Table borders](https://getbootstrap.com/docs/5.3/content/tables/#table-borders)
> * [Bordered tables](https://getbootstrap.com/docs/5.3/content/tables/#bordered-tables)
> * [Tables without borders](https://getbootstrap.com/docs/5.3/content/tables/#tables-without-borders)
> * [Small tables](https://getbootstrap.com/docs/5.3/content/tables/#small-tables)
> * [Table group dividers](https://getbootstrap.com/docs/5.3/content/tables/#table-group-dividers)
> * [Vertical alignment](https://getbootstrap.com/docs/5.3/content/tables/#vertical-alignment)
> * [Nesting](https://getbootstrap.com/docs/5.3/content/tables/#nesting)
> * [Table head](https://getbootstrap.com/docs/5.3/content/tables/#table-head)
> * [Table foot](https://getbootstrap.com/docs/5.3/content/tables/#table-foot)
> * [Captions](https://getbootstrap.com/docs/5.3/content/tables/#captions)
> * [Responsive tables](https://getbootstrap.com/docs/5.3/content/tables/#responsive-tables)
> * [Breakpoint specific](https://getbootstrap.com/docs/5.3/content/tables/#breakpoint-specific)

<Primary />

## Properties
<Controls />


### Attributes:
* `attributes`: HTML attributes to apply to the `<table>` tag.
* `thead_attributes`: HTML attributes to apply to the `<thead>` tag.
* `tbody_attributes`: HTML attributes to apply to the `<tbody>` tag.
* `tfoot_attributes`: HTML attributes to apply to the `<tfoot>` tag.

### Slots:
* N/A

<Stories of={comStories} />

**Example #1** Used in the `table.html.twig` in Vartheme BS5
Only passing variables from Drupal.
```
{% include 'vartheme_bs5:table' with {   
    caption: caption|default(''),
    colgroups: colgroups|default([]),
    header: header|default([]),
    sticky: sticky|default([]),
    rows: rows|default([]),
    footer: footer|default([]),
    empty: empty|default(''),
    no_striping: no_striping|default(false)
  }
%}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
