如何解决如何使用react-table 7最初自动扩展所有行?
我正在寻找一种简单而干净的方法来使所有行在使用 react-table v7 时自动展开。
当我将所有数据映射到 true
并将其设置为初始状态时,它不会扩展我的行。
const expanded = {
1: true,2: true,...
};
...
useTable(
{
...
initialState: {
expanded
}
}
);
通过转储表状态 expanded
属性,我发现生成了非数字键,如 {Col1:somevalue2: true}
(分组列)。在创建表实例之前,我无权访问这些键,因此我也无权访问行 ID 以生成初始状态。
我发现的唯一方法是波纹管,但我更喜欢最初扩展 tableInstance(作为 useTable()
钩子的结果)。
React.useEffect(() => tableInstance.toggleAllRowsExpanded(true),[]);
相关 Github FR 讨论:https://github.com/tannerlinsley/react-table/discussions/3317
解决方法
根据文档的内容,您所写的内容具有直观意义,但缺少一个关键元素。您必须告诉 initialState 您的“扩展”对象与“扩展”属性相关联,如下所示:
const initialExpanded = React.useMemo(() => {
return {
"expanded": {
"0": true,"4": true
}
}},[])
const { /* ... */ } = useTable({
initialState: { initialExpanded },/* etc */
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。