Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

tabel reaksi-grid

Tabel modular, berdasarkan tata letak kisi CSS, dioptimalkan untuk konfigurasi cepat dan penyesuaian mendalam.

Fitur yang didukung:

  • Dukungan asinkron
  • Urutkan berdasarkan kolom
  • Ubah ukuran kolom
  • Penyusunan ulang kolom
  • Cari dengan sorotan
  • Paginasi
  • Pemilihan baris
  • Pengeditan baris sebaris
  • Penyematan kolom (pra-konfigurasi)
  • Manajemen visibilitas kolom
  • Gulir virtual
  • Tajuk yang lengket
  • Tinggi baris dinamis

Demo Langsung

Demo

Memasang 

npm i @nadavshaar/react-grid-table

Penggunaan

Secara default, tabel berfitur lengkap meskipun hanya dengan konfigurasi dasar baris dan kolom.

Contoh: 

 import React from "react" ;
import GridTable from '@nadavshaar/react-grid-table' ;

// custom cell component
const Username = ( { tableManager , value , field , data , column , colIndex , rowIndex } ) => {
    return (
        < div className = 'rgt-cell-inner' style = { { display : 'flex' , alignItems : 'center' , overflow : 'hidden' } } >
            < img src = { data . avatar } alt = "user avatar" / >
            < span className = 'rgt-text-truncate' style = { { marginLeft : 10 } } > { value } < / span >
        < / div >
    )
}

const rows = [
    { 
        "id" : 1 , 
        "username" : "wotham0" , 
        "gender" : "Male" , 
        "last_visited" : "12/08/2019" , 
        "test" : { "x" : 1 , "y" : 2 } , 
        "avatar" : "https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 2 , 
        "username" : "dbraddon2" , 
        "gender" : "Female" , 
        "last_visited" : "16/07/2018" , 
        "test" : { "x" : 3 , "y" : 4 } , 
        "avatar" : "https://robohash.org/etsedex.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 3 , 
        "username" : "dridett3" , 
        "gender" : "Male" , 
        "last_visited" : "20/11/2016" , 
        "test" : { "x" : 5 , "y" : 8 } , 
        "avatar" : "https://robohash.org/inimpeditquam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 4 , 
        "username" : "gdefty6" , 
        "gender" : "Female" , 
        "last_visited" : "03/08/2019" , 
        "test" : { "x" : 7 , "y" : 4 } , 
        "avatar" : "https://robohash.org/nobisducimussaepe.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 5 , 
        "username" : "hbeyer9" , 
        "gender" : "Male" , 
        "last_visited" : "10/10/2016" , 
        "test" : { "x" : 2 , "y" : 2 } , 
        "avatar" : "https://robohash.org/etconsequatureaque.jpg?size=32x32&set=set1"
    }
] ;

const columns = [
    {
        id : 1 , 
        field : 'username' , 
        label : 'Username' ,
        cellRenderer : Username ,
    } , 
    {
        id : 2 , 
        field : 'gender' , 
        label : 'Gender' ,
    } ,
    {
        id : 3 , 
        field : 'last_visited' , 
        label : 'Last Visited' ,
        sort : ( { a , b , isAscending } ) => {
            let aa = a . split ( '/' ) . reverse ( ) . join ( ) ,
            bb = b . split ( '/' ) . reverse ( ) . join ( ) ;
            return aa < bb ? isAscending ? - 1 : 1 : ( aa > bb ? isAscending ? 1 : - 1 : 0 ) ;
        }
    } ,
    {
        id : 4 , 
        field : 'test' , 
        label : 'Score' ,
        getValue : ( { value } ) => value . x + value . y
    }
] ;

const MyAwesomeTable = ( ) => < GridTable columns = { columns } rows = { rows } / > ;

export default MyAwesomeTable ;

dokumen

Daftar isi

  • Komponen utama
  • Alat peraga
  • Alat peraga konfigurasi
  • Alat peraga acara
  • Alat peraga asinkron
  • Penyangga columns
  • Kolom checkbox
  • Penopang rows
  • components pendukung
  • Props additionalProps
  • API tableManager
  • Cara: Sinkronisasi/Async
  • Bagaimana-Untuk: Pengeditan Baris
  • Cara: Menata gaya

Dukung paket ini

Komponen utama

HEADER (opsional | dapat disesuaikan): pencarian & manajemen visibilitas kolom.

TABLE-HEADER: mengurutkan, mengubah ukuran & menyusun ulang kolom.

TABLE-BODY: menampilkan data / loader / tidak ada hasil, pengeditan baris & pemilihan baris.

FOOTER (opsional | dapat disesuaikan): informasi baris, baris per halaman & pagination.

Alat peraga

