添加/更新行后，制表器不会重新排序数据

如何解决添加/更新行后，制表器不会重新排序数据

我目前正在将“tabulator-tables”版本 4.9.3 用于 React 应用程序。

这个项目的一个要求是从 websocket 接收实时流数据，其中包含要更新的现有行和要添加的新行。

为了实现这一点，每当我从 websocket 接收到一条新数据时，我都会在 componentDidUpdate() 中检查 this.props.data 是否发生了变化，然后使用 tabulator 提供的 updateOrAddData() 函数进行更新相应的表格。

componentDidUpdate(prevProps) {
    const { data } = this.props;

    if (data !== prevProps.data) {
        this.table.updateOrAddData([data]);
    }
}

由于表格中填充了来自 websocket 的数据，我注意到没有调用 Tabulator 的嵌入式排序算法来确定通过 updateOrAddData() 添加到表格中的新数据的正确排序位置。如果用户没有明确点击列标题对这些数据进行重新排序，数据将根据用户提供的条件进行乱序排列。

我尝试过的：

我尝试过的一种可能的解决方案是利用从 updateOrAddData() 返回的承诺并手动调用 setSort()。

const { data } = this.props;

this.table.updateOrAddData(data).then(() => {
    const sorters = this.table.getSorters();
    this.table.setSort(sorters);
});

不幸的是，每当调用 setSort() 时，滚动条都会返回到表格的顶部，因此很难在整个表格中滚动，因为大约每秒都会收到新数据。

为了演示这个问题，我用 setInterval() 函数替换了 websocket 连接，该函数每秒随机生成数据。

我目前使用的代码可以在 https://codesandbox.io/s/currying-brook-ck8r3 或以下访问。

代码：

import React,{ Component,createRef,useEffect,useState } from "react";
import Tabulator from "tabulator-tables";

import "../node_modules/tabulator-tables/dist/css/tabulator.min.css";

class TabulatorTable extends Component {
  constructor(props) {
    super(props);

    this.el = createRef();
    this.table = null;
  }

  componentDidMount() {
    const { columns,options } = this.props;

    this.table = new Tabulator(this.el,{
      columns,data: [],...options
    });
  }

  componentDidUpdate(prevProps) {
    const { data } = this.props;

    if (data !== prevProps.data) {
      this.table.updateOrAddData([data]);
    }
  }

  render() {
    return <div ref={(el) => (this.el = el)} />;
  }
}

const App = () => {
  const [mockWsData,setMockWsData] = useState({});

  const columns = [
    {
      field: "id",title: "ID",sorter: "number"
    },{
      field: "letters",title: "Random letters",sorter: "string"
    }
  ];

  const options = {
    height: "500px",index: "id",layout: "fitColumns",reactiveData: true
  };

  useEffect(() => {
    const generateFakeData = setInterval(() => {
      setMockWsData({
        id: Math.floor(Math.random() * Math.floor(15)),letters: Math.random().toString(36).substring(2,7)
      });
    },500);

    return () => clearInterval(generateFakeData);
  },[setMockWsData]);

  return (
    <TabulatorTable columns={columns} data={mockWsData} options={options} />
  );
};

export default App;

解决方法

我决定扩展利用 updateOrAddData() 返回的 promise 并手动设置 scrollTop 的方法。

currentTopRow() {
    const { rowManager } = this.table;
    const { scrollTop } = rowManager.element;
    
    let topRow = false;
    let topOffset = false;
    const rows = rowManager.getDisplayRows();

    for (let i = rowManager.vDomTop; i <= rowManager.vDomBottom; i += 1) {
        const row = rows[i];

        if (row) {
            const diff = scrollTop - row.getElement().offsetTop;

            if (topOffset === false || Math.abs(diff) < topOffset) {
                topOffset = diff;
                topRow = row.getComponent().getIndex();
            } else break;
        }
    }
    return topRow;
}

componentDidUpdate(prevProps) {
    const { data } = this.props;

    if (data !== prevProps.data) {
        const topRow = this.currentTopRow();

        this.table.updateOrAddData([data]).then(() => {
            this.table.setSort(this.table.getSorters());
            if (topRow) {
                this.table.scrollToRow(topRow,'top',true);
            }
        });
    }
}