Как отобразить фильтр выбора вне столбца таблицы для таблицы свойств материала

Question

Я использую таблица материалов для отображения данных таблицы. и Добавить фильтры для определенного столбца вне таблицы.

Пример: https://material -table.com / # / docs / features / filtering

Я хочу отфильтроватьтолько данные «места рождения» с использованием выпадающего списка вне таблицы отдельно, а не внутри заголовка столбца

Answer 1

Я думаю, что таблица материалов содержит только базовые функциональные возможности, поэтому то, что вы спрашиваете, недоступно "из коробки".

Самое простое решение - это обернуть таблицу в другой компонент, который будет содержать таблицу и место рождения, выбранные в jsx. , birthPlace и FilterTableData в состоянии и tableData в качестве свойства класса.

Изначально

FilterTableData = tableData

и он проксирован к компоненту таблицы. А внутри birthPlaceSelect onChange вы должны реализовать фильтрацию tableData и установить ее в состояние как FilterTableData .

Так что в основномВы сами фильтруете данные вне таблицы.

class FilterableTable extends Component {
  state = {
    filteredTableData: [],
    birthPlace: null,
  };

  componentDidMount() {
    // load data or get it from store in loadDataFromServer
    loadDataFromServer().then(data => {
      // save initial data to state
      this.setState({ filteredTableData: data });
      // and save copy to class prop
      this.data = data;
    });
  }

  onFilterValueChanged = ev => {
    if (ev.target.value) {
      this.setState({
        filteredTableData: this.data.filter(row =>
          row.birthPlace.contains(ev.target.value)
        ),
      });
    }else{
      this.setState({
        filteredTableData: this.data        
      });
    }
  };


  render() {
    const { filteredTableData, birthPlace } = this.state;

    return (
      <div>
        <input value={birthPlace} onChange={this.onFilterValueChanged} />
        <MaterialTable data={filteredTableData} />
      </div>
    );
  }
}