Filter DataTable on calculated column

[lucas_hocker]

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?

 

[thomas_heller]

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?

[lucas_hocker]

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 />;
...

[thomas_heller · Accepted solution]

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.