Filtering on non-text items

[jdmcd]

Hi,

Thanks for the great library! I'm using the latest version and I'm trying to figure out how to filter based on values that are not strings (i.e. a <Link> object). Basically I need to switch on the row like this:

if (val.props && val.props.children) {
    // val.props.children is the string value
}

But I'm not sure how to set a "filterValue" or something similar.

[jdmcd]

Additionally, is there a way to do this for sorting as well?

[jdmcd]

@tannerlinsley any ideas on this? This is the last remaining item before we can switch over to react-table fully :)

[tannerlinsley]

The best way to do this is to have your data in it's primitive format as you pass it to accessors. So if you have a link to a user, you would want to pass columns that access things like user.id and user.name. This way, sorting and filtering work without any modifications by using the data that is accessed using the accessor. Then you can use a custom Cell renderer to build things like links or images. Here is an example of a column that uses the user's name as the accessed value for sorting and filtering, but displays that name as a link and even uses the user ID from the original row.

{ id: 'userName', accessor: row => row.name, Cell: ({ value, row }) => <Link to={`/users/${row.original.id}`}>{value}</Link> }

[jdmcd]

Got it - so in this case accessor is being used for the sort and filter value?

[tannerlinsley]

Yep

[jdmcd]

Thank you!

[joshribakoff-sm]

Based on https://react-table.tanstack.com/docs/api/useTable#column-options one would assume only value is passed, not the row:

({ value }) => String(value)

It would be great to update the docs to cover all of the params :)

[davidwhthomas]

Just want to add an example for current tanstack table v8 to filter on more complex types, such as <Link> with thanks.

Using this approach, the filtering works based on the title link text.

// Define the schema for our item data.
export type Resource = {
  id: string
  image: string
  title: TitleLink
}

// Define a type for composite item title and link
export type TitleLink = {
  text: string
  url: string
}

// Define the columns
export const columns: ColumnDef<Resource>[] = [
  {
    // Support complex type for filter
    accessorFn: (row) => row.title.text,
    id: "title",
    header: "Title",
    cell: ({ row }) => {
      // Get original title value for data fields
      const titleLink: TitleLink = row.original.title
      const text: string = titleLink.text
      const url: string = titleLink.url
      return (
        <Link className="font-bold hover:text-accent" href={url}>
          {text}
        </Link>
      )
    },
  },
// other columns...
]