Tabel
Pilih baris dan kolom dari bilah alat untuk membuat tabel. Di dalam sel, isi berlanjut dengan pemisah baris alih-alih beberapa paragraf; Tab dan Shift+Tab berpindah ke sel berikutnya atau sebelumnya.
Menambah dan menghapus baris atau kolom, menggabungkan sel, dan mengubah sel kepala dilakukan di sekitar sel yang dipilih. Untuk memakai pengurutan kolom di tampilan terbit setelah tabel disimpan sebagai dapat diurutkan, hubungkan attachViewer() dari nabi-note/viewer. Tabel dengan sel gabungan tidak diurutkan.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, taskListWing, tableWings, imageWing,
mountViewTools,
} from 'nabi-note'
const selected = [
taskListWing,
...tableWings,
imageWing,
]
const { nabi, registry } = createNabiWith(selected)
const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'id' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'id' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })
// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))const selected = wings().use('table').build()Gaya CSS
Atur gaya tabel dengan .nabi-content table, dan sel dengan .nabi-content :is(th, td). Jangan mengubah struktur sel atau tombol urut yang disisipkan viewer.
.article-body table { inline-size: 100%; border-collapse: collapse; }
.article-body :is(th, td) { padding: .6rem .75rem; border: 1px solid var(--nabi-line); }
.article-body th { background: var(--nabi-soft); font-weight: 700; }
.article-body tr:nth-child(even) td { background: color-mix(in srgb, var(--nabi-soft) 45%, transparent); }Jika viewer terhubung, pertahankan tombol .nabi-sort. Jika Anda menimpa position sel atau padding kanan secara paksa, tombol urut dapat tertindih.