lintel-contrib-tables

Tables for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-tables --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-tables/sass/tables.scss"

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$table-padding-y-base

Table cell padding-top and padding-bottom.

$table-padding-x-base

Table cell padding-left and padding-right.

$table-border

Default value: $border-base

Border color.

$table-border-th

Default value: $border-dakrest

Border under table head.

$table-divided-border

Default value: $table-border

Vertical divider border color. Can also use $table-divided-border-style to change to dotted or dashed.

$table-striped-bg

Default value: $bg-light

Striped table background.

$table-hover-bg

Default value: $bg-base

<td> background on row hover.

$table-edge-padding-x

Default value: $table-padding-x-base + $cushion-base

Changes the padding-left of the first column and the padding-right of the last column. This can be useful if you use a grid and want the table to expand to the edge (gutter).

For example, you could change it to something like: $table-padding-x-base + $grid-gutter and place it outside of the column or have a class with negative margins to pull it out of the gutter.

If set to 0, the .table-edge selectors will not be compiled in the CSS.

Mixins

Check the mixins file in the sass folder to see how you can extend this module.

table-size($className, $padding-y, $padding-x)

Creates a new table-size class.

@include table-size("table-xl", 30px, 40px);

.table-xl > thead > tr > th, 
.table-xl > thead > tr > td, 
.table-xl > tbody > tr > th, 
.table-xl > tbody > tr > td, 
.table-xl > tfoot > tr > th, 
.table-xl > tfoot > tr > td {
  padding: 12px 20px;
}

Examples

Base

<table class="table">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

Modifiers

<table class="table table-bordered table-divided table-edge table-hover table-striped">
  ...
</table>

States

<table class="table">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>Primary BG 1</td>
      <td>Primary BG 2</td>
      <td>Primary BG 3</td>
      <td>Primary BG 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td class="table-success">Success BG 4</td>
    </tr>
  </tbody>
</table>

Condensed

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

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

License

Copyright (c) 2015 Marius Craciunoiu. Licensed under the MIT license.