Filter table with checkboxes with React & Material UI

I'm building a filter options with checkboxes for a data table in a project using React & Material-UI. I'm not sure which is the best approach to accomplish this.

• Is there a custom solution using Material-UI?

• If not, what's the approach to accomplish this? I am new to React so it's hard for me to put all the pieces together.

This is my what I got some far:

Checkboxes Component:

import "./FilterCheckboxes.css";

import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormGroup from "@material-ui/core/FormGroup";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

import React from "react";

import { rows } from "../../store.js";

// Theme Palette Colors
const theme = createMuiTheme({
  palette: {
    primary: { main: "rgb(38, 118, 198)" }
  },
  typography: { useNextVariants: true }
});

class FilterCheckboxes extends React.Component {
  state = {
    checkedA: true,
    checkedB: true,
    checkedC: false,
    checkedD: false,
    checkedE: false,
    checkedF: false
  };

  // function to set checkboxes to checked/unchecked
  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <FormGroup>
          <div className="filter__checkboxes">
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedA}
                      color="primary"
                      onChange={this.handleChange("checkedA")}
                      value="checkedA"
                    />
                  }
                  label="Submitted"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedB}
                      color="primary"
                      onChange={this.handleChange("checkedB")}
                      value="checkedB"
                    />
                  }
                  label="Invited"
                />
              </div>
            </div>
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedC}
                      color="primary"
                      onChange={this.handleChange("checkedC")}
                      value="checkedC"
                    />
                  }
                  label="Not Submitted"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedD}
                      color="primary"
                      onChange={this.handleChange("checkedD")}
                      value="checkedD"
                    />
                  }
                  label="Draft"
                />
              </div>
            </div>
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedE}
                      color="primary"
                      onChange={this.handleChange("checkedE")}
                      value="checkedE"
                    />
                  }
                  label="Information Request"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      color="primary"
                      checked={this.state.checkedF}
                      onChange={this.handleChange("checkedF")}
                      value="checkedF"
                    />
                  }
                  label="Loan Application"
                />
              </div>
            </div>
          </div>
        </FormGroup>
      </MuiThemeProvider>
    );
  }
}

export default FilterCheckboxes;

Table Component:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

import { rows } from "../../store.js";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3),
    overflowX: "auto"
  },
  table: {
    minWidth: 650
  }
}));

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="left">Status</TableCell>
            <TableCell align="left">First Submitted</TableCell>
            <TableCell align="left">Last Activity</TableCell>
            <TableCell align="left">Score</TableCell>
            <TableCell align="left">Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell align="left">{row.name}</TableCell>
              <TableCell align="left">{row.status}</TableCell>
              <TableCell align="left">{row.firstSubmitted}</TableCell>
              <TableCell align="left">{row.lastActivity}</TableCell>
              <TableCell align="left">{row.score}</TableCell>
              <TableCell align="left">{row.actions}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

You can find a code sample here.

Any helps on which way to build this functionality will be really appreciated!