topic Re: Filter DataTable on calculated column in Developer Q&A Forum

Filter DataTable on calculated column

lucas_hocker — Thu, 31 Aug 2023 07:04:00 GMT

I have a DataTable which is driven from an array of data. It's easy to filter the table based on columns where the data is static; however, I have a few fields that are complex and the Cell is just defined as a subcomponent. In the subcomponent, queries etc happen to calculate the value. What's the "right way" to enable filtering of the DataTable on these types of calculated columns?

Re: Filter DataTable on calculated column

thomas_heller — Thu, 31 Aug 2023 11:27:13 GMT

Hi @lucas_hocker ! I would just need a couple of things clarified, before being able to answer this question for you.
Specifically what you mean with "In the subcomponent, queries etc happen to calculate the value". Does that mean that you are not aware of the actual value, that is being rendered?

Re: Filter DataTable on calculated column

lucas_hocker — Thu, 31 Aug 2023 11:38:20 GMT

Thanks Thomas. Yes, in my source data for the DataTable I don't know the value of the `status` field. The col looks like this from the DataTable perspective:

{ header: "Status", id: "status", autoWidth: true, cell: ({ row }) => <StatusCell rule={row.original} />, },

The StatusCell queries TanStack React-query, which queries Grail. For example:

const statusRes = useStatus({ rule }); if (statusRes.status == "Muted") return <Indicator state="disabled">Muted</Indicator>; if (statusRes.isError) return <ErrorIcon />; ...

Re: Filter DataTable on calculated column

thomas_heller — Thu, 31 Aug 2023 11:51:54 GMT

That data flow might be a bit hard to filter in this case. Somehow the StatusCell would need to communicate it's state up to the table to be able to filter the data accordingly.
While this is certainly achievable with a Context that the Cells register themselves to, it's probably the better option to fetch all information in an aggregation first, and then pack that into the `DataTable`.

If that is not at all possible, I think you could create a react context that provides a MutableRef to a Map within, which the StatusCell can consume in order to report it's values back to the component controlling the filtering logic. Let me know if you want me to sketch something like this out in an example.