Tengo una matriz de datos que se muestran en una tabla de materiales. Mis datos tienen un campo llamado Active y su valor puede ser 0 o 1. Si el valor Active es 0, entonces ese objeto está inactivo. Si Active es uno, el objeto está activo.

Quiero que el usuario tenga la capacidad de marcar una casilla de verificación en la barra de herramientas de la tabla y ocultar todos los datos inactivos.

Estoy usando @material-ui/core para mis componentes de interfaz de usuario.

Si la casilla de verificación está marcada/verdadera, los datos donde el campo Activo es 0 están ocultos. Si la casilla de verificación no está marcada o es falsa, se muestran todos los datos de la matriz.

 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} />, }} /> ); }

Aquí hay un breve ejemplo de mi JSON:

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