How to select only value greater than... in columns data grid - reactjs

Question

is there a way how to define that only "data" greater than * should be added to my columns in data grid?
I have tried add filter, but it support only exact value.
In my example i want to add only columns which has "combinationId" greater than 100.
class App extends React.Component {
constructor(props) {
super(props);
this.state = this.getCleanState();
this.reload();
}
getCleanState() {
return {
columns:[
{ name: 'combinationId', title: 'ID kombinace'},
{ name: 'name', title: 'Název kombinace'},
],
defaultColumnWidths: [
{ columnName: 'combinationId', width: 160 },
{ columnName: 'name', width: 200 },
],
rows:[]
};
}
reload() {
axios.get('http://private-anon-27979f8bb8-bulgur.apiary-mock.com/api/v1/combinationInfo').then((response) => {
this.loading = false;
var newState = {columns: this.state.columns, rows: response.data
.map(x => x.combinations)
.reduce((a, b) => a.concat(b))};
this.setState(newState);
}, (error) => {
this.loading = false;
})
}
render() {
const { columns, rows, defaultColumnWidths, integratedFilteringColumnExtensions } = this.state;
return (
<div>
{/* <button onClick={() => this.reload()}>Load</button>*/}
<div className="grids">
<div className="patient-container">
<Grid
rows={rows}
columns={columns}>
<Table />
<TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
<TableHeaderRow />
</Grid>
</div>
<div className="patient-container2">
<Grid
rows={rows}
columns={columns}>
<FilteringState defaultFilters={[{ columnName: 'combinationId', value: 100 }]} /> <IntegratedFiltering />
<Table />
<TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
<TableHeaderRow />
</Grid>
</div>
</div>
</div>)
}
}
Thanks for answers. I wish you great day.

Answer 1

does it have to be dynamic filtering? else you could just filter it before returning
render() {
const { columns, rows, ... } = this.state;
const filteredRows = rows.map(row => row.combinationId >= 100);
return ( ...