如何在 ReactJS 中使用表格组件？

在 ReactJS 中，我们可以使用一些优秀的第三方组件库来帮助我们实现表格功能，比如 react-table 和 ag-grid 等。

react-table

react-table 是一个轻量级，无需任何依赖项的表格组件库，提供了丰富的功能和灵活的配置选项，以满足不同用户的需求。

安装

使用 npm 进行安装：

npm install react-table

基本用法

首先，我们需要导入 react-table 组件和相关样式：

import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import 'react-table/react-table.css'

然后，我们需要定义表格的列和数据，这里我们使用一个示例数据：

const columns = [
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Age',
    accessor: 'age'
  },
  {
    Header: 'Gender',
    accessor: 'gender'
  }
]

const data = [
  {
    name: 'Alice',
    age: 20,
    gender: 'Female'
  },
  {
    name: 'Bob',
    age: 21,
    gender: 'Male'
  },
  {
    name: 'Charlie',
    age: 22,
    gender: 'Male'
  }
]

接下来，我们利用 useTable 钩子函数来创建表格：

function App() {
  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>
  )
}

最后，我们需要在 DOM 中渲染这个组件：

ReactDOM.render(<App />, document.getElementById('root'))

我们可以看到，这会呈现出一个简单的表格，行和列取决于上面定义的数据：

| Name | Age | Gender | | ------- | --- | ------ | | Alice | 20 | Female | | Bob | 21 | Male | | Charlie | 22 | Male |

更多用法

react-table 还提供了大量的 API 和配置选项，可用于设置表格样式、筛选和排序功能、分页等等，如有需要可以查看其官方文档。

ag-grid

ag-grid 是一个功能强大的表格组件库，提供了丰富的功能和灵活的配置选项，可以处理大量数据和高级功能。

安装

使用 npm 进行安装：

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

基本用法

首先，我们需要导入 ag-grid-react 和样式：

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

然后，我们需要定义表格的列和数据，和上面相同，这里我们还需要一个 gridOptions 对象来配置表格属性：

const columns = [
  {
    headerName: 'Name',
    field: 'name'
  },
  {
    headerName: 'Age',
    field: 'age'
  },
  {
    headerName: 'Gender',
    field: 'gender'
  }
]

const data = [
  {
    name: 'Alice',
    age: 20,
    gender: 'Female'
  },
  {
    name: 'Bob',
    age: 21,
    gender: 'Male'
  },
  {
    name: 'Charlie',
    age: 22,
    gender: 'Male'
  }
]

const gridOptions = {
  columnDefs: columns,
  rowData: data
}

接下来，我们创建表格组件：

function App() {
  return (
    <div className="ag-theme-alpine" style={{ height: '200px', width: '600px' }}>
      <AgGridReact gridOptions={gridOptions} />
    </div>
  )
}

最后，我们需要在 DOM 中渲染这个组件：

ReactDOM.render(<App />, document.getElementById('root'))

同样，这会呈现出一个简单的表格，行和列取决于上面定义的数据：

| Name | Age | Gender | | ------- | --- | ------ | | Alice | 20 | Female | | Bob | 21 | Male | | Charlie | 22 | Male |

更多用法

ag-grid 还提供了大量的 API 和配置选项，可以用于设置表格样式、筛选和排序功能、分组和聚合功能、树形结构、行编辑等等，如有需要可以查看其官方文档。