ReactJs Material-Table Wie man Filteroptionen ein-/ausblendet

Question

Ich verwende das Material-Table-Plugin für meine ReactJS-Anwendung, um eine Datentabelle anzuzeigen.

Ich muss die Filterung für die Spalte anzeigen. Aber wenn ich filtering=true aktiviert habe, wird eine weitere Zeile im Header-Abschnitt unterhalb der Überschrift erstellt. Was unnötig Platz braucht und immer angezeigt wird.

Ich möchte den Filterbereich ausblenden. Vielleicht zeige ich das Filtersymbol neben der Spalte und wenn ich darauf klicke, zeige ich die filternde Textzeile. Ich habe gesehen, dass diese Option auf Tubular-React-Tischen ist. Aber kann ich mit der Materialtabelle anfangen?

Answer 1

Es wird standardmäßig nicht unterstützt, aber wenn Sie den Filterstatus in einem useState speichern und diesen auf true setzen, aktualisieren Sie die Tabelle wie folgt:

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

Answer 2

Die Lösung kam also wie folgt heraus. (Ich benutze Klasse)

In der Materialtabelle muss eine Schaltfläche zum Filtern hinzugefügt werden. wodurch der Filterbereich umgeschaltet wird. Fügen Sie auch die options={{Filtering: this.state.filter}} hinzu. Wir müssen auch eine kleine Funktion definieren, um das Flag umzuschalten.

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