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

[Domino987]

Could you add a sandbox for this code?

[bloodykheeng]

@Domino987 i found the solution which is to add a state in the child component rendering the material table then ensure that columns object that came through props are past into that state as initial value

ie const [columns , setColumns] = useState(initialColumnsFromProp)

then u can now go ahead and pass the columns into material table but if u decide to pass in these initialColumnsFromProp uill still get the error

[Domino987]

Yes the props should be memoized to preserve state between redners. You could also just use react.useMemo. but this should work too.

[bloodykheeng]

@Domino987 no bro i tried useMemo at first but it wasnt working use memo still creates that effect the only solution is to pass the columns from props as initial values into local state in that child component holding material table

[Domino987]

Then your dependency array is wrong and might cause bugs in the future. But as long as it works for you

[Domino987]

@bloodykheeng But sharing a code sandbox with the error in user no and without it with use state would be interesting.