I have an array of data being displayed in a material-table. My data has a field called Active and its value can be either 0 or 1. If the Active value is 0, then that object is inactive. If Active is one, the object is active.

I want the user to have the ability to check a checkbox in the table toolbar and hide all inactive data.

I am using @material-ui/core for my UI components.

If the checkbox is checked/true, then the data where the Active field is 0 are hidden. If the checkbox unchecked/false, then all of the data in the array is displayed.

    const [intakes, setIntakes] = useState([]);

    function IntakeList() {
        const CustomToolbarComponent = (props) => {
            return (
                <div
                    style={{
                        display: "flex",
                        justifyContent: "flex-end",
                        alignItems: "center",
                    }}
                >
                    <FormControlLabel control={<Checkbox />} label="Hide inactive objects" />
                    <div>
                        <MTableToolbar {...props} />
                    </div>
                </div>
            );
        };

        return (
            <MaterialTable
                title=""
                data={intakes.intakes}
                columns={columns}
                components={{
                    Toolbar: (props) => <CustomToolbarComponent {...props} />,
                }}
            />
        );
    }

Here is a short example of my JSON:

{
  "intakes": [
    {
      "ID": 1,
      "Active": 0
    },
    {
      "ID": 2,
      "Active": 1
    }
  ]
}