Column Toggler hide some columns initially

[markoj]

I am using the column toggle functionality similarly to the demo code down below, but I would like to hide some columns initially. For example, if I have the Vin, Year, Brand and Color columns, I'd like to initially hide the Color column and only show Vin, Year and Brand. Is there any way I could achieve this?

Code: Select all

export class DataTableColTogglerDemo extends Component {

    constructor() {
        super();
        this.state = {
            columns: [
                {field: 'vin', header: 'Vin'},
                {field: 'year', header: 'Year'},
                {field: 'brand', header: 'Brand'},
                {field: 'color', header: 'Color'}
            ],
            selectedColumns: []
        }
        this.carservice = new CarService();
        this.onColumnToggle = this.onColumnToggle.bind(this);
    }

    componentDidMount() {
        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
        this.setState({selectedColumns: this.state.columns});
    }

    onColumnToggle(event) {
        let selectedColumns = event.value;
        let orderedSelectedColumns = this.state.columns.filter(col => selectedColumns.includes(col));
        this.setState({selectedColumns: orderedSelectedColumns});
    }

    render() {
        const header = (
            <div style={{textAlign:'left'}}>
                <MultiSelect value={this.state.selectedColumns} options={this.state.columns} optionLabel="field" onChange={this.onColumnToggle} style={{width:'250px'}}/>
            </div>
        );

        const columnComponents = this.state.selectedColumns.map(col=> {
            return <Column key={col.field} field={col.field} header={col.header} />;
        });

        return (
            <div>
                <div className="content-section introduction">
                    <div className="feature-intro">
                        <h1>DataTable - Column Toggler</h1>
                        <p>MultiSelect component can be used to implement column toggler functionality.</p>
                    </div>
                </div>

                <div className="content-section implementation">
                    <DataTable value={this.state.cars} header={header}>
                        {columnComponents}
                    </DataTable>
                </div>
            </div>
        );
    }
}

[devman]

After the component mounts, instead of setting selectedColumns to this.columns, set it to the columns that you want to show.

Code: Select all

    
    componentDidMount() {
        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
        this.setState({selectedColumns: [
        	{field: 'vin', header: 'Vin'},
                {field: 'year', header: 'Year'},
                {field: 'brand', header: 'Brand'},
        ]});
    }

[mert.sincan]

Yes, correct solution Thanks a lot for the update!

Best Regards,