ReactTable的说明

Posted 2023-05-08

参考技术A table的某些列是需要自定义样式，有些时候还需要自定义事件。demo如下

对于tableTitle属性中，有render函数可以自定义这一列的样式以及相关样式。

如何重置 React Table 中的过滤器字段？

【中文标题】如何重置 React Table 中的过滤器字段？

【英文标题】：How to reset filter fields in React Table?

【发布时间】：2018-05-19 08:11:45

【问题描述】：

是否有在某个时刻重置过滤器字段的说明？过滤任何列都可以很好地调用onFetchData Ajax 调用来过滤数据。但是在过滤信息后我需要一些操作，重新渲染表格。在我班级的另一个函数中，我执行：

this.setState(
   filter: []
);

但表格更新后要过滤的信息仍在字段中。

<ReactTable
    data=this.state.data
    loading=this.state.loading
    pages=this.state.pages
    filterable
    columns=[
        
            Header: "First Name",
            id: "firstName",
            accessor: d => d.firstName,
            Filter: ( filter, onChange ) => (
                <input className="form-control input-sm"  onChange=event => onChange(event.target.value) value=filter ? filter.value : '' />
            )
        ,
        
            Header: "Last Name",
            accessor: "lastName",
            Filter: ( filter, onChange ) => (
                <input className="form-control input-sm"  onChange=event => onChange(event.target.value) value=filter ? filter.value : '' />
            )
        
    ]
    onFilteredChange=(column, value) => 
        //Code
    
    onFetchData=(state, instance) => 
        //Ajax call
    
    defaultPageSize=10
    className="-striped -highlight"
    manual
/>

【参考方案1】：

检查一下：

1) 当你启动你的父组件时，让它有状态，并给它一个带有空数组的“过滤”属性，像这样：

constructor() 
    super();
    this.state = 
        filtered: []
    ;

2) 设置 React Table 组件时，将其“过滤”属性连接到状态，如下所示：

filtered=this.state.filtered

3) 将过滤连接到状态，如下所示：

onFilteredChange=filtered => this.setState( filtered );

4) 使用这样的 onClick 方法连接一个按钮或任何你想重置过滤器的东西：

onClick=()=>this.setState( filtered: [] )>

简单，还是什么？

【讨论】：

我正在使用 redux 和 onFilterChange 执行此操作，表格重新呈现失去对过滤器输入的关注。知道为什么吗？

你好，我也对 React-Table 的 redux 实现感到困惑。我已经成功完成了，你能分享一下代码sn-p吗？

我希望我能 - 我换了工作，无法访问我的旧代码。

如果你丢失了保险丝，这会导致你的列对象在渲染中，只需声明这会有所帮助