CRUD Options

Property

Type

Required

Default

Description

endpointName

string

Isi dengan alamat URL endpoint. Ini akan memengaruhi proses get/post/put/delete.

gridTheme

string

"table"

Isi dengan pilihan "grid_card", "calendar", "treeview", "timeline", "gantt_chart".

data

object

null

Merupakan properti dasar untuk menentukan Kolom, Form, Filter, dan lainnya. Properti ini memiliki isi objek statis diantaranya dynamicColumns, dynamicForm, dynamicColumnsFilter, dynamicColumnsSearchFields, relationsCrud, dll. Contoh penulisan:

"data": {
      "dynamicColumns": [],
      "dynamicColumnsFilter": [],
      "dynamicForm": [],
      "dynamicColumnsSearchFields":[],
      "relationsCrud": {},
      "extraButtonOnDetailView": [],
      "extraCrud": []
   }

detailFromGrid

boolean

false

Secara default data yang akan ditampilkan pada semua form di halaman detail (Add/Edit/View) akan diambil dari data baris yang di klik. Set ke false jika kamu ingin aplikasi melakukan request lagi ke backend, request dari aplikasi seperti ini method: GET => {endPointName}/{id}

getAlwaysGrid

boolean

false

seperti aplikasi pada umumnya, setiap halaman di buka maka aplikasi melakukan get data lagi ke backend.

detailPage

boolean

false

Jika diatur dengan nilai (true), setiap kali kamu melakukan add / edit, kamu akan diarahkan ke halaman detail dengan tambahan alamat pada url /add, /edit/{id}. Jika diatur dengan nilai (false) atau propertinya tidak ditentukan, maka akan muncul sebuah modal.

serverSideGrid

boolean

false

Ketika diatur sebagai (true), aplikasi akan mengambil data dari backend dengan menambahkan parameter serverside seperti yang umumnya digunakan (length, page, sort, sort_desc, search). Tentu saja, backend aplikasi harus mendukung mekanisme serverside/pagination untuk memproses permintaan ini.

detailPageModalSize

string

"md"

Ukuran untuk tampilan modal ketika edit / tambah. Isi dengan pilihan ("xl", "lg", "md", "sm")

Properti ini hanya aktif jika properti detailPage = false.

detailPageFieldTitle

string or string array []

"id"

Tentukan nama field yang value nya akan dijadikan judul pada halaman detail / modal. Jika yang ditampilkan terdiri dari beberapa field maka gunakan string array, contoh ; ["key1", "key2", "'Static Value'"].

detailPageFieldTitleSeparator

string

" "

Separator / Pemisah dari string yang tebentuk oleh properti detailPageFieldTitle.

detailPageFieldTitleHeader

string or string array []

" "

detailPageFieldSubHeader

string or string array []

" "

Tentukan nama field yang value nya akan dijadikan sub judul pada halaman detail / modal. Jika yang ditampilkan terdiri dari beberapa field maka gunakan string array, contoh ; ["key1", "key2", "'Static Value'"].

deleteSelection

boolean

false

Untuk mekanisme multiple delete. Akan tampil checkbox pada setiap baris dan jika dilakukan delete data yang dipilih melalui checklist, maka payload akan dikirim ke backend menjadi sebuah array [].

disabledAdd

boolean

false

Jika di set ke true maka tombol Tambah akan hilang.

disabledEdit

boolean

false

Jika di set ke true maka tombol Edit akan hilang.

disabledDelete

boolean

false

Jika di set ke true maka tombol Delete akan hilang. Jika property deleteSelection (multiple-delete) true, maka checklist di setiap baris akan hilang/tidak aktif.

disabledAddCondition

array []

disabledEditCondition

array []

disabledDeleteCondition

array []

enabledViewBtnCondition

array []

getApiSummaryData

boolean

false

Jika diatur sebagai (true), tampilan card ringkasan akan ditampilkan sebelum card tabel. Secara default, properti ini akan mengambil data dari {endpointName}/summary. Pastikan respons dari backend juga disesuaikan. Sebagai contoh, respons dari backend mungkin berbentuk seperti ini:

getApiSummaryDataEndpointName

string

null

getApiSummaryDataWithParam

boolean

null

getApiAfterPut

