Unable to render custom filters in v8?

[tar-aldev]

How do I render custom filters in v8? There seems to be no way of doing it. I need to render custom filter. And also be able to filter it manually (because it makes api call, instead of filtering locally)
I don't see any prop that may help. Only filterFn(), which is not enough. In react table v7 there was simply a Filter props. But in v8 it looks like nothing similar is existing?

[tannerlinsley]

You can create your own custom filter prop if you want. Pass a component to columnDef.meta.filterComp, then render that in your templates.

[tar-aldev]

When I am adding it, I start getting a typescript errors.

Binding element 'getValue' implicitly has an 'any' type

table.createDataColumn(
          ({ efacitySessionId }) => efacitySessionId?.name,
          {
            id: 'sessionName',
            header: 'Session',
            cell: ({ getValue }) => { <--- Type error here
              const sessionName = getValue();
              return sessionName === RegistrationStatus.Unregistered ? (
                <div style={{ color: 'red' }}>(cancelled)</div>
              ) : (
                sessionName
              );
            },
            meta: {
              filterComponent: (f, t, p) => {
                console.log('FFF', f, t, p);

                return <></>;
              }
            }
          }
        ),

[hkvongit]

Thanks @tar-aldev and @tannerlinsley.
I was able to achieve this

Defining ColumnMeta interface

declare module '@tanstack/table-core' {
    interface ColumnMeta<TData extends unknown, TValue> {
        filterComponent: (props: any) => any;
        isCustomFilterComponent: boolean;
    }
}

Columns

const columns = [
        columnHelper.accessor('id', {
            cell: (info) => info.getValue(),
            header: 'ID',
            meta: {
                filterComponent: (setFilterValue) => {
                    return (
                        <Select onChange={(e) => setFilterValue(e.target.value)}>
                            <option value="some1">Some</option>
                            <option value="some2">Some 2</option>
                        </Select>
                    );
                },
            },
        }),
        columnHelper.accessor('name', {
            cell: (info) => info.getValue(),
            header: 'NAME',
        }),
        columnHelper.accessor('contributed_by', {
            cell: (info) => info.getValue(),
            header: 'CONTRIBUTED BY',
            enableSorting: false,
        }),
    ];

On table I have accessed like

                             <Th key={header.id}>
                                    {header.isPlaceholder ? null : (
                                        <Box>
                                            <Text onClick={header.column.getToggleSortingHandler()}>
                                                {flexRender(header.column.columnDef.header, header.getContext())}
                                                {renderSortActivityOnHeader(header.column?.getIsSorted())}
                                            </Text>
                                            {header.column.getCanFilter() && (
                                                <DebouncedInput
                                                    onChange={(value: string) => header.column.setFilterValue(value)}
                                                    value={header.column.getFilterValue() || ''}
                                                />
                                            )}
                                            {header.column.columnDef?.meta?.filterComponent(
                                                header.column.setFilterValue
                                            )}
                                        </Box>
                                    )}
                                </Th>

[haotangio]

This was supported in v7. I think it's very important and should be supported by default without any hack around.

[OlIvAl]

Perhaps a couple of code fixes will help fix the situation

setFilterValue: value => {
  table.setColumnFilters(old => {
    const previousfilter = old?.find(d => d.id === column.id)

    const newFilter = functionalUpdate(
      value,
      previousfilter ? previousfilter.value : undefined
    )

    if (!table.options.manualFiltering) {
      const filterFn = column.getFilterFn()


      //
      if (
        shouldAutoRemoveFilter(
          filterFn as FilterFn<TData>,
          newFilter,
          column
        )
      ) {
        return old?.filter(d => d.id !== column.id) ?? []
      }
    }

    const newFilterObj = { id: column.id, value: newFilter }

    if (previousfilter) {
      return (
        old?.map(d => {
          if (d.id === column.id) {
            return newFilterObj
          }
          return d
        }) ?? []
      )
    }

    if (old?.length) {
      return [...old, newFilterObj]
    }

    return [newFilterObj]
  })
}

setColumnFilters: (updater: Updater<ColumnFiltersState>) => {
  const leafColumns = table.getAllLeafColumns()

  const updateFn = (old: ColumnFiltersState) => {
    return functionalUpdate(updater, old)?.filter(filter => {
      const column = leafColumns.find(d => d.id === filter.id)

      if (!table.options.manualFiltering && column) {
        const filterFn = column.getFilterFn()

        if (shouldAutoRemoveFilter(filterFn, filter.value, column)) {
          return false
        }
      }

      return true
    })
  }

  table.options.onColumnFiltersChange?.(updateFn)
}

[dpgraham4401]

I'm super bummed to read this thread, I figured v8 would have this since v7 does

[tannerlinsley]

I'm not sure how we could package this feature and remain headless. It doesn't seem prohibitively difficult to tag your column defs (or just use the filterFn) to determine what kind of UI you want to render for your column filter. It's exactly the same decision you make when creating your table component (do I render a or a ?).

[lamhungypl]

I confirm the idea in comment 3988293 work .

1. Define extra Filter component via columnMeta
2. Render from it on wherever you want

[MathiasEllegaardRitter]

I'm not sure how we could package this feature and remain headless. It doesn't seem prohibitively difficult to tag your column defs (or just use the filterFn) to determine what kind of UI you want to render for your column filter. It's exactly the same decision you make when creating your table component (do I render a or a ?).

I think the problem is, its hard to find the documentation of the best practise to do filters. I saw people do it in table, or do it from column and define it there, now i done filters but not even sure what is the best way performance wise etc.