title: Filter table with checkboxes with React & Material UI
body: <p>I'm building a filter options with checkboxes for a data table in a project using <a href="https://en.reactjs.org/" rel="nofollow noreferrer">React</a> and <a href="https://material-ui.com/" rel="nofollow noreferrer">Material-UI</a>.</p>
  <ul>
  <li><p>Is there a custom solution using Material-UI?</p>
  </li>
  <li><p>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.</p>
  </li>
  </ul>
  <p>This is my what I got so far:</p>
  <p><strong>Checkboxes Component:</strong></p>
  <pre><code>import &quot;./FilterCheckboxes.css&quot;;
  
  import Checkbox from &quot;@material-ui/core/Checkbox&quot;;
  import FormControlLabel from &quot;@material-ui/core/FormControlLabel&quot;;
  import FormGroup from &quot;@material-ui/core/FormGroup&quot;;
  import { createMuiTheme, MuiThemeProvider } from &quot;@material-ui/core/styles&quot;;
  
  import React from &quot;react&quot;;
  
  import { rows } from &quot;../../store.js&quot;;
  
  // Theme Palette Colors
  const theme = createMuiTheme({
    palette: {
      primary: { main: &quot;rgb(38, 118, 198)&quot; }
    },
    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 =&gt; event =&gt; {
      this.setState({ [name]: event.target.checked });
    };
  
    render() {
      return (
        &lt;MuiThemeProvider theme={theme}&gt;
          &lt;FormGroup&gt;
            &lt;div className=&quot;filter__checkboxes&quot;&gt;
              &lt;div className=&quot;filter__checkboxes-column&quot;&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        checked={this.state.checkedA}
                        color=&quot;primary&quot;
                        onChange={this.handleChange(&quot;checkedA&quot;)}
                        value=&quot;checkedA&quot;
                      /&gt;
                    }
                    label=&quot;Submitted&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        checked={this.state.checkedB}
                        color=&quot;primary&quot;
                        onChange={this.handleChange(&quot;checkedB&quot;)}
                        value=&quot;checkedB&quot;
                      /&gt;
                    }
                    label=&quot;Invited&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;filter__checkboxes-column&quot;&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        checked={this.state.checkedC}
                        color=&quot;primary&quot;
                        onChange={this.handleChange(&quot;checkedC&quot;)}
                        value=&quot;checkedC&quot;
                      /&gt;
                    }
                    label=&quot;Not Submitted&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        checked={this.state.checkedD}
                        color=&quot;primary&quot;
                        onChange={this.handleChange(&quot;checkedD&quot;)}
                        value=&quot;checkedD&quot;
                      /&gt;
                    }
                    label=&quot;Draft&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;filter__checkboxes-column&quot;&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        checked={this.state.checkedE}
                        color=&quot;primary&quot;
                        onChange={this.handleChange(&quot;checkedE&quot;)}
                        value=&quot;checkedE&quot;
                      /&gt;
                    }
                    label=&quot;Information Request&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;checkboxes&quot;&gt;
                  &lt;FormControlLabel
                    control={
                      &lt;Checkbox
                        color=&quot;primary&quot;
                        checked={this.state.checkedF}
                        onChange={this.handleChange(&quot;checkedF&quot;)}
                        value=&quot;checkedF&quot;
                      /&gt;
                    }
                    label=&quot;Loan Application&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/FormGroup&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default FilterCheckboxes;
  </code></pre>
  <p><strong>Table Component:</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Table from &quot;@material-ui/core/Table&quot;;
  import TableBody from &quot;@material-ui/core/TableBody&quot;;
  import TableCell from &quot;@material-ui/core/TableCell&quot;;
  import TableHead from &quot;@material-ui/core/TableHead&quot;;
  import TableRow from &quot;@material-ui/core/TableRow&quot;;
  import Paper from &quot;@material-ui/core/Paper&quot;;
  
  import { rows } from &quot;../../store.js&quot;;
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      width: &quot;100%&quot;,
      marginTop: theme.spacing(3),
      overflowX: &quot;auto&quot;
    },
    table: {
      minWidth: 650
    }
  }));
  
  export default function SimpleTable() {
    const classes = useStyles();
  
    return (
      &lt;Paper className={classes.root}&gt;
        &lt;Table className={classes.table}&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Name&lt;/TableCell&gt;
              &lt;TableCell align=&quot;left&quot;&gt;Status&lt;/TableCell&gt;
              &lt;TableCell align=&quot;left&quot;&gt;First Submitted&lt;/TableCell&gt;
              &lt;TableCell align=&quot;left&quot;&gt;Last Activity&lt;/TableCell&gt;
              &lt;TableCell align=&quot;left&quot;&gt;Score&lt;/TableCell&gt;
              &lt;TableCell align=&quot;left&quot;&gt;Actions&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {rows.map(row =&gt; (
              &lt;TableRow key={row.name}&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.name}&lt;/TableCell&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.status}&lt;/TableCell&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.firstSubmitted}&lt;/TableCell&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.lastActivity}&lt;/TableCell&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.score}&lt;/TableCell&gt;
                &lt;TableCell align=&quot;left&quot;&gt;{row.actions}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/Paper&gt;
    );
  }
  </code></pre>
  <p>You can find a code sample <a href="https://codesandbox.io/s/table-w-filter-options-mui-gxbmx" rel="nofollow noreferrer">here</a>.</p>
  <p>How can I build this functionality?</p>