nama jenis keterangan nilai bawaan
kolom* susunan objek konfigurasi kolom (detail) [ ]
baris susunan objek data baris (detail) [ ]
dipilihRowsIds susunan id id dari semua baris yang dipilih (detail) [ ]
teks pencarian rangkaian teks untuk pencarian ""
getIsRowSelectable fungsi fungsi panggilan balik yang mengembalikan apakah pemilihan baris untuk baris saat ini harus dapat dipilih atau dinonaktifkan row => true
getIsRowEditable fungsi fungsi panggilan balik yang mengembalikan apakah pengeditan baris untuk baris saat ini diperbolehkan atau tidak row => true
editRowId setiap id baris yang harus beralih ke mode pengeditan sebaris, (lebih detail tentang pengeditan baris) batal
halaman nomor nomor halaman saat ini 1
Ukuran halaman nomor ukuran halaman yang dipilih 20
menyortir obyek konfigurasi pengurutan. menerima colId untuk id kolom yang harus diurutkan, dan isAsc untuk menentukan arah pengurutan. Contoh: { colId: 'some-column-id', isAsc: true } , untuk membatalkan sortir cukup berikan colId sebagai null { }
sedang Memuat boolean apakah akan menampilkan loader PALSU

Alat peraga konfigurasi

nama jenis keterangan nilai bawaan
barisIdField rangkaian nama bidang dalam data baris yang harus digunakan sebagai pengidentifikasi baris - harus unik 'pengenal'
minColumnResizeWidth nomor lebar minimum untuk semua kolom saat mengubah ukuran (tidak berlaku untuk kolom 'kotak centang') 70
minSearchChars nomor karakter minimum yang harus diketik sebelum pencarian akan diterapkan 2
adalahHeaderSticky boolean apakah sel header tabel akan menempel di bagian atas saat di-scroll atau tidak BENAR
isPaginated boolean menentukan apakah kontrol penomoran halaman harus ditampilkan di footer dan apakah data baris harus dibagi menjadi beberapa halaman BENAR
aktifkan Kolom Susun Ulang boolean apakah akan mengizinkan drag & drop kolom untuk reposisi BENAR
highlightSearch boolean apakah akan menyorot istilah pencarian BENAR
tampilkan Pencarian boolean apakah akan menampilkan komponen pencarian di header BENAR
tampilkan Informasi Baris boolean apakah akan menampilkan komponen informasi baris (terletak di sisi kiri footer) BENAR
tampilkanColumnVisibilityManager boolean apakah akan menampilkan tombol manajemen visibilitas kolom (terletak di kanan atas header) BENAR
ukuran halaman deretan angka pilihan ukuran halaman [20, 50, 100]
adalahVirtualScroll boolean apakah akan merender item dalam gulir virtual untuk meningkatkan kinerja (berguna bila Anda memiliki banyak baris dalam satu halaman) BENAR
pilihSemuaMode rangkaian mengontrol jenis "Semua Pilihan". Opsi yang tersedia adalah page untuk memilih/membatalkan pilihan hanya pada baris di halaman saat ini, atau all untuk memilih/membatalkan pilihan semua baris di semua halaman. Jika menggunakan aliran asinkron, opsi all akan memilih semua baris yang tersedia , dan opsi page yang digabungkan dengan batchSize , akan memilih/membatalkan pilihan semua baris yang tersedia di halaman 'halaman'
ikon objek node konfigurasi ikon khusus { sortAscending, sortDescending, clearSelection, ColumnVisibility, pencarian, pemuat }
teks obyek config untuk semua teks UI, berguna untuk terjemahan atau untuk menyesuaikan teks { pencarian: 'Penelusuran:', totalRows: 'Total baris:', baris: 'Baris:', dipilih: 'Dipilih', rowPerPage: 'Baris per halaman:', halaman: 'Halaman:', dari: 'dari' , sebelumnya: 'Sebelumnya', selanjutnya: 'Berikutnya', visibilitas kolom: 'Visibilitas kolom' }
komponen obyek Prop ini memberi Anda kemampuan untuk mengganti komponen internal dengan komponen khusus Anda sendiri (lihat daftar lengkap komponen yang didukung) { Komponen bawaan }
alat peraga tambahan obyek Prop ini memberi Anda kemampuan untuk meneruskan props ke komponen/modul tabel (lihat daftar lengkap dari tambahanProps yang didukung) additionalProps={{ header: { ... } }}

Alat peraga acara

