rsuite/rsuite-table

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.

Hi @lorefnon , thank you very much for your suggestion.

I think the development experience of rsuite-table on typescript needs to be improved. However, I don’t have time to improve this part in the short term. If you are interested in this, you are very welcome to submit a PR.