Home / How-To & Tutorials / DataTables Hide Empty Columns Plugin – Automatically hide any columns that are empty

DataTables Hide Empty Columns Plugin – Automatically hide any columns that are empty

I recently posted two other DataTables plugins I created, one for keeping the table conditions in the URL, and another for keeping AJAX sourced tables up-to-date. Well, I created another one!

One project I’m working on has a lot of dynamic tables, which can have any number of columns. Since the number of columns doesn’t have a limit, I wanted to automatically hide any columns that aren’t populated with any data. Once the columns are hidden (which is on the table initiation), the columns can easily be set back to visible by either the API method, or the Column Visibility button.

GIT RepoLive Demos

Configuration

If you just set the hideEmptyCols (or hideEmptyColumns) setting to true, then all columns will be targeted and processed, thus hiding any empty column. However, you do have the option to garget specific columns, with either the column name, or the column index. You can also have this targeted array set to be processed, making it a white-list (default), or you can set it to be ignored, making it a black-list.

Here are the existing parameters

Parameter Type Default Description
hideEmptyCols boolean/object true Enable/Disable hideEmptyCols plugin (hideEmptyColumns works as well)
hideEmptyCols.columns array All Columns Determine which columns to target, can either use the column name, the index, or a negative integer to target columns starting from the right side of the table
hideEmptyCols.whiteList boolean true Determine if the targets listed in hideEmptyCols.columns should be treated as a whitelist or blacklist (false will target all columns except those listed)

Examples

Basic Initialization – Hide any columns with no values (Since no button was used, the columns would need to be toggled via an API call)

$('#example-1').DataTable({
    hideEmptyCols: true
});

Basic w/ ColVis Button – Target all columns & use DataTables ColumnsToggle button

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

Targeting Columns via indexes or the position – This would target the column indexes 0 and 3, as well as the column on the far right side of the table

$('#example-1').DataTable({
    hideEmptyCols: [ 0, 3, -1 ] 
});

Targeting Columns (Names) – Target columns via name (Useful for when using JSON or AJAX data src with Objects)

$('#example-1').DataTable( {
    hideEmptyCols: ['extn', 5], // Target extension col, and 5th col (salary)
    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" }
    ]
} );

Blacklisting Columns – Target all columns except column indexes 1 and 3

$('#example-1').DataTable({
    hideEmptyCols: {
        columns: [1,3],
        whiteList: false
    }
});

The End

Well, thats it! If you find any bugs or issues, just create an issue in the Git repo, same for feature requests. I dont always see comments on these blog posts

About J

Welcome to my little corner of the InterWebs! Most of what I post on LinuxDigest is about either automation, something I find interesting, or something I just learned myself. If you want me to post an article about something, just let me know! Im more than happy to help and teach others Linux.

7 comments

  1. Hello, great plugin, but I think it has a bug (or feature). It actually depends how you define “empty”. I would define empty if empty is visual part, but plugin threats

    as non empty. Bug or feature? 🙂

  2. Hmm, and seems that html tags from comments aren’t escaped.. thats not good either 😉

  3. Some HTML tags are ok. What tags do you think should and shouldn’t be treated as empty? Technically the HTML breaks ARE content…

    Do you think I should add an option to specify empty tags? like no-break spaces, HTML Line breaks, etc..

  4. Holy crap.. you’re right about the HTML in the comments.. My buddy runs this wordpress app, ill email him… How the hell did we not see that. I guess I figured it was WordPress, and hes a Linux engineer, so I figured he would have tried that

  5. And btw, feel free to make a git issue for a feature request or modification in the future 🙂 Or even a PR

    • Main thing I would like to request, that autohide would work well with pagination feature of datatables.
      Example: I have 1000 rows and in a specific column only 1 row out of 1000 is non empty. It would be great if all the “pages” would hide that column except the one page where this value is actually set.

      • Can you do me a favor and login to github and make that an issue? Ill be sure to add it as a feature on the next release

Leave a Reply

Your email address will not be published. Required fields are marked *

*