Table

Table component pack for Seed

Install

npm install seed-table --save

Dependencies


Example

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Occupation</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Woody</td>
      <td>Cowboy</td>
      <td>@therealSheriffWoody</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Buzz Lightyear</td>
      <td>Space Ranger</td>
      <td>@Buzz14079395277</td>
    </tr>
  </tbody>
</table>

Alignment

Top

# Table heading Table heading
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum ipsum diam, et consequat urna placerat nec. Duis nulla orci, semper eget dolor sit amet, mollis volutpat velit. Nunc ante velit, ultricies at cursus et, gravida vel tellus. Nam vel ligula dolor. Cras et erat vitae ex ornare laoreet sed vel mi. I'm aligned to the top!
<table class="c-table c-table--top">
  ...
</table>

Middle

# Table heading Table heading
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum ipsum diam, et consequat urna placerat nec. Duis nulla orci, semper eget dolor sit amet, mollis volutpat velit. Nunc ante velit, ultricies at cursus et, gravida vel tellus. Nam vel ligula dolor. Cras et erat vitae ex ornare laoreet sed vel mi. I'm aligned to the middle!
<table class="c-table c-table--middle">
  ...
</table>

Bottom

# Table heading Table heading
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum ipsum diam, et consequat urna placerat nec. Duis nulla orci, semper eget dolor sit amet, mollis volutpat velit. Nunc ante velit, ultricies at cursus et, gravida vel tellus. Nam vel ligula dolor. Cras et erat vitae ex ornare laoreet sed vel mi. I'm aligned to the bottom!
<table class="c-table c-table--bottom">
  ...
</table>

Sizes

Small

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table c-table--sm">
  ...
</table>

Extra Small

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table c-table--xs">
  ...
</table>

Styles

Below are all the modifier styles that can be applied to .c-table. These modifiers can be combined or used on their own.

Bordered

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table c-table--bordered">
  ...
</table>

Hoverable

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table c-table--hover">
  ...
</table>

Striped

# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table c-table--striped">
  ...
</table>

States

The following are states that can be applied to table rows (tr) and/or individual table cells (th/td):

  • .is-error
  • .is-info
  • .is-success
  • .is-warning
# Name Occupation Username
1 Woody Cowboy @therealSheriffWoody
2 Buzz Lightyear Space Ranger @Buzz14079395277
<table class="c-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Occupation</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr class="is-success">
      <th scope="row">1</th>
      <td>Woody</td>
      <td>Cowboy</td>
      <td>@therealSheriffWoody</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td class="is-error">Buzz Lightyear</td>
      <td class="is-info">Space Ranger</td>
      <td class="is-warning">@Buzz14079395277</td>
    </tr>
  </tbody>
</table>

Responsive tables

# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
<div class="o-responsive-wrapper">
  <table class="c-table">
    ...
  </table>
</div>

Configurations

Below are the default Sass configuration variables for seed-table. The variables can be found in the pack’s _config.scss file.

seed-table/_config.scss
// Namespaces
$seed-table-namespace: c-table !default;

// Configs
$seed-table-background-color-hover: #F1F3F5 !default;
$seed-table-background-color-striped: #F9FAFA !default;
$seed-table-border-color: #E3E8EB !default;
$seed-table-border-width: 1px !default;
$seed-table-th-border-width: 1px !default;

$seed-table-padding-sizes: (
  md: 12px,
  sm: 8px,
  xs: 4px
) !default;