Remote pagination and remembering column visibility settings.

[kraleva]

Is this feature requested before? I searched, in this context the problem was not referenced before.

Is your feature request related to a problem? Please describe. Well it is maybe a feature request. I was trying to make a custom toggle column list, which allows me to choose dynamically the visability of columns, In my table i am also using remote pagination. The problem is, that when a user switches the pages, the settings from my custom toggle list dissapear (the visability of columns is set to the default one). I tried to set the columns as a a state, in order to make them mutable, Therefore i wrote a custom changeColumnState function, which toggles the hidden setting of the column. With this it works also with pagination :

const CustomToggleList = ({ columns, onColumnToggle, toggles, changeColumnState }) => {
    const result = columns.filter(
        (column) => column.text !== 'ID' && column.text !== 'Status'
    );
    console.log(columns[0])
    columns = result;
    return (
        <Dropdown style={{ float: 'right' }}>
            <DropdownButton variant='dark' title='Fields to show' drop='right'>
                {columns
                    .map((column) => ({
                        ...column,
                        toggle: toggles[column.dataField],
                    }))
                    .map((column) => (
                        <Dropdown.Item key={column.dataField}>
                            <button
                                type='button'
                                key={column.dataField}
                                className={`btn btn-${
                                    column.toggle ? 'warning btn-sm active' : 'secondary btn-sm'
                                }`}
                                data-toggle='button'
                                aria-pressed={column.toggle ? 'true' : 'false'}
                                onClick={() => 
                                {
                                    onColumnToggle(column.dataField)
//custom toggle function
                                    if(changeColumnState){
                                        changeColumnState(column.dataField)
                                    }
                                    console.log(columns)
                                }}>
                                {column.text}
                            </button>
                        </Dropdown.Item>
                    ))}
            </DropdownButton>
        </Dropdown>
    );
};

However, if i want to set the formatExtraData attribute for one of my formatters and reference a variable from the state, this is practically either impossible, or requres at load changes of the state (only solution that comes up to me). Describe the solution you'd like I would like to see that the onColumnToggle function from the ToolkitProvider also considers cases, where pagination is done remotely and the columns shall remain the same even after reloading of the data. (re-rendering of the table) If there already exists a solution to this problem i would be glad to hear about it.

Describe alternatives you've considered As i said, the alternative i considered, was to set the columns in the state of the parent component. However this is problematic when i want to use the state of the rows as a formatterExtraData argument. Here is my additional helper function, which enables me to set visibility throughout remote pagination:

changeColumnState = (columnName)=>{
        let columns = this.state.columns;
        let newColumns = columns.map((column)=>{
            if(column.dataField == columnName){
                column.hidden = !column.hidden
            }
        })
        this.setState({columns:columns})

Additional context Add any other context or screenshots about the feature request here.

[kraleva]

Another option for solution would be how to trigger formatter without using the formatExtraData setting

[celciusjj]

the same case, any viability solution