当前位置：首页 > React

react如何创建数据网格

2026-01-24 12:08:19React

创建数据网格的基本方法

在React中创建数据网格可以通过多种方式实现，常见的方法包括使用第三方库或手动构建表格组件。以下是几种常见方案：

使用第三方库（推荐）

React-Table
安装依赖：

react如何创建数据网格

npm install react-table

基本示例代码：

import { useTable } from 'react-table';

function DataGrid({ 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 DataGrid
适用于Material Design风格的网格：

react如何创建数据网格

npm install @mui/x-data-grid

示例代码：

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name' }
];

const rows = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

手动实现基础表格

如果需要轻量级解决方案，可以手动渲染表格：

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