Material Admin Extended Dark

## Bootgrid Data Tables

jQuery Bootgrid is a nice, sleek and intuitive. A grid control especially designed for bootstrap. It's:

- Lightweight Footprint. Only 4.7 KB minified & gzipped.
- HTML5 & Accessibility Support. The newest technologies and ARIA come together to make it feasible
- Cross Browser Support. IE, Firefox, Chrome, Safari, Opera and more.

Official website and detailed documentation: http://www.jquery-bootgrid.com/

In order to use Bootgrid in your web page, you'll have to include it's CSS and Javascript asset files.

    <!-- CSS -->
    <link href="vendors/bower_components/jquery.bootgrid/dist/jquery.bootgrid.min.css" rel="stylesheet">

    <!-- JS -->
    <script src="vendors/bower_components/jquery.bootgrid/dist/jquery.bootgrid.min.js"></script>

Source files:

- Plugin
  - CSS: `/vendors/bower_components/jquery.bootgrid/dist/jquery.bootgrid.min.css`
  - JS: `/vendors/bower_components/jquery.bootgrid/dist/jquery.bootgrid.min.js`
- LESS: `/less/inc/vendor-overrides/bootgrid.less`
- HTML: `/data-tables.html`
- JS(demo): `/demo/js/data-table.js`

## Basic Example

It's just that simple. Turn your simple table into a sophisticated data table and offer your users a nice experience and great features without any effort.

    <table id="data-table-basic">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10238</td>
                <td>eduardo@pingpong.com</td>
                <td>14.10.2013</td>
            </tr>
            ...
        </tbody>
    </table>

    $("#data-table-basic").bootgrid({
        //Override default icon classes
        css: {
            icon: 'table-bootgrid__icon zmdi',
            iconSearch: 'zmdi-search',
            iconColumns: 'zmdi-view-column',
            iconDown: 'zmdi-sort-amount-desc',
            iconRefresh: 'zmdi-refresh',
            iconUp: 'zmdi-sort-amount-asc',
            dropDownMenu: 'dropdown form-group--select',
            search: 'table-bootgrid__search',
            actions: 'table-bootgrid__actions',
            header: 'table-bootgrid__header',
            footer: 'table-bootgrid__footer',
            dropDownItem: 'table-bootgrid__label',
            table: 'table table-bootgrid',
            pagination: 'pagination table-bootgrid__pagination'
        },

        //Override default module markups
        templates: {
            actionDropDown: "<span class=\"{{css.dropDownMenu}}\">" + "<a href='' data-toggle=\"dropdown\">{{ctx.content}}</a><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></span>",
            search: "<div class=\"{{css.search}} form-group\"><span class=\"{{css.icon}} {{css.iconSearch}}\"></span><input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /><i class='form-group__bar'></i></div>",
            header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div>",
            actionDropDownCheckboxItem: "<li><div class='tabe-bootgrid__checkbox checkbox checkbox--dark'><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}<i class='input-helper'></i></label></div></li>",
            footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\"><div class=\"col-sm-6\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-6 table-bootgrid__showing hidden-xs\"><p class=\"{{css.infos}}\"></p></div></div></div>"
        }
    });

## Selection Example

Ensure that the data attribute [data-identifier="true"] is set on one column header.

    <table id="data-table-selection">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10238</td>
                <td>eduardo@pingpong.com</td>
                <td>14.10.2013</td>
            </tr>
            ...
        </tbody>

    $("#data-table-selection").bootgrid({
            //Override default icon classes
            css: {
                icon: 'table-bootgrid__icon zmdi',
                iconSearch: 'zmdi-search',
                iconColumns: 'zmdi-view-column',
                iconDown: 'zmdi-sort-amount-desc',
                iconRefresh: 'zmdi-refresh',
                iconUp: 'zmdi-sort-amount-asc',
                dropDownMenu: 'dropdown form-group--select',
                search: 'table-bootgrid__search',
                actions: 'table-bootgrid__actions',
                header: 'table-bootgrid__header',
                footer: 'table-bootgrid__footer',
                dropDownItem: 'table-bootgrid__label',
                table: 'table table-bootgrid',
                pagination: 'pagination table-bootgrid__pagination'
            },

            //Override default module markups
            templates: {
                actionDropDown: "<span class=\"{{css.dropDownMenu}}\">" + "<a href='' data-toggle=\"dropdown\">{{ctx.content}}</a><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></span>",
                search: "<div class=\"{{css.search}} form-group\"><span class=\"{{css.icon}} {{css.iconSearch}}\"></span><input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /><i class='form-group__bar'></i></div>",
                header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div>",
                actionDropDownCheckboxItem: "<li><div class='tabe-bootgrid__checkbox checkbox checkbox--dark'><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}<i class='input-helper'></i></label></div></li>",
                footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\"><div class=\"col-sm-6\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-6 table-bootgrid__showing hidden-xs\"><p class=\"{{css.infos}}\"></p></div></div></div>",
                select: "<div class='checkbox'><label><input name=\"select\" type=\"{{ctx.type}}\" class=\"{{css.selectBox}}\" value=\"{{ctx.value}}\" {{ctx.checked}} /><i class='input-helper'></i></label></div>"
            },
            selection: true,
            multiSelect: true,
            rowSelect: true,
            keepSelection: true
        });

## Command Example

Bootgrid also supports to include buttons and other elements inside the table.

    <table id="data-table-command">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10238</td>
                <td>eduardo@pingpong.com</td>
                <td>14.10.2013</td>
            </tr>
            ...
        </tbody>

    $("#data-table-command").bootgrid({
            //Override default icon classes
            css: {
                icon: 'table-bootgrid__icon zmdi',
                iconSearch: 'zmdi-search',
                iconColumns: 'zmdi-view-column',
                iconDown: 'zmdi-sort-amount-desc',
                iconRefresh: 'zmdi-refresh',
                iconUp: 'zmdi-sort-amount-asc',
                dropDownMenu: 'dropdown form-group--select',
                search: 'table-bootgrid__search',
                actions: 'table-bootgrid__actions',
                header: 'table-bootgrid__header',
                footer: 'table-bootgrid__footer',
                dropDownItem: 'table-bootgrid__label',
                table: 'table table-bootgrid',
                pagination: 'pagination table-bootgrid__pagination'
            },

            //Override default module markups
            templates: {
                actionDropDown: "<span class=\"{{css.dropDownMenu}}\">" + "<a href='' data-toggle=\"dropdown\">{{ctx.content}}</a><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></span>",
                search: "<div class=\"{{css.search}} form-group\"><span class=\"{{css.icon}} {{css.iconSearch}}\"></span><input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /><i class='form-group__bar'></i></div>",
                header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div>",
                actionDropDownCheckboxItem: "<li><div class='tabe-bootgrid__checkbox checkbox checkbox--dark'><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}<i class='input-helper'></i></label></div></li>",
                footer: "<div id=\"{{ctx.id}}\" class=\"{{css.footer}}\"><div class=\"row\"><div class=\"col-sm-6\"><p class=\"{{css.pagination}}\"></p></div><div class=\"col-sm-6 table-bootgrid__showing hidden-xs\"><p class=\"{{css.infos}}\"></p></div></div></div>"
            },
            formatters: {
                "commands": function(column, row) {
                    return "<button type=\"button\" class=\"btn btn-default btn-sm\" data-row-id=\"" + row.id + "\">Edit</button> " +
                        "<button type=\"button\" class=\"btn btn-default btn-sm\" data-row-id=\"" + row.id + "\">Delete</button>";
                }
            }
        });