Handling Per-Column Filtering in react-aria-components Table

[timurmaio]

Hello there,
I’m implementing a table using react-aria-components and I’m having trouble understanding the best way to implement per-column filtering. My main concern is where to place the filtering logic properly.

Each Column has event handlers, such as sorting on press, and I also have a SearchField inside it. Currently, I’m wrapping the SearchField in a div with stopPropagation, which works but doesn’t feel like the ideal approach.

Has anyone encountered a similar issue and found a better solution? I’d love to hear your thoughts!

This is the design i have:

[snowystinger]

Hi there, it looks like you have two questions?

1. Where to place filter logic:
   I'd use useFilter https://react-spectrum.adobe.com/react-aria/useFilter.html and combine them as needed.

let [invoiceSearch, setInvoiceSearch] = useState('');
let [contractFilter, ....
let myItems = // whatever my items are, []
let invoiceFilter = useFilter...
let contractFilter = useFilter...
let myFilteredItems = myItems.filter((item) => {
  return (invoiceFilter.contains(item.invoiceNumber, invoiceSearch) && contractFilter....)
})

2. How to put a SearchField inside a TableCell:
   Unfortunately we don't support textfields inside a Table yet, though eventually we will with what we're calling EditMode. Some of the work is complete here feat: nested collection support #7379 and you could use this along with stopping propagation of events you're handling to get most of the way.

Feel free to post a codesandbox or stackblitz if you want to share more detail.