Tables & Grids

For basic tables see Tables

Responsive Tables

Bootstrap has a .table-responsive class which you can use to add horizontal scrollbars on small devices.

I've also included Basictable plugin which adds responsiveness to tables differently. An example is shown on "Basic Tables" page

DataTables

DataTables is a plugin for dynamic and responsive tables with features such as sorting, pagination, etc.

You should include datatables.net-bs4/css/dataTables.bootstrap4.css and datatables.net-buttons-bs4/css/buttons.bootstrap4.css before ace.css when using it.

Also some styling is done using options passed during initializiation or dynamically.
See views/pages/table-datatables/@page-script.js for more info.

Other styling is inside plugins/datatables.scss

The sticky header in dataTables example page in Ace, is using .sticky-nav class on thead. More info

For responsiveness and other features such as toolbar buttons, make sure to include the required scripts. See views/pages/table-datatables/@vendor-scripts.hbs

DataTables supports responsive tables through its datatables.net-responsive/js/dataTables.responsive.js plugin.
It moves extra columns to another row which can be toggled (shown/hidden) using the caret.
You can change the caret to a plus/minus icon by adding .dtr-plus to the table element:
DataTables Responsive

Bootstrap Table

Bootstrap Table is another plugin for dynamic tables.

You should include bootstrap-table/dist/bootstrap-table.css before ace.css when using it.

Some styling is done using options passed during initializiation or dynamically.
Take a look at views/pages/table-bootstrap/@page-script.js for more info.

Other styling is inside plugins/bootstraptable.scss

I didn't find an easy way to change some of the icons such as carets in this plugin.
Instead I chagned the caret after the table is initialized:

// change caret of "X" rows per page button ...
$('.fixed-table-pagination .caret').addClass('fa fa-caret-down')
$_bsTable.on('page-change.bs.table', function() {
    $('.fixed-table-pagination .caret').addClass('fa fa-caret-down')
})

jqGrid

A free version of jqGrid plugin is included as well.

You should include free-jqgrid/css/ui.jqgrid.css before ace.css when using it.

To customize the look and feel of jqGrid please see the example at views/pages/table-jqgrid/@page-script.js

For example you can change $.jgrid.guiStyles to add custom classes and $.jgrid.icons for custom icons or when initializing navGrid

Other styling is inside plugins/jqgrid.scss