[英]Toggle columns on react-bootstrap-table2
Using this libraryhttps://react-bootstrap-table.github.io/react-bootstrap-table2/使用这个库https://react-bootstrap-table.github.io/react-bootstrap-table2/
And this to toggle columns: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Bootstrap%204&selectedStory=Column%20Toggle%20with%20bootstrap%204&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel这可以切换列: https : //react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind= Bootstrap%204 &selectedStory= Column%20Toggle%20with%20bootstrap%204 &full=0&addons= 1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
Docs on column toggle: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-column-toggle.html列切换文档: https : //react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-column-toggle.html
I need to know what columns have been hidden.我需要知道哪些列被隐藏了。
A callback is included for this:为此包括一个回调:
onColumnToggle: Call this method when user toggle a column.
Implemented:实施的:
<ToolkitProvider
keyField="globalId"
data={ this.props.data }
columns={ this.state.columns }
columnToggle
>
{
props => {
return (
<>
<ToggleList {...props.columnToggleProps} onColumnToggle={this.columnToggle} className="d-flex flex-wrap"/>
<hr/>
<BootstrapTable
striped
bootstrap4
keyfield="globalId"
{...props.baseProps}
/>
</>
)
}
}
</ToolkitProvider>
My function this.columnToggle
fires as expected.我的函数
this.columnToggle
按预期触发。 But the table itself is no longer hiding/showing columns.但表格本身不再隐藏/显示列。 If I remove my function, it works again.
如果我删除我的功能,它会再次工作。
Updated: The columnToggle function:更新: columnToggle 函数:
columnToggle = (column) => {
console.log(column); // outputs the toggled column
};
the ToggleList
uses the render props design pattern, so it sends the original onColumnToggle
with the props
you spread on the component ToggleList
, but also, you provided your own copy of the onColumnToggle
function, which will override the expected result. ToggleList
使用渲染道具设计模式,因此它将原始onColumnToggle
与您在组件ToggleList
上传播的props
一起发送,但您还提供了自己的onColumnToggle
函数副本,该副本将覆盖预期结果。
a simple solution so you could take advantage of the two functionalities (the actual onColumnToggle
of the Component, and your copy of it) by doing something like this:一个简单的解决方案,因此您可以通过执行以下操作来利用这两个功能(组件的实际
onColumnToggle
及其副本):
<ToggleList {...props.columnToggleProps} onColumnToggle={() => {this.columnToggle(); props.columnToggleProps.onColumnToggle(/* whatever params it needs */)}} className="d-flex flex-wrap"/>
this will let you do custom things when the column toggles, and you still have the original functionality of the ToggleList
API.这将允许您在列切换时执行自定义操作,并且您仍然拥有
ToggleList
API 的原始功能。
EDIT: The Problem with this solution, that the ToggleList
component seems to be Un-controlled.编辑:此解决方案的问题,即
ToggleList
组件似乎不受控制。 so I would suggest using this example from the official docs.所以我建议使用官方文档中的这个例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.