31 Aug 2023 08:04 AM
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?
Solved! Go to Solution.
31 Aug 2023 12:26 PM - edited 31 Aug 2023 12:27 PM
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?
31 Aug 2023 12:38 PM
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} />,
},
const statusRes = useStatus({ rule });
if (statusRes.status == "Muted") return <Indicator state="disabled">Muted</Indicator>;
if (statusRes.isError) return <ErrorIcon />;
...
31 Aug 2023 12:51 PM
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.