material-table multiple select resets the table columns back to default

[bloodykheeng]

@mbrn i need help on this please

The issue is happening like this
suppose i have some columns and there set hidden to true by default
then i set them to false using the table columns toggler

and then i multiselect those columns are reset and hidden as default so the table is not minding what i had chosen to make visible or false from the table ui
Rather its resetting back to what i defined in the columns

 const columns = [
        {
            title: "ID",
            width: "5%",
            field: "id",
            hidden: true,
        },
        {
            title: "Question",
            field: "question",
        },
        {
            title: "Answer",
            field: "answer",
        },

        {
            title: "Date",
            field: "created_at",
            hidden: true,
            render: (rowData) => {
                return moment(rowData?.created_at).format("lll");
            },
        },

        {
            title: "Created By Name",
            field: "created_by.name",
            hidden: true,
        },
        {
            title: "Created By Email",
            field: "created_by.email",
            hidden: true,
        },
    ];

Take an example of this by default "Created By Name" & "Created By Email", are hidden so if i use the table to toggle to make them active then i try to multiple select automatically they get hidden incase that i had toggled them visible

there is the table togler am meaning so if i toggle all of them active or visible and i try to multiple select the table resets the columns back to default where some are visible and some are hidden

[bloodykheeng]

hello people ive got the solution you just have to put ur columns in state
suppose u have a parent component and a child component and your material table is in child component and ur passing columns via props so u need to initialise ur columns in state in ur child component at first i had used use memo but it was not working

const memorisedTableColumns = useMemo(() => tableColumns, [tableColumns]);

that failed so i tried this below and it worked properly

const [columns, setColumns] = useState(tableColumns);