Search code examples
javascriptreactjsmaterial-uiantdmui-datatable

How would you add a "Select All" option in an AntD table filter?

I have a filter menu for the "Industry" column.

Lets say the user wants to select all industries, except for one.

Is there a way to implement a "Select All" button (perhaps beside the "Reset" button) to select all options so the user could de-select the option he wants to exclude?

Here is the code for my "Industry" column and a screenshot of what my filter menu looks like now.

        {
        title: "Industry",
        dataIndex: ["industry","sector"],
        render: (text,row) => <div>{row["industry"]}</div>,
        filters: sectors, //array
        onFilter: (value, record) => record.sector.indexOf(value) === 0,
        align:"center",
    },

antd filter menu

PS. is my feature easier integrated in MUI? because I would consider switching...

Solution

  • Select all feature is available in antd. (but not beside the "Reset" button)

    Check the following antd Doc

    Components-table-demo-filter-search

    Screenshot: screenshot

    I hope this helps