制表符在 adding/updating 行之后没有 re-sort 数据

Question

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

此项目的要求之一是从 websocket 接收 live-stream 数据，其中包含要更新的现有行和要添加的新行的混合。

为了实现这一点，每当我从 websocket 收到一条新数据时，我都会检查 componentDidUpdate() 以查看 this.props.data 是否已更改，然后使用 tabulator 提供的 updateOrAddData() 函数相应地更新 table。

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

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

由于 table 填充了来自 websocket 的数据，我注意到没有调用 Tabulator 的嵌入式排序算法来确定添加到 [=46= 的新数据的正确排序位置] 通过 updateOrAddData()。如果用户没有明确点击某列header到re-sort这个数据，数据会根据用户提供的条件乱序

我试过的：

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

const { data } = this.props;

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

不幸的是，每当调用 setSort() 时，滚动条 returns 到 table 的顶部，因此由于接收到新数据而难以滚动整个 table大约每秒。

为了演示这个问题，我用每秒随机生成数据的 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;

Answer 1

我决定扩展利用 updateOrAddData() 返回的承诺并手动设置 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);
            }
        });
    }
}

制表符在 adding/updating 行之后没有 re-sort 数据

Tabulator does not re-sort data after adding/updating row

javascript

reactjs

tabulator