ViewColumns - show/hide is over ridden on a Server paginated Table

[skiran86]

On a server paginated table - Once the user interacts with ViewColumns - show/hide and updates the pagination to the next page (or performing sort operations on any column), my server paginated table resets to the original display state (The previous user show/hide interaction from ViewColumns is overridden)

Expected Behavior

ViewColumns - show/hide should persist on a server paginated table even after a user interacts with table features like sorting or navigating to the next page

Current Behavior

ViewColumns - show/hide value is lost on a server paginated table

Steps to Reproduce

1. Server paginated mui-data table
2. set ViewColumns to true from options
3. Interact with ViewColumns show/hide feature from GUI
4. Navigate to next page/sort on any column
5. Notice the show/hide from step-3 is overridden

Your Environment

| Material-UI | Any | | MUI-datatables | Any | | React | Any | | browser | Any | | etc | Any |

[JeremyEnglert]

Same issue. It seems to be related to the filterType: "custom"option.

[belfortmaycon]

Related to #1671 ?

[ileonardt]

Hi!! is there any update on this topic? a similar error occurs with the infinite scroll, when you show a column that is initially hidden and then move the scroll to get more data, the column is hidden again. regards

[thomasletsch]

Same error here. As a workaround, I hold my columns in a local react state and update them on view columns changed events:

Local state to hold the columns: const [tableColumns, setTableColumns] = useState<MUIDataTableColumnDef[]>(props.columns);

Callback to update columns if displayed columns have changed:

const handleViewColumnsChange = useCallback((changedColumn: string, action: string) => {
    setTableColumns(cols =>
      cols.map((columnOrStr: MUIDataTableColumnDef) => {
        const column = columnOrStr as MUIDataTableColumn;
        if (column.name === changedColumn) {
          return {...column, options: {...column.options, display: action === "add"}}
        } else {
          return column
        }
      }))
  }, []);

MuiDataTable Element: <MUIDataTable ... options={{...onViewColumnsChange: handleViewColumnsChange...}} />