DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                datatable: {
                    // Optionally enable or disable certain datatable plugins
                    extensions: {
                        select: true,
                        colreorder: true,
                        rowreorder: true,
                        buttons: true,
                        fixedheader: true,
                        searchpanes: true
Basic Usage
You can build your own using the previewer
<table id="table1" class="table">
            <th scope="col" class="fit">
                <input type="checkbox" class="form-check-input" />
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
                <input type="checkbox" class="form-check-input" />
$(document).ready(function () {
Same classes apply from the basic table component