App > Documentation > Components > Tables

Static 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.

Overflow Tables

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">
    <div class="widget-body">
    <div class="widget-table-overflow">
        <table class="table table-striped">
Dynamic Tables
Backgrid.js is a set of components for building semantic and easily stylable data grid widgets.

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>
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

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>>"


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