Filter DetailsList - office-ui-fabric

Question

Can anyone please let me know how to filter a DetailsList? For instance, let’s say I have the following list:
list
How do I filter the list such that when I type “Reject”, it will only show items with Status “Reject”
Here is the code I tried (from the documentation https://developer.microsoft.com/en-us/fabric#/components/detailslist):
private _onChangeText = (text: any) => {
this.setState({ items: text ? this.state.items.filter(i =>
i.Status.indexOf(text) > -1) : this.state.items });
}
<TextField
label="Filter by name:"
onChanged={this._onChangeText}
/>
Thanks!

Answer 1

Here's a Codepen where I'm filtering a collection of items to see if the text is present in any of the item's values (case-insensitive). It is similar to the documentation example you linked in your original question. I hope that helps!
let COLUMNS = [
{
key: "name",
name: "Name",
fieldName: "Name",
minWidth: 20,
maxWidth: 300,
},
{
key: "status",
name: "Status",
fieldName: 'Status',
minWidth: 20,
maxWidth: 300
}
];
const ITEMS = [
{
Name: 'xyz',
Status: 'Approve'
},
{
Name: 'abc',
Status: 'Approve'
},
{
Name: 'mno',
Status: 'Reject'
},
{
Name: 'pqr',
Status: 'Reject'
}
]
const includesText = (i, text): boolean => {
return Object.values(i).some((txt) => txt.toLowerCase().indexOf(text.toLowerCase()) > -1);
}
const filter = (text: string): any[] => {
return ITEMS.filter(i => includesText(i, text)) || ITEMS;
}
class Content extends React.Component {
constructor(props: any) {
super(props);
this.state = {
items: ITEMS
}
}
private _onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string) {
let items = filter(text);
this.setState({ items: items });
}
public render() {
const { items } = this.state;
return (
<Fabric.Fabric>
<Fabric.TextField label="Filter" onChange={this._onChange.bind(this)} />
<Fabric.DetailsList
items={ items }
columns={ COLUMNS }
/>
</Fabric.Fabric>
);
}
}
ReactDOM.render(
<Content />,
document.getElementById('content')
);