App > Documentation > Components > Tables

Flatlogic One tables are based on Bootstrap tables with additional styling.

Flatlogic One introduces two new table classes .table-sm and .table-lg for decreased and increased table paddings accordingly.

Also, don't forget about .table-responsive class which adds horizontal scrollbar to tables for small screens.

Add any non-bordered .table within a widget for a seamless design. Awesome look for no cost. Just wrap the table with simple css class .widget-table-overflow inside of widget:

<section class="widget">
    <header>
        header
    </header>
    <div class="widget-body">
        body
    </div>
    <div class="widget-table-overflow">
        <table class="table table-striped">
            <tbody>
                <tr>
                <td>1</td>
                <td>2</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

It has been chosen because it offers really simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.

Backgrind provides editing, adding and sorting data on client side. We recommend to read more about it - Backgrid website. Files:

<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/backbone.paginator/lib/backbone.paginator.min.js"></script>
<script src="node_modules/backgrid/lib/backgrid.js"></script>
<script src="node_modules/backgrid-paginator/backgrid-paginator.js"></script>

The most frequently asked thing about DataTables is its table structure notation. There is a line in tables-dynamic.js:111

"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>"

Files:

<script src="node_modules/datatables/media/js/jquery.dataTables.js"></script>