flat_graphic_business_08

TABLESAW SCRIPT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

TableSaw Features:

  • Very lightweight footprint for underlying script
  • Sort option for columns
  • Exclude columns from being sortable
  • Provide global sort control above table
  • Includes responsive layouts
  • Provide global mode switch option for responsive layouts
  • Provide mini map for some responsive layouts to indicate which columns are currently visible
  • Supports footer row option (for total amounts, etc.)

TableSaw

... apply some advanced features to your table

The “TableSaw” script is a lightweight script to quickly and easily add a sorting routine and responsive layout to your table, without sacrificing speed and performance. The script will only apply some basic styling to your table; most styling will come from your theme or any other global table styling that is applied to your site.

STANDARD LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

RESPONSIVE LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

This table has been intentionally placed into a column that is not wide enough to accommodate the full width (all columns) of the table, therefore triggering a preset responsive layout.

If you want to, you can provide your users with an optional control to change the default responsive layout (“Mode Switch”).

Available responsive modes include a “swipe” mode, where columns are basically paginated horizontally, and the user can browse columns by using the provided left/right buttons, and/or via swipe on touch devices. An optional dot based “minimap” indicates which columns are currently visible.

A “toggle” mode simple hides columns that don’t fit into the available space anymore, and the user can instead “toggle” between all columns by using a provided listing of all columns, simply marking the columns that are meant to be visible. An optional dot based “minimap” is also available for this mode.

Lastly, a simple “stack” layout is also available, where the table is converted into stacked tiles, each tile basically representing one row of the original table.

line-banner-19