ReactJs Material-Table Come mostrare/nascondere le opzioni di filtro
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
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>
}
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)}
}
]}