React-data-grid: To Hide a Column

[gmarathi-nisum-com]

this.columns = [
{ key: 'Name', name: 'Name', filterable: true, sortable: true, resizable: true },
{ key: 'State', name: 'State', filterable: true, sortable: true, resizable: true },
{ key: 'Country', name: 'Country', filterable: true, sortable: true, resizable: true },
{ key: 'Id', name: 'Id', filterable: true, sortable: true, resizable: true }
];

My column header are above.
Is there any property to column header object where we can hide them on page.

[jpdriver]

hey @gmarathi-nisum-com -- you should be able to do this by passing hidden: true on a column object

[gmarathi-nisum-com]

@jpdriver Thankyou for the reply. I tried it. But it is taking space of hidden column in table.

[martinnov92]

Hello, I am doing it by settings my own property for columns to for examplevisible: true and then in render method I filter only those columns which are not hidden (const cols = this.columns.filter(column => column.visible === true)) and then I pass the cols array to the grid...

[gmarathi-nisum-com]

@martinnov92 Thank you!!

[vnallamhawk]

hello @martinnov92 . In your snippet, when you implement it is still occupying space for the hidden column right?

[DhanaTontanahal]

You can have a column chooser whcih dynamically hides or shows the column when you check or uncheck the checkbox against the column name, just have a property like show(default true) or any property like visible and filtering the columns whose show or visible property has become false to be hidden else when checked they will be shown.

Here is the working example
https://github.com/DhanaTontanahal/reactdatagrid_hidecolumns_dynamically

[ogg130]

Super High tech solution incoming!!!

1) Give the column a value of hidden, which will hide the column but not the column header.

2) Give the column an empty name or else you will see text in the header.

3) Give the column a width of -1. A width of 0 leaves a small empty header column, but -1 'hides' it apparently. Not sure why it works, im not a css master, but it works.

const columnTemplate = [
{
{
key: "costCenter",
name: "",
width: -1,
hidden: true
}
}
];

[tonyabracadabra]

You can have a column chooser whcih dynamically hides or shows the column when you check or uncheck the checkbox against the column name, just have a property like show(default true) or any property like visible and filtering the columns whose show or visible property has become false to be hidden else when checked they will be shown.

Here is the working example
https://github.com/DhanaTontanahal/reactdatagrid_hidecolumns_dynamically

You can have a column chooser whcih dynamically hides or shows the column when you check or uncheck the checkbox against the column name, just have a property like show(default true) or any property like visible and filtering the columns whose show or visible property has become false to be hidden else when checked they will be shown.

Here is the working example
https://github.com/DhanaTontanahal/reactdatagrid_hidecolumns_dynamically

Hey there! The link you provided is not working, am I able to hide a column on the fly without having to rerender the whole grid with your approach? Thanks a lot!