React Material Table 如何调整选中复选框与分组展开箭头的列位置

当我们创建Material Table并在配置项options中将selection属性设置为true时，选择复选框默认会被放置在表格最左侧。但如果我们添加了分组/树形数据功能，分组展开箭头会被放在最左侧列，复选框会排在其右侧，效果如下图所示：

需求是将选择复选框放在最左侧第一列，即交换复选框与展开箭头的位置，该需求可通过以下方式实现。

原有参考代码 #

import React, { forwardRef, useEffect, useState } from 'react';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
import MaterialTable from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };
  

const TestMaterialTable = () => {

    let data = [{
        id: 1,
        name: 'a',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 63,
        sex: 'Male',
        type: 'adult'
      },
      {
        id: 2,
        name: 'b',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 34,
        sex: 'Female',
        type: 'adult',
        parentId: 1
      },
      {
        id: 3,
        name: 'c',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 34,
        sex: 'Female',
        type: 'child',
        parentId: 1
      },
      {
        id: 4,
        name: 'd',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 34,
        sex: 'Female',
        type: 'child',
        parentId: 3
      },
      {
        id: 5,
        name: 'e',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 34,
        sex: 'Female',
        type: 'child'
      },
      {
        id: 6,
        name: 'f',
        surname: 'Baran',
        birthYear: 1987,
        birthCity: 34,
        sex: 'Female',
        type: 'child',
        parentId: 5
      },
      ];


    return(
        <div className="custom-material-table">
            <MaterialTable
            icons={tableIcons}
            title="Basic Tree Data Preview"
            data={data}
            columns={[
            { title: '1', field: 'name' },
            { title: '2', field: 'surname' },
            { title: '3', field: 'sex' },
            { title: '4', field: 'type', removable: false },
            { title: '5', field: 'birthYear', type: 'numeric' },
            {
                title: '6',
                field: 'birthCity',
                lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            },
            ]}
            parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
            options={{
                selection: true
            }}
        />
      </div>
    );
}

export default TestMaterialTable;

实现方案 #

目前Material Table没有提供直接的配置项调整两列顺序，可通过CSS调整列的展示顺序，无需修改组件原有逻辑，对功能没有影响：
添加如下CSS样式即可完成两列位置交换：

/* 调整表头列顺序 */
.custom-material-table thead tr th:first-child {
  order: 2;
}
.custom-material-table thead tr th:nth-child(2) {
  order: 1;
}

/* 调整表格行内列顺序 */
.custom-material-table tbody tr td:first-child {
  order: 2;
  /* 同步适配树形层级缩进 */
  padding-left: calc((var(--tree-level, 0) * 16px) + 18px) !important;
}
.custom-material-table tbody tr td:nth-child(2) {
  order: 1;
  padding-left: 18px !important;
}

/* 适配全选复选框对齐 */
.custom-material-table thead tr th:nth-child(2) .MuiCheckbox-root {
  padding: 9px;
}

如果是复杂定制场景，也可以关闭内置的selection属性，在columns数组的第一个位置手动添加自定义选择列，自行渲染复选框配合组件的选择事件实现功能，适配性更强。

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