深入理解与应用 React Table：实现排序、过滤和分页功能

React Table 是一个轻量级且功能强大的库，用于在 React 应用程序中构建和自定义表格。它提供了一种灵活且可扩展的方式来显示和操作表格数据，并支持排序、过滤、分页、行选择、单元格编辑等高级功能。本文将深入探讨 React Table 的核心概念和使用方法，重点讲解如何实现排序、过滤和分页功能，并通过丰富的示例代码演示其强大之处。

1. React Table 的优势

相比于传统的 HTML 表格或其他 React 表格库，React Table 具有以下显著优势：

Headless UI: React Table 专注于数据的处理和逻辑，不提供预定义的样式，给予开发者完全的控制权，可以根据项目需求自定义表格的外观和样式。
灵活性和可扩展性: React Table 提供了丰富的 API 和钩子函数，方便开发者根据具体需求定制表格的功能和行为。
性能优化: React Table 采用虚拟化技术，只渲染当前可见的行，从而提高了大数据集的渲染性能。
易于集成: React Table 可以轻松地与其他库和框架集成，例如 Material UI、Ant Design 等。

2. 安装和基本使用

首先，使用 npm 或 yarn 安装 React Table：

“`bash
npm install react-table

或

yarn add react-table
“`

然后，创建一个简单的表格：

“`jsx
import React from ‘react’;
import { useTable } from ‘react-table’;

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

return (

{headerGroups.map(headerGroup => (

{headerGroup.headers.map(column => (

))}

{rows.map((row, i) => {
prepareRow(row);
return (

{row.cells.map(cell => {
return

;
})}

);
})}

{column.render(‘Header’)}
{cell.render(‘Cell’)}

);
}

function App() {
const columns = React.useMemo(
() => [
{
Header: ‘Name’,
accessor: ‘name’,
},
{
Header: ‘Age’,
accessor: ‘age’,
},
],
[]
);

const data = React.useMemo(
() => [
{
name: ‘Alice’,
age: 30,
},
{
name: ‘Bob’,
age: 25,
},
],
[]
);

return ;
}

export default App;

“`

3. 实现排序功能

要实现排序功能，需要在 useTable 钩子中启用排序插件，并为列定义排序方法：

“`jsx
import { useTable, useSortBy } from ‘react-table’;

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

// … (其余代码与 BasicTable 相同)

// 在表头中添加排序指示器

{column.render(‘Header’)}
{column.isSorted ? (column.isSortedDesc ? ‘ 🔽’ : ‘ 🔼’) : ”}

}

// 在列定义中添加排序方法 (可选)
const columns = React.useMemo(
() => [
{
Header: ‘Name’,
accessor: ‘name’,
},
{
Header: ‘Age’,
accessor: ‘age’,
sortType: ‘basic’, // 使用内置的排序方法
},
],
[]
);
“`

4. 实现过滤功能

实现过滤功能需要使用 useFilters 插件，并提供过滤逻辑：

“`jsx
import { useTable, useFilters } from ‘react-table’;

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

// … (其余代码与 BasicTable 相同)

// 添加过滤输入框
{
setFilter(“name”, e.target.value || undefined) // 更新 name 列的过滤器
}}
placeholder={Search name...}
/>

}

// 定义全局过滤器 (可选)
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
}) {
const count = preGlobalFilteredRows.length

return (
  <span>
    Search:{' '}
    <input
      value={globalFilter || ''}
      onChange={e => {
        setGlobalFilter(String(e.target.value))
      }}
      placeholder={`${count} records...`}
      style={{
        fontSize: '1.1rem',
        border: '0',
      }}
    />
  </span>
)

}
“`

5. 实现分页功能

分页功能可以使用 usePagination 插件实现：

“`jsx
import { useTable, usePagination } from ‘react-table’;

function PaginatedTable({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page, // 当前页的数据
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 }, // 初始化页码为 0
},
usePagination
);

// ... (其余代码与 BasicTable 相同, 使用 page 代替 rows)


// 渲染分页控件
<div className="pagination">
  <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
    {'<<'}
  </button>{' '}
  <button onClick={() => previousPage()} disabled={!canPreviousPage}>
    {'<'}
  </button>{' '}
  <button onClick={() => nextPage()} disabled={!canNextPage}>
    {'>'}
  </button>{' '}
  <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
    {'>>'}
  </button>{' '}
  <span>
    Page{' '}
    <strong>
      {pageIndex + 1} of {pageOptions.length}
    </strong>{' '}
  </span>
  <span>
    | Go to page:{' '}
    <input
      type="number"
      defaultValue={pageIndex + 1}
      onChange={e => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0
        gotoPage(page)
      }}
      style={{ width: '100px' }}
    />
  </span>{' '}
  <select
    value={pageSize}
    onChange={e => {
      setPageSize(Number(e.target.value))
    }}
  >
    {[10, 20, 30, 40, 50].map(pageSize => (
      <option key={pageSize} value={pageSize}>
        Show {pageSize}
      </option>
    ))}
  </select>
</div>

}
“`

6. 结合使用排序、过滤和分页

可以将 useSortBy、useFilters 和 usePagination 等插件组合使用，实现更复杂的功能：

“`jsx
import { useTable, useSortBy, useFilters, usePagination } from ‘react-table’;

function AdvancedTable({ columns, data }) {
const {
// … (获取所有需要的属性)
} = useTable({ columns, data }, useFilters, useSortBy, usePagination);

// … (渲染表格和控件)
}
“`

7. 自定义样式

React Table 不提供默认样式，开发者可以根据项目需求自定义表格的样式。可以使用 CSS 或 styled-components 等库来实现。

8. 总结

React Table 是一个功能强大且灵活的 React 表格库，它提供了一种声明式的方式来构建和自定义表格。本文详细介绍了如何使用 React Table 实现排序、过滤和分页功能，并提供了丰富的示例代码。通过灵活运用 React Table 提供的 API 和插件，可以构建出满足各种需求的复杂表格。希望本文能帮助你更好地理解和应用 React Table，提升你的 React 开发效率。

9. 进一步学习

官方文档： https://react-table.tanstack.com/
示例代码：官方文档提供了丰富的示例代码，可以帮助你学习和理解 React Table 的各种功能。
社区论坛：可以在社区论坛中与其他开发者交流和学习。

希望这篇文章能帮助你深入了解和应用 React Table。记住，实践是最好的学习方式，尝试使用 React Table 构建一些实际的表格应用，你将更好地掌握它的使用方法和技巧。

React Table：实现排序、过滤和分页功能 – wiki基地

深入理解与应用 React Table：实现排序、过滤和分页功能

或

发表评论取消回复

深入理解与应用 React Table：实现排序、过滤和分页功能

或

发表评论 取消回复

发表评论取消回复