如何获知Material-React-Table（TanStack Table）中已取消固定的列？

我之前也碰到过一模一样的情况，核心问题就是onColumnPinningChange只返回最终的固定状态，不会明确告诉你哪一列发生了变更。要解决这个问题，关键是保存上一次的固定状态，通过对比新旧状态找出被取消固定的列，具体可以这么做：

步骤1：保存历史固定状态 #

用状态变量存储上一次的列固定配置，初始化时从localStorage读取之前保存的用户偏好：

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

const YourTable = () => {
  // 从本地存储读取初始固定状态
  const initialPinnedState = JSON.parse(localStorage.getItem('tablePinnedColumns')) || { left: [], right: [] };
  // 保存当前固定状态
  const [columnPinning, setColumnPinning] = useState(initialPinnedState);
  // 保存上一次的固定状态，用于后续对比
  const [prevPinnedState, setPrevPinnedState] = useState(initialPinnedState);

步骤2：在回调中对比新旧状态 #

在onColumnPinningChange回调里，对比当前新状态和上一次的状态，精准定位被取消固定的列：

const handlePinningChange = (newPinningState) => {
    const unpinnedColumns = [];

    // 检查左侧固定列的变化
    prevPinnedState.left.forEach(colId => {
      if (!newPinningState.left.includes(colId)) {
        unpinnedColumns.push(colId);
      }
    });
    // 检查右侧固定列的变化
    prevPinnedState.right.forEach(colId => {
      if (!newPinningState.right.includes(colId)) {
        unpinnedColumns.push(colId);
      }
    });

    // 这里可以处理取消固定的列，比如做业务逻辑或日志记录
    if (unpinnedColumns.length) {
      console.log('被取消固定的列ID：', unpinnedColumns);
    }

    // 更新状态并持久化到本地存储
    setPrevPinnedState(columnPinning);
    setColumnPinning(newPinningState);
    localStorage.setItem('tablePinnedColumns', JSON.stringify(newPinningState));
  };

步骤3：同步状态到表格组件 #

把columnPinning状态传入表格，完成状态绑定：

return (
    <MaterialReactTable
      columns={yourColumnConfig}
      data={yourTableData}
      state={{ columnPinning }}
      onColumnPinningChange={handlePinningChange}
      // 其他表格配置...
    />
  );
};

export default YourTable;

额外说明 #

目前Material-React-Table的onColumnPinningChange确实没有内置变更列的追踪功能，官方提供的API也只能获取当前固定状态，所以对比历史状态是最直接的解决方案，完全不需要限制用户只能固定一列。

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