react如何创建数据网格

创建数据网格的基本方法

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

使用第三方库（推荐）

1. React-Table
   安装依赖：

   

   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>
     );
   }

2. Material-UI DataGrid
   适用于Material Design风格的网格：

   

   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>
  );
}

功能扩展建议

• 分页：第三方库通常内置分页组件，手动实现需管理当前页状态
• 排序：通过列头点击事件更新排序状态
• 过滤：添加输入框监听变化并过滤数据源
• 虚拟滚动：大数据量时考虑使用react-window等库优化性能

选择方案时应考虑项目复杂度，简单需求可手动实现，复杂交互建议采用成熟库以节省开发时间。