Back to the index of articles and examples

Show and hide columns

Click on any column header to hide a column. Click on the button at right to show all columns or use the drop-down to select which one to show. Drag columns to move them to other positions, drag the borders to resize them. See comments below.


This example shows an easy way to hide and show columns in a DataTable. When you click the header of any column, that column will hide. It uses the new 2.5.1 methods hideColumn and showColumn. Notice that in contrast to the example for the previous version there is no fooling around with the DOM, it is now supported by the DataTable itself. Moreover, instead of completely dissappearing, the hidden columns give a hint of their existence by showing a very narrow strip.

It uses a split button to show the hidden columns. If you click the body of the button, all columns hidden will be shown again. You can also use the dropdown of the split button to show individual columns. The dropdown of the split button is updated with the headings of the hidden columns and the button itself gets disabled when all columns are shown.

Dragging and resizing columns was done by simply adding the corresponding attributes to the general DataTable configuration attributes (the fouth argument in its constructor) or in the column definition for each column.

Notice how well it differentiates in between clicking (which hides the column), dragging (which moves it around) and dragging the border (which resizes it). Still, this might be confusing to the user, for example, the four arrow cursor hints at moving the column around, but says nothing about hiding it and column sorting is disabled. A context menu might be in order, or providing suitable icons on the headers to make it clear.

It uses the same PHP server script as the Server driven DataTable example.