使用 React 在 Ag Grid 中以编程方式突出显示行

Question

我正在尝试将 AgGrid 与图表一起使用来显示一些数据。 AgGrid 将数据显示为 table，然后在它旁边我将数据绘制在图表上以进行可视化表示。

我想做的是在我将鼠标悬停在图表上时突出显示 table 中的行。使用像 useState 这样的东西真的很重，会导致完全重新渲染，这使得 table 非常紧张，所以我想使用像 Zustand with transient updates 这样的东西，然后订阅鼠标悬停状态.

我想不通的是，我如何才能使用 API 将 class 应用于网格。似乎有 several ways 可以应用样式，但是无论我怎么做，结果都不是应该突出显示的行的平滑突出显示。

有没有人试过做类似的事情？

Answer 1

在问这个问题时，我尝试创建一个工作示例来展示我到目前为止的一些内容，这样做实际上解决了这个问题。

沙盒是 here。

重要的部分是从 zustand 数据存储订阅状态变化。从这里我们可以调用一个函数，该函数使用 AgGrid API 将行状态设置为 'selected'，这将为我们突出显示它。

...
 const setRowHighlight = (e: any) => {
    if (gridRef && gridRef.current) {
      const rowNode: RowNode = gridRef.current.api.getRowNode(e);
      rowNode.setSelected(true);
    }
  };
  React.useEffect(
    () =>
      useZustandStore.subscribe(
        setRowHighlight,
        (state: any) => state.highlighted
      ),
    []
  );
...

我没有复制所有代码，因为代码太多了，但这应该突出显示正在发生的事情。

使用 React 在 Ag Grid 中以编程方式突出显示行

Highlight rows programatically in AgGrid with React

reactjs

ag-grid