Table Supervision Component
TableSupervisionComponent adalah komponen tingkat lanjut di Next-Light yang menggabungkan tabel, form, detail view, aksi edit/hapus, hingga bulk action, semuanya dalam satu komponen otomatis. Komponen ini membaca konfigurasi dan endpoint API, lalu membentuk CRUD lengkap tanpa boilerplate tambahan.
Contoh Penggunaan
User
Memuat data...
Gagal
Berhasil
Kode berhasil di copy!
Properti Bawaan:
columnControl : (string | TableColumnType)[]
Skema kolom table, berisi string dari selector data atau TableColumnType
Kode berhasil di copy!
fetchControl : FetchControlType
Konfigurasi API untuk fetching data.
Kode berhasil di copy!
formControl : TableSupervisionFormProps
Skema untuk form create dan form edit.
Kode berhasil di copy!
forms : (string | FormType & { visibility?: "*" | "create" | "update" })[]
Skema formulir.
defaultValue : (item: Record<string, any> | null) => Record<string, any>
Custom default value input di awal load. properti item berasal dari selected item ketika edit.
payload : (values: Record<string, any>) => Record<string, any>
Custom payload yang dikirim ke API ketika submit.
modalControl : FloatingPageProps
Custom floating page formulir.
contentType : "application/json" | "multipart/form-data"
Mengganti content type ketika mengirim ke API.
detailControl : boolean | ({ columns : (string | ((data: Record<string, any>) => ReactNode))[], className ?: string }) | ((data: Record<string, any>) => ReactNode)
Skema tampilan pada halaman detail.
Kode berhasil di copy!
actionControl : boolean | ('edit' | 'delete' | { label: string, modal?: ModalConfirmProps, button?: ButtonProps } | ((row: object, setModal: (type: "EDIT" | "DELETE") => void, setDataSelected ?: () => void ) => ReactNode[]))[]
Skema tombol aksi table.
Kode berhasil di copy!
title : string
Judul tabel
Kode berhasil di copy!
Tambahan: Properti pada komponen table juga bisa digunakan dalam komponen table supervision.