ReactJs Material-Table Comment afficher/masquer les options de filtre

Question

J'utilise le plugin material-Table pour mon application reactJS pour afficher un tableau de données.

J'ai besoin d'afficher le filtrage sur la colonne. Mais lorsque j'ai activé filtering=true, il crée une ligne supplémentaire dans la section En-tête sous l'en-tête. Ce qui prend de la place inutilement et est toujours affiché.

Je veux masquer la section de filtre. Peut-être que j'affiche l'icône de filtre à côté de la colonne et lorsque je clique dessus, la ligne de texte de filtrage s'affiche. J'ai vu que cette option est sur les tables à réaction tubulaire. Mais puis-je faire avec material-table?

Answer 1

Ce n'est pas pris en charge par défaut, mais si vous enregistrez l'état de filtrage dans un useState et définissez-le sur true, mettez à jour la table, comme ceci :

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

Answer 2

La solution est donc sortie comme ci-dessous. (j'utilise la classe)

Dans Material-table, besoin d'ajouter un bouton pour le filtre. qui basculera la section de filtre. Ajoutez également les options={{Filtering : this.state.filter}}. Nous devons également définir une petite fonction pour basculer le drapeau.

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