Conditional columns for Datatable

UI Components for React
Post Reply
Posts: 10
Joined: 05 Nov 2018, 04:59

16 May 2019, 10:49


Can you please let us know how to hide/show columns based on condition?

Thanks in advance!

Sajjan Hubale

Posts: 1
Joined: 16 May 2019, 18:55

16 May 2019, 19:04

I was not able to find a native way to do this within the DataTable component.
However, it is easy to do with conditional CSS.

You'll want to initialize state within your component, and set it to true or false. For example, on my current project, I have a "debugMode" that shows or hides certain columns that end users do not need to see.

Code: Select all

<Column field='ID' header='ID' style={{display: this.state.showHiddenColumns ? ' ' : 'none' }}/> 
When your state "showHiddenColumns" is false, the CSS will be

Code: Select all

"display: 'none'
and will override the default style.
But when the boolean is true, the blank ' ' value will revert to the default style.

Posts: 4041
Joined: 29 Jun 2013, 12:38

24 Jun 2019, 10:56


Yes, you can add a custom style for this issue Or you can use dynamic column feature of datatable. Please see this demo; (the second demo)

Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests