The ability to reset columnOrder in DataTable

[Bublade]

I'm submitting a ...

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

• PrimeReact version:
  3.1.3
• Language:
  TypeScript 3.4.5

Currently in the datatable there is no ability to reset/restore a default layout (columnWith, columnSort order, columnSortKey, visible columns, etc...). So I fixed that myself, there is one thing though that cannot be reset / restored without refreshing or by remounting the datatable and that is de columnOrder.

When I add the columns as children to DataTable I already sorted them myself by the default layout but these lines DataTable.js#L1179-L1194 use the states columnOrder which cannot be modified from outside.

A few suggestions
instead of:

if(this.props.reorderableColumns && this.state.columnOrder) {
    let orderedColumns = [];
    for(let columnKey of this.state.columnOrder) {
        let column = this.findColumnByKey(columns, columnKey);
        if (column) {
            orderedColumns.push(column);
        }
    }
                
    return [...orderedColumns, ...columns.filter((item) => {
        return orderedColumns.indexOf(item) < 0;
    })];
}
else {
    return columns;
}

Add a property to render children as is used like this

if (this.props.keepChildrenOrder) { // or a better name for it.
    return columns;
}
else  if(this.props.reorderableColumns && this.state.columnOrder) {
    let orderedColumns = [];
    for(let columnKey of this.state.columnOrder) {
        let column = this.findColumnByKey(columns, columnKey);
        if (column) {
            orderedColumns.push(column);
        }
    }
                
    return [...orderedColumns, ...columns.filter((item) => {
        return orderedColumns.indexOf(item) < 0;
    })];
}
else {
    return columns;
}

Or by exposing the order as a property

if(columns && columns.length) {
    const columnOrder = (this.props.columnOrder || this.state.columnOrder); // giving the property higher priority
    if(this.props.reorderableColumns && columnOrder) { // <-- using the defined list.
        let orderedColumns = [];
        for(let columnKey of columnOrder ) { // <-- using the defined list.
            let column = this.findColumnByKey(columns, columnKey);
            if (column) {
                orderedColumns.push(column);
            }
        }
                    
        return [...orderedColumns, ...columns.filter((item) => {
            return orderedColumns.indexOf(item) < 0;
        })];
    }
    else {
        return columns;
    }
}

[mertsincan]

I think of adding a resetColumnOrder method for these issues. Users can call this method wherever they want.

resetColumnOrder() {
        let columns = React.Children.toArray(this.props.children);
        this.setState({columnOrder: columns});
}

// in your project
<DataTable ref={(el) => this.dt = el} .. />

// to reset the column orders;
this.dt.resetColumnOrder();