ReactJsMaterial-Tableフィルターオプションを表示/非表示にする方法

Question

私はreactJSアプリケーションにmaterial-Tableプラグインを使用して、データのテーブルを表示しています。

列にフィルタリングを表示する必要があります。しかし、filtering = trueを有効にすると、見出しの下のヘッダーセクションにもう1つの行が作成されます。これは不必要なスペースを取り、常に表示されます。

フィルタセクションを非表示にします。たぶん、列の横にフィルターアイコンを表示し、クリックするとフィルタリングテキスト行が表示されます。私はこのオプションが管状反応テーブルにあるのを見ました。しかし、私は材料テーブルで行うことができますか？

Answer 1

そのままではサポートされていませんが、フィルタリング状態をuseStateに保存し、それをtrueに設定すると、次のようにテーブルが更新されます。

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

Answer 2

したがって、解決策は以下のようになりました。（私はクラスを使用しています）

Material-tableで、フィルター用のボタンを追加する必要があります。フィルタセクションを切り替えます。また、options = {{Filtering：this.state.filter}}を追加します。また、フラグを切り替えるための小さな関数を定義する必要があります。

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