ag-grid : show the hidden columns (that were dragged out)

2
votes

I have an ag-grid (free reactjs version) with lots of columns and records to load.

Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?

I don't want to suppress column drag, just a way to undo the hide without refreshing.

Any advice?

1
reactjsag-gridag-grid-react

1 Answers

5
votes

Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.

However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:

  • resetColumnState()

    • This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again

  • setColumnVisible(colKey, visible)

    • Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column

  • setColumnsVisible(<Array> colKeys, visible)

    • note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState

  • setColumnState(<Array> columnState)

    • This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.

Basically I can see you doing one of two things:

  1. Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked

-- OR --

  1. Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)