1.0.1 • Published 3 years ago

ti-tablesaw v1.0.1

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

Tablesaw Build Status

Filament Group

A set of jQuery plugins for responsive tables.

Table Modes

Stack

The Stack Table stacks the table headers to a two column layout with headers on the left when the viewport width is less than 40em (640px).

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">

npm.io

If you only want to use the Stack Table and don’t want all the extra features below (save yourself some bytes), Tablesaw provides a Stack-Only version.

Opt out of inline labels

To opt-out of inline label creation (the table header cell text that shows at small breakpoints) on a per-table basis, use <table data-tablesaw-no-labels>; on a per-row basis, use <tr data-tablesaw-no-labels>.

Toggle

The Column Toggle Table allows the user to select which columns they want to be visible.

<table data-tablesaw-mode="columntoggle">

Table headers must have a data-tablesaw-priority attribute to be eligible to toggle. data-tablesaw-priority is a numeric value from 1 to 6, which determine default breakpoints at which a column will show. As of first release, the defaults are:

<th data-tablesaw-priority="persist"><!-- Not eligible for toggle, always shows --></th>
<th data-tablesaw-priority="1"><!-- Shows at (min-width: 20em) (320px) --></th>
<th data-tablesaw-priority="2"><!-- Shows at (min-width: 30em) (480px) --></th>
<th data-tablesaw-priority="3"><!-- Shows at (min-width: 40em) (640px) --></th>
<th data-tablesaw-priority="4"><!-- Shows at (min-width: 50em) (800px) --></th>
<th data-tablesaw-priority="5"><!-- Shows at (min-width: 60em) (960px) --></th>
<th data-tablesaw-priority="6"><!-- Shows at (min-width: 70em) (1120px) --></th>

Add a Mini Map

<table data-tablesaw-mode="columntoggle" data-tablesaw-minimap>

npm.io

Swipe

Allows the user to use the swipe gesture (or use the left and right buttons) to navigate the columns.

<table data-tablesaw-mode="swipe">

Columns also respect the data-tablesaw-priority="persist" attribute.

<th data-tablesaw-priority="persist"><!-- Always shows --></th>

Add a Mini Map

<table data-tablesaw-mode="swipe" data-tablesaw-minimap>

npm.io

Advanced: Configure Swipe Thresholds

Add a Tablesaw config object after including the Tablesaw JavaScript.

Tablesaw.config = {
  swipe: {
    horizontalThreshold: 15,
    verticalThreshold: 20
  }
};

Mini Map

Use data-tablesaw-minimap to add a series of small dots to show which columns are currently visible and which are hidden. Only available on swipe and columntoggle tables. Examples available above.

Mode Switcher

<table data-tablesaw-mode-switch>

<!-- With a different default mode -->
<table data-tablesaw-mode="swipe" data-tablesaw-mode-switch>

<!-- Exclude a mode from the switcher -->
<table data-tablesaw-mode-switch data-tablesaw-mode-exclude="columntoggle">

npm.io

Sortable

The “sortable” option allows the user to sort the the table data by clicking on the table headers. Since all the columns may not be visible on smaller breakpoints (or not there at all if using the “stack” table mode), relying solely on the column headers to choose the table sort isn’t practical. To address this, there is an optional data-tablesaw-sortable-switch attribute on the table that adds a select menu auto-populated with the names of each column in the table with options for choosing ascending or descending sort direction. Data options on table headers can be used to control which columns are sortable (data-tablesaw-sortable-col) and the default sort order (data-tablesaw-sortable-default-col).

<table data-tablesaw-sortable>
    <thead>
        <tr>
            <!-- Default column -->
            <th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
            <th data-tablesaw-sortable-col>Movie Title</th>
            <th data-tablesaw-sortable-col>Year</th>
            <th data-tablesaw-sortable-col><abbr title="Rotten Tomato Rating">Rating</abbr></th>
            <!-- Unsortable column -->
            <th>Reviews</th>
        </tr>
    </thead>
    ...

Use data-tablesaw-sortable-switch to add a select form element to manually choose the sort order.

<table data-tablesaw-sortable data-tablesaw-sortable-switch>

npm.io

Kitchen Table Sink

All of the above options combined into a single table.

Getting Started

TableSaw requires Respond.js for IE8- support.

Using Stack-Only TableSaw

As shown above, we provide a Stack-mode-only package of TableSaw. It’s a barebones version that doesn’t include any of the other features above.

<link rel="stylesheet" href="tablesaw.css">
<!--[if lt IE 9]><script src="dependencies/respond.js"></script><!--<![endif]-->
<script src="tablesaw.js"></script>

And then:

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">

Check out the Stack-Only demo to see a working example.

Using Stack-Only TableSaw SCSS Mixin

To easily customize the breakpoint at which the stack table switches, use the SCSS mixin. First, include the tablesaw.stackonly.scss file instead of tablesaw.stackonly.css in your SASS. Then, use a parent selector on your table.

<div class="my-parent-selector">
    <table class="tablesaw" data-tablesaw-mode="stack">

Include the mixin like so:

.my-parent-selector {
  @include tablesaw-stack( 50em );
}

The argument to tablesaw-stack is the breakpoint at which the table will switch from columns to stacked.

The Full TableSaw

If you want the other modes, it’ll take a little bit more configuration.

<link rel="stylesheet" href="tablesaw.css">

<!--[if lt IE 9]><script src="dependencies/respond.js"></script><!--<![endif]-->
<script src="dependencies/jquery.js"></script>
<script src="tablesaw.js"></script>

Or, if you use Bower to manage your dependencies (and bower is installed globally):

bower install
<link rel="stylesheet" href="tablesaw.css">

<!--[if lt IE 9]><script src="bower_components/respond/dest/respond.min.js"></script><!--<![endif]-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="tablesaw.js"></script>

Check out any of the demos above for complete working examples.

Using Bare TableSaw

If you would like the full functionality of the TableSaw plugin. but don't want the plugin's default table styles, use the tablesaw.bare.css file instead of the standard tablesaw.css file.

Tests

Building the Project Locally

Run npm install, then bower install, then grunt to build the project files into the dist folder.

1.0.1

3 years ago