Data Grid Pattern

The styling is in "scss/custom-bootstrap/_data-grid.scss"

The javascript is in "js/custom-bootstrap/data-grid.js"

Basic Usage

To turn a table to Data-grid, just attach data-gid class to a bootstrap table:

<table class="table data-grid draggable">

Drag & drop columns

If you want to allow drag-n-drop of columns, add draggable class to th of the column you want to allow drag:

<th class="draggable">Row heading</th>

Table controls

Data grid can be used with controls, you can include default controls by typing:

{% include admin/data-grid-controls.html %}

If you want to customize the controls, copy code from _inlcudes/admin/data-grid-controls.html file and put it on top of your Data-grid.

Collapse/Expand rows

First, add a toggle button:

<a href="#" class="btn btn-default collapsed" data-toggle="collapse" data-target="#row-expandable"><i class="icon-caret-down"></i></a>

And then add the hidden rows to your table:

<tr id="row-expandable" class="row-collapse collapse">
	<td></td>
</tr>

Pattern demo