cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Filter DataTable on calculated column

lucas_hocker
Dynatrace Advisor
Dynatrace Advisor

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?

2023-08-31_08-45-02.png

3 REPLIES 3

thomas_heller
Dynatracer
Dynatracer

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?

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

 

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.

 

Featured Posts