[英]Get filtred data, react-bootstrap-table2
Is there any global table option that return the filtred rows?是否有任何返回过滤行的全局表选项? Ignore pagination.
忽略分页。 All rows matching one or several
textFilter
?匹配一个或多个
textFilter
所有行?
I need a value in the header showin the average value of the filtred data.我需要标题中的值显示过滤数据的平均值。
I don't find any on https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html我在https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html上找不到任何内容
There is the onDataSizeChange
, but it only gives the prop dataSize
(nr of rows), also only available when pagination is not used.有
onDataSizeChange
,但它只提供道具dataSize
(行数),也仅在不使用分页时可用。
Update to second question in comments:更新评论中的第二个问题:
class App extends Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
data: [...]
filtredData: null
};
};
const factory = patchFilterFactory(filterFactory, (filteredData) => {
this.setState({filteredData}); // causes maximum update exceeded..
});
render() {
return (
<div>
<BootstrapTable
keyField='id'
striped
hover
bootstrap4
data={anbuds}
filter={factory()}
columns={columns}/>
</div>
);
}
}
Kinda.有点。
One way you could do that is by providing a different implementation of the filter prop, and get the data that you need there.您可以这样做的一种方法是提供过滤器道具的不同实现,并在那里获取您需要的数据。
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
function patchFilterFactory(filterFactory, onFilteredData) {
return (...args) => {
const { createContext, options } = filterFactory(...args)
return {
createContext: (...args) => {
const { Provider: BaseProvider, Consumer } = createContext(...args)
const Provider = class FilterProvider extends BaseProvider {
componentDidUpdate() {
onFilteredData(this.data)
}
}
return { Provider, Consumer }
},
options
}
}
}
patchFilterFactory
will just sit in between the original filter provider and your code, allowing you to get the data that you need. patchFilterFactory
将位于原始过滤器提供程序和您的代码之间,允许您获取所需的数据。
How to use it:如何使用它:
function Table() {
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name",
filter: textFilter({
delay: 0
})
},
{
dataField: "price",
text: "Product Price",
filter: textFilter({
delay: 0
})
}
];
const factory = patchFilterFactory(filterFactory, (filteredData) => {
console.log('on filter data', filteredData)
})
return (
<BootstrapTable
keyField="id"
data={props.products}
columns={columns}
filter={factory()}
/>
);
}
I agree, that's far from ideal, but as far as I was able to assess, it may be the only way at the moment.我同意,这远非理想,但据我评估,这可能是目前唯一的方法。
If you want to change state in the same component, I would recommend:如果您想更改同一组件中的状态,我建议:
const [filteredData, setFilteredData] = React.useState([])
const factory = patchFilterFactory(filterFactory, data => {
setFilteredData(prevData => {
if (JSON.stringify(prevData) !== JSON.stringify(data)) {
return data
}
return prevData
})
})
My 2¢: after some investigation (and intentionally avoiding implementation of filter factory wrapper suggested by @federkun) I found out I can access current filter context of rendered table.我的 2¢:经过一些调查(并有意避免实现@federkun 建议的过滤器工厂包装器),我发现我可以访问呈现表的当前过滤器上下文。
In order to access table properties, I had to add React Ref :为了访问表属性,我必须添加React Ref :
class MyDataTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: props.data
};
this.node = React.createRef();
}
...
render() {
return (
<Card>
<CardBody>
<BootstrapTable
ref={n => this.node = n}
keyField="id"
data={this.state.data}
...
/>
<Button name="click-me" onClick={() => this.handleClick()}>Click me!</Button>
</CardBody>
</Card>
)
}
}
Now when it is possible to reference <BootstrapTable>
from code using this.node
, I can get to all filtered data (without paging):现在,当可以使用
this.node
从代码中引用<BootstrapTable>
,我可以获得所有过滤数据(无需分页):
// member of MyDataTable component
handleClick() {
console.log(this.node.filterContext.data);
}
Please note that if you access data this way, entries won't be sorted as you see it in the table, so if you want to go really crazy, you can get data filtered and sorted this way:请注意,如果您以这种方式访问数据,条目将不会按照您在表中看到的方式进行排序,因此如果您真的想发疯,您可以通过这种方式过滤和排序数据:
// member of MyDataTable component
handleClick() {
const table = this.node;
const currentDataView =
(table.paginationContext && table.paginationContext.props.data)
|| (table.sortContext && table.sortContext.props.data) // <- .props.data (!)
|| (table.filterContext && table.filterContext.data) // <- .data (!)
|| this.state.data; // <- fallback
console.log(currentDataView);
}
... however this is becoming pretty wild. ......但是这变得非常疯狂。 Important thing here is to start with
paginationContext
- anything before it is already sliced into pages.这里重要的事情是从
paginationContext
开始 - 在它已经被切成页面之前的任何东西。 You can check how contexts are put together here: react-bootstrap-table2/src/contexts/index.js
.你可以在这里检查上下文是如何组合在一起的:
react-bootstrap-table2/src/contexts/index.js
。
Nevertheless, this approach is hacky - completely avoiding public API, intercepting context pipeline, reading inputs for each layer.然而,这种方法是hacky - 完全避免公共API,拦截上下文管道,读取每一层的输入。 Things may change in newer releases, or there may be issue with this approach I haven't discovered yet - just be aware of that.
在较新的版本中情况可能会发生变化,或者这种方法可能存在我尚未发现的问题 - 请注意这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.