Material Table能否将行选中文本从工具栏移至页面底部

完全可以实现该需求，核心思路是自行托管表格的选中行状态，脱离默认工具栏的选中展示逻辑，具体实现步骤如下：

实现步骤 #

1. 声明状态变量托管选中的行数据，通过onSelectionChange回调同步表格选中状态
2. 在你需要展示选中文本的任意位置，直接使用托管的选中行状态自定义渲染内容
3. 可选配置：隐藏默认工具栏的选中文本，或者直接关闭整个默认工具栏

示例代码 #

import { useState } from 'react';
import MaterialTable from 'material-table';

function CustomSelectionTable() {
  // 自行托管选中的行数据
  const [selectedRows, setSelectedRows] = useState([]);

  // 自定义批量操作方法示例
  const handleBatchOperate = () => {
    console.log('选中的行数据：', selectedRows);
  };

  return (
    <div>
      {/* 自定义选中文本展示位置：可放在页面任意区域 */}
      <div style={{ padding: '12px 0', fontSize: '14px' }}>
        {selectedRows.length > 0 ? (
          <span>已选中 {selectedRows.length} 项 <button onClick={handleBatchOperate}>批量操作</button></span>
        ) : null}
      </div>

      <MaterialTable
        title="数据表格"
        columns={[
          { title: '名称', field: 'name' },
          { title: '数值', field: 'value' }
        ]}
        data={[
          { name: '示例1', value: 10 },
          { name: '示例2', value: 20 }
        ]}
        options={{
          // 开启多选功能
          selection: true,
          // 不需要默认工具栏可直接关闭，若要保留搜索、导出等功能可去掉该配置，单独重写工具栏移除默认选中文本
          toolbar: false
        }}
        // 同步选中状态到本地变量
        onSelectionChange={(rows) => setSelectedRows(rows)}
      />
    </div>
  )
}

补充说明 #

如果需要保留默认工具栏的搜索、导出等功能，不需要完全关闭工具栏，只需通过components配置重写Toolbar组件，移除默认的选中计数模块即可，外部的自定义选中文本渲染逻辑不受影响。

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