如何在react-virtualized (CodeSandBox)中将水平滚动条添加到表格中

npm install react-virtualized

import { AutoSizer, Grid } from 'react-virtualized';
import 'react-virtualized/styles.css';

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  // ...
];

const columnCount = 3; // 列数
const rowCount = data.length; // 行数

const cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
  const item = data[rowIndex];
  const columnKey = Object.keys(item)[columnIndex];
  const cellData = item[columnKey];

  return (
    <div key={key} style={style}>
      {cellData}
    </div>
  );
};

const calculateTableWidth = () => {
  let width = 0;

  for (let i = 0; i < columnCount; i++) {
    width += 100; // 假设每列宽度为100px
  }

  return width;
};

const Table = () => {
  return (
    <AutoSizer disableHeight>
      {({ width }) => (
        <Grid
          width={width}
          height={300} // 表格高度
          columnWidth={100} // 列宽度
          rowHeight={30} // 行高度
          columnCount={columnCount}
          rowCount={rowCount}
          cellRenderer={cellRenderer}
          overscanColumnCount={10} // 预加载的列数
          overscanRowCount={10} // 预加载的行数
        />
      )}
    </AutoSizer>
  );
};

const App = () => {
  return (
    <div>
      <h1>表格示例</h1>
      <Table />
    </div>
  );
};