React Router и Material-Table - значения столбца фильтра

Question

Как я могу передать значения параметров маршрута в поля фильтра таблицы React?

Я использую компонент под названием material-table. Получил набор таких ссылок:

<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>

Затем в компоненте Material_Table мне нужно отфильтровать столбцы на основе этих параметров URL. Прямо сейчас просто помещаю их в 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
        }}
        />

Пытался поместить выражения прямо в объект столбцов, но это не сработало. Я знаю, что есть вариант для значения по умолчанию, но это тоже не кажется правильным. Любая помощь очень ценится!

Answer 1

Использование defaultFilter в каждом столбце работает:

<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
    }}
    />