当前位置：首页 > React

react多维表格实现

2026-01-27 04:20:43React

React 多维表格实现方法

多维表格通常指具有复杂层级结构或动态行列的数据展示。以下是几种常见的实现方式：

使用第三方库（如 ag-Grid）

安装 ag-Grid 社区版：

npm install ag-grid-react ag-grid-community

基础实现代码：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function MultiDimensionalTable() {
  const rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 }
  ];

  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
      />
    </div>
  );
}

自定义递归组件实现

适用于树形结构数据：

function TreeNode({ node }) {
  return (
    <div style={{ marginLeft: '20px' }}>
      <div>{node.name}</div>
      {node.children?.map(child => (
        <TreeNode key={child.id} node={child} />
      ))}
    </div>
  );
}

function TreeTable() {
  const data = {
    id: 1,
    name: "Root",
    children: [
      { id: 2, name: "Child 1" },
      { 
        id: 3, 
        name: "Child 2",
        children: [
          { id: 4, name: "Grandchild" }
        ]
      }
    ]
  };

  return <TreeNode node={data} />;
}

动态行列实现

使用状态管理动态行列：

import { useState } from 'react';

function DynamicTable() {
  const [rows, setRows] = useState(3);
  const [cols, setCols] = useState(4);

  const renderTable = () => {
    const table = [];
    for (let i = 0; i < rows; i++) {
      const row = [];
      for (let j = 0; j < cols; j++) {
        row.push(<td key={`${i}-${j}`}>Cell {i},{j}</td>);
      }
      table.push(<tr key={i}>{row}</tr>);
    }
    return table;
  };

  return (
    <div>
      <div>
        <button onClick={() => setRows(r => r + 1)}>Add Row</button>
        <button onClick={() => setCols(c => c + 1)}>Add Column</button>
      </div>
      <table border="1">
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  );
}