<script src="http://cdnitesm.azureedge.net/vendors/bootgrid/jquery.bootgrid.min.js"></script>
                            

<div class="table-responsive">
    <table id="data-table-basic" class="table table-striped">
        <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>
            <tr>
                <td>10243</td>
                <td>eduardo@pingpong.com</td>
                <td>19.10.2013</td>
            </tr>
            .
            .
            .
            <tr>
                <td>10245</td>
                <td>tim@microsoft.com</td>
                <td>21.10.2013</td>
            </tr>
            <tr>
                <td>10250</td>
                <td>tim@microsoft.com</td>
                <td>26.10.2013</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function(){
        //Basic Example
        $("#data-table-basic").bootgrid({
            css: {
                icon: 'md icon',
                iconColumns: 'md-view-module',
                iconDown: 'md-expand-more',
                iconRefresh: 'md-refresh',
                iconUp: 'md-expand-less'
            },
        });
    });
</script>

                    

<div class="table-responsive">
    <table id="data-table-selection" class="table table-striped">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric" data-identifier="true">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>
            <tr>
                <td>10243</td>
                <td>eduardo@pingpong.com</td>
                <td>19.10.2013</td>
            </tr>

            .
            .
            .
            <tr>
                <td>10243</td>
                <td>eduardo@pingpong.com</td>
                <td>19.10.2013</td>
            </tr>
            <tr>
                <td>10250</td>
                <td>tim@microsoft.com</td>
                <td>26.10.2013</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function(){
        //Selection
        $("#data-table-selection").bootgrid({
            css: {
                icon: 'md icon',
                iconColumns: 'md-view-module',
                iconDown: 'md-expand-more',
                iconRefresh: 'md-refresh',
                iconUp: 'md-expand-less'
            },
            selection: true,
            multiSelect: true,
            rowSelect: true,
            keepSelection: true
        });
    });
</script>
                    

                        
<table id="data-table-command" class="table table-striped table-vmiddle">
    <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>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10238</td>
            <td>eduardo@pingpong.com</td>
            <td>14.10.2013</td>
        </tr>
        <tr>
            <td>10243</td>
            <td>eduardo@pingpong.com</td>
            <td>19.10.2013</td>
        </tr>
        .
        .
        .
        <tr>
            <td>10245</td>
            <td>tim@microsoft.com</td>
            <td>21.10.2013</td>
        </tr>
        <tr>
            <td>10250</td>
            <td>tim@microsoft.com</td>
            <td>26.10.2013</td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function(){
        //Command Buttons
        $("#data-table-command").bootgrid({
            css: {
                icon: 'md icon',
                iconColumns: 'md-view-module',
                iconDown: 'md-expand-more',
                iconRefresh: 'md-refresh',
                iconUp: 'md-expand-less'
            },
            formatters: {
                "commands": function(column, row) {
                    return "<button type=\"button\" class=\"btn btn-icon command-edit\" data-row-id=\"" + row.id + "\"><span class=\"md md-edit\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-icon command-delete\" data-row-id=\"" + row.id + "\"><span class=\"md md-delete\"></span></button>";
                }
            }
        });
    });
</script>