[BUG] - TableCell colSpan throwing error "Cell count must match column count"

[renatodantas]

NextUI Version

2.1.13

Describe the bug

When I add the colSpan attribute to TableCell component to span some columns into one, I get the following error message:

Error: Cell count must match column count. Found 1 cells and 2 columns.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Below is a simple snippet of code that reproduces the problem:

<Table aria-label="Test">
  <TableHeader columns={columns}>
    <TableColumn>Column 1</TableColumn>
    <TableColumn>Column 2</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell colSpan={2}>
        Some message
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Expected behavior

The table rendered with the columns spanned correctly.

Screenshots or Videos

Operating System Version

Linux & MacOS

Browser

Chrome

EDIT:

I believe this issue is related (and depends on) https://github.com/adobe/react-spectrum/issues/5334.

[awkward-minion]

wont the colSpan prop be present in TableColumn (in the header) ? idk, but im curious.

Edit: It seems to be a bug with @react-stately/table package, as it is not including the colSpan values in its validation

[IraiDev]

Still not working, any alternative solution?

[Armandotrsg]

I have found this workaround, hope it helps!

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

export default function App() {
  return (
    <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>
        <TableRow key="2">
          <TableCell aria-colspan={3} colSpan={3} className="bg-red-200">
            Zoey Lang
          </TableCell>
          <TableCell className="hidden"> </TableCell>
          <TableCell className="hidden"> </TableCell>
        </TableRow>
        <TableRow key="3">
          <TableCell>Jane Fisher</TableCell>
          <TableCell>Senior Developer</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

This is how it looks like:

[zshnrg]

I have a similar question but for table headers. Is there a workaround to create a table header like this in nextui?

I have found this workaround, hope it helps!

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

export default function App() {
  return (
    <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>
        <TableRow key="2">
          <TableCell aria-colspan={3} colSpan={3} className="bg-red-200">
            Zoey Lang
          </TableCell>
          <TableCell className="hidden"> </TableCell>
          <TableCell className="hidden"> </TableCell>
        </TableRow>
        <TableRow key="3">
          <TableCell>Jane Fisher</TableCell>
          <TableCell>Senior Developer</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

This is how it looks like:

The above solution may work well, but I have a similar question for table headers. Is there a workaround to create a table header like this in NextUI?