I am looking for a way to Hide/Show columns for the Table Component in Ant Design
The idea is to have a checkbox with each column name. When unchecking the column name, the column becomes Hidden.
I have used react-table before and it was as easy as passing a parameter in the column name as a prop
However, this option is not available in Ant Design. Any idea on the way I should go in terms of logic?
Thanks!
You can have the columns in the component as a function
.
Then according to the state you can hide or show different columns.
You can add a className
to the columns or directly not render it.
getColumns = () => [
{
title: 'Client Name',
dataIndex: 'clientName',
className: this.state.columns['clientName'] ? "show" : "hide"
}
];
render() {
return <Table columns={this.getColumns()}>
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With