nama jenis keterangan penggunaan
diColumnsChange fungsi dipicu ketika columns telah diubah columns => { ... }
diSelectedRowsChange fungsi terpicu ketika pemilihan baris telah diubah selectedRowsIds => { ... }
diPageChange fungsi dipicu ketika halaman diubah nextPage => { ... }
diPageSizeChange fungsi dipicu ketika ukuran halaman diubah newPageSize => { ... }
diSearchTextChange fungsi dipicu ketika teks pencarian berubah searchText => { ... }
diSortChange fungsi terpicu ketika pengurutan berubah ({colId, isAsc}) => { ... }
diRowClick fungsi terpicu ketika sebuah baris diklik ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }
padaEditRowIdChange fungsi terpicu ketika rowEditId berubah rowEditId => { ... }
diMuat fungsi terpicu ketika tableManager diinisialisasi (detail) tableManager => { ... }
diColumnResizeStart fungsi terpicu saat pengubahan ukuran kolom dimulai ({event, target, column}) => { ... }
diColumnResize fungsi dipicu ketika perubahan ukuran kolom terjadi ({event, target, column}) => { ... }
diColumnResizeEnd fungsi terpicu ketika pengubahan ukuran kolom berakhir ({event, target, column}) => { ... }
diColumnReorderStart fungsi pemicu pada tarikan kolom. pengurutan data yang disediakan oleh react-sortable-hoc menggunakan prop onSortStart (sortData, tableManager) => { ... }
diColumnReorderEnd fungsi terpicu pada penurunan kolom, dan hanya jika kolom berubah posisinya. pengurutan data yang disediakan oleh react-sortable-hoc menggunakan prop onSortEnd (sortData, tableManager) => { ... }

Alat peraga asinkron

nama jenis keterangan penggunaan/nilai default
diRowsRequest fungsi terpicu ketika baris baru harus diambil lihat contoh
diRowsChange fungsi terpicu ketika baris telah berubah lihat contoh
diTotalRowsChange fungsi terpicu ketika jumlah total baris telah berubah lihat contoh
diRowsReset fungsi terpicu ketika baris yang terakumulasi perlu diatur ulang (saat mencari atau menyortir) lihat contoh
ukuran batch nomor mendefinisikan jumlah baris yang akan diminta oleh prop onRowsRequest ukuran halaman tabel
permintaanDebounceTimeout nomor mendefinisikan jumlah waktu debouncing untuk memicu prop onRowsRequest 300
total baris nomor jumlah baris seluruhnya ---

alat peraga - detail

kolom

Tipe: array objek.

Prop ini mendefinisikan konfigurasi kolom.

Setiap kolom (kecuali kolom 'kotak centang') memiliki dukungan untuk properti berikut:

nama jenis keterangan nilai bawaan
pengenal* setiap pengidentifikasi unik untuk kolom, menyetelnya ke 'kotak centang' akan menghasilkan kolom pemilihan baris (detail lebih lanjut tentang kolom kotak centang) ---
bidang rangkaian nama field seperti pada data baris ---
label rangkaian label untuk ditampilkan di sel header properti field
disematkan boolean apakah kolom tersebut akan disematkan ke samping, didukung hanya pada kolom pertama dan terakhir PALSU
bisa dilihat boolean apakah akan menampilkan kolom BENAR
nama kelas rangkaian pemilih kelas khusus untuk semua sel kolom ""
lebar rangkaian lebar awal kolom dalam nilai kisi (daftar nilai lengkap) "200 piksel"
minResizeWidth nomor lebar minimum kolom saat mengubah ukuran prop minColumnResizeWidth
maxResizeWidth nomor, nol lebar maksimum kolom saat mengubah ukuran batal
dapatkanNilai fungsi digunakan untuk mendapatkan nilai sel (berguna jika nilai sel bukan string - detail) ({value, column}) => value
setValue fungsi digunakan untuk memperbarui nilai sel (berguna ketika nilai sel bukan string - detail) ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }
dapat dicari boolean apakah akan menerapkan pemfilteran pencarian pada kolom BENAR
dapat diedit boolean apakah akan mengizinkan pengeditan untuk kolom tersebut BENAR
dapat diurutkan boolean apakah akan mengizinkan pengurutan untuk kolom BENAR
dapat diubah ukurannya boolean apakah akan mengizinkan pengubahan ukuran kolom BENAR
mencari fungsi fungsi pencarian kolom ({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())
menyortir fungsi fungsi pengurutan untuk kolom ({a, b, isAscending}) => { let aa = typeof a === 'string' ? a.toLowerCase() : a; let bb = typeof b === 'string' ? b.toLowerCase() : b; if(aa > bb) return isAscending ? 1 : -1; else if(aa < bb) return isAscending ? -1 : 1; return 0; }
perender sel fungsi digunakan untuk rendering khusus komponen sel ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) ---
headerCellRenderer fungsi digunakan untuk rendering khusus komponen sel header ({ tableManager, column }) => ( children ) ---
editorCellRenderer fungsi digunakan untuk rendering khusus komponen sel dalam mode edit ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children ) ---
placeHolderRenderer fungsi digunakan untuk rendering khusus komponen placeholder sel yang ditampilkan saat memuat baris baru ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) ---

Contoh: 

 // column config

{
  id : 'some-unique-id' ,
  field : 'first_name' ,
  label : 'First Name' ,
  className : '' ,
  pinned : false ,
  width : '200px' ,
  getValue : ( { tableManager , value , column , rowData } ) => value , 
  setValue : ( { value , data , setRow , column } ) => { setRow ( { ... data , [ column . field ] : value } ) } ,
  minResizeWidth : 70 ,
  maxResizeWidth : null ,
  sortable : true ,
  editable : true ,
  searchable : true ,
  visible : true ,
  resizable : true ,
  search : ( { value , searchText } ) => { } ,
  sort : ( { a , b , isAscending } ) => { } ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children ) ,
  headerCellRenderer : ( { tableManager , column } ) => ( children ) ,
  editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => ( children ) ,
  placeHolderRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children )
}

