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">
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="o-col-5">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.</td>
      <td class="o-col-5">I'm aligned to the top!</td>
    </tr>
  </tbody>
</table>

<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">
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="o-col-5">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.</td>
      <td class="o-col-5">I'm aligned to the middle!</td>
    </tr>
  </tbody>
</table>

<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">
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="o-col-5">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.</td>
      <td class="o-col-5">I'm aligned to the bottom!</td>
    </tr>
  </tbody>
</table>

<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">
  <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>

<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">
  <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>

<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">
  <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>

<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">
  <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>

<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">
  <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>

<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">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

<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;

↑Back to top

Help Scout Developers