setFilter for checkbox fitlering

[jelizarovas]

I'm trying to set up filtering with checkboxes, and i struggle to omit certain values with setFilter. If i have all the boxes selected it should show all the values. but if i deselect one or more, how to filter them out? right now i have implemented just select one, but wondering if it's possible to filter out.

https://codesandbox.io/s/react-table-checkbox-filter-0w74j

current filter code:

function CheckBoxColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id } }) {
  const options = React.useMemo(() => {
    let counts = {};
    preFilteredRows.forEach((x) => {
      x = x.values[id];
      counts[x] = (counts[x] || 0) + 1;
    });
    return counts;
  }, [id, preFilteredRows]);

  const [checked, setChecked] = React.useState();

  const onChange = (e) => {
    const t = e.target.name;
    setFilter((old) => (t === old ? undefined : t));
    checked === t ? setChecked() : setChecked(t);
  };

  return (
    <Grid>
      {Object.entries(options).map(([option, count], i) => (
        <Label key={i} htmlFor={option}>
          <input
            type="checkbox"
            name={option}
            id={option}
            checked={checked === option ? true : false}
            onChange={onChange}
          />
          {option} ({count})
        </Label>
      ))}
    </Grid>
  );
}

[jelizarovas]

I've actually followed #2047 @vsSanti way, and implemented multiselect.

1. Added filterType:

    () => ({
[...]
      multiSelect: (rows, id, filterValues) => {
        if (filterValues.length === 0) return rows;
        return rows.filter((r) => filterValues.includes(r.values[id]));
      },
[...]
    }),
    []
  );

2. In columns object added the filters:

  const columns = React.useMemo(
    () => [
[...]
      {
        Header: "Make",
        accessor: "make",
        Filter: MultiCheckBoxColumnFilter,
        filter: "multiSelect",
      },
[...] 

3. And then the actual component. Not the most efficient one, but works for my case. It also allows switching from selecting all, or one, or just checking off boxes.

function MultiCheckBoxColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id } }) {
  const classes = useStyles();

  const [multiMode, setMultiMode] = React.useState(false);

  const options = React.useMemo(() => {
    let counts = {};
    preFilteredRows.forEach((x) => {
      x = x.values[id].toString();

      counts[x] = (counts[x] || 0) + 1;
    });
    return counts;
  }, [id, preFilteredRows]);

  const [checked, setChecked] = React.useState(Object.keys(options));

  const onChange = (e) => {
    const t = e.target.name.toString();

    if (!multiMode) {
      setFilter((old) => (old && old.includes(t) ? undefined : [t]));
      checked.includes(t) && checked.length === 1 ? setChecked(Object.keys(options)) : setChecked([t]);
    }

    if (multiMode) {
      if (checked && checked.includes(t)) {
        setFilter(checked.filter((v) => v !== t));
        // setChecked((p) => p.filter((v) => v !== t));
        setChecked((prevChecked) => {
          if (prevChecked.length === 1) return Object.keys(options);
          return prevChecked.filter((v) => v !== t);
        });
      } else {
        setFilter([...checked, t]);
        setChecked((prevChecked) => [...prevChecked, t]);
      }
    }
  };

  return (
    <Grid>
      <div
        onClick={() => {
          setChecked(Object.keys(options));
          setFilter([]);
        }}
      >
        Show <span>All</span>
      </div>
      <div></div>
      <div onClick={() => setMultiMode((mode) => !mode)}>
        Select: <span style={{ fontWeight: !multiMode ? "bold" : "normal" }}>Solo</span> |{" "}
        <span style={{ fontWeight: multiMode ? "bold" : "normal" }}>Multi</span>
      </div>
      {Object.entries(options).map(([option, count], i) => {
        return (
          <Label key={i} htmlFor={option}>
            <Checkbox
              className={classes.checkbox}
              color="primary"
              size="small"
              name={option}
              id={option}
              checked={checked.includes(option)}
              onChange={onChange}
              title={`${option} (${count})`}
            />
            {option} ({count})
          </Label>
        );
      })}
    </Grid>
  );
}

[dmathijs]

How did you manage to show all the filters in a sidebar? Did you iterate over all headers again and render the columns' filters 1 by 1?

[jelizarovas]

My table is sortable, and i didn't want to have filters at headers, so i separated them:

      <div style={{ display: "flex", flexDirection: "row-reverse", alignItems: "flex-start" }}>
        <Paper className={classes.sidebar}>
          {headerGroups.map((headerGroup) => (
            <div style={{ width: 400, padding: 5 }} {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) =>
                column.canFilter ? (
                  <div key={column.render("Header")}>
                    <strong>{column.render("Header")}</strong>
                    <div>{column.render("Filter")}</div>
                  </div>
                ) : null
              )}
            </div>
          ))}
        </Paper>
[...]

so i aded this piece of code before my table. I also have

<GlobalFilter
        preGlobalFilteredRows={preGlobalFilteredRows}
        globalFilter={state.globalFilter}
        setGlobalFilter={setGlobalFilter}
      />

separate before that. column.canFilter works only if GlobalFilter is empty. If i start searching in the GlobalFilter, the other filters appear. Don't know if it's react-table issue or if it is done on purpose. @tannerlinsley ?

Codesandbox link: https://codesandbox.io/s/react-table-checkbox-filter-1q4fc?file=/src/App.js

Example: GlobarFilter empty:

GlobalFilter has something in it:

[jelizarovas]

Note:
this is how i disable filters in the column object.

  const columns = React.useMemo(
    () => [
      {
        Header: "Model",
        accessor: "model",
        disableFilters: true,
      },

[jelizarovas]

Solution i ended up going with was:

i finally ended up going through column props and using column.disableFilters as oppose to column.canFilter

      <div style={{ display: "flex", flexDirection: "row-reverse", alignItems: "flex-start" }}>
        <Paper className={classes.sidebar}>
          {headerGroups.map((headerGroup) => (
            <div style={{ width: 400, padding: 5 }} {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) =>
                !column.disableFilters ? ( 
                  <div key={column.render("Header")}>
                    <strong>{column.render("Header")}</strong>
                    <div>{column.render("Filter")}</div>
                  </div>
                ) : null
              )}
            </div>
          ))}
        </Paper>
[...]

[melvinalmonte]

Just had this issue, thanks so much for posting this. It unblocked me big time.

[advp7]

Hi, just came across your implementation and I am working on something similar. I was wondering if you could explain how checkbox and options (for the filtering) are displayed with respect to the code and how would you modify the options if you had to? Thanks!