rsuite-table issue

rsuite.js

import React, { useState } from "react";
import {
  Box,
  Text,
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Heading,
  Link,
} from "@chakra-ui/react";

// import {
//   Table,
//   TableHead,
//   TableHeaderCell,
//   TableBody,
//   TableRow,
//   TableCell,
//   TableFoot,
//   TablerFooterCell,
// } from "@tremor/react";

/*others*/
import { Table, Column, HeaderCell, Cell } from "rsuite-table";

/*local*/

const Rsuite = () => {
  /*ui:hooks:styles*/
  const { isOpen, onOpen, onClose } = useDisclosure();

  /*states*/
  let data = [];

  for (let i = 0; i < 25; i++) {
    data.push({
      id: i,
      name: "name" + i,
      role: "role" + i,
      dept: "dept" + i,
      status: "status" + i,
      resource: "resource" + i,
      flag: "flag" + i,
    });
  }

  /*handlers*/

  return (
    <Box>
      <Heading size={"lg"} mb={2}>
        {"TEST"}
      </Heading>

      <Button colorScheme="blue" onClick={onOpen}>
        Open Modal
      </Button>

      {/* problematic: rsuite-table */}
      <Box mx={5}>
        <Table
          data={data}
          height={1200}
          // suppressContentEditableWarning={true}
          // suppressHydrationWarning={true}
          // disabledScroll={true}
          // rowHeight={60}
          // height={data?.length * 61}
          // shouldUpdateScroll={false}
          // affixHeader={true}
          // onRowClick={(e) => {
          //   console.log("🔥[Rsuite][onRowClick]->e", e);
          // }}
          // sortColumn={sortColumn}
          // sortType={sortType}
          // onSortColumn={handleSortColumn}
          // loading={loading}
          // autoHeight={true}
          // style={rsuiteStyle}
          // id="table"
        >
          <Column width={200} sortable fixed>
            <HeaderCell>NAME</HeaderCell>
            <Cell>
              {(rowData) => {
                return (
                  <Heading size="xs">
                    <Link onClick={() => onOpen()}>{rowData.name}</Link>
                  </Heading>
                );
              }}
            </Cell>
          </Column>

          <Column width={200} sortable fullText>
            <HeaderCell>ROLE</HeaderCell>
            <Cell dataKey="role" />
          </Column>

          <Column width={200} sortable fullText>
            <HeaderCell>DEPT</HeaderCell>
            <Cell dataKey="dept" />
          </Column>

          <Column width={200} sortable fullText>
            <HeaderCell>STATUS</HeaderCell>
            <Cell dataKey="status" />
          </Column>
          <Column width={200} sortable fullText>
            <HeaderCell>RESOURCE</HeaderCell>
            <Cell dataKey="resource" />
          </Column>
          <Column width={200} sortable fixed="right">
            <HeaderCell>FLAG</HeaderCell>
            <Cell dataKey="flag" />
          </Column>
        </Table>

        <Text my={5}>{`~~~~~~~~~~~~~~~~EndOfTable~~~~~~~~~~~~~~~~~~~~~`}</Text>
      </Box>

      {/* tremor table: no issue */}
      {/* <Table className="mt-5">
        <TableHead>
          <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Role</TableHeaderCell>
            <TableHeaderCell>Dept</TableHeaderCell>
            <TableHeaderCell>Status</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((item) => (
            <TableRow key={item.name}>
              <TableCell>
                <Box ml={2}>
                  <Heading size="xs">
                    <Link onClick={() => onOpen()}>{item.name}</Link>
                  </Heading>
                </Box>
              </TableCell>

              <TableCell>{item.role}</TableCell>
              <TableCell>{item.dept}</TableCell>
              <TableCell>
                <Text>{item.status}</Text>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table> */}

      {/* Modal */}
      <Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Text>{"one"}</Text>
            <Text>{"two"}</Text>
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default Rsuite;