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!

[ojnc]

This is a working demo of column choosing using checkboxes

https://drive.google.com/file/d/13esqen5Df_Hv8qT9nZWhpOTG3XZaWUuy/view?usp=sharing

Thanks to @martinnov92
And my idea of using row selection in a devious way

Dhana Shekhar Tontanahal well kept secret no longer needed!

[DhanaTontanahal]

Hey all, so sorry I missed your communication and the above link not working because , that repo got delete accidentally. With same link put the code can you check please. Regards, Dhana

…

On Mon, Mar 15, 2021 at 5:58 PM Jayanta Narayan Choudhuri < ***@***.***> wrote: This is a working demo of column choosing using checkboxes https://drive.google.com/file/d/13esqen5Df_Hv8qT9nZWhpOTG3XZaWUuy/view?usp=sharing Thanks to @martinnov92 <https://github.com/martinnov92> And my idea of using row selection in a devious way Dhana Shekhar Tontanahal well kept secret no longer needed! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#917 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD56RJYNGBPCVGYYPO3CM3LTDX4OTANCNFSM4DZP3LLA> .

[ojnc]

Hi Dhana
This is all about react-data-grid
Your example has nothing to do with react-data-grid
It may be very good but this repository is https://github.com/adazzle/react-data-grid

Your package.json has no trace of react-data-grid
Your solution is for "react-table": "^6.8.6",

My code is 100% vanilla react-data-grid

Regards
Jayanta

[stephentan]

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 } } ];

Thanks ogg130
This worked for me! Thanks!