tablesaw 0,1,-4,3,2,0,3,0 travis-ci grunt npm

A group of plugins for responsive tables.

2 years after MIT


npm version Build Status Dependency Status

Filament Group

A set of plugins for responsive tables.

Stack Mode

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

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.

Option Description
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>.
Hide headers for empty body cells When the table cell is empty, use <table data-tablesaw-hide-empty> to hide the header when stacked.

Column Toggle Mode

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

<table data-tablesaw-mode="columntoggle">
Option Description
Add a Mini-Map The little dots that appear next to the column toggle popup. Use the data-tablesaw-minimap attribute: <table data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
Advanced Option: Prioritize Columns 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. The breakpoint defaults are: ```html ``` Keep in mind that the priorities are not exclusive—multiple columns can reuse the same priority value.

Swipe Mode

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

<table data-tablesaw-mode="swipe">
Options Description
Persist a Column Columns also respect the data-tablesaw-priority="persist" attribute: <th data-tablesaw-priority="persist"><!-- Always shows --></th>
Add a Mini-Map The little dots that appear next to the column toggle popup. Use the data-tablesaw-minimap attribute: <table data-tablesaw-mode="swipe" data-tablesaw-minimap>
All columns visible class Tablesaw also exposes a tablesaw-all-cols-visible class that is toggled on when all of the table columns are visible (and off when not). You can use this in CSS to hide the minimap or navigation buttons if needed.
Disable swipe touch events Use the <table data-tablesaw-no-touch> attribute to opt-out of swiping left or right to navigate columns. Users will need to use the provided buttons instead.
Advanced Option: Configure Swipe Thresholds Add a `TablesawConfig` object to your page in a ` ``` * [Configure Swipe Threshold Demo](

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-switch data-tablesaw-mode="swipe">

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


The “sortable” option allows the user to sort 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>
            <!-- 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 data-tablesaw-sortable-numeric>Year</th>
            <th data-tablesaw-sortable-col data-tablesaw-sortable-numeric><abbr title="Rotten Tomato Rating">Rating</abbr></th>
            <!-- Unsortable column -->

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>

Advanced Option: Custom Sort Functions Tablesaw provides two methods of sorting built-in: string and numeric. To use numeric sort, use the `data-tablesaw-sortable-numeric` class as shown in the above sorting markup example. Otherwise, tablesaw uses a case insensitive string sort. All other types of sorting must use a Custom Sort function on the individual columns ([working example]( In the contrived example below, we want to sort full dates (e.g. `12/02/2014`) just on the year. ``` // Add a data function to the table header cell $( "th#custom-sort" ).data( "tablesaw-sort", function( ascending ) { // return a function return function( a, b ) { // Ignore rows with data-tablesaw-ignorerow (leave them where they were) if( a.ignored || b.ignored ) { return 0; } // use a.cell and b.cell for cell values var dateA = a.cell.split( "/" ), dateB = b.cell.split( "/" ), yearA = parseInt( dateA[ 2 ], 10 ), yearB = parseInt( dateB[ 2 ], 10 ); if( ascending ) { return yearA >= yearB ? 1 : -1; } else { // descending return yearA < yearB ? 1 : -1; } }; }); ```

Kitchen Table Sink

All of the above options combined into a single table.

Check All

Added in 3.0.1. Add the data-tablesaw-checkall to a checkbox in a thead cell to enable that checkbox to toggle the other checkboxes in the same column.

Getting Started

Available through npm:

npm install tablesaw

The Full Tablesaw

Tablesaw (no dependencies) ```html ```
or Tablesaw (jQuery Plugin) ```html ```

Don’t forget to add your table markup! For a stack table, this is how it’d look:

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

The demos above include full markup examples for all of the Tablesaw types.

Manual initialization of Tablesaw Components

If you want to initialize your Tablesaw tables manually, don’t include <script src="tablesaw-init.js"> in your markup. Instead, you can trigger the enhance.tablesaw event on any DOM node you wish. This will scan the tree for any Tablesaw tables and initialize them for you.

Two caveats here:

  • This can only properly occur after DOMContentLoaded.
  • Tables must be visible for proper initialization.
$( "#my-tab-content" ).trigger( "enhance.tablesaw" );

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.

Stack-only Tablesaw (no dependencies) ```html ```
or just Stack-only Tablesaw (jQuery Plugin) ```html ```

And then:

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

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.

Default Styles

Starting with Tablesaw 3.0, the “Bare”, or stripped down style version of Tablesaw has been made the default.

Some of the more intrusive default styles have instead moved to opt-in classes you can add to the <table> element:

  • tablesaw-row-border: Adds a bottom border to each table row.
  • tablesaw-row-zebra: Adds a light background color to every other table row.
  • tablesaw-swipe-shadow: Adds the light shadow to the right of persistant columns to make them stand out a little more.


  • Simple colspan and rowspan are supported, in part thanks to a lovely PR from @jgibson. More complex colspan scenarios (where table cells cross Tablesaw top-level column boundaries) are not supported. Tablesaw top-level column boundaries are defined by the cells in the first table header row and determine what columns are listed in the Column Toggle switcher or what hides/shows when the user navigates on a Swipe table.
Stack Column Toggle Swipe Sortable
rowspan Not yet supported (#247) Supported Supported Not yet supported (#268)
colspan Supported Supported Supported Supported


Browser Support

All major browsers (evergreens are not listed, but supported). Notably this project cuts the mustard for A-grade support with:

  • Internet Explorer 9+
  • Android Browser 2.3+
  • Blackberry OS 6+

Other legacy browsers and Opera Mini receive unenhanced table markup.

Building the Project Locally

Run npm install to install dependencies and then grunt to build the project files into the dist folder.

Related Repositories



A curated list of awesome frameworks, libraries and software for the Java progra ...



A responsive, eye-pleasing Linux server statistics dashboard. ...



This is a boilerplate for scaffolding Bootstrap themes. ...



Minimal Elegant Online Documentation ...



Documentation Style Theme for Wiki Setup ...

Top Contributors

zachleat jefflembeck relaxatorium geo242 dz jgibson nickalbrecht aakoch chrisschrijver Wilto zozich jonscottclark nschonni peterwilsoncc pra85 bitmanic toddparker emattias greenkeeperio-bot


package version
shoestring ^2.0.0
dev grunt ^1.0.1
grunt-bytesize ~0.2.0
grunt-contrib-clean ~1.1.0
grunt-contrib-compress ~1.4.3
grunt-contrib-concat ~1.0.1
grunt-contrib-copy ~1.0.0
grunt-contrib-cssmin ^2.2.0
grunt-contrib-qunit ~2.0.0
grunt-contrib-uglify ^3.0.1
grunt-contrib-watch ~1.0.0
grunt-gh-pages ~2.0.0
grunt-myth ~1.1.0
husky ^0.14.3
jquery ^3.1.0
lint-staged ^4.0.1
matchdep ~1.0.1
prettier ^1.5.2
qunitjs ^2.0.0


-   v3.0.0-beta.2 zip tar
-   v3.0.0-beta.1 zip tar
-   v3.0.0-beta.0 zip tar
-   v2.0.3 zip tar
-   v2.0.2 zip tar
-   v2.0.1 zip tar
-   v2.0.0 zip tar
-   v1.0.5 zip tar
-   v1.0.4 zip tar
-   v1.0.3 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   v0.1.8 zip tar
-   v0.1.7 zip tar
-   v0.1.6 zip tar
-   v0.1.5 zip tar
-   v0.1.4 zip tar
-   v0.1.3 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.1 zip tar