如何在react中更改料表的大小？

import React from 'react';
import './Table.css'; // 假设你有一个CSS文件来管理样式

const Table = ({ data }) => {
  return (
    <table style={{ width: '80%', height: '500px', overflow: 'auto' }}>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          {/* 更多的表头 */}
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            <td>{row.column1}</td>
            <td>{row.column2}</td>
            {/* 更多的列 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

/* Table.css */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

import React, { useState } from 'react';

const PaginatedTable = ({ data }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <>
      <table>
        {/* 表格结构 */}
      </table>
      <Pagination
        itemsPerPage={itemsPerPage}
        totalItems={data.length}
        paginate={paginate}
      />
    </>
  );
};

const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul>
        {pageNumbers.map(number => (
          <li key={number}>
            <button onClick={() => paginate(number)}>
              {number}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default PaginatedTable;

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const VirtualizedTable = ({ data }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      {/* 渲染表格行 */}
    </div>
  );

  return (
    <List
      height={500}
      itemCount={data.length}
      itemSize={50} // 假设每行高度为50px
      width="100%"
    >
      {Row}
    </List>
  );
};

export default VirtualizedTable;