因此,在对React-Tabulator库(已过时)进行了大量的试验和错误之后,我决定使用如下所示的vanilla JS实现来实现Tabulator:https://tabulator.info/docs/5.4/frameworks#react
我已经将其转换为一个函数组件,它如预期的那样出现在屏幕上,但是我无法访问DOM节点以使用特定的函数,如selectRow、getData等。
我知道这与refs等有关,但我已经用尽了所有我能想到的途径来实现我的需要。理想情况下,我希望能够利用选择下拉菜单来选择一些东西,并根据我的选择,它将根据行ID选择一定数量的行。我知道如何让这个函数起作用,但为了这样做,我只需要帮助访问表的DOM节点,它目前只返回undefined或null。
下面是我构建的功能组件:'
import { TabulatorFull as Tabulator } from "tabulator-tables";
import { useEffect, useRef } from "react";
import "tabulator-tables/dist/css/tabulator.min.css";
import "tabulator-tables/dist/css/tabulator_semanticui.min.css";
const Table = ({ data, columns, options }) => {
const ref = useRef();
useEffect(() => {
new Tabulator(ref.current, {
data: data,
columns: columns,
...options,
});
}, [columns, data, options]);
return <div ref={ref} className="celled compact" />;
};
export default Table;
'
'
<Table data={sources.data.source_data} columns={sourceColumns} options={{layout: "fitColumns"}} />
'
1条答案
按热度按时间ovfsdjhp1#
我遇到了同样的问题与React制表(仍在寻找解决方案)。与香草JS,做乒乓球把戏:
https://codesandbox.io/s/holy-mountain-enliwk?file=/src/App.js
希望这能帮上忙。