ReactJs Material-Table Cara menampilkan / menyembunyikan opsi filter

Question

Saya menggunakan plugin Material-Table untuk aplikasi reactJS saya untuk menampilkan tabel data.

Saya memiliki persyaratan untuk menunjukkan pemfilteran pada kolom. Tetapi ketika saya mengaktifkan filtering = true maka itu membuat satu baris lagi di bagian Header di bawah judul. Yang membutuhkan ruang yang tidak perlu dan selalu ditampilkan.

Saya ingin menyembunyikan bagian filter. Mungkin saya menampilkan ikon filter di sebelah kolom dan ketika diklik itu menunjukkan baris teks pemfilteran. Saya melihat opsi ini ada di tabel reaksi tubular. Tapi bisakah saya melakukannya dengan material-table?

Answer 1

Ini tidak didukung di luar kotak, tetapi jika Anda menyimpan status pemfilteran di useState dan menyetelnya ke true, perbarui tabel, seperti ini:

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

Answer 2

Jadi solusinya keluar seperti di bawah ini. (Saya menggunakan kelas)

Di Material-table, perlu menambahkan tombol untuk filter. yang akan mengalihkan bagian filter. Tambahkan juga options = {{Filtering: this.state.filter}}. Kita juga perlu mendefinisikan fungsi kecil untuk mengganti bendera.

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