How can I pass values of Route params into the filter fields of a React table?
I'm using a component called material-table. Got a set of links like this:
<ul>
<li>
<Link to="/Products/Dogs/Foods">Dog Food Products</Link>
</li>
<li>
<Link to="/Services/Cats/Grooming">Cat Grooming Services</Link>
</li>
</ul>
<Switch>
<Route exact path="/:business/:category/:product" component={Material_Table}/>
</Switch>
Then in the Material_Table component, I need to filter the columns based on those url params. Right now just putting them in an h4:
<div className="alert">
<h4>Business: {business}. Category: {category}. Product: {product}.</h4>
</div>
<MaterialTable
title = "Projects"
icons = {tableIcons}
columns={[
{
title: 'Name',
field: 'name'
},
{
title: 'Business',
field: 'values[9]'
},
{
title: 'Category',
field: 'values[10]'
},
{
title: 'Product',
field: 'values[8]'
},
]}
data = {items}
options ={{
filtering: true
}}
/>
Tried putting expressions right in the columns object but that does not work. I know there's an option for default value, but that doesn't seem right either. Any help much appreciated!
Using defaultFilter
on each column works:
<MaterialTable
title = "Projects"
icons = {tableIcons}
columns={[
{
title: 'Name',
field: 'name'
},
{
title: 'Business',
field: 'values[9]',
defaultFiler: business
},
{
title: 'Category',
field: 'values[10]',
defaultFilter: category
},
{
title: 'Product',
field: 'values[8]',
defaultFiler: product
},
]}
data = {items}
options ={{
filtering: true
}}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.