Lewati ke konten utama

Table

Komponen tabel yang fleksibel dengan sub-komponen untuk columns, rows, cell, dan sorting.

<laraliveui:table>
<laraliveui:table.columns>
<laraliveui:table.column label="Nama" sortable />
<laraliveui:table.column label="Email" />
<laraliveui:table.column label="Aksi" align="right" />
</laraliveui:table.columns>
<laraliveui:table.rows>
<laraliveui:table.row>
<laraliveui:table.cell>John Doe</laraliveui:table.cell>
<laraliveui:table.cell>john@example.com</laraliveui:table.cell>
<laraliveui:table.cell align="right">
<laraliveui:button size="sm">Edit</laraliveui:button>
</laraliveui:table.cell>
</laraliveui:table.row>
</laraliveui:table.rows>
</laraliveui:table>

Hover & Striped

<laraliveui:table.rows hover striped>
<laraliveui:table.row>
<laraliveui:table.cell>Data</laraliveui:table.cell>
</laraliveui:table.row>
</laraliveui:table.rows>

Sortable

<laraliveui:table.columns>
<laraliveui:table.column label="Nama" sortable />
</laraliveui:table.columns>
<laraliveui:table.columns sticky>
<laraliveui:table.column label="Nama" />
</laraliveui:table.columns>

Alignment

<laraliveui:table.column label="Aksi" align="right" />
<laraliveui:table.cell align="center">Konten</laraliveui:table.cell>

Referensi

laraliveui:table

Container tabel.

laraliveui:table.columns

PropDeskripsi
stickyHeader tetap saat scroll

laraliveui:table.column

PropDeskripsiDefault
labelTeks header kolom
nameNama kolom
sortableTampilkan tombol sortfalse
widthLebar kolom (CSS)
alignAlignment: left, center, rightleft

laraliveui:table.rows

PropDeskripsi
hoverEfek hover pada row
stripedEfek striped (ganjil/genap)

laraliveui:table.row

PropDeskripsi
hoverEfek hover
stripedEfek striped

laraliveui:table.cell

PropDeskripsiDefault
alignAlignment: left, center, rightleft

laraliveui:table.sortable

PropDeskripsiDefault
nameNama kolom
directionArah sort: asc, descasc