Sometimes you want to hide a column in a DataTable but keep its data in the DOM – maybe you need it for export, for a tooltip, or for some other operation that happens after the table renders. Removing the column entirely means losing that data, which isn’t always an option.

The fix is embarrassingly simple: CSS.

The setup

Add a class to the column you want to hide using the sClass option in your DataTables initialisation:

"sClass": "hide_column"

Then in your stylesheet:

.hide_column {
    display: none;
}

That’s it. The column stays in the DOM, it just doesn’t show up in the table.

Why bother?

A few reasons this comes in handy:

  • You want to keep the data around for processing or export but don’t need it visible.
  • You might toggle the column on and off later – since it’s still in the DOM, you just remove the class to show it again.
  • The table structure stays consistent regardless of which columns are visible, which matters if you’re doing anything that depends on column indices.
  • You might let users customise which columns they see, and keeping everything in the DOM makes that trivial.