react table组件实现

实现React Table组件的方法

使用原生HTML表格

通过React组件封装原生HTML的<table>元素，结合状态管理实现动态渲染。适合简单表格需求，无需额外依赖。

function SimpleTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map((key) => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            {Object.values(row).map((value, i) => (
              <td key={i}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

使用react-table库

react-table是轻量级无UI的表格工具库，提供排序、分页、过滤等功能，需自行设计样式。

import { useTable } from 'react-table';

function ReactTable({ columns, data }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({ columns, data });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

集成Material-UI表格

Material-UI提供现成的样式化表格组件，适合需要快速实现Material Design风格的场景。

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';

function MuiTable({ data }) {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            {Object.keys(data[0]).map((key) => (
              <TableCell key={key}>{key}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, index) => (
            <TableRow key={index}>
              {Object.values(row).map((value, i) => (
                <TableCell key={i}>{value}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

实现可编辑表格

通过状态管理和事件处理实现单元格编辑功能，适用于需要用户交互的场景。

function EditableTable({ initialData }) {
  const [data, setData] = useState(initialData);

  const handleChange = (rowIndex, key, value) => {
    const newData = [...data];
    newData[rowIndex][key] = value;
    setData(newData);
  };

  return (
    <table>
      <thead>...</thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {Object.entries(row).map(([key, value], colIndex) => (
              <td key={colIndex}>
                <input
                  value={value}
                  onChange={(e) => handleChange(rowIndex, key, e.target.value)}
                />
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

虚拟滚动优化

使用react-window等库实现虚拟滚动，解决大数据量渲染性能问题。

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

function VirtualizedTable({ columns, data }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {columns.map(column => (
        <span key={column.key}>{data[index][column.key]}</span>
      ))}
    </div>
  );

  return (
    <List
      height={500}
      itemCount={data.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </List>
  );
}