Table Component

Table Component adalah komponen untuk menampilkan data dalam bentuk tabel dengan fitur pagination. Komponen ini memudahkan pengembang untuk menampilkan data dari database dengan format yang terstruktur.

Struktur Dasar

<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Email</th>
      <th>Desa</th>
    </tr>
  </thead>
  <tbody
    data="demo"
    fields="id,nama,email,desa"
    keyextractor="item"
    page="1"
    perpage="5"
    orderby="id DESC"
  >
    <tr>
      <td>{item.id}</td>
      <td>{item.nama}</td>
      <td>{item.email}</td>
      <td>{item.desa}</td>
    </tr>
  </tbody>
</table>

Atribut tbody

Atribut	Deskripsi	Tipe	Wajib
data	Nama tabel database yang akan ditampilkan	string	Ya
fields	Daftar kolom yang akan ditampilkan, dipisahkan dengan koma	string	Ya
keyextractor	Nama variabel yang digunakan untuk mengakses data item	string	Ya
page	Halaman yang aktif, dapat menggunakan variabel slug	number|string	Ya
perpage	Jumlah item per halaman	number	Ya
orderby	Pengurutan data (contoh: "id DESC")	string	Tidak

Pagination

Table Component terintegrasi dengan komponen Pagination untuk navigasi halaman:

<Pagination nx-path="exam/exp/" nx-current="1" />

Atribut Pagination

Atribut	Deskripsi	Tipe	Wajib
nx-path	Path URL untuk navigasi halaman	string	Ya
nx-current	Halaman aktif, biasanya menggunakan variabel slug	number|string	Ya

Contoh Penggunaan

Berikut contoh lengkap penggunaan Table Component dengan Pagination:

<Nexa module="(Table,Pagination)" from="Tatiye" />
<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Email</th>
      <th>Desa</th>
    </tr>
  </thead>
  <tbody
    data="user"
    fields="id,nama,email,desa"
    keyextractor="item"
    page="1"
    perpage="5"
    orderby="id DESC"
  >
    <tr>
      <td>{item.id}</td>
      <td>{item.nama}</td>
      <td>{item.email}</td>
      <td>{item.desa}</td>
    </tr>
  </tbody>
</table>
<Pagination nx-path="exam/exp/" nx-current="1" />

Catatan Penting

• Pastikan modul Table dan Pagination diaktifkan dengan tag Nexa
• Gunakan keyextractor untuk mengakses data item dalam template
• Sesuaikan fields dengan kolom yang ada di database
• Pagination akan otomatis menyesuaikan dengan jumlah data dan perpage
• Gunakan variabel slug untuk halaman dinamis