kolom kotak centang

Pemilihan baris dilakukan dengan kolom yang telah ditentukan, cukup tambahkan kolom dengan id 'kotak centang'.

Kolom kotak centang memiliki dukungan untuk properti berikut:

nama jenis keterangan nilai bawaan
pengenal* 'kotak centang' akan menghasilkan kolom pemilihan baris ---
disematkan boolean apakah kolom tersebut akan disematkan ke samping, didukung hanya pada kolom pertama dan terakhir PALSU
bisa dilihat boolean apakah akan menampilkan kolom BENAR
nama kelas rangkaian kelas khusus untuk semua sel kolom ""
lebar rangkaian lebar awal kolom dalam nilai kisi (daftar nilai lengkap) "konten maksimal"
minResizeWidth nomor lebar minimum kolom saat mengubah ukuran 0
maxResizeWidth nomor, nol lebar maksimum kolom saat mengubah ukuran batal
dapat diubah ukurannya boolean apakah akan mengizinkan pengubahan ukuran kolom PALSU
perender sel fungsi digunakan untuk rendering khusus sel kotak centang ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )
headerCellRenderer fungsi digunakan untuk rendering khusus sel header kotak centang ({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )

Contoh: 

 // checkbox column config

{
  id : 'checkbox' ,
  pinned : true ,
  className : '' ,
  width : '54px' ,
  minResizeWidth : 0 ,
  maxResizeWidth : null ,
  resizable : false ,
  visible : true ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange , disabled } ) => ( children )
  headerCellRenderer : ( { tableManager , column , mode , ref , checked , disabled , indeterminate , onChange } ) = > ( children )
}

baris

Tipe: array objek.

Prop ini berisi data untuk baris.

Setiap baris harus memiliki bidang pengidentifikasi unik, yang secara default adalah id , tetapi dapat diubah ke bidang lain menggunakan prop rowIdField . 

 // Example for a single row data

{
  "id" : " some-unique-id " , 
  "objectValueField" : { "x" : 1 , "y" : 2 }, 
  "username" : " wotham0 " ,
  "first_name" : " Waldemar " ,
  "last_name" : " Otham " ,
  "avatar" : " https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1 " ,
  "email" : " [email protected] " ,
  "gender" : " Male " ,
  "ip_address" : " 113.75.186.33 " ,
  "last_visited" : " 12/08/2019 "
}

Catatan: Jika nilai properti bukan bertipe string, atau jika Anda tidak menentukan bidang untuk kolom, Anda harus menggunakan fungsi getValue pada kolom untuk mengekstrak nilai yang diinginkan.

Tanda tangan : getValue: ({ tableManager, value, kolom, rowData }) => string

Contoh:

Katakanlah nilai bidang untuk sel adalah sebuah objek:

