column-control

Column-Control

Input an html table. Output controls to hide / show / move columns of that table.

Controls:

With drop down open:

To play with an example, download and run: npm run-script example

Usage

A basic implementation:

var cc = require('column-control');

var targetTable = document.querySelector('.target-table');

var opts = {
  table: targetTable
  };

var controls = cc(opts);

If you do not use the "columns" option (detailed below), then column-control will use the data in the first row of the target table as titles for the controls.

Options:

table :          (required) this is a reference to the table you are
                 making controls for.

defaultColumns : an array of the column titles you want shown upon load.
                 Use this only if you are not using the "columns" option.

columns :        this is an array of objects. each object holds options for
                 that column and may contain:

  title :             (string) what is displayed as the label in the
                      drop down and button control

  default :           (boolean) show/hide on load

  additionalControl : (DOM element) use this is you'd like to drop some
                      additional html into the button control for each
                      column. Example coming soon.