react-table.js.org的可折叠HOC

感谢Tanner Linsley开发了一个很棒的开源数据网格,用于ReacJ,特别是react-table组件,名为react-table 。 在为我的公司进行大型项目时,需要添加一个功能表以允许折叠列。

因此,我已经为该功能的反应表开发了一个HOC,今天,通过写这篇文章,我想与所有ReacJs开发人员分享它。

可折叠桌

FoldableTable是使列可折叠的HOC。 我之所以开发此HOC,是因为在从事与财务相关的实际项目时,该项目会显示许多列供确认和比较。

因此,可折叠列允许用户将不需要的内容临时隐藏到列中,以便他们可以专注于想要查看的数据。

怎么运行的

 从'react-table'导入ReactTable 
从'react-table / lib / hoc / foldableTable'导入FoldableTableHOC

const FoldableTable = FoldableTableHOC(ReactTable);

App类扩展了组件{
render(){
返回<FoldableTable
数据= {/ *您的数据* /}
列= {[/ *您的列队定义* /]} />
}
}

导出默认应用程序;

它将扫描所有可折叠真的列并应用可折叠列功能。 此功能适用于普通列和标题列,如下所示。

  • 带标题栏
  render(){ 
返回<FoldableTable
列= {[{
标题:“名称”,
可折叠:正确,
列: [{
标题:“名字”,
访问者:“ first_name”
},{
标头:“姓氏”,
访问者:“ last_name”
}]
},{
标题:“信息”,
可折叠:正确,
列: [{
标头:“电子邮件”,
访问者:“电子邮件”
},{
标头:“性别”,
访问者:“性别”
}]
}]
} />
}
  • 带普通列
  render(){ 
返回<FoldableTable
列= {[{
标题:“名字”,
访问者:“ first_name”
},
{
标头:“姓氏”,
访问者:“ last_name”,
可折叠:正确,
},
{
标头:“电子邮件”,
访问者:“电子邮件”,
可折叠:正确,
},{
标头:“性别”,
访问者:“性别”,
可折叠:正确,
}]}>
}
  • FoldableTable还与现有的HOC完全兼容,以下与selectTableHOC兼容。

国家管理

如果要管理FoldableTable的状态,请添加以下代码。

  render(){ 
返回<FoldableTable
onFoldChange = {newFolded => this.setState(p => {return {folded:newFolded}})}
折叠= {this.state.folded}
/>
}

定制组件

有两个组件应进行定制。

  • FoldIconComponent :呈现按钮的图标。
  • FoldButtonComponent :呈现每个Column的折叠按钮。 默认渲染如下。
  const yourFoldIconComponent =({收起})=> { 
//在此处渲染图标
}

const yourFoldButtonComponent =({标头,折叠,图标,onClick})=> {
//在此处渲染您的按钮。
}

render(){
返回<FoldableTable
FoldIconComponent = {this.yourFoldIconComponent}
FoldButtonComponent = {this.yourFoldButtonComponent} />
}

源代码

您可以在此处下载FoldableTable源代码和示例。

foldableTable HOC已提交并与react-table.org合并。 希望它将很快可用。

希望该库对您有用。