使用React Table获取页码

React Table是一个用于构建灵活且可定制的数据表格的React组件库。它提供了丰富的功能和选项，使开发人员可以轻松地处理数据表格的展示、排序、筛选、分页等操作。

使用React Table获取页码可以通过以下步骤实现：

首先，安装React Table库。可以使用npm或yarn命令来安装：

npm install react-table

或

yarn add react-table

在需要使用React Table的组件中，引入所需的依赖：

import React from 'react';
import { useTable, usePagination } from 'react-table';

创建表格数据源。可以使用一个数组来表示表格的行数据，每个元素都是一个对象，包含表格每一列的数据：

const data = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  // ...
];

定义表格的列配置。每个列对象包含列的标题、数据字段和其他可选属性：

const columns = [
  { Header: 'ID', accessor: 'id' },
  { Header: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
  // ...
];

创建表格实例并应用分页功能：

const MyTable = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 }, // 初始页码为0
    },
    usePagination
  );

  return (
    <div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map(row => {
            // 渲染表格行数据
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div>
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          Previous
        </button>
        <span>
          Page{' '}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>
        </span>
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          Next
        </button>
      </div>
    </div>
  );
};

在上述代码中，我们使用useTable和usePagination钩子函数创建了一个表格实例，并通过page、nextPage、previousPage等属性和方法来实现分页功能。同时，我们还在页面底部添加了上一页和下一页的按钮，并显示当前页码和总页数。

使用React Table获取页码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