Table

A table component for displaying HTML tables.

npm version

Source Code

npm install @vrembem/table
@use "@vrembem/table";

table

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

List of anarchists
# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table">
  <caption>List of anarchists</caption>
  <thead>
    <tr>
      <th class="table__auto">#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Noam</td>
      <td>Chomsky</td>
      <td>@chomsky</td>
    </tr>
    ...
  </tbody>
</table>

For simple responsive table styles, wrap your tables in the scroll-box base component.

<div class="scroll-box">
  <table class="table">...</table>
</div>

table_style_[key]

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_style_rowed">
  ...
</table>
# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_style_bordered">
  ...
</table>

table_zebra

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_zebra">
  ...
</table>

table_hover

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_hover">
  ...
</table>

table_responsive_[key]

When scroll-box isn’t mobile friendly enough, table_responsive_[key] is available to turn tables into a more readable format on smaller devices. Mobile labels are set using the data-mobile-lable attribute.

# User Email
1 someone someone@email.com
2 else else@email.com
3 another another@email.com
<table class="table table_responsive_lg">
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-mobile-label="...">...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Available modifier keys default to core.$breakpoints map but can be overridden by setting component variable $breakpoints:

$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;

table_size_[key]

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_size_sm">
  ...
</table>
# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_size_lg">
  ...
</table>

table_overflow_ellipsis

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_ellipsis">
  <colgroup>
    <col style="width: 50px;">
  </colgroup>
  ...
</table>