{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,

Fungsi getValue untuk menampilkan nama depan dan belakang sebagai nama lengkap adalah:

getValue: ({ value }) => value.firstName + ' ' + value.lastName

Nilai yang dikembalikan akan digunakan untuk mencari, menyortir, dll...

komponen

Jenis: objek.

Prop ini memberi Anda kemampuan untuk mengganti komponen internal dengan komponen khusus Anda sendiri.

Semua komponen diekspor sehingga Anda dapat mengimpornya dari mana saja tetapi Anda bertanggung jawab untuk menyediakan propsnya:

komponen alat peraga yang diperlukan alat peraga opsional
Tajuk tableManager ---
Mencari tableManager value onChange
Visibilitas Kolom tableManager columns onChange
Sel Header tableManager column
HeaderSelectionCell tableManager column ref onChange checked disabled
Sel tableManager value
Sel Editor tableManager column data value colIndex rowIndex onChange
Sel Seleksi tableManager value disabled onChange
PlaceHolderCell tableManager ---
Pemuat tableManager ---
Tidak Ada Hasil tableManager ---
TarikHandle --- ---
catatan kaki tableManager ---
Informasi tableManager totalCount pageSize pageCount selectedCount
Ukuran Halaman tableManager value options onChange
Paginasi tableManager page onChange

Contoh: Mengganti komponen header 

 const Header = ( { tableManager } ) => {

    const { searchApi , columnsVisibilityApi , columnsApi } = tableManager ;

    const { searchText , setSearchText } = searchApi ;
    const { toggleColumnVisibility } = columnsVisibilityApi ;
    const { columns } = columnsApi ;

    return (
        < div style = { { display : 'flex' , flexDirection : 'column' , padding : '10px 20px' , background : '#fff' , width : '100%' } } >
            < div >
                < label htmlFor = "my-search" style = { { fontWeight : 500 , marginRight : 10 } } >
                    Search for:
                < / label >
                < input 
                    name = "my-search"
                    type = "search" 
                    value = { searchText } 
                    onChange = { e => setSearchText ( e . target . value ) } 
                    style = { { width : 300 } }
                / >
            < / div >
            < div style = { { display : 'flex' , marginTop : 10 } } >
                < span style = { { marginRight : 10 , fontWeight : 500 } } > Columns: < / span >
                {
                    columns . map ( ( column , idx ) => (
                        < div key = { idx } style = { { flex : 1 } } >
                            < input 
                                id = { `checkbox- ${ idx } ` }
                                type = "checkbox" 
                                onChange = { e => toggleColumnVisibility ( column . id ) } 
                                checked = { column . visible !== false } 
                            / >
                            < label htmlFor = { `checkbox- ${ idx } ` } style = { { flex : 1 , cursor : 'pointer' } } >
                                { column . label }
                            < / label >
                        < / div >
                    ) )
                }
            < / div >
        < / div >
    )
}

const MyAwesomeTable = props => {
    ...
    return (
        < GridTable
            . . .
            components = { { Header } }
        / >
    )
}

alat peraga tambahan

Jenis: objek.

Prop ini memberi Anda kemampuan untuk meneruskan props ke komponen/modul internal.

Contoh Meneruskan props ke komponen sel: 

 additionalProps = { { cell : { ... } , ... } }

Daftar komponen/modul yang dapat Anda berikan propsnya:

  • tajuk
  • mencari
  • kolomVisibilitas
  • headerCell
  • headerSelectionCell
  • sel
  • editorSel
  • sel seleksi
  • placeHolderCell
  • catatan kaki
  • informasi
  • Ukuran halaman
  • penomoran halaman
  • barisVirtualizer

manajer meja

Ini adalah objek API yang digunakan oleh komponen internal, Anda dapat menggunakannya untuk melakukan apa pun yang disediakan API, di luar komponen.

Struktur API:

  • id: Pengidentifikasi unik untuk setiap komponen tabel.
  • isMounted: Apakah tabel sudah terpasang.
  • isInitialized: Apakah tabel diinisialisasi. Akan disetel ke true setelah semua komponen diinisialisasi.
  • mode: 'sync' atau 'async', berasal dari props yang disediakan.
  • isLoading: Apakah tabel sedang memuat data.
  • config: Semua parameter yang mendefinisikan antarmuka pengguna tabel dan perilakunya.
  • refs: ref objek untuk elemen yang dipilih.
  • ColumnApi: API kolom.
  • ColumnVisibilityApi: API visibilitas kolom.
  • searchApi: API pencarian.
  • sortApi: API semacam itu.
  • rowApi: API baris
  • paginationApi: API pagination.
  • rowSelectionApi: API pemilihan baris.
  • rowEditApi: API pengeditan baris.
  • rowVirtualizer: API dari baris virtualizer (Lihat dokumentasi lengkap di react-virtual ).
  • asyncApi: API fungsi async.

konfigurasi

nama jenis keterangan nilai bawaan
barisIdField rangkaian nama bidang dalam data baris yang harus digunakan sebagai pengidentifikasi baris - harus unik 'pengenal'
minColumnResizeWidth nomor lebar minimum untuk semua kolom saat mengubah ukuran (tidak berlaku untuk kolom 'kotak centang') 70
minSearchChars nomor karakter minimum yang harus diketik sebelum pencarian akan diterapkan 2
adalahHeaderSticky boolean apakah sel header tabel akan menempel di bagian atas saat di-scroll atau tidak BENAR
isPaginated boolean menentukan apakah kontrol penomoran halaman harus ditampilkan di footer dan apakah data baris harus dibagi menjadi beberapa halaman BENAR
aktifkan Kolom Susun Ulang boolean apakah akan mengizinkan drag & drop kolom untuk reposisi BENAR
highlightSearch boolean apakah akan menyorot istilah pencarian BENAR
tampilkan Pencarian boolean apakah akan menampilkan komponen pencarian di header BENAR
tampilkan Informasi Baris boolean apakah akan menampilkan komponen informasi baris (terletak di sisi kiri footer) BENAR
tampilkanColumnVisibilityManager boolean apakah akan menampilkan tombol manajemen visibilitas kolom (terletak di kanan atas header) BENAR
ukuran halaman deretan angka pilihan ukuran halaman [20, 50, 100]
permintaanDebounceTimeout nomor mendefinisikan jumlah waktu debouning untuk memicu prop onRowsRequest 300
adalahVirtualScroll boolean apakah akan merender item dalam gulir virtual untuk meningkatkan kinerja (berguna bila Anda memiliki banyak baris dalam satu halaman) BENAR
tableHasSeleksi boolean apakah tabel memiliki kolom kotak centang untuk mengontrol pemilihan baris ---
komponen obyek komponen yang digunakan oleh tabel (lihat daftar lengkap komponen) {Header, Penelusuran, ColumnVisibility, HeaderCell, HeaderSelectionCell, Sel, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Footer, Informasi, PageSize, Pagination}
alat peraga tambahan obyek props tambahan yang diteruskan ke komponen internal (lihat daftar lengkap dari tambahanProps) {}
ikon obyek ikon yang digunakan oleh tabel { sortAscending, sortDescending, clearSelection, ColumnVisibility, penelusuran, pemuat }
teks obyek teks yang digunakan oleh tabel { penelusuran, totalRows, baris, dipilih, rowPerPage, halaman, dari, sebelumnya, berikutnya, ColumnVisibility }

referensi

nama jenis keterangan
rgtRef obyek objek ref dari elemen pembungkus
tabelRef obyek objek ref dari elemen wadah tabel

kolomApi

nama jenis keterangan penggunaan
kolom susunan konfigurasi kolom ---
kolom terlihat susunan kolom yang terlihat ---
setKolom fungsi memperbarui kolom setColumns(columns)

kolomVisibilityApi

nama jenis keterangan penggunaan
toggleColumnVisibility fungsi mengubah visibilitas kolom berdasarkan id toggleColumnVisibility(column.id)

cariApi

nama jenis keterangan penggunaan
teks pencarian rangkaian teks untuk pencarian ---
validSearchText rangkaian adalah string kosong jika teks yang dicari tidak lolos minSearchChars , jika lolos maka akan sama dengan searchText ---
setSearchText fungsi memperbarui teks pencarian setSearchText('hello')
baris pencarian fungsi memfilter baris berdasarkan teks pencarian, menggunakan metode pencarian yang ditentukan pada kolom searchRows(rows)
valuePassesSearch fungsi mengembalikan nilai benar jika suatu nilai lolos pencarian untuk kolom tertentu valuePassesSearch('hello', column)

sortApi

nama jenis keterangan penggunaan
menyortir obyek objek pengurutan menampung colId untuk id kolom yang harus diurutkan atau null ketika tidak ada pengurutan, dan isAsc yang menentukan arah pengurutan ---
setSort fungsi memperbarui objek pengurutan setSort({colId: 5, isAsc: false})
sortir baris fungsi mengurutkan baris berdasarkan arah yang dipilih menggunakan metode pengurutan yang ditentukan pada kolom sortRows(rows)
beralihSort fungsi mengubah langkah pengurutan kolom dari menaik, menurun, dan tidak sama sekali toggleSort(column.id)

barisApi

nama jenis keterangan penggunaan
baris susunan data baris (dalam mode sinkronisasi - data baris setelah filter pencarian dan pengurutan) ---
baris asli susunan data baris tidak tersentuh (dalam mode sinkronisasi - data baris sebelum filter pencarian) ---
setBaris fungsi memperbarui baris setRows(rows)
total baris nomor jumlah baris seluruhnya ---
setTotalRows fungsi memperbarui jumlah total baris setTotalRows(1000)

paginationApi

nama jenis keterangan penggunaan
halaman nomor nomor halaman saat ini ---
setHalaman fungsi memperbarui nomor halaman setPage(3)
Ukuran halaman nomor ukuran halaman yang dipilih ---
setUkuran Halaman fungsi memperbarui ukuran halaman setPageSize(20)
halamanBaris susunan baris di halaman saat ini ---
total Halaman nomor jumlah halaman seluruhnya ---

barisSelectionApi

nama jenis keterangan penggunaan
dipilihRowsIds susunan id id dari semua baris yang dipilih ---
setSelectedRowsIds fungsi memperbarui baris yang dipilih setSelectedRowsIds([1,3,5])
toggleRowSelection fungsi mengaktifkan pilihan baris berdasarkan id toggleRowSelection(row.id)
getIsRowSelectable fungsi menentukan apakah suatu baris dapat dipilih getIsRowSelectable(row.id)
pilihSemua.mode rangkaian jenis pilih semua, mode yang memungkinkan adalah page yang hanya menangani pemilihan baris halaman, atau all yang menangani pemilihan semua baris. Jika menggunakan aliran async, semua mode akan menangani pemilihan semua baris yang tersedia , dan mode halaman dengan batchSize yang dikontrol, akan menangani pemilihan semua baris yang tersedia di halaman ---
pilihSemua.dinonaktifkan boolean apakah tombol pilih semua harus dinonaktifkan karena tidak ada baris yang dapat dipilih yang cocok dengan mode pilihSemua ---
pilihSemua.diperiksa boolean apakah semua baris yang cocok dengan selectAll.mode dipilih ---
pilihSemua.tak tentu boolean apakah hanya beberapa baris yang cocok dengan selectAll.mode yang dipilih ---
pilihSemua.onChange fungsi memilih/membatalkan pilihan semua baris yang cocok dengan mode selectAll selectAll.onChange()
pilihSemua.ref referensi referensi yang dapat ditambahkan ke kotak centang pilih semua untuk mengaktifkan pengaturan otomatis keadaan tak tentu ---

barisEditApi

nama jenis keterangan penggunaan
editBaris obyek data baris yang sedang diedit ---
editRowId setiap id baris yang sedang diedit ---
getIsRowEditable fungsi menentukan apakah suatu baris dapat diedit getIsRowEditable(row)
setEditRow fungsi memperbarui data baris dari baris yang sedang diedit setEditRow(row)
setEditRowId fungsi memperbarui id baris dari baris yang sedang diedit, Anda dapat meneruskan null untuk beralih kembali dari mode edit setEditRowId(row.id)

asyncApi

nama jenis keterangan penggunaan / nilai default
sedang Memuat boolean apakah permintaan baris baru masih tertunda ---
menggabungkanRowsAt fungsi menggabungkan array baris pada indeks tertentu sambil mengisi "lubang" dengan null s mergeRowsAt(rows, moreRows, atIndex)
resetBaris fungsi menghapus akumulasi baris, yang akan memicu permintaan baru resetRows()
ukuran batch nomor mendefinisikan jumlah baris yang akan diminta oleh prop onRowsRequest paginationApi.pageSize

Bagaimana...

Sinkronisasi/Asinkron

react-grid-table mendukung 4 model data yang berbeda:

Sinkronisasi:

Gunakan alur ini jika Anda memiliki semua data secara lokal.
Lewatkan saja semua data menggunakan prop rows .

Alat peraga yang diperlukan :

nama jenis keterangan
baris* susunan objek data baris (detail)

Contoh: 

 export const SyncedTable = ( ) => {

    const rows = getRows ( ) ;
    const columns = getColumns ( ) ;

    return (
        < GridTable
            columns = { columns }
            rows = { rows }
        / >
    )
}

Asinkron (Tidak Terkendali):

Gunakan alur ini jika Anda perlu mengambil data asinkron, dan ingin react-grid-table mengelolanya secara internal.
Semua data dipasok ke tabel melalui prop onRowsRequest .

Alat peraga yang diperlukan :

nama jenis keterangan
diPermintaan Baris* fungsi asinkron Harus mengembalikan janji yang diselesaikan ke {rows, totalRows}

Contoh: 

 export const AsyncUncontrolledTable = ( ) => {
    
    const columns = getColumns ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
        / >
    )
}

