ReactJs Material-Table Как показать / скрыть параметры фильтра

Question

Я использую плагин material-Table для моего приложения reactJS для отображения таблицы данных.

У меня есть требование показать фильтрацию по столбцу. Но когда я включил filtering = true, он создает еще одну строку в разделе заголовка под заголовком. Это занимает ненужное место и отображается всегда.

Я хочу скрыть раздел фильтра. Возможно, я показываю значок фильтра рядом с столбцом, а при щелчке по нему отображается текстовая строка фильтрации. Я видел, что этот вариант есть на таблицах с трубчатой ​​реакцией. Но могу ли я обойтись с таблицей материалов?

Answer 1

Он не поддерживается из коробки, но если вы сохраните состояние фильтрации в useState и установите для него значение true, обновите таблицу, например:

function Table(){
    const [filtering, setFiltering] = React.useState(false);
    retrun <div>
           <MaterialTable options={{filtering}}/>
           <button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
          </div>
}

Answer 2

Итак, решение вышло, как показано ниже. (Я использую класс)

В таблице материалов нужно добавить кнопку для фильтра. который переключит раздел фильтра. Также добавьте options = {{Filtering: this.state.filter}}. Нам также нужно определить небольшую функцию для переключения флага.

options={{Filtering: this.state.filter}   
 actions={[
               {
                 icon: 'filter',
                 tooltip: 'Enable Filter',
                 isFreeAction: true,
                 onClick: (event) => { this.functionName(!this.state.filter)}
                                  }
                                ]}