Dynamically Show/Hide Columns in the Grid

Environment

Description

How can I dynamically show or hide the columns in the grid?

Solution

In order to achieve this, the Columns of the Grid should be rendered dynamically and the data for the Columns should be kept in the state, so that the changes in the Grid can be visualized. In the example below, each Column has a show property which determines whether that Column is shown. There are checkboxes above the Grid whose onChange event handlers cause the state change and thus cause the re-rendering of the Grid with the corresponding columns missing/added.