*New Plugin* - Hide Empty Columns

jLinux

I just finished writing another new plugin... Hide Empty Columns

Basically, it gives you the ability to automatically hide columns (via column().visible()) that may be empty.

I found this useful for one of my projects that contain some DataTable instances that are very dynamic. They can contain any number of columns, so to help the layout from getting too crowded with a large table, this lets me hide the columns that aren't too important (I figure if they're empty... they aren't important!)

You can target the columns by setting the hideEmptyCols option, with an array of values containing either column names, column indexes, or with a negative integer to specify the column position starting from the right side of the table

Also, you can switch the list of columns from a "white-list", (meaning target all the columns in the array), to a "black-list", (excluding listed columns)

Setting hideEmptyCols to just true will target all columns.

Examples
Hide all empty columns, and allow column visibility toggling using the columnsToggle

$('#example-1').DataTable({
    dom: 'Bt',
    buttons: [ 'columnsToggle' ],
    hideEmptyCols: true
});

The below example would target the Extn column, the Position column, and the Start Date column

$('#example-1').DataTable( {
    hideEmptyCols: ['extn', 1, -2], 
    data: dataSet,
    columns: [
        { title: "Name", data: "name" },
        { title: "Position", data: "position" },
        { title: "Office", data: "office" },
        { title: "Extn.", data: "extn" },
        { title: "Start date",  data: "start_date" },
        { title: "Salary",  data: "salary" }
    ]
} );

Links: Get Repository | Article

If you have any questions, or ideas for improvements, feel free to post them in here.

If you found a bug, you can post them in here or in the Issues section of the Git repository

Thanks!

jLinux

P.S. I think for a future enhancement, I may allow columns to be targeted via the columnDefs or columns configuration.. If anyone thinks thats useful?

For example..

$('#example').dataTable( {
    "columnDefs": [
        { "name": "engine",   "targets": 0, "hideIfEmpty": true },
        { "name": "browser",  "targets": 1, "hideIfEmpty": true },
        { "name": "platform", "targets": 2, "hideIfEmpty": false },
        { "name": "version",  "targets": 3, "hideIfEmpty": true },
        { "name": "grade",    "targets": 4, "hideIfEmpty": false }
    ]
} );

or

$('#example').dataTable( {
    "columns": [
        { "name": "engine",  "hideIfEmpty": true },
        { "name": "browser", "hideIfEmpty": true },
        { "name": "platform","hideIfEmpty": false },
        { "name": "version", "hideIfEmpty": true },
        { "name": "grade",   "hideIfEmpty": false }
    ]
} );

If anyone thinks that would be useful or preferred.. lmk!

allan

That's really impressive - nice one.

Allan

jLinux

Thanks! I actually got the idea fom someone here in the forums.

Im working on abother plugin that basically just adds little extra features, options and api methods, nothing specific though, just general stuff, things that arent significant enough to have their own plugin though.