Tabel

Berikan columns dan rows dan tabelnya membangun dirinya sendiri, lengkap dengan kepalanya. Ia dibungkus wadah gulir mendatar, jadi tabel dengan lebih banyak kolom daripada yang bisa ditampilkan ponsel akan bergulir sendiri alih-alih meregangkan halamannya. Diekspor sebagai table sekaligus dataTable.

Tabel dasar

HalamanUkuranWaktu render
/4,1 kB12 ms
/docs12,7 kB31 ms
/examples9,4 kB24 ms
table({
  columns: [
    { key: 'page', header: 'Halaman' },
    { key: 'size', header: 'Ukuran' },
    { key: 'time', header: 'Waktu render' },
  ],
  rows: [
    { page: '/', size: '4,1 kB', time: '12 ms' },
    { page: '/docs', size: '12,7 kB', time: '31 ms' },
    { page: '/examples', size: '9,4 kB', time: '24 ms' },
  ],
})

Perataan

Angka lebih enak dibaca ketika diratakan ke ujung kolomnya.

HalamanBitaGzip
/4.1121.204
/docs12.7043.910
/examples9.3882.744
table({
  columns: [
    { key: 'page', header: 'Halaman' },
    { key: 'bytes', header: 'Bita', align: 'end' },
    { key: 'gzip', header: 'Gzip', align: 'end' },
  ],
  rows: [
    { page: '/', bytes: '4.112', gzip: '1.204' },
    { page: '/docs', bytes: '12.704', gzip: '3.910' },
    { page: '/examples', bytes: '9.388', gzip: '2.744' },
  ],
})

Sel khusus

Kolom dengan fungsi render menerima seluruh barisnya dan mengembalikan apa pun yang seharusnya ada di selnya — sebuah chip, tautan, atau angka terformat.

HalamanUkuranStatus
/docs/routing18,2 kBoke
/docs/data21,7 kBoke
/docs/islands24,1 kBgagal
table({
  columns: [
    { header: 'Halaman', render: (row) => link({ href: row.href }, row.page) },
    { key: 'size', header: 'Ukuran', align: 'end' },
    { header: 'Status', align: 'end', render: (row) =>
      chip({ size: 'sm', dot: true, color: row.ok ? 'success' : 'danger' }, row.ok ? 'oke' : 'gagal') },
  ],
  rows: [
    { page: '/docs/routing', href: '/docs/routing', size: '18,2 kB', ok: true },
    { page: '/docs/data', href: '/docs/data', size: '21,7 kB', ok: true },
    { page: '/docs/islands', href: '/docs/islands', size: '24,1 kB', ok: false },
  ],
})

Gaya

striped memberi pita berselang-seling pada barisnya, hover menyoroti baris di bawah penunjuk, dan dense merapatkan bantalannya untuk tabel dengan banyak baris.

berpita
NamaNilai
halaman169
aset208
total9,5 MB
sorot dan rapat
NamaNilai
halaman169
aset208
total9,5 MB
stack({ gap: 'lg' },
  table({
    striped: true,
    caption: 'berpita',
    columns: [{ key: 'name', header: 'Nama' }, { key: 'value', header: 'Nilai', align: 'end' }],
    rows: [{ name: 'halaman', value: '169' }, { name: 'aset', value: '208' }, { name: 'total', value: '9,5 MB' }],
  }),
  table({
    hover: true,
    dense: true,
    caption: 'sorot dan rapat',
    columns: [{ key: 'name', header: 'Nama' }, { key: 'value', header: 'Nilai', align: 'end' }],
    rows: [{ name: 'halaman', value: '169' }, { name: 'aset', value: '208' }, { name: 'total', value: '9,5 MB' }],
  }),
)

Keterangan

Keterangan menamai tabelnya bagi siapa pun yang sampai ke sana tanpa teks di sekitarnya — layak ditambahkan setiap kali tabelnya tidak berada langsung di bawah judul yang sudah menyatakan isinya.

Keluaran build, terbaru lebih dulu
CommitKapanHalaman
94a837a4 menit lalu169
dcfaaae2 jam lalu161
table({
  caption: 'Keluaran build, terbaru lebih dulu',
  columns: [
    { key: 'commit', header: 'Commit' },
    { key: 'when', header: 'Kapan' },
    { key: 'pages', header: 'Halaman', align: 'end' },
  ],
  rows: [
    { commit: '94a837a', when: '4 menit lalu', pages: '169' },
    { commit: 'dcfaaae', when: '2 jam lalu', pages: '161' },
  ],
})

Dari data

Barisnya adalah larik biasa, jadi biasanya ia adalah apa pun yang sudah dimuat data() — tanpa adaptor di antaranya.

PosTerbitDibaca
Halo dunia2026-01-141.204
Statis dulu2026-02-02890
Tanpa runtime2026-03-192.317
return (() => {
  const posts = [
    { title: 'Halo dunia', date: '2026-01-14', reads: 1204 },
    { title: 'Statis dulu', date: '2026-02-02', reads: 890 },
    { title: 'Tanpa runtime', date: '2026-03-19', reads: 2317 },
  ]

  return table({
    hover: true,
    columns: [
      { key: 'title', header: 'Pos' },
      { key: 'date', header: 'Terbit' },
      { header: 'Dibaca', align: 'end', render: (post) => post.reads.toLocaleString('id') },
    ],
    rows: posts,
  })
})()

Lewati columns dan tabelnya justru merender anaknya, jadi tabel dengan baris kaki atau kepala berkelompok bisa dibangun manual dan tetap mendapat penataan serta wadah gulirnya.

Props

PropTipeBawaanDeskripsi
columnsTableColumn[]—{ key, header, align, render } per kolom. Lewati untuk menulis barisnya sendiri.
rowsobject[][]Satu objek per baris.
captionChild—Keterangan di atas tabelnya.
stripedbooleanfalseMemberi pita berselang-seling pada barisnya.
hoverbooleanfalseMenyoroti baris di bawah penunjuk.
densebooleanfalseBantalan sel yang lebih rapat.