react-tabulator列无法拖拽调整大小问题求助

在使用react-tabulator时，无论给列属性设置resizable: true，还是给表格选项设置resizableColumns: true，都无法实现用户拖拽调整列宽的功能。以下是问题复现的代码：

import React from "react";
import "./styles.css";

import "react-tabulator/lib/styles.css"; // 默认主题
import "react-tabulator/css/bootstrap/tabulator_bootstrap.min.css"; // 使用Bootstrap主题

import { ReactTabulator } from "react-tabulator";

function SimpleButton(props) {
  const rowData = props.cell._cell.row.data;
  const cellValue = props.cell._cell.value || "Edit | Show";
  return <button onClick={() => alert(rowData.name)}>{cellValue}</button>;
}

const data = [
  {
    id: 1,
    name: "Oli Bob",
    age: "12",
    color: "red",
    dob: "01/01/1980",
    rating: 5,
    passed: true,
    pets: ["cat", "dog"],
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    color: "green",
    dob: "12/05/1989",
    rating: 4,
    passed: true,
    pets: ["cat"],
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    age: "16",
    color: "yellow",
    dob: "07/01/1999",
    rating: 4,
    passed: false,
  },
  {
    id: 6,
    name: "Van Ng",
    age: "37",
    color: "green",
    dob: "06/10/1982",
    rating: 4,
    passed: true,
    pets: ["dog", "fish"],
  },
  {
    id: 7,
    name: "Duc Ng",
    age: "37",
    color: "yellow",
    dob: "10/10/1982",
    rating: 4,
    passed: true,
    pets: ["dog"],
  },
];

class Home extends React.Component {
  state = {
    data: [],
    selectedName: "",
  };
  ref = null;

  columns = [
    { title: "Namez", field: "name", width: 150, resizable: true },
    {
      title: "Agez",
      field: "age",
      hozAlign: "left",
      formatter: "progress",
      resizable: true,
    },
    { title: "Favourite Color", field: "color", resizable: true },
    { title: "Date Of Birth", field: "dob", resizable: true },
    { title: "Rating", field: "rating", hozAlign: "center", formatter: "star", resizable: true },
    {
      title: "Passed?",
      field: "passed",
      hozAlign: "center",
      formatter: "tickCross",
      resizable: true
    },
  ];

  rowClick = (e, row) => {
    this.setState({ selectedName: row.getData().name });
  };

  setData = () => {
    this.setState({ data });
  };

  clearData = () => {
    this.setState({ data: [] });
  };

  render() {
    const options = {
      height: 150,
      movableRows: true,
      movableColumns: true,
      resizableColumns: true,
      resizableRows: true
    };
    return (
      <div>
        <ReactTabulator
          onRef={(ref) => (this.ref = ref)}
          columns={this.columns}
          data={data}
          events={{
            rowClick: this.rowClick,
          }}
          options={options}
          data-custom-attr="test-custom-attribute"
          className="custom-css-class"
        />
      </div>
    );
  }
}

export default Home;

解决方法 #

1. 修复主题样式冲突

你同时引入了默认主题和Bootstrap主题，导致列宽调整的拖拽手柄被样式覆盖，无法触发拖拽操作。可以二选一：

• 移除其中一个主题的引入，比如删除Bootstrap主题的导入语句；
• 添加自定义CSS，恢复拖拽手柄的可交互区域：

.tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle {
  right: 0;
  width: 6px;
  background-color: rgba(0,0,0,0.1);
  cursor: ew-resize;
  opacity: 1 !important;
}

2. 确认配置有效性

表格选项中的resizableColumns: true已经足够启用全局列宽调整，无需在每个列上重复设置resizable: true（重复设置不影响功能）。同时建议升级react-tabulator到最新版本，避免旧版本的兼容问题。

3. 验证功能

添加上述CSS或调整主题后，列头右侧会出现可拖拽区域，鼠标悬停时会显示左右箭头光标，此时即可正常拖拽调整列宽。

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