ReactJs Material-Table Come mostrare/nascondere le opzioni di filtro

Aug 21 2020

Sto usando il plug-in material-Table per la mia applicazione reactJS per visualizzare la tabella dei dati.

Ho l'obbligo di mostrare il filtro sulla colonna. Ma quando ho abilitato filtering=true, crea un'altra riga nella sezione Intestazione sotto l'intestazione. Il che occupa spazio inutile e viene mostrato sempre.

Voglio nascondere la sezione del filtro. Forse mostro l'icona del filtro accanto alla colonna e quando si fa clic su di essa mostra la riga di testo del filtro. Ho visto che questa opzione è sui tavoli a reazione tubolare. Ma posso farcela con material-table?

Risposte

2 Domino987 Aug 31 2020 at 02:05

Non è supportato immediatamente, ma se salvi lo stato del filtro in useState e lo imposti su true aggiorna la tabella, in questo modo:

function Table(){
    const [filtering, setFiltering] = React.useState(false);
    retrun <div>
           <MaterialTable options={{filtering}}/>
           <button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
          </div>
}
1 AmitG Sep 01 2020 at 05:37

Quindi la soluzione è venuta fuori come di seguito. (Sto usando la classe)

In Material-table, è necessario aggiungere un pulsante per il filtro. che alternerà la sezione del filtro. Aggiungi anche options={{Filtro: this.state.filter}}. Abbiamo anche bisogno di definire una piccola funzione per attivare o disattivare il flag.

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