How to add a custom dropdown filter?

[pellea]

In v7, we could add a custom component for filtering. How can we achieve this in v8?

In v7:

     {
        ...
        Filter: CustomSelectColumnFilter,
        filter: CustomSelectFilter
         ...
      },

CustomSelectFilter as:

function CustomSelectFilter(rows, columnIds, filterValue) { 
    ... 
}

CustomSelectColumnFilter as:

function EmployeeRequestSelectColumnFilter({ column: { filterValue, setFilter, preFilteredRows, id } }) { 
    ... 
    return <><select>...</select></> 
}

Is there any "complete" example?

Thanks.

[pellea]

I found the answer thanks to other questions ...

For a ColumnDef :

      {
        header: 'Status',
        accessorFn: x => x.fullObj,
        cell: info => (
          <CustomCompTag />
        ),
        filterFn: selectFilterFn,
        meta: {
          filterComponent: CustomFilter
        }
      },

with selectFilterFn as:

const selectFilterFn : FilterFn<any> = (row, columnId, value, addMeta) => {
  if (value === undefined || value.length === 0) {
    return false;
  } else {
    const { someProp, otherProp } = mapOrConvertBackLabel(value);
    return someProp.includes(row.original.myObj?.someProp) && otherProp .includes(row.original.myObj?.otherProp );
  }
};

and with CustomFilter as:

const CustomFilter = ({ column, table }: { column: Column<any, unknown>; table: Table<any> }) => {
  const columnFilterValue = column.getFilterValue();

  const options = useMemo(() => {
    const options = new Set();
    table.getPreFilteredRowModel().flatRows.forEach(row => {
      const myObj = row.getValue<MyObj>(column.id);
      let label = getLabelForYourNeed(myObj);
      options.add(label);
    });
    return [...options.values()];
  }, [column.id, table.getPreFilteredRowModel()]);

  return (
    <div className="flex relative">
      <select
        className="..."
        title="filter"
        value={(columnFilterValue ?? '') as string}
        onChange={e => column.setFilterValue(e.target.value)}
      >
        <option value="">All</option>
        {options
          .filter(x => x !== undefined && x !== null)
          .map((option: any, i, _) => (
            <option key={i} value={option}>
              {option}
            </option>
          ))}
      </select>
    </div>
  );
}

and inside the table:

interface CustomFilterMeta extends FilterMeta {
  filterComponent: (info: { column: Column<any, unknown>; table: Table<any> }) => JSX.Element;
}

return (<table>
...
    {header.column.getCanFilter() ? (
    <div>
      {header.column.columnDef?.meta &&
      (header.column.columnDef?.meta as CustomFilterMeta).filterComponent ? (
        (header.column.columnDef?.meta as CustomFilterMeta).filterComponent({
          column: header.column,
          table
        })
      ) : (
        <Filter column={header.column} table={table} />
      )}
    </div>
  ) : null}
...
</table>);

[kmer75]

Thanks bro.
Im looking for that s**t since one week.
It works very welll so good job.
All filter exemple I found was without the ColumnDef, v7 as you said.
I didnt know how you found that but the documentation is so weird...

[Samettkaya]

Hello, I want to make this example, but some functions are missing in the example above, can you help me?

[zzincist]

@Samettkaya see my comment below. lmk if u're still stuck.

[zzincist]

Struggled with this quite a bit too myself so here's a minimal example for using filterFn in case anyone stumbles onto this thread in the future. (esp. if you're looking for the custom filters to be outside the columns)

Should be able to achieve something like this:

Basically, these two pieces of code handles most of the heavy lifting:

1. Handle the change from the input (whether its checkbox or dropdown)

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    table.getColumn("age")?.setFilterValue(e.target.checked);
};

2. Use the filterFn to check each row:

filterFns: {
      ageFilter: (row, columnId, filterValue) => {
        return filterValue
          ? row.original[columnId] > 30
          : row.original[columnId];
      },
},

then, just make sure to apply the filter to the appropriate column:

columnHelper.accessor("age", {
    header: () => "Age",
    cell: (info) => info.renderValue(),
    filterFn: "ageFilter" as any, // add filter function here 
}),

[Samettkaya]

Thanks it worked for me

[legion40216]

The Tan Table Docs suck so bad, i really wished they did something about it, Thanks this is exactly what i was looking for, though different searches and YouTube video led me here.

[zacBkh]

columnHelper.accessor("age", {
    header: () => "Age",
    cell: (info) => info.renderValue(),
    filterFn: "ageFilter" as any, // add filter function here 
}),

Hi!

The minimal sandbox example does not work anymore, could you please share it again?
I am having hard times applying your code to my usecase

Thank you so much

[PermanentRedirection]

How to add custom data inside the ageFilter filterFn?
I have autocomplete input and need to use selected values as array of strings and apply them to some column on table.
For example, I have column age and i want to filter it on ages 10, 20, 30, 40. And after i press on some button i need to apply filters for table. I found that we can do this explicitly inside ageFilter filterFn:

ageFilter: (row, columnId, filterValue) => {
return
row.original[columnId] === 10 ||
row.original[columnId] === 20 ||
row.original[columnId] === 30; // and so on
},

But i need to do it on button press and by reading useState value

[zzincist]

Im not super sure what you mean, but I'm guessing that you want to set a bunch of filters then apply all the changes at once when you hit a button.

If thats the case, you can gather all the selections made the user in a state, then applying it via a handleChange function to the onClick event of the button. This will delay the filter values from being set until the button is clicked.

[Vokoloven]

@zzincist many thanks for your explanation, only one question:
filterFn: "ageFilter" as any, // add filter function here
I belive type of this should be filterFn: "ageFilter" as FilterOptionFn<MyObj>.