Paket | Durasi | Harga | Action |
---|
Paket | Durasi | Harga | Action |
---|
Memahami & mempraktikkan konfigurasi laravel-datatables fundamental sampai konfigurasi tingkat lanjutan.
Artikel terkait:
Mohon dipahami untuk siapa ebook ini dibuat sebelum membeli.
Panduan ini TIDAK bertujuan untuk:
Harapan setelah membaca panduan ini, pembaca bisa:
DataTables
pada projek Laravel dengan pemrosesan di server;Datatables
untuk berbagai macam use case sampai advanced use case;HTML builder
dan Buttons
;Dalam menuliskan panduan ini, saya menggunakan framework Laravel dan beberapa tool maupun package yang diperlukan.
Untuk kelancaran dalam mengikuti panduan ini, pastikan kamu menggunakan versi yang sama atau lebih baru:
Sebelum memulai mempraktikkan apa yang ada di panduan ini, kamu harus sudah memasang composer
dan/atau laravel installer
serta NodeJS
.
NodeJS
diperlukan untuk melakukan build terhadap asset javascript
yang digunakan oleh DataTable.
Sementara untuk framework Laravel
dan package yajra/laravel-datatables
akan kita pasang setelah ini, kamu tinggal ikuti saja secara langkah demi langkah.
Berikut persiapan yang harus kamu ikuti dan praktikan di komputermu.
latihan-datatable
untuk project latihan di panduan ini menggunakan phpmyadmin atau tool lain sesuai favoritmu.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=latihan-datatable
DB_USERNAME=root
DB_PASSWORD=password
php artisan migrate
php artisan db:seed
php artisan serve --port xxxx
(ganti xxxx dengan angka port yang kamu inginkan)yajra/laravel-datatables
DataTable sebetulnya merupakan sebuah pustaka untuk jQuery
yang bisa digunakan untuk membuat table interaktif dengan mudah, alamat websitenya adalah https://datatables.net.
Jika ingin menggunakan datatable di Laravel secara langsung akan cukup merepotkan, oleh karena itu kita akan menggunakan package yajra/laravel-datatables
yang akan membuat integrasi DataTable ke Laravel
menjadi lebih nyaman dan terasa seperti di rumah, karena kita akan menggunakan sintaks dan kemudahan fitur di Laravel.
Selain itu, package yajra/laravel-datatables
ini sudah secara bawaan mendukung pemrosesan DataTable melalui server, bukan client side only, dengan jauh lebih mudah dan sederhana (dengan cara Laravel).
Sebelum menggunakannya, kita harus menginstall terlebih dahulu dan melakukan konfigurasi awal terhadap package ini. Mari kita mulai.
yajra/laravel-datatables
Buka terminal / cmd lalu pindah ke direktori projek yang sudah kamu clone sebelumnya.
Jalankan perintah berikut di terminal:
composer require yajra/laravel-datatables
Jika berhasil, maka package laravel-datatables
akan terpasang di project kita.
informasi
Package Laravel DataTable
ini memiliki dua cara untuk menginstall, pertama kita install satu per satu masing-masing component di datatable. Yang kedua menginstall seluruh package seperti yang kita lakukan di atas. Kita memilih cara kedua, karena kita akan menggunakan plugin buttons dan HTML juga, jadi kita install sekalian saja.
Setelah itu kita perlu melakukan publish assets datatables yang akan kita gunakan dengan perintah berikut:
php artisan vendor:publish --tag=datatables
Jika sudah maka kita akan dapati pesan kurang lebih seperti berikut:
Copied File [/vendor/yajra/laravel-datatables-oracle/src/config/datatables.php] To [/config/datatables.php]
Publishing complete.
Itu artinya publish telah berhasil dan sekarang kita memiliki file konfigurasi DataTable pada config/datatables.php
.
Lalu kita juga perlu mempublish asset untuk plugin DataTable yaitu Buttons
dengan perintah ini:
php artisan vendor:publish --tag=datatables-buttons
Jika sudah kamu akan mendapati pesan log di terminal kurang lebih seperti ini:
Copied File [/vendor/yajra/laravel-datatables-buttons/src/config/config.php] To [/config/datatables-buttons.php]
Copied File [/vendor/yajra/laravel-datatables-buttons/src/resources/assets/buttons.server-side.js] To [/public/vendor/datatables/buttons.server-side.js]
Copied Directory [/vendor/yajra/laravel-datatables-buttons/src/resources/views] To [/resources/views/vendor/datatables]
Itu menandakan assets yang diperlukan sekarang sudah dipublish, yaitu file:
/config/datatables-button.php
/public/vendor/datatables/buttons.server-side.js
dan/resources/views/vendor/datatables
Aset di atas akan kita pakai setelah ini.
Berikutnya kita juga memasang package laravel/ui
, ini karena sejak Laravel versi 8, laravel/ui
merupakan package terpisah. Selain itu, kita memasang laravel/ui
juga karena DataTables
memerlukannya.
Jalankan perintah ini:
composer require laravel/ui --dev
Kemudian kita juga akan mengaktifkan otentikasi bawaan dengan laravel/ui
dan menggunakan bootstrap
sebagai CSS frameworknya, sekali lagi karena datatable memerlukan bootstrap, jalankan perintah berikut:
php artisan ui bootstrap --auth
Perintah tersebut selain menginstall dependency juga akan membuat sebuah file yaitu resources/scss/app.scss
yang akan kita pakai untuk menaruh asset datatable.
Setelah itu kita perlu menginstall dependency javascript dengan perintah berikut:
yarn install
atau jika kamu menggunakan NPM, gunakan perintah berikut:
npm install
Jika sebelumnya kita sudah mempublish asset package yajra/laravel-datatables
maka sekarang kita perlu juga menginstall asset yang diperlukan oleh pustaka datatables.net
yang akan dicompile ke file javascript kita menggunakan laravel mix.
Oleh karena itu kita akan menginstallnya menggunakan yarn
atau npm
seperti ini:
yarn add datatables.net-bs4 datatables.net-buttons-bs4
Jika menggunakan npm
:
npm install datatables.net-bs4 datatables.net-buttons-bs4 --save
bootstrap.js
dan app.scss
Setelah itu, kita buka file resources/js/bootstrap.js
kemudian tambahkan kode di bawah ini:
// .... kode sebelumnya ... // require('bootstrap'); require('datatables.net-bs4'); require('datatables.net-buttons-bs4');
resources/js/boostrap.js
Dan kita buka file resources/scss/app.scss
kemduian tambahkan kode berikut:
// ... kode sebelumnya ... // // DataTables @import "~datatables.net-bs4/css/dataTables.bootstrap4.css"; @import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";
resources/scss/app.scss
Jika sudah maka sekarang kita perlu melakukan kompilasi asset untuk javascript dan css kita, karena kita sudah melakukan penambahan-penambahan asset di atas.
Jalankan perintah:
yarn dev
atau jika menggunakan npm
:
npm run dev
Jika sudah selesai perintah tersebut dieksekusi, kita siap untuk membuat datatable pertama kita.
Buka file resources/views/layouts/app.blade.php
kemudian pada bagian head
hapus script berikut:
<script src="{{ asset('js/app.js') }}"></script>
Kemudian setelah </body>
tambahkan script yang diperlukan untuk DataTable berikut:
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@stack('scripts')
Jika kamu sudah mengikuti seluruh step di atas, kemudian mengalami kendala Table tidak muncul terutama terkait error Datatable is not a function
.
Kamu bisa coba tambahkan javascript berikut di view mu:
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
Error ini mungkin akan dialami oleh kamu yang mencoba integrate dengan Template css atau menggunakan starter Jetstream.
Untuk menggunakan DataTable di Laravel, pertama kita perlu melakukan instalasi package yajra/laravel-datatbles
kemudian melakukan konfigurasi dan penyesuaian awal. Penyesuaian ini hanya dilakukan sekali saja yaitu sesaat setelah menginstall di projek Laravel kita.
Sebelumnya kita telah belajar beberapa cara untuk mengubah DataTable yang dihasilkan oleh package yajra/laravel-datatables
.
Kita menggunakan instance dari dataTable
maupun plugin HTML builder
.
Pada bab ini, kita akan lebih berfokus lagi pada fungsi-fungsi yang disediakan oleh plugin HTML builder
.
Sebagai pengingat kembali bahwa package yajra/laravel-datatables
terdiri dari package inti yaitu dataTable
ditambah dengan 3 plugin tambahan yaitu HTML builder
, buttons
dan editor
.
Plugin HTML builder
ini memudahkan kita untuk membuat markup yang dibutuhkan untuk menampilkan DataTable, sementara package dataTable
sendiri lebih bertanggungjawab terhadap pengambildan dan pemrosesan data untuk DataTable. Seperti yang telah kita pelajari sebelumnya pada bab "Datatable service".
Baik, langsung saja kita mulai membahas lebih detail plugin HTML builder
.
Pertama tentu konfigurasi, sebelumnya kita sudah mengupas konfigurasi global pada bab "Konfigurasi". Pada bab tersebut, konfigurasi yang kita bahas adalah konfigurasi untuk package inti dataTable
.
Sementara konfigurasi di sini adalah konfigurasi khusus terkait plugin HTML builder
.
Jika kamu belum mempublish asset konfigurasi HTML builder
, maka kamu jalankan perintah berikut pada terminal/cmd untuk mempublikasikannya:
php artisan vendor:publish --tag=datatables-html
Maka kamu akan mendapatkan pesan kurang lebih seperti ini:
Copied Directory [/vendor/yajra/laravel-datatables-html/src/resources/views] To [/resources/views/vendor/datatables]
Copied File [/vendor/yajra/laravel-datatables-html/src/resources/config/config.php] To [/config/datatables-html.php]
Kemudian kamu buka file config/datatabels-html.php
kamu akan mendapati beberapa konfigurasi yang bisa kamu ubah. Untuk memahaminya kita akan bahas satu per satu sekarang.
namespace
Konfigurasi ini mengatur namespace
javascript yang akan digunakan di browser. Nilai bawaan dari konfigurasi ini adalah LaravelDataTables
.
table
Ini merupakan konfigurasi yang mengatur terkait element table
yang digunakan untuk merender DataTable di sisi klien. Terdapat 2 konfigurasi yaitu:
class
class
digunakan untuk memberikan class
pada element html table
yang digunakan untuk merender DataTable. Nilai bawaannya adalah table
.
id
id
digunakan untuk memberikan atribut id
pada elemen html table
yang digunakan untuk merender DataTable. Nilai bawaannya adalah dataTableBuilder
. Mungkin juga untuk dioverride dengan setTableId
.
callback
callback
bernilai Array
yang berisi string. Masing-masing string pada Array
ini ditandai sebagai callback
sehingga tidak akan diubah menjadi string
oleh HTML builder
. Nilai bawaanya adalah ['$', '$.', 'function']
script
script
digunakan untuk mengatur, file views mana yang akan dipakai untuk merender script
, yakni saat kita memanggil $table->scripts()
seperti pada file resources/views/users/index.blade.php
.
Nilai bawaanya adalah datatables::script
yang mereferensikan file resources/views/vendor/datatables/script.blade.php
.
editor
editor
digunakan untuk mengatur, file views mana yang akan dipakai untuk merender editor
.
Nilai bawaanya adalah datatables::editor
yang mereferensikan file resources/views/vendor/datatables/editor.blade.php
.
Demikianlah konfigurasi untuk plugin HTML builder
pada package yajra/laravel-datatables
. Selanjutnya kita akan kembali berkutat dengan kode.
Sebelumnya kita sudah berhasil melakukan penambahan maupun menampilkan kolom pada DataTable. Judul kolomnya masih menggunakan perilaku bawaan yaitu, nama kolom dijadikan tiap awal huruf kapital. Misalnya email
menjadi Email
sebagai judul kolom. Atau created_at
menjadi Created At
.
Nah, kita bisa juga mengganti judul kolom secara custom untuk tiap-tiap kolom dengan perintah title
pada saat mendefinisikan kolom seperti ini:
Buka file app/DataTables/UsersDataTable.php
lalu pada method getColumns()
kita akan mengubah judul kolom email
dengan Surel
dan name
dengan Nama Lengkap
maka kita lakukan seperti ini:
protected function getColumns()
{
return [
Column::computed('action')
->width(160)
->addClass('text-center'),
Column::make('id'),
Column::make('email')->title('Surel'),
Column::make('name')->title('Nama Lengkap'),
Column::make('created_at'),
Column::make('updated_at'),
];
}
Silahkan refresh kembali halaman http://localhost:xxxx/users, maka kamu akan melihat kolom Email
menjadi Surel
dan kolom Name
menjadi Nama Lengkap
.
Sejauh ini DataTable kita sudah memiliki input pencarian di sisi kanan atas. Selain input ini kita juga bisa menambahkan input pencarian di tiap-tiap kolom.
Kita buka kembali file app/DataTables/UsersDataTable.php
, kemudian pada method html()
kita akan mengkonfigurasikan HTML builder
untuk menggunakan method parameters()
.
Method parameter()
ini digunakan untuk memberikan atribut DataTable, di sini kita bisa memberikan Javascript callback
.
Dengan memanfaatkan callback
yaitu pada initComplete
alias sesaat setelah DataTable berhasil dibuat di sisi klien, kita akan menambahkan input pencarian di footer masing-masing kolom dengan kode javascript.
Pertama kita definisikan dulu callback initComplete
seperti ini:
public function html()
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(2, 'desc')
->parameters([ 'initComplete' => 'function(){ alert("Hello") }' ]) ->buttons(
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
);
}
Perhatikan pada baris 9 - 13, kita menggunakan method parameter()
yang menerima associative Array
, dan memberikan initComplete
bernilai string yang berisi kode fungsi javascript. Fungsi javascript tersebut hanya menggunakan alert("Hello")
untuk memudahkanmu memahami apa yang sedang terjadi.
Sekarang simpan, dan refresh http://localhost:xxx/users maka kamu akan melihat browser alert "Hello".
Sudah kebayang kan cara kerja callback
pada method parameter()
di atas? Kita akan lanjutkan untuk membuat input pencarian.
callback pada parameter()
Selain initComplete
ada beberapa jenis callback lainnnya yang akan kita bahas juga di bab ini.
Baik, mari kita lanjutkan untuk membuat input pencarian di masing-masing kolom. Pertama, kita harus looping dulu terhadap kolom yang ada di DataTable menggunakan javascript seperti ini:
->parameters([
'initComplete' => 'function(){
this.api().columns().every(function(index){ let column = this; }) }'
])
Kemudian kita akan membuat elemen input seperti ini:
->parameters([
'initComplete' => 'function(){
this.api().columns().every(function(index){
let column = this;
let input = document.createElement("input") })
}'
])
Lalu kita akan meletakkan input yang kita buat di footer masing-masing kolom seperti ini:
->parameters([
'initComplete' => 'function(){
this.api().columns().every(function(index){
let column = this;
let input = document.createElement("input")
$(input) .appendTo($(column.footer()).empty()) .on(\'change\', function () { column.search($(this).val(), false, false, true).draw(); });
})
}'
])
Tapi kita juga harus mencegah kolom yang sudah kita setting tidak bisa dicari searchable(false)
atau blacklist
atau computed
seperti pada bab sebelumnya, supaya tidak perlu ditambahkan input, caranya seperti ini:
->parameters([
'initComplete' => 'function(){
this.api().columns().every(function(index){
let column = this;
let input = document.createElement("input")
let isSearchable = this.settings()[0].aoColumns[index].bSearchable; if(!isSearchable) return;
$(input)
.appendTo($(column.footer()).empty())
.on(\'change\', function () {
column.search($(this).val(), false, false, true).draw();
});
})
}'
])
Perhatikan pada baris yang dihighlight, 7-8, kita mengecek apakah kolom termasuk yang bisa disearch, jika tidak bisa maka kita return
alias tidak menambahkan input pencarian.
Sekarang kode parameters()
pada method html()
di file app/DataTables/UsersDataTable.php
terlihat seperti ini:
public function html()
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(2, 'desc')
->parameters([ 'initComplete' => 'function(){ this.api().columns().every(function (index) { let column = this; let input = document.createElement("input"); let isSearchable = this.settings()[0].aoColumns[index].bSearchable; if(!isSearchable) return; $(input) .appendTo($(column.footer()).empty()) .on(\'change\', function () { column.search($(this).val(), false, false, true).draw(); }); }); }' ]) ->buttons(
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
);
}
Silahkan disimpan, lalu kamu coba buka http://localhost:xxxx/users, maka seharusnya sekarang tetap belum muncul, kenapa?
Karena secara bawaan DataTable kita tidak menampilkan footer, padahal kita menaruh input pencarian di footer. Oleh karena itu kita perlu sedikit memodifikasi file resources/views/users/index.blade.php
.
Ubah kode berikut:
{{$dataTable->table()}}
Menjadi seperti ini:
{{$dataTable->table([], true)}}
Parameter kedua true
memerintahkan DataTable untuk merender footer. Sementara parameter pertama merupakan atribut yang ingin kita berikan ke table, karena kita tidak perlu menambahkan apa-apa, kita berikan saja Array
kosong.
Sekarang coba refres halaman localhost:xxxx/users maka kamu akan melihat tampilan input pencarian di footer masing-masing kolom yang searchable.
Coba cari dengan keyword tertentu, lalu tekan Enter atau klik di luar input. Maka datatable akan menampilkan hasil sesuai keyword mu.
Kurang lebih tampilannya menjadi seperti ini (bisa sedikit berbeda sesuai settingan searchable
, blacklist
dan computed
di kode getColumns()
dan dataTable()
mu):
DataTable sebetulnya memiliki parameter bFilter
yang bisa kita set false
agar tidak menampilkan input pencarian global di kanan atas. Masalahnya ini akan menonaktifkan semua bentuk filter atau pencarian, termasuk jika kita menambahkan pencarian di masing-masing kolom seperti di bagian sebelumnya.
Jika bFilter
di set ke false
, pencarian per kolom tetap bisa menampilkan input pencarian, tetapi jika dilakukan pencarian dengan mengetik keyword tertentu, fungsi pencarian tersebut tidak jalan.
Maka, kita harus menggunakan cara sedikit manual, yaitu dengan mengubah style CSS.
Pertama kita ubah dulu layout yang kita pakai resources/views/layouts/app.blade.php
dan tambahkan kode berikut:
@stack("styles");
Letakkan kode di atas di antara <head> </head>
atau lebih tepatnya setelah deklarasi link CSS berikut:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
Gunanya agar layouts
tersebut menerima styles
dari views
di bawahnya.
Oke, selanjutnya kita buka file views
DataTable kita yaitu pada resources/views/uses/index.blade.php
kemudian kita tambahkan kode berikut:
@push('styles')
<style>
.dataTables_filter{
display: none
}
</style>
@endpush
Jika sudah kamu simpan kedua file di atas, lalu refresh http://localhost:xxxx/users dan sekarang input pencarian di kanan atas DataTable sudah tidak muncul. Dan pencarian di tiap-tiap kolom tetap berfungsi. Great!
Cara pertama yang kita lakukan merupakan cara manual, di situ kita jadi tahu bahwa kita bisa memodifikasi bagian dari DataTable asal kita tahu class dari elemen tertentu.
Tapi kabar baiknya, DataTable sudah memiliki pengaturan untuk menyembunyikan input pencarian global tanpa menghilangkan fungsi filter secara keseluruhan --beda dengan bFilter
.
Bagaimana caranya? Jika kamu perhatikan pada UsersDataTable
pada method html()
terdapat konfigurasi ->dom("Bfrtip"
bukan?
Apa sih kata-kata aneh itu? Bfrtip
? itu bukan mantra atau sesuatu yang abstrak. Tetapi memiliki arti karena kata tersebut merupakan konfigurasi tampilan DataTable bawaan.
Untuk menghilangkan input pencarian global, kita cukup hapus huruf f
di situ, yang berarti filter
sehingga menjadi Brtip
saja, seperti ini:
->dom('Brtip')
Silahkan coba kamu ubah, kemudian bahkan kamu hapus deklarasi CSS
yang sebelumnya dilakukan pada cara pertama. Maka kamu akan mendapati tampilan input pencarian global tetap tidak muncul dan fitur pencarian per kolom tetap berfungsi seperti sediakala.
Nah setelah ini kita bahas sebentar mengenai arti dari huruf-huruf lain pada Bfrtip
ya.
Berikut adalah arti dari konfigurasi tampilan DataTable yang sebelumnya kita pakai.
huruf | penjelasan |
---|---|
B | (B)uttons extension |
f | (f)ilter pencarian global |
t | (t)able dari DataTable itu sendiri |
i | (i)nformasi ringkasan table |
p | tombol (p)agination |
l | (l)ength alias opsi pilihan jumlah data yang ditampilkan per halaman |
Untuk menggunakan konfigurasi di atas dengan yajra/laravel-datatables
kita gunakan HTML builder
dengan method dom()
seperti sebelumnya, misalnya kita hanya ingin menampilkan tombol print dst dan tabel saja maka kita gunakan dom("Bt")
atau menampilkan pencarian juga seperti ini dom("Bft")
.
Urutan dari huruf-huruf tersebut juga berpengaruh ya, misalnya Bfrtip
dengan Bptipf
itu akan berbeda juga urutan elemen terkait di halaman DataTable.
Itu berarti jika kita ingin menampilkan tombol-tombol di bawah table maka kita harus letakkan B
setelah t
seperti ini misalnya dom("tB")
.
informasi
Khusus untuk t
meskipun kita tidak menuliskannya, DataTable tetap akan menampilkan tabel, hanya saja tabel urutannya akan ada di paling akhir di antara elemen-elemen lainnya.
Parameter digunakan untuk mengirimkan parameter
yang akan dipakai oleh DataTable. Method ini sudah kita gunakan saat kita membuat pencarian per kolom, yaitu untuk mendefinisikan javascript callback initComplete
.
Selain untuk keperluan callback
, parameter()
ini bisa kita berikan opsi lain sesuai dengan option yang disediakan oleh http://datatables.net,
Opsi lengkap bisa dibaca di https://datatables.net/reference/option/
Selain option untuk DataTable, method parameter()
pada HTML builder
juga bisa digunakan untuk set javascript callback DataTable. Berikut daftar callback yang bisa digunakan.
Callback | Penjelasan |
---|---|
createdRow | callback yang akan dipanggil kapanpun elemen <tr> dibuat di tabel |
drawCallback | Dipanggil setiap kali DataTable melakukan draw atau render |
footerCallback | callback untuk saat footer ditampilkan |
formatNumber | callback untuk formatting angka |
headerCallback | callback untuk saat header berubah |
infoCallback | callback untuk informasi ringkasan tabel |
initComplete | Dipanggil saat inisiasi DataTable selesai |
preDrawCallback | Dipanggil sebelum DataTable melakukan draw atau render |
rowCallback | Dipanggil saat terjadi perubahan row |
stateLoadCallback | callback untuk mendefinisikan di mana dan bagaiamana melakukan pemuatan state |
stateLoaded | Dipanggil saat state berhasil dimuat |
stateLoadParams | State dimuat - data manipulation callback |
stateSaveCallback | callback untuk mendefinisikan dimana dan bagaimana state disimpan |
stateSaveParams | State disimpan - data manipulation callback |
note
Contoh penggunaan callback adalah seperti saat kita membuat pencarian per kolom.
Dengan plugin HTML builder
, kita juga bisa menambahkan kolom checkbox menggunakan method addCheckbox
seperti ini:
public function html() { return $this->builder() ->setTableId('users-table') ->columns($this->getColumns()) ->minifiedAjax() ->dom('Bfrtip') ->orderBy(2, 'desc') ->addCheckbox() /** <-- perhatikan */ ->buttons( Button::make('create'), Button::make('export'), Button::make('print'), Button::make('reset'), Button::make('reload') ); }
app/DataTables/UsersDataTable.php
Coba refresh halaman localhost:xxxx/users maka kamu seharusnya melihat ada kolom yang berisi checkbox sebagai kolom paling kanan.
Untuk menjadikan checkbox berada di paling kiri, kita bisa gunakan parameter kedua bernilai true
seperti ini:
->addCheckbox([], true);
Parameter pertama merupakan atribut jika kita ingin menambahkan atribut ke dalam checkbox.
Sekarang coba refresh kembali dan sekarang posisi checkbox sudah berpindah.
Saat ini chekcbox kita belum berguna, kita akan membuatnya berguna di bab "Advanced Use Case".