boolean

false

Jika diaktifkan maka aplikasi akan get data kembali (refresh) ke backend setelah proses update berhasil.

getApiAfterPost

boolean

false

Jika diaktifkan maka aplikasi akan get data kembali (refresh) ke backend setelah proses tambah berhasil.

getApiAfterDelete

boolean

false

Jika diaktifkan maka aplikasi akan get data kembali (refresh) ke backend setelah proses delete berhasil.

afterEditReloadOtherPage

array []

afterAddReloadOtherPage

array []

afterDeleteReloadOtherDetailPage

array []

hideBtnSwitchLayout

boolean

false

hideTableSearchInput

boolean

false

hideTablePageLengthInfo

boolean

false

hideTablePagination

boolean

false

hideTableHeader

boolean

false

hideTableHeaderRight

boolean

false

hideTableSubHeader

boolean

false

customTableStyles

object

null

Baca Custom Styling.

resp_key

string

"data"

Penjelasan pada halaman Response Key Selector.

payloadType_POST

string

null

Penjelasan pada halaman Payload Type.

payloadType_PUT

string

null

Penjelasan pada halaman Payload Type.

payloadType_DELETE

string

null

Penjelasan pada halaman Payload Type.

endpointName_POST

string

null

Penjelasan pada halaman Custom Endpoint.

endpointName_POST_multi

string

null

Penjelasan pada halaman Custom Endpoint.

endpointName_PUT

string

null

Penjelasan pada halaman Custom Endpoint.

endpointName_DELETE

string

null

Penjelasan pada halaman Custom Endpoint.

endpointName_DELETE_multi

string

null

Penjelasan pada halaman Custom Endpoint.

removeDefaultHttpHeader

boolean

false

Penjelasan pada halaman Remove Default Header.

movePathIdToPayload_GET

boolean

false

Penjelasan pada halaman Move ID to Payload.

movePathIdToPayload_PUT

boolean

false

Penjelasan pada halaman Move ID to Payload.

movePathIdToPayload_DELETE

boolean

false

Penjelasan pada halaman Move ID to Payload.

tableFixedHeader

boolean

false

Adalah sebuah properti yang ketika diisi dengan nilai true, akan mengaktifkan header tabel yang tetap, serta menampilkan bilah gulir pada tabel.

tableFixedHeaderScrollHeight

string

null

Adalah ukuran tinggi tabel yang ditampilkan sehingga menyebabkan munculnya bilah gulir (scroll bar). Kamu dapat mengisinya dengan ukuran dalam piksel (px) atau dalam unit viewport height (vh), seperti "60vh" atau "300px".

tableHighlightOnHover

boolean

true

tablePointerOnHover

boolean

true

dynamicColumnsFieldsAuto

boolean

false

Properti ini hampir serupa dengan situasi tanpa deklarasi properti dynamicColumns. Nama dan jumlah kolom dalam tabel akan disesuaikan dengan respons dari backend saat mendapatkan data awal. Namun, perbedaannya adalah ketika properti ini diatur ke true, kamu masih dapat menambahkan properti dynamicColumns hanya untuk beberapa kolom yang akan diberi kondisi tertentu, sementara sisanya akan dihasilkan secara otomatis tanpa perlu dideklarasikan. Baca Global Properties.

dynamicColumnsGlobalProperties

object

null

Sebagai pelengkap properti dynamicColumnsFieldsAuto, properti ini digunakan untuk mendeklarasikan kolom pada semua kolom yang dihasilkan dari respons. Baca Global Properties

dynamicColumnsFilterPos

string

null

Memposisikan filter card. Isi dengan "table-header" jika dynamicColumnsFilter berada sejajar dengan tombol tambah. Baca Move To Table Header.

dynamicColumnsGroupByKey

dynamicColumnsGroupByLabel

dynamicColumnsGroupByKeyDisabledCollapse

boolean

rowClickEvent

string

null

isi dengan pilihan "view".

rowClickEval

btnAddTextPosition

string

isi dengan "header-1".

btnAddTextConditionDataFrom

object

btnAddTextCondition

array []

exportButton

array []

extraButton

array []

PreviousPage Properties NextDynamic Columns

Last updated 1 year ago

Was this helpful?