[BUG] - Table prop <removewrapper> can't use along with <isvirtualized>

[gaozp]

HeroUI Version

2.7.4

Describe the bug

1000 item:

import { Button } from "@heroui/react";
import type { MetaFunction } from "@remix-run/node";

import {  Table,  TableHeader,  TableBody,  TableColumn,  TableRow,  TableCell} from "@heroui/table";

function generateRows(count : Number) {
  return Array.from({length: count}, (_, index) => ({
    key: index.toString(),
    name: `Item ${index + 1}`,
    value: `Value ${index + 1}`,
  }));
}

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  const rows = generateRows(1000);
  const columns = [
    {key: "name", label: "Name"},
    {key: "value", label: "Value"},
  ];

  return (
    <Table
      isVirtualized
      isHeaderSticky
      removeWrapper
      aria-label="Example of virtualized table with a large dataset"
      maxTableHeight={500}
      rowHeight={40}
    >
      <TableHeader columns={columns}>
        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
      </TableHeader>
      <TableBody items={rows}>
        {(item) => (
          <TableRow key={item.key}>
            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

import { Button } from "@heroui/react";
import type { MetaFunction } from "@remix-run/node";

import {  Table,  TableHeader,  TableBody,  TableColumn,  TableRow,  TableCell} from "@heroui/table";

function generateRows(count : Number) {
  return Array.from({length: count}, (_, index) => ({
    key: index.toString(),
    name: `Item ${index + 1}`,
    value: `Value ${index + 1}`,
  }));
}

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  const rows = generateRows(1000);
  const columns = [
    {key: "name", label: "Name"},
    {key: "value", label: "Value"},
  ];

  return (
    <Table
      isVirtualized
      isHeaderSticky
      removeWrapper
      aria-label="Example of virtualized table with a large dataset"
      maxTableHeight={500}
      rowHeight={40}
    >
      <TableHeader columns={columns}>
        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
      </TableHeader>
      <TableBody items={rows}>
        {(item) => (
          <TableRow key={item.key}>
            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

Expected behavior

Can use this two prop together.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-2246 [BUG] - Table prop <removewrapper> can't use along with <isvirtualized>

[shencangsheng]

I encounter the same predicament.