Tableau

La fonctionnalité de tableaux avancés enrichit Univer Docs avec des outils complets de modification des tableaux, notamment la mise en forme des cellules, la personnalisation des bordures, la manipulation des lignes et des colonnes et l’insertion de données.

Introduction

Dans Univer Docs, les tableaux avancés vous permettent de :

• Insérer des tableaux par programmation : créez des tableaux aux dimensions définies.
• Modifier la structure : ajoutez, supprimez et déplacez des lignes et des colonnes.
• Mettre en forme les cellules : appliquez des bordures, des arrière-plans et une mise en forme du texte.
• Fusionner et fractionner des cellules : combinez des cellules pour créer des mises en page complexes.

Mode plugin

Installation

pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

Utilisation

import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIEnUS from '@univerjs-pro/docs-table-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsTableUIEnUS,     ),  },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)

Si vous disposez d’une licence commerciale Univer, consultez la page Utiliser une licence côté client pour savoir comment la configurer.

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.

API Facade

Veillez à importer la facade avant d’utiliser l’API :

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

Insérer un tableau

const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')

Insérer un tableau à partir de données

const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([  ['Name', 'Status'],  ['Facade', 'Ready'],], { headerRowCount: 1 })

Obtenir tous les tableaux

const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []

Supprimer un tableau

const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')

Bordures de tableau

Sélectionnez un tableau ou ses cellules pour ouvrir l’onglet contextuel Tableau. Le sélecteur propose toutes les bordures, les bordures extérieures, intérieures, individuelles ou aucune, ainsi que leur couleur, épaisseur et style. Ces contrôles sont fournis par UniverDocsTableUIPlugin.

Édition, historique et collaboration

Les setters et modifications structurelles des tables passent par des commandes avec annuler/rétablir et collaboration. setTableStyle() regroupe fond et bordure en une entrée d’historique. setColumnType() est aussi annulable et synchronisé ; les types suivent les colonnes déplacées. setCellText() remplace la valeur complète : les remplacements simultanés utilisent une résolution atomique, tandis que les éditions de caractères utilisent l’OT texte. Une modification refusée par un contrôle de contenu verrouillé renvoie false sans consommer l’historique.