Table is generic, but Cell is not
lorefnon opened this issue · 1 comments
Thanks for creating this library. The API and feature set are quite nice. I have a minor suggestion regarding the use of generics in Table component.
What problem does this feature solve?
Currently Table component is generic, but the Cell component is not generic. So if we have a usage like this:
<Table<InventoryItem, string> data={inventoryItems}>
<Column
resizable
width={200}
>
<HeaderCell>Produce Type</HeaderCell>
<Cell>
{(row) => row.produceType.name}
</Cell>
</Column>
{/* ... */}
</Table>
row.produceType
has any
type because Cell component has no idea about the type parameter received by the Table component. This can be a subtle source of bugs because at a glance the code looks fully type safe.
In fact actually adding a type annotation to row is also not enough because the default type used by Cell uses never.
What does the proposed API look like?
We could make the Cell component generic too and make the Table component accept a render prop which injects Cell with the correct type.
<Table<InventoryItem, string> data={inventoryItems}>
{({ Column, HeaderCell, Cell }) => (
<>
<Column
resizable
width={200}
>
<HeaderCell>Produce Type</HeaderCell>
<Cell>
{(row) => row.produceType.name}
</Cell>
</Column>
{/* ... */}
</>
)}
</Table>
IMHO this will fit well with rest of the API. This can be implemented in backward compatible manner, so will not break existing code.