How to display selection filter outside table column for material-table reactjs

1
votes

I am using material-table to display table data. and Add filters for a particular column outside the table.

Example: https://material-table.com/#/docs/features/filtering

I want to filter only "birth place" data using selection dropdown outside the table separately and not inside the column head

1
reactjsmaterial-uimaterial-table

1 Answers

0
votes

I think material table contains only basic functionality, so what you ask is not available out of box.

Simplest solution is to wrap table inside other component which will contain table and 'birth place' select in jsx, birthPlace and filteredTableData in state and tableData as class property.

Initially

filteredTableData = tableData

and it proxied to table component. And inside birthPlaceSelect onChange event you should implement filtering tableData and set it in state as filteredTableData.

So basically you filtering data outside table by yourself.

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>
    );
  }
}