Table

A table component for displaying HTML tables.

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>