Dash Exhibit : DataTables

For those of you who don't know, Allan Jardine at datatables.net created an awesome JQuery plugin that makes pretty tables, such as:

But, there's a lot of initialization code that needs to happen. To get the above table, you need to do the following in JavaScript:

$("#table").dataTable({
    bAutoWidth : false,
    bDestroy : true,
    bFilter : true,
    bJQueryUI : true,
    bLengthChange : true
    bSort : true,
    fnDrawCallback : /* function for striping here */
});


And you would do that for every DataTable you create. Using Dash, you can instead do this:


<table data-table="true">
/* Table content here */
</table>


Let's say you want to disable sorting, for whatever reason:

<table data-table="true" data-table-filter="false">
/* Table content here */
</table>

And that's all, no JavaScript writing required!. More complex sets of properties can be used through the data-dash-custom attribute, which will be explained in a later post.