Table

1. Table Structure

The table component follows a clear, accessible structure. It includes a <table> element wrapped inside a <figure> to group the table with its caption. The table contains three key sections: <thead> for headers, <tbody> for the main content, and <tfoot> for footers.

Key elements:

• bt1d-table-wrapper: Wraps the table and caption.
• bt1d-table-caption: Provides a caption for the table, describing its content or purpose.

HTML Markup Example

<figure class="bt1d-table-wrapper">
  <table class="bt1d-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
  <figcaption class="bt1d-table-caption">Table Caption</figcaption>
</figure>

2. Key Classes

The table component comes with several classes that control layout and styling.

• bt1d-table--fixed-layout: Ensures consistent column widths across the table. Useful for layouts where the column sizes need to remain fixed.
• bt1d-table--stripes: Adds alternating row colors (stripes), improving readability for tables with many rows.
• bt1d-table--scrollable: This class is added dynamically by JavaScript when the table overflows the viewport on mobile, enabling horizontal scrolling.
• bt1d-table--scrollable-right: Also added by JavaScript, this class hides the scroll indicator once the user has scrolled to the far-right side of the table. It signals that no further scrolling is possible.

3. Responsive Behavior (JS-Enhanced)

On mobile devices or smaller screens, the table automatically becomes scrollable when its content overflows horizontally. JavaScript detects this overflow and applies the necessary classes for a smooth, scrollable experience.

• bt1d-table--scrollable is applied when the table exceeds the viewport width, allowing users to scroll horizontally.
• bt1d-table--scrollable-right is applied when the user reaches the end of the table’s content, hiding the scroll indicator.

Example of a scrollable table:

<figure class="bt1d-table-wrapper">
  <table class="bt1d-table bt1d-table--scrollable">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
    </tbody>
  </table>
  <figcaption class="bt1d-table-caption">Scrollable Table Example</figcaption>
</figure>

4. CSS and Layout Options

The table component offers several layout options to improve presentation and usability:

• Fixed Layout: Use bt1d-table--fixed-layout to ensure that the table columns remain consistent in width, providing a structured, organized look.
• Striped Rows: Applying the bt1d-table--stripes class alternates row colors, making it easier to scan and read large tables.

Example (default):

<figure class="bt1d-table-wrapper">
  <table class="bt1d-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
    </tbody>
  </table>
  <figcaption class="bt1d-table-caption">Striped Table Example</figcaption>
</figure>

Header Label	Secondary Header	Tertiary Header	Last Header Label
Table Content	Table Content	Table Content	Table Content
Table Content	Deserunt enim cupidatat Lorem ad ipsum labore nisi eu aliquip.	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Footer Label	Secondary Footer	Tertiary Footer	Last Footer Item

Example with striped rows:

<figure class="bt1d-table-wrapper">
  <table class="bt1d-table bt1d-table--stripes">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
    </tbody>
  </table>
  <figcaption class="bt1d-table-caption">Striped Table Example</figcaption>
</figure>

Header Label	Secondary Header	Tertiary Header	Last Header Label
Table Content	Table Content	Table Content	Table Content
Table Content	Deserunt enim cupidatat Lorem ad ipsum labore nisi eu aliquip.	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Footer Label	Secondary Footer	Tertiary Footer	Last Footer Item

Full example with fixed layout, striped rows, and scrollable behavior:

<figure class="bt1d-table-wrapper">
  <table class="bt1d-table bt1d-table--fixed-layout bt1d-table--stripes">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
      <tr>
        <td>Content 5</td>
        <td>Content 6</td>
        <td>Content 7</td>
        <td>Content 8</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
  <figcaption class="bt1d-table-caption">Full Table Example</figcaption>
</figure>

Header Label	Secondary Header	Tertiary Header	Last Header Label
Table Content	Table Content	Table Content	Table Content
Table Content	Deserunt enim cupidatat Lorem ad ipsum labore nisi eu aliquip.	Table Content	Table Content
Table Content	Table Content	Table Content	Table Content
Footer Label	Secondary Footer	Tertiary Footer	Last Footer Item

6. Summary

The Table Component offers flexibility for presenting tabular data:

• Use bt1d-table--fixed-layout for tables that require consistent column widths.
• Add bt1d-table--stripes to enhance readability with alternating row colors.
• JavaScript dynamically manages horizontal scrolling on smaller screens by applying bt1d-table--scrollable and bt1d-table--scrollable-right when needed.