Table

npm install @vrembem/table

@use "@vrembem/table";

Options

Table is built as a Sass module. Sass options are used to control CSS output, while design token CSS variables control the styling of the component. Below are the available configuration options.

Sass

Table comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

@use "@vrembem/table" with (
  $config: (
    // Toggle for outputting table--mobile modifier breakpoint variants
    // @type boolean
    "table-mobile": (
      "breakpoints": true,
      "attr": "data-mobile-label"
    )
  )
);

Design tokens

Table uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-table-foreground

inherit

--vb-table-background

var(--vb-background)

--vb-table-padding

0.5em 0.75em

--vb-table-vertical-align

top

--vb-table-header-foreground

var(--vb-foreground)

--vb-table-border-width

var(--vb-border-width)

--vb-table-border-style

var(--vb-border-style)

--vb-table-border-color

var(--vb-border-color)

--vb-table-foreground-hover

inherit

--vb-table-background-hover

hsl(var(--vb-primary-hs) 50% / 15%)

--vb-table-background-striped

var(--vb-background-alt)

--vb-table-mobile-label-width

8em

--vb-table-mobile-label-spacing

0.75em

--vb-table-mobile-label-foreground

inherit

--vb-table-mobile-label-background

transparent

Basic usage

For basic table styles, only the table component class is required. Use proper HTML table markup and styles should apply as expected.

<table class="table">
  <caption>Example of a table caption.</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Mass</th>
      <th>Class</th>
      <th>Variant</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Locust</td>
      <td>20t</td>
      <td>Light</td>
      <td>LCT-1V</td>
    </tr>
    <tr>
      <td>Shadow Hawk</td>
      <td>55t</td>
      <td>Medium</td>
      <td>SHD-2H</td>
    </tr>
    <tr>
      <td>Thunderbolt</td>
      <td>65t</td>
      <td>Heavy</td>
      <td>TDR-5S</td>
    </tr>
    <tr>
      <td>BattleMaster</td>
      <td>85t</td>
      <td>Assault</td>
      <td>BLR-1G</td>
    </tr>
  </tbody>
</table>

Overflow utility

For simple responsive table styles, wrap your tables in a div with the overflow-auto utility. This provides horizontal scrolling when tables can't fit in their container.

<div class="overflow-auto">
  <table class="table">
    ...
  </table>
</div>

Hug content

Use the hug-content table utility when a table cell should fit the size of its contents. This is useful for columns with compact content like checkboxes, icons, or action buttons that shouldn't take up more space than necessary.

<table class="table">
  <thead>
    <tr>
      <th class="hug-content"></th>
      ...
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

table--ellipsis

Switches a table layout to fixed and adds ellipsis overflow styles to table cells and headers.

<table class="table table--ellipsis">
  ...
</table>

Space will be split equally between columns when table--ellipsis is applied. For more control over specific column widths, use the <colgroup> and <col> elements and set their desired widths as needed.

<table class="table table--ellipsis">
  <colgroup>
    <col />
    <col style="width: 5em;" />
    <col />
  </colgroup>
  ...
</table>

table--hover

Adds hover, focus and focus-within state styles for table row (<tr>) elements.

<table class="table table--hover">
  ...
</table>

table--mobile

A modifier that adds mobile styles to a table so that it's easier to read on mobile devices. This is done by using the data-mobile-label attribute on table cells that should correspond to the table column header for that specific cell.

<table class="table table--mobile">
  <thead>
    <tr>
      <th>key</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-mobile-label="key">...</td>
      <td data-mobile-label="value">...</td>
    </tr>
  </tbody>
</table>

The mobile label value will be truncated if it exceeds the width set by --vb-table-mobile-label-width CSS variable. The mobile label attribute used can be changed using the attr key in the table-mobile config options map.

Breakpoint variants

This modifier come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map. Breakpoint variants output can be toggled using the breakpoints key in the table-mobile config options map (default: true).

Available variants

• xs:table--mobile
• sm:table--mobile
• md:table--mobile
• lg:table--mobile
• xl:table--mobile

table--padding-[key]

Adjust the padding of a table's <th>, <td>, and <caption> elements. These modifiers are generated using key/value pairs of the table-padding config options map.

<table class="table table--padding-sm">...</table>
<table class="table table--padding-lg">...</table>

Available variants

• table--padding-sm
• table--padding-md
• table--padding-lg

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map. Breakpoint variants output can be toggled using the breakpoints key in the table-padding config options map (default: true).

<table class="table table--padding-sm lg:table--padding-md xl:table--padding-lg">
  ...
</table>

Available variants

• sm:table--padding-[key]
• md:table--padding-[key]
• lg:table--padding-[key]

table--striped

Adds zebra styled rows to a table to help increase its readability. This is done by alternating the background color of rows to help guide the reader's eye.

<table class="table table--striped">
  ...
</table>

table--style-[key]

Adds table styles based on the provided value.

<table class="table table--style-rowed">
  ...
</table>

<table class="table table--style-bordered">
  ...
</table>

Available variants

• table--style-rowed
• table--style-bordered