Ngorei NexaUI

Table

Dokumentasi komponen Table yang dapat digunakan dalam NexaUI framework.

Tabel Dasar

Tabel dengan tampilan sederhana dan bersih.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Components


<table class="nx-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>


. . .

Tabel dengan Border

Tabel dengan border di setiap sel.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Components


<table class="nx-table nx-table-bordered">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>


. . .

Tabel Bergaris

Tabel dengan latar belakang bergaris-garis.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

Components


<table class="nx-table nx-table-striped">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
  </tbody>
</table>


. . .

Tabel Responsif

Tabel yang dapat di-scroll horizontal pada layar kecil.

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6
Data 1	Data 2	Data 3	Data 4	Data 5	Data 6

Components


<div class="nx-table-responsive">
  <table class="nx-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>


. . .

Tabel Compact

Tabel dengan padding yang lebih kecil.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Components


    <table class="nx-table nx-table-compact">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
        </tr>
      </tbody>
    </table>


. . .

Tabel dengan Hover

Tabel dengan efek hover saat kursor berada di atas baris.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Components


<table class="nx-table nx-table-hover">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>


. . .

Tabel Header Berwarna

Tabel dengan header yang memiliki warna latar belakang.

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3

Components


<table class="nx-table nx-table-header-primary">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>


. . .

Tabel dengan Ukuran

Tabel dengan berbagai ukuran padding.

Tabel Kecil	Header 2
Data 1	Data 2

Tabel Besar	Header 2
Data 1	Data 2

Components


<table class="nx-table nx-table-sm">
  <thead>
    <tr>
      <th>Tabel Kecil</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

<table class="nx-table nx-table-lg">
  <thead>
    <tr>
      <th>Tabel Besar</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>


. . .

Tabel dengan Status

Tabel dengan warna baris sesuai status atau konteks.

Status	Deskripsi
Sukses	Item berhasil diproses
Peringatan	Perlu perhatian
Gagal	Terjadi kesalahan

Components


<tr class="nx-table-success">
  <td>Sukses</td>
  <td>Item berhasil diproses</td>
</tr>
<tr class="nx-table-warning">
  <td>Peringatan</td>
  <td>Perlu perhatian</td>
</tr>
<tr class="nx-table-danger">
  <td>Gagal</td>
  <td>Terjadi kesalahan</td>
</tr>


. . .

Tabel dengan Pagination

Tabel dengan navigasi halaman untuk data yang banyak.

Header 1	Header 2
Data 1	Data 2

Components


<div class="nx-table-container">
  <table class="nx-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
  <div class="nx-table-pagination">
    <button class="nx-btn nx-btn-sm">Sebelumnya</button>
    <div class="nx-pagination-numbers">
      <button class="nx-btn nx-btn-sm nx-active">1</button>
      <button class="nx-btn nx-btn-sm">2</button>
      <button class="nx-btn nx-btn-sm">3</button>
    </div>
    <button class="nx-btn nx-btn-sm">Selanjutnya</button>
  </div>
</div>


. . .

Tabel dengan Sorting

Tabel dengan kemampuan mengurutkan data.

Nama ↕	Usia ↕	Kota ↕
Budi	25	Jakarta
Ani	22	Bandung
Citra	28	Surabaya

Components


<table class="nx-table nx-table-sortable">
  <thead>
    <tr>
      <th class="sortable">Nama ↕</th>
      <th class="sortable">Usia ↕</th>
      <th class="sortable">Kota ↕</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Budi</td>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <td>Ani</td>
      <td>22</td>
      <td>Bandung</td>
    </tr>
    <tr>
      <td>Citra</td>
      <td>28</td>
      <td>Surabaya</td>
    </tr>
  </tbody>
</table>


. . .

Tabel dengan Filter

Tabel dengan kemampuan memfilter data.

Nama	Posisi	Kantor
Budi Santoso	Developer	Jakarta
Ani Wijaya	Designer	Bandung
Citra Dewi	Manager	Surabaya

Components


  <div class="nx-table-filter">
    <input type="text" class="nx-input" placeholder="Cari data...">
  </div>
  <table class="nx-table nx-table-filterable">
    <thead>
      <tr>
        <th>Nama</th>
        <th>Posisi</th>
        <th>Kantor</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Budi Santoso</td>
        <td>Developer</td>
        <td>Jakarta</td>
      </tr>
      <tr>
        <td>Ani Wijaya</td>
        <td>Designer</td>
        <td>Bandung</td>
      </tr>
      <tr>
        <td>Citra Dewi</td>
        <td>Manager</td>
        <td>Surabaya</td>
      </tr>
    </tbody>
  </table>


. . .

Tabel dengan Selection

Tabel dengan checkbox untuk memilih baris.

	Nama	Status
	Dokumen 1	Aktif
	Dokumen 2	Draft

Components


<table class="nx-table nx-table-selectable">
  <thead>
    <tr>
      <th>
        <input type="checkbox" class="nx-checkbox" id="selectAll">
      </th>
      <th>Nama</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="nx-checkbox">
      </td>
      <td>Dokumen 1</td>
      <td>Aktif</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="nx-checkbox">
      </td>
      <td>Dokumen 2</td>
      <td>Draft</td>
    </tr>
  </tbody>
</table>


. . .

Tabel Bersarang

Tabel dengan data bersarang yang dapat dibuka/tutup.

Departemen

Jumlah Staff

Nama	Posisi
Andi	Frontend Developer
Budi	Backend Developer

Components


<table class="nx-table nx-table-nested">
  <thead>
    <tr>
      <th></th>
      <th>Departemen</th>
      <th>Jumlah Staff</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-row">
      <td>
        <button class="nx-btn nx-btn-icon nx-btn-sm toggle-nested">+</button>
      </td>
      <td>IT</td>
      <td>15</td>
    </tr>
    <tr class="nested-row hidden">
      <td colspan="3">
        <table class="nx-table nx-table-sm">
          <thead>
            <tr>
              <th>Nama</th>
              <th>Posisi</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Andi</td>
              <td>Frontend Developer</td>
            </tr>
            <tr>
              <td>Budi</td>
              <td>Backend Developer</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


. . .

Tabel Kustom

Contoh tabel dengan styling kustom.

No	Produk	Harga	Aksi
1	Nama Produk Kategori	Rp 150.000

Components


<table class="nx-table nx-table-custom">
  <thead>
    <tr>
      <th class="text-center">No</th>
      <th>Produk</th>
      <th class="text-right">Harga</th>
      <th class="text-center">Aksi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">1</td>
      <td>
        <div class="product-cell">
          <img src="path/to/product.jpg" alt="Produk" class="product-image">
          <div>
            <div class="product-name">Nama Produk</div>
            <div class="product-category">Kategori</div>
          </div>
        </div>
      </td>
      <td class="text-right">Rp 150.000</td>
      <td class="text-center">
        <div class="action-buttons">
          <button class="nx-btn nx-btn-sm nx-btn-primary">Edit</button>
          <button class="nx-btn nx-btn-sm nx-btn-danger">Hapus</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>


. . .