Fragement inside TableBody Error: Cannot convert a Symbol value to a string

[pjatupon]

[silas-wolf]

same here

[wingkwong]

I think the reason is if data is null or undefined, then items become [] which render nothing inside <TableBody /> which causes the error.

[wingkwong]

are you using 2.4.8? can you setup a sandbox so that we could debug on the same page?

[silas-wolf]

yeah sure.
I am on 2.4.8., yes.

You can check out an example here.

I think I now understand what you meant with the case when data is null.

In my example code this works:

"use client";
import {
  Spinner,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@nextui-org/react";

export default function Home() {
  const test = true;
  return (
    <Table>
      <TableHeader>
        <TableColumn>Name</TableColumn>
        <TableColumn>Vorname</TableColumn>
        <TableColumn>Email</TableColumn>
        {test ? <TableColumn>Test</TableColumn> : <></>}
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Name</TableCell>
          <TableCell>Vorname</TableCell>
          <TableCell>Email</TableCell>
          {test ? <TableCell>Test</TableCell> : <></>}
        </TableRow>
      </TableBody>
    </Table>
  );
}

while this fails:

"use client";
import {
  Spinner,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@nextui-org/react";

export default function Home() {
  const test = false;
  return (
    <Table>
      <TableHeader>
        <TableColumn>Name</TableColumn>
        <TableColumn>Vorname</TableColumn>
        <TableColumn>Email</TableColumn>
        {test ? <TableColumn>Test</TableColumn> : <></>}
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Name</TableCell>
          <TableCell>Vorname</TableCell>
          <TableCell>Email</TableCell>
          {test ? <TableCell>Test</TableCell> : <></>}
        </TableRow>
      </TableBody>
    </Table>
  );
}

But I cannot find a way to properly conditionally render without running into errors using next-ui table. Any ideas?

[wingkwong]

Yes. because Table is a collection-based component. Conditionally rendering won't work. Probably you may try to include a empty TableColumn with hidden property.

[silas-wolf]

Hell yeah that seems to work!! Thank you so much 🎉

Let's now consider a more complex example though:

"use client";
import {
  Spinner,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@nextui-org/react";

interface Row {
  [x: string]: any;
}

const rowAction = (row: Row) => <p>{row.firstname}</p>;

export default function Home() {
  const columns = ["person_id", "firstname", "email"];

  const rows = [
    {
      person_id: "1",
      firstname: "John",
      email: "[email protected]",
    },
  ];

  return (
    <Table>
      <TableHeader>
        {columns.map((column) => (
          <TableColumn key={column}>{column}</TableColumn>
        ))}
        {rowAction ? (
          <TableColumn>Actions</TableColumn>
        ) : (
          <TableColumn hidden>
            <></>
          </TableColumn>
        )}
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow>
            {columns.map((c) => (
              <TableCell>{row[c]}</TableCell>
            ))}
            {rowAction ? (
              <TableCell>{rowAction(row)}</TableCell>
            ) : (
              <TableCell hidden>
                <></>
              </TableCell>
            )}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

It works, but as you can see in the sandbox I am getting this TS warning:

Type 'Element[]' is missing the following properties from type 'ReactElement<ColumnProps, string | JSXElementConstructor>': type, props, keyts(2739)

[muhammadmedhat99]

i got this TS error too Any Updates?