T
TanStack•15mo ago
deep-jade

Dynamic Checkbox Options Update

Hello. I have a table with a sidebar that has checkboxes to filter the table. The checkbox options are created dynamically based on the table's data. For example, "DC-DC Converter" appears because it's in the table. I made a custom filter, and it works. My problem is updating the checkbox options after filtering. If "DC-DC Converter" is no longer in the filtered table, it shouldn't be in the checkbox options anymore. I tried using table.getRowModel().rows to get the filtered data, but it didn't work. I want client side filtering for this since the table doesn't have lots of data. Do you have any suggestions? Any idea is greatly appreciated. Thanks!
No description
1 Reply
deep-jade
deep-jadeOP•15mo ago
I just tried Column Faceting but it's giving me this error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. Here's my filter function: 
function Filter({
  label,
  fieldName,
  prefix,
  column,
}: {
  label: string;
  fieldName: string;
  prefix: string;
  column: Column<ModelSeriesProps, unknown>;
}) {
  const sortedUniqueValues = React.useMemo(
    () =>
      Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 5000),
    [column.getFacetedUniqueValues()],
  );

  const [checkedState, setCheckedState] = React.useState(
    new Array(sortedUniqueValues.length).fill(false),
  );

  const handleOnChange = (position: number) => {
    const values: string[] = [];
    const updatedCheckedState = checkedState.map((item, idx) => {
      if (idx === position) {
        if (!item === true) {
          values.push(sortedUniqueValues[idx]);
        }
        return !item;
      } else {
        if (item === true) {
          values.push(sortedUniqueValues[idx]);
        }
        return item;
      }
    });

    setCheckedState(updatedCheckedState);
    column.setFilterValue(values);
  };

  return sortedUniqueValues.length > 0 ? (
    <div className="w-full bg-neutral px-5 py-4">
        {sortedUniqueValues.map((opt, idx) => {
          const optId = `${prefix}-${useId()}`;

          return (
            <div key={useId()} className="flex items-center space-x-2">
              <input
                type="checkbox"
                id={optId}
                name={fieldName}
                value={opt}
                checked={checkedState[idx]}
                onChange={() => handleOnChange(idx)}
              />
              <label htmlFor={optId} className="text-sm">
                {opt}
              </label>
            </div>
          );
        })}
    </div>
  ) : null;
}
function Filter({
  label,
  fieldName,
  prefix,
  column,
}: {
  label: string;
  fieldName: string;
  prefix: string;
  column: Column<ModelSeriesProps, unknown>;
}) {
  const sortedUniqueValues = React.useMemo(
    () =>
      Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 5000),
    [column.getFacetedUniqueValues()],
  );

  const [checkedState, setCheckedState] = React.useState(
    new Array(sortedUniqueValues.length).fill(false),
  );

  const handleOnChange = (position: number) => {
    const values: string[] = [];
    const updatedCheckedState = checkedState.map((item, idx) => {
      if (idx === position) {
        if (!item === true) {
          values.push(sortedUniqueValues[idx]);
        }
        return !item;
      } else {
        if (item === true) {
          values.push(sortedUniqueValues[idx]);
        }
        return item;
      }
    });

    setCheckedState(updatedCheckedState);
    column.setFilterValue(values);
  };

  return sortedUniqueValues.length > 0 ? (
    <div className="w-full bg-neutral px-5 py-4">
        {sortedUniqueValues.map((opt, idx) => {
          const optId = `${prefix}-${useId()}`;

          return (
            <div key={useId()} className="flex items-center space-x-2">
              <input
                type="checkbox"
                id={optId}
                name={fieldName}
                value={opt}
                checked={checkedState[idx]}
                onChange={() => handleOnChange(idx)}
              />
              <label htmlFor={optId} className="text-sm">
                {opt}
              </label>
            </div>
          );
        })}
    </div>
  ) : null;
}
I finally got it. The error was caused by used() hook. Using Column Faceted work, it updates the checkbox options.

Did you find this page helpful?