Asinkron (Terkendali):

Gunakan alur ini jika Anda perlu mengambil data secara asinkron, dan ingin react-grid-table mengelolanya secara internal, namun tetap dapat menggunakannya di tempat lain dalam aplikasi.
Semua data dipasok ke tabel melalui prop onRowsRequest , tetapi dikontrol oleh komponen induk melalui prop rows , onRowsChange , totalRows & onTotalRowsChange .

Alat peraga yang diperlukan :

nama jenis keterangan
diPermintaan Baris* fungsi asinkron Harus mengembalikan janji yang diselesaikan ke {rows, totalRows}
baris* susunan objek data baris (detail)
diRowsChange* fungsi Harus digunakan untuk mengatur data saat ini
totalBaris* nomor Harus berisi panjang data saat ini
diTotalRowsChange* fungsi Harus digunakan untuk mengatur panjang data saat ini

Contoh: 

 export const AsyncControlledTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let [ rows , setRows ] = useState ( ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
            rows = { rows }
            onRowsChange = { setRows }
            totalRows = { totalRows }
            onTotalRowsChange = { setTotalRows }
        / >
    )
}

Asinkron (Terkelola):

Gunakan jika Anda perlu mengambil data yang tidak sinkron, dan mengelolanya sendiri (Berguna ketika ada tempat lain yang seharusnya bisa mengambil data yang sama).
Semua data dipasok ke tabel melalui prop rows , yang harus diperbarui menggunakan prop onRowsRequest .
Catatan : react-grid-table belum tentu meminta data secara bersamaan, yang berarti "lubang" pada data mungkin saja terjadi. "Lubang" ini perlu diisi dengan item nol/tidak terdefinisi untuk memastikan fungsinya dengan baik.

