Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Nextui Table with custom component inside Table body

I am using NextUI Table component.

  • This is the expected usage from the docs:
  <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>
      <TableBody>
        <TableRow key="1">
          <TableCell>Tony Reichert</TableCell>
          <TableCell>CEO</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  • All I’m trying to achieve is to render a custom component that returns the exact same code that is inside TableBody. it would look like this:
 <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>
      <TableBody>
        <Test id="1" key="1" />
      </TableBody>
    </Table>

const Test = ({id}: {id: string}) => (
  <TableRow key="1">
    <TableCell>Tony Reichert</TableCell>
    <TableCell>CEO</TableCell>
    <TableCell>Active</TableCell>
  </TableRow>

The above approach returns this error:
TypeError: type.getCollectionNode is not a function

My question is: am I doing something wrong or is this simply impossible due to NextUI limitations. How are the two code examples any different?

Not much to try, it just doesn’t seem to work

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Based on @Tim van Dam comment it doesn't seem to be currently possible


  2. 0 
    const Test = ({ id }: { id: string }) => (
     <TableRow key={id}>
       <TableCell>Tony Reichert</TableCell>
      <TableCell>CEO</TableCell>
          <TableCell>Active</TableCell>
         </TableRow>
        );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search