[BUG] - Table sub components "as" prop does not work

[jprosevear]

HeroUI Version

latest

Describe the bug

Using "as" prop on TableHeader, TableColumn, TableBody, TableRow,

It does have effect on Table

Your Example Website or App

https://codesandbox.io/p/devbox/dreamy-villani-kj37k4?file=%2FApp.jsx%3A16%2C24

Steps to Reproduce the Bug or Issue

See CodeSandbox

Expected behavior

as property takes effect

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-2435 [BUG] - Table sub components "as" prop does not work

[wingkwong]

I think as here shouldn't take effect as they should be just HTMLTableElement. May I know your use case that you need to use div?

[jprosevear]

The div is just a sample - I'm trying to use a <Link> from Tanstack Router - if I pass an href the code will use an 'a' but that doesn't work, see https://github.com/adobe/react-spectrum/pull/7695.

[drebot92]

This is also a problem for me, I want to use <TableRow as={motion.tr} />, but it doesn't have any effect(

[alextouzel]

This is also a problem for me, I want to use <TableRow as={motion.tr} />, but it doesn't have any effect(

Same! I have to jump through a few hoops to animate a table because of this. If I could do <TableRow as={motion.tr} />, it would make my life much easier! Now I have to animate each cell individually (see below), which is less performant and creates undesirable side-effects.

Cannot do now:

<TableRow as={motion.tr} layout layoutId={itemLayoutId}>
    <TableCell>
        ...
    </TableCell>
</TableRow>

Instead, I need to do:

<TableRow>
    {(columnKey) => (
        <TableCell>
            <motion.div layout layoutId={itemLayoutId + columnKey}>
                ...
            </motion.div>
        </TableCell>
    )}
</TableRow>