Table Component
TableComponent adalah komponen tabel yang sangat fleksibel di Next-Light. Komponen ini memiliki fitur lengkap seperti sorting, searching, filtering, pagination, selectable rows, dan dukungan mode responsif untuk mobile dengan swipe action. Semua sistem kontrol tabel disediakan melalui props agar mudah diintegrasikan dengan backend API.
Contoh Penggunaan
Kode berhasil di copy!
Properti Bawaan:
columns : TableColumnType[]
Skema kolom table.
Kode berhasil di copy!
selector : string
Selector atau identify kolom
label : string
Label atau header kolom.
item : (data: any) => string | ReactNode
Bentuk render spesifik kolom.
tip : string | ((data: any) => string)
Tooltip kolom ketika di hover.
width : string
Statik lebar kolom (gunakan ukuran dalam css style).
sortable : boolean
Membuat kolom jadi bisa menjadi urutan data.
filterable : boolean | FilterableType
Membuat kolom jadi bisa di filter dan mendefinisikan jenis filter.
type : "text" | "number" | "currency" | "date" | "select"
Jenis filter.
options : { label: string; value: any }[]
Options untuk jenis filter select.
className : string
class style untuk spesifik kolom.
data : Record<string, any>[]
Isi data row tabel. Samakan key data dengan selector kolom untuk otomatis di tampilkan.
Kode berhasil di copy!
pagination : PaginationProps
Skema paginate table.
Kode berhasil di copy!
totalRow : string
Jumlah total row semua data
paginate : string
Jumlah data yang ditampilkan dalam 1 halaman.
page : string
Halaman yang aktif sekarang.
onChange : (totalRow: number, paginate: number, page: number) => void
Callback perubahan page / paginate.
className : string
Class style spesifik paginate.
loading : boolean
Membuat table menampilkan loading.
Kode berhasil di copy!
sortBy : string[]
Urutan data berdasarkan kolom, bentuk value sortBy "nama_kolom asc/desc".
Kode berhasil di copy!
onChangeSortBy : (sort: string[]) => void
Callback perubahan sortBy.
Kode berhasil di copy!
search : string
Keyword pencarian data.
Kode berhasil di copy!
onChangeSearch : (search: string) => void
Callback perubahan keyword pencarian data.
Kode berhasil di copy!
filter : ApiFilterType[]
Filter data yang ditampilkan.
Kode berhasil di copy!
column : string
Kolom yang di filter
type : "eq" | "ne" | "li" | "in" | "ni" | "bw"
Jenis metode filter: "eq" = Equal, "ne" = Not Equal, "li" = Like, "in" = In, "ni" = Not In, "bw" = Between.
logic : "and" | "or"
Jenis logika filter "and" = Where And, "or" = Where Or.
value : string | number | number[] | string[]
Filter value.
onChangeFilter : (filter: ApiFilterType[]) => void
Callback perubahan filter data.
Kode berhasil di copy!
controlBar : (false | "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode)[]
Pilih apa saja yang ditampilkan pada control di atas table. false untuk menyembunyikan control.
Kode berhasil di copy!
checks : (string | number)[]
Row yang dipilih untuk bulking action.
Kode berhasil di copy!
onChangeChecks : (checks: (string | number)[]) => void
Callback perubahan row yang dipilih untuk bulking action.
Kode berhasil di copy!
actionBulking : ((checks: (string | number)[]) => void) | false
Tampilkan bulking action ketika ada data yang dipilih.
Kode berhasil di copy!
onRowClick : (data: Record<string, any>, index: number) => void
Callback saat row table di klik.
Kode berhasil di copy!
onRefresh : () => void
Callback saat tombol refresh di klik.
Kode berhasil di copy!
block : boolean
Membuat table full satu halaman dan pagination mengambang di bawah halaman.
Kode berhasil di copy!
responsiveControl : TableResponsiveType
Membuat table mengikuti behavior user sesuai dengan device nya.
Kode berhasil di copy!
mobile : TableResponsiveMobileType
Menyesuaikan tampilan dan behavior user dengan device mobile.
item : (item: Record<string, any>, key: number) => ReactNode
Menyesuaikan tampilan row untuk di device mobile.
leftActionControl : SwipeActionType
Tampilan dan action ketika row di swipe ke kiri.
leftActionControl : SwipeActionType
Tampilan dan action ketika row di swipe ke kanan.
label : string
Label untuk swipe action.
icon : FontAwesomeIcon
Icon untuk swipe action.
onAction : (item: Record<string, any>, key?: number) => void
Callback untuk swipe action.
className : string
Class style untuk swipe action.
className : string
Mendukung custom styling menggunakan prefix: controller-bar::, head-column::, column::, floating-action::, row::