[BUG] - Table.Body items(rows) rendering procedure in typescript cause 'No index signature'

[Rezaabdi78]

Describe the bug

on my Next.js app using @nextui-org/react 1.0.0-beta9, I was trying to use the Table component using the Dynamic table example on NextUi website.

When I was trying to render table cells in rows at this part of the code:

const renderCell = (user: UserType, columnKey: React.Key) => {
    const cellValue = user[columnKey];
    switch (columnKey) {
       .
       .
       .    
    }

Typescript complains and throws this error:

Element implicitly has an 'any' type because expression of type 'Key' can't be used to index type '<OBJECT_TYPE>'.
  No index signature with a parameter of type 'string' was found on type '<OBJECT_TYPE>'

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. create a new app with nextui-org/react and typescript installed
2. make a new component that uses Table
3. when Table.body wants to iterate over items passed to it and render Table. Row and Table.Cell, you can see the problem

Expected behavior

I expected the Table component works without any type errors but it's not and makes complaints about types.

Screenshots or Videos

Operating System Version

• OS: Windows

Browser

Chrome

[rshov]

Same here. Seems to make the Table control unusable in Typescript, unless I'm misunderstanding how to render dynamic table rows with this control.

[IronhideIvan]

@rshov To provide a workaround that I've been using, you can explicitly cast the Key type as a key of the object in Typescript.

Example:

<Table.Body items={props.words}>
  {(w) => (
    <Table.Row key={w.id}>
      {(columnKey) => {
        return <Table.Cell>{w[columnKey as keyof typeof w]}</Table.Cell>;
      }}
    </Table.Row>
  )}
</Table.Body>

[jrgarciadev]

Hey please update to v2.0 https://nextui.org/blog/nextui-v2 due to v1 will not receive more updates.