Untuk mencapai hal ini, Anda dapat menggunakan: 

 let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )

Alat peraga yang diperlukan :

nama jenis keterangan
diPermintaan Baris* fungsi asinkron Harus memperbarui alat peraga baris sesuai permintaan
baris* susunan objek data baris (detail)
totalBaris* nomor Harus berisi panjang data saat ini
diRowsReset* fungsi Harus digunakan untuk mengatur ulang data saat ini. Akan dipanggil ketika sortir atau searchText berubah

Contoh: 

 const controller = new AbortController ( ) ;

export const AsyncManagedTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let rowsRef = useRef ( [ ] ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
            signal : controller . signal ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;

        rowsRef . current = tableManager . asyncApi . mergeRowsAt ( rowsRef . current , response . items , requestData . from ) ;

        setTotalRows ( response . totalItems ) ;
    }

    const onRowsReset = ( ) => {
        rowsRef . current = [ ] ;
        setTotalRows ( ) ;
        controller . abort ( ) ;
    }

    return (
        < GridTable
            columns = { columns }
            rows = { rowsRef . current }
            onRowsRequest = { onRowsRequest }
            onRowsReset = { onRowsReset }
            totalRows = { totalRows }
            requestDebounceTimeout = { 500 }
        / >
    )
}

Pengeditan Baris

