Tableau

Activer la prise en charge des tableaux

La prise en charge des tableaux dans Slides est répartie entre un package de modèle et un package d’interface utilisateur :

import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

Rôle des packages

• @univerjs-pro/slides-table stocke les éléments de tableau dans le modèle de diapositive et fournit des API Facade pour manipuler les tableaux.
• @univerjs-pro/slides-table-ui ajoute l’interface d’édition dans le navigateur, l’intégration au rendu, le comportement de sélection et les opérations du menu contextuel. Il fournit également @univerjs-pro/slides-table-ui/locale/* et @univerjs-pro/slides-table-ui/lib/index.css.

Choix selon l’environnement d’exécution

Utilisez les deux packages dans un éditeur exécuté dans le navigateur. Pour un traitement avec Node.js, importez uniquement le package de modèle, sauf si vous avez également besoin du rendu dans le navigateur.

univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)

Activez la prise en charge des tableaux avant d’ouvrir ou d’importer des présentations susceptibles d’en contenir. Dans le cas contraire, l’environnement d’exécution ne pourra pas interpréter complètement ces éléments.

Couleurs de tableau stables

Lorsqu’un tableau est inséré ou que son style change, le plugin résout la palette du thème actif dans un instantané propre au tableau. Les tableaux existants conservent ainsi leurs couleurs après un changement du thème global Univer ; choisir un autre style crée un nouvel instantané. Les opérations Facade standard gèrent cela automatiquement.

API Facade

Importez le point d’entrée Facade pour ajouter les méthodes de tableau à FSlide :

import '@univerjs-pro/slides-table/facade'

Créez un tableau à partir de données textuelles simples :

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData(  [    ['Quarter', 'Owner', 'Status'],    ['Q1', 'Sales', 'Done'],    ['Q2', 'Marketing', 'In progress'],  ],  {    id: 'status-table',    rowHeight: 42,    columnWidth: 160,  },)

Utilisez le générateur de tableau lorsque vous avez besoin de contrôler précisément la mise en page :

const tableInfo = fSlide.newTable()  .setValues([    ['Metric', 'Value'],    ['Revenue', '$120K'],  ])  .setRows(2)  .setColumns(2)  .setAbsolutePosition(80, 120)  .setSize(420, 180)  .build()const table = fSlide.insertTable(tableInfo)

Lisez et mettez à jour les cellules d’un tableau :

const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) {  console.log(table.describe())  console.log(table.getCellText(0, 0))  table.getCell(1, 2)?.setText('Blocked')  table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}

Mettez à jour ou supprimez un tableau existant :

const table = fSlide.getTableById('status-table')if (table) {  const nextTableInfo = table.toBuilder()    .setValues([      ['Quarter', 'Owner', 'Status'],      ['Q1', 'Sales', 'Done'],      ['Q2', 'Marketing', 'Blocked'],    ])    .setSize(480, 200)    .build()  fSlide.updateTable(nextTableInfo)  fSlide.removeTable(table)}

Les indices de ligne et de colonne des tableaux commencent à zéro. Le nombre de lignes et de colonnes du générateur s’adapte aux valeurs fournies. Pour les tableaux simples, setValues() peut donc servir de source de vérité.