NABI NOTE
Documentación

Tabla ​

Inserta una tabla y edita filas, columnas y celdas. Las operaciones de añadir o eliminar filas y columnas, fusionar celdas y alternar celdas de encabezado actúan alrededor de las celdas seleccionadas. Para usar la ordenación de columnas en la vista publicada después de guardar una tabla como ordenable, conecta attachViewer() de nabi-note/viewer. Las tablas con celdas fusionadas no se ordenan.

Alas
Tipografía baseAltura
HTMLCargando el editor…
JSONnabi-treeCargando el editor…
Instalación
npm install nabi-note
Código
import {
  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: 'es' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'es' }
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()))
ts
const selected = wings().use('table').build()

Estilos CSS ​

Da estilo a la tabla con .nabi-content table, y a las celdas con .nabi-content :is(th, td). No cambies la estructura de las celdas ni el botón de ordenación que inserta el viewer.

css
.article-body table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.article-body :is(th, td) {
  border: 1px solid var(--nabi-line);
  padding: .55rem .7rem;
}

Si el viewer está conectado, conserva el botón .nabi-sort. Si fuerzas position o el padding derecho de las celdas, puede superponerse con el botón de ordenación.