An error will occur if you uncheck any column in Multiselect after reordering a column in the DataTable

[m_kikuchi]

I am developing using PrimeReact(Version:1.6.2) now.

An error occurred when adding the property "reorderableColumns = true" to DataTable based on the sample code on the following page.
https://www.primefaces.org/primereact/# ... /coltoggle

The procedure is as follows.

1. Mouse drag to change display order of any columns
2. In the Multiselect component, uncheck any column

I hope that it will be fixed so that no error will occur.
Thank you.

Code: Select all

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {DataTable} from 'primereact/components/datatable/DataTable';
import {Column} from 'primereact/components/column/Column';
import {MultiSelect} from 'primereact/components/multiselect/MultiSelect';

export class DataTableColTogglerDemo extends Component {

    constructor() {
        super();
        let columns = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];

        this.state = {
            cols: columns,
            cars: [
                {vin:'dsad231ff', year:'2012', brand:'VW', color:'Orange'}
            ]
        };

        this.colOptions = [];
        for(let col of columns) {
            this.colOptions.push({label: col.header, value: col});
        }

        this.onColumnToggle = this.onColumnToggle.bind(this);
    }

    onColumnToggle(event) {
        this.setState({cols: event.value});
    }

    export() {
        this.dt.exportCSV();
    }

    render() {
        let header = <div style={{textAlign:'left'}}>
                        <MultiSelect value={this.state.cols} options={this.colOptions} onChange={this.onColumnToggle} style={{width:'250px'}}/>
                     </div>;

        let columns = this.state.cols.map((col,i) => {
            return <Column key={col.field} field={col.field} header={col.header} />;
        });

        return (
            <div>
                <div className="content-section">
                    <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} reorderableColumns={true}>
                        {columns}
                    </DataTable>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <DataTableColTogglerDemo />,
    document.getElementById('root')
);

An error will occur if you uncheck any column in Multiselect after reordering a column in the DataTable

Uncaught TypeError: Cannot read property 'props' of null
at TableBody.isSelectionEnabled (webpack-internal:///./node_modules/primereact/components/datatable/TableBody.js:322)
at TableBody.render (webpack-internal:///./node_modules/primereact/components/datatable/TableBody.js:451)
at finishClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13193)
at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13155)
at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13824)
at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15863)
at workLoop (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15902)
at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:138)
at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:187)