如何在react-bootstrap-table-next中实现带链接列的排序与分页

要在react-bootstrap-table-next的表格列中生成React Router的Link组件，核心是使用列配置的**formatter属性**，它允许你自定义单元格的渲染内容。以下是完整的实现方案：

1. 确保导入所需组件 #

首先确认已导入react-router-dom的Link：

import { Link } from 'react-router-dom';

2. 完整的columns配置（包含所有自定义渲染） #

修改你的columns数组，为需要自定义的列添加formatter函数，包括最后一列的订单详情链接：

const columns = [ 
  {   
    dataField: 'user',
    text: 'Name',
    headerAlign: 'center',
    // 处理user为空的情况，拼接姓名
    formatter: (cell) => cell ? `${cell.name} ${cell.lastName}` : null
  },
  {
    dataField: 'createdAt',
    text: 'Date',
    headerAlign: 'center',
    sort: true,
    // 截取日期的前10位
    formatter: (cell) => cell.substring(0, 10)
  },
  {
    dataField: 'isDelivered',
    text: 'Delivered',
    headerAlign: 'center',
    sort: true,
    // 根据配送状态渲染图标
    formatter: (cell) => {
      return cell ? <i className="bi bi-check-lg text-success"></i> : <i className="bi bi-x-lg text-danger"></i>;
    }
  },
  {
    dataField: 'paymentMethod',
    text: 'Payment Method',
    headerAlign: 'center',
    sort: true,
  },
  {
    dataField: 'orderTotal.cartSubtotal',
    text: 'Total',
    headerAlign: 'right',
    align: 'right',
    sort: true,
    // 格式化金额为两位小数
    formatter: (cell) => parseFloat(cell).toFixed(2)
  },
  {
    text: 'Service Order',
    headerAlign: 'center',
    // 生成订单详情Link
    formatter: (cell, row) => {
      return <Link to={`/admin/order-details/${row._id}`}>Service Order</Link>;
    }
  },
];

3. 修正表格的keyField #

注意你的BootstrapTable组件中keyField需要匹配订单对象的唯一标识，原代码写的是id，但订单数据里是_id，所以要修改：

<BootstrapTable
  bootstrap4
  keyField="_id" // 改为订单的唯一字段_id
  data={orders} 
  columns={columns} 
  striped 
  bordered 
  hover 
  responsive
  pagination={pagination}
/>

关键说明 #

• formatter函数接收三个参数：cell（当前字段的值）、row（当前行的完整数据对象）、rowIndex（行索引）
• 最后一列通过row._id获取当前订单的ID，动态生成Link的跳转路径
• 其他列的formatter也同步实现了原HTML表格中的逻辑，比如日期截取、金额格式化、状态图标

内容的提问来源于stack exchange，提问作者Oregano