Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bloodykheeng opened this issue Oct 2, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@bloodykheeng
Copy link

bloodykheeng commented Oct 2, 2024

@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

Screenshot (235)
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 bloodykheeng added the bug Something isn't working label Oct 2, 2024
@bloodykheeng
Copy link
Author

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant