On react-table v7, I have a table where each row is a nested object. When using TypeScript, For the properties that are not directly on the base row object, I have some issues getting the column definition array to work properly.
As seen in the example below, I get an error on the argument to the Cell formatter in the column that has a nested property (batteryModel.capacity). The error is because the type of the argument to the Cell formatter cannot be automatically inferred. However, this works fine with "externalId", since this is a direct string property on the row object.
I am able to work around the issue by defining the type of the Cell formatter argument manually, but I don't think this is a good solution, as it has the potential for bugs in the future, if some of the column data types changes:
If this is a weakness I have to live with, then maybe it would be better to preprocess the rows into a new object that flattens the structure, but this feels like unnecessary complexity. Nested row data is supported in react-table, but if it makes the lib unable to detect the data type of the column in TypeScript, I would say it's almost unusable. So I am hoping there is a good way to make sure the data type is properly detected even on nested objects.