Pengeditan baris dapat dilakukan dengan merender tombol edit menggunakan properti cellRenderer pada konfigurasi kolom, kemudian ketika diklik akan mengontrol prop editRowId , kemudian tabel akan merender komponen pengeditan untuk kolom yang didefinisikan sebagai editable (true secara default) , dan seperti yang didefinisikan di editorCellRenderer yang secara default akan merender input teks.

Contoh: 

 // state
const [ rowsData , setRows ] = useState ( MOCK_DATA ) ;

// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)

// columns
let columns = [
    ... ,
    {
        id : 'my-buttons-column' ,
        width : 'max-content' ,
        pinned : true ,
        sortable : false ,
        resizable : false ,
        cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => (
            < button 
                style = { { marginLeft : 20 } } 
                onClick = { e => tableManager . rowEditApi . setEditRowId ( data . id ) }
            > &#x270E; < / button >
        ) ,
        editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
            < div style = { { display : 'inline-flex' } } >
                < button 
                    style = { { marginLeft : 20 } } 
                    onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
                > &#x2716; < / button >
                < button 
                    style = { { marginLeft : 10 , marginRight : 20 } } 
                    onClick = { e => {
                        let rowsClone = [ ... rowsData ] ;
                        let updatedRowIndex = rowsClone . findIndex ( r => r . id === data . id ) ;
                        rowsClone [ updatedRowIndex ] = data ;

                        setRowsData ( rowsClone ) ;
                        tableManager . rowEditApi . setEditRowId ( null ) ;
                    }
                } > &#x2714; < / button >
            < / div >
        )
    }
] ;

// render
< GridTable 
    columns = { columns }
    rows = { rowsData } 
    //editRowId={editRowId}
    //onEditRowIdChange={setEditRowId}
    . . .
/ >

Untuk kolom yang menyimpan nilai selain string, Anda harus mendefinisikan fungsi setValue pada kolom sehingga nilai yang diperbarui tidak akan menggantikan nilai asli.

Contoh: 

setValue: ( { value , data , setRow , column } ) => {
    // value: '35', 
    // data: { ..., columnField: { fieldToUpdate: '27' }} 
    let rowClone = { ... data } ;
    rowClone [ column . field ] . fieldToUpdate = value ;
    setRow ( rowClone ) ;
}

Penataan gaya

Penataan gaya dilakukan oleh kelas CSS yang dapat Anda timpa dengan mudah. komponen tabel dipetakan dengan kelas yang telah ditentukan sebelumnya yang harus mencakup situasi apa pun, dan Anda dapat menambahkan kelas khusus Anda sendiri per kolom dalam konfigurasi columns menggunakan properti className .

Komponen Semua pemilih kelas yang tersedia
Pembungkus rgt-wrapper
Tajuk rgt-header-container
Mencari rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight
Manajer Visibilitas Kolom rgt-columns-manager-wrapper rgt-columns-manager-button rgt-columns-manager-button-active rgt-columns-manager-popover rgt-columns-manager-popover-open rgt-columns-manager-popover-row rgt-columns-manager-popover-title rgt-columns-manager-popover-body
Meja rgt-container rgt-container-overlay
Sel Tajuk rgt-cell-header rgt-cell-header-[column.field] rgt-cell-header-checkbox rgt-cell-header-virtual-col rgt-cell-header-sortable / rgt-cell-header-not-sortable rgt-cell-header-sticky rgt-cell-header-resizable / rgt-cell-header-not-resizable rgt-cell-header-searchable / rgt-cell-header-not-searchable rgt-cell-header-pinned rgt-cell-header-pinned-left / rgt-cell-header-pinned-right rgt-cell-header-inner-not-pinned-right [column.className] rgt-cell-header-inner rgt-cell-header-inner-checkbox rgt-resize-handle rgt-sort-icon rgt-sort-icon-ascending / rgt-sort-icon-descending rgt-column-sort-ghost
Sel rgt-cell rgt-cell-[column.field] rgt-row-[rowNumber] rgt-row-odd / rgt-row-even rgt-row-hover rgt-row-selectable / rgt-row-not-selectable rgt-cell-inner rgt-cell-checkbox rgt-cell-virtual rgt-cell-pinned rgt-cell-pinned-left / rgt-cell-pinned-right rgt-cell-editor rgt-cell-editor-inner rgt-cell-editor-input rgt-row-selected rgt-placeholder-cell rgt-row-edit
catatan kaki rgt-footer rgt-footer-right-container
Paginasi rgt-footer-pagination rgt-footer-pagination-button rgt-footer-pagination-input-container rgt-footer-page-input
Informasi rgt-footer-items-information rgt-footer-clear-selection-button
Ukuran Halaman rgt-footer-page-size rgt-footer-page-size-select
(Utilitas) rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child

Lisensi

©MIT

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua