Tableau
La fonctionnalité Tableau permet de créer et de gérer des tableaux dans les feuilles de calcul afin de mieux organiser et présenter les données. Elle prend en charge différents styles et différentes opérations, ce qui facilite le traitement et l’analyse rapides des informations.
Mode plugin
Installation
Shell
pnpm add @univerjs/sheets-table @univerjs/sheets-table-uiShell
npm install @univerjs/sheets-table @univerjs/sheets-table-uiShell
yarn add @univerjs/sheets-table @univerjs/sheets-table-uiShell
bun add @univerjs/sheets-table @univerjs/sheets-table-uiUtilisation
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsTablePlugin } from '@univerjs/sheets-table'import { UniverSheetsTableUIPlugin } from '@univerjs/sheets-table-ui'import SheetsTableUIEnUS from '@univerjs/sheets-table-ui/locale/en-US'import '@univerjs/sheets-table-ui/lib/index.css'import '@univerjs/sheets-table/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsTableUIEnUS, ), },})univer.registerPlugin(UniverSheetsTablePlugin)univer.registerPlugin(UniverSheetsTableUIPlugin)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.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs/sheets-table-ui | UniverSheetsTableUIPlugin | UniverSheetsTableMobileUIPlugin |
Mode prédéfini
Installation
Shell
pnpm add @univerjs/preset-sheets-tableShell
npm install @univerjs/preset-sheets-tableShell
yarn add @univerjs/preset-sheets-tableShell
bun add @univerjs/preset-sheets-tableUtilisation
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table'import UniverPresetSheetsTableEnUS from '@univerjs/preset-sheets-table/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-table/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsTableEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsTablePreset(), ],})API Facade
Vous trouverez les définitions de type complètes de l’API Facade dans la documentation FacadeAPI.
Importation
Remarque sur le mode plugin
Seul le mode plugin nécessite l’importation manuelle du package Facade. Le mode prédéfini inclut déjà le package Facade correspondant ; aucune importation supplémentaire n’est donc nécessaire.
TypeScript
import '@univerjs/sheets-table/facade'Insérer un tableau
FWorkbook.addTable: insère un tableau dans la feuille de calcul indiquée du classeurFWorksheet.addTable: insère un tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', columns: [ { id: 'col-1', displayName: 'Column 1' }, ], filters: [ { filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition, filterInfo: { conditionType: univerAPI.Enum.TableConditionTypeEnum.Number, compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan, expectedValue: 2, }, }, ], },)if (success) { const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}Récupérer un tableau
FWorkbook.getTableList: récupère la liste de tous les tableaux du classeurFWorksheet.getSubTableInfos: récupère la liste de tous les tableaux de la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)FWorkbook.getTableInfo: récupère les informations d’un tableau à partir de son IDFWorkbook.getTableInfoByName: récupère les informations d’un tableau à partir de son nom
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}FWorksheet.getTableByCell: récupère les informations du tableau à partir de la position d’une cellule
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const cellB2 = fWorksheet.getRange('B2')const row = cellB2.getRow()const column = cellB2.getColumn()console.log('debugger tableInfo', fWorksheet.getTableByCell(row, column))// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)console.log('debugger tableInfo2', fWorksheet.getTableByCell(row, column))Définir un filtre
FWorkbook.setTableFilter: définit le filtre du tableau dans le classeurFWorksheet.setTableFilter: définit le filtre du tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // Set the filter for the second column await fWorksheet.setTableFilter('id-1', 1, { filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition, filterInfo: { conditionType: univerAPI.Enum.TableConditionTypeEnum.Number, compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan, expectedValue: 10, }, }) const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}FWorksheet.resetFilter: réinitialise le filtre du tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // Set the filter for the second column await fWorksheet.setTableFilter('id-1', 1, { filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition, filterInfo: { conditionType: univerAPI.Enum.TableConditionTypeEnum.Number, compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan, expectedValue: 10, }, }) // Reset the filter for the second column after 3 seconds setTimeout(async () => { await fWorksheet.resetFilter('id-1', 1) }, 3000) const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}Modifier ou supprimer un tableau
FWorkbook.removeTable: supprime le tableau du classeurFWorksheet.removeTable: supprime le tableau de la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const tableInfo = fWorkbook.getTableInfo('id-1')console.log('debugger tableInfo', tableInfo)if (tableInfo) { // Remove the table with the specified id await fWorksheet.removeTable('id-1')}FWorksheet.setTableRange: met à jour la plage du tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // Update the table range to B2:F21 after 3 seconds setTimeout(async () => { const newRange = fWorksheet.getRange('B2:F21') await fWorksheet.setTableRange('id-1', newRange.getRange()) const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo) }, 3000)}FWorksheet.setTableName: met à jour le nom du tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { // Update the table name after 3 seconds setTimeout(async () => { await fWorksheet.setTableName('id-1', 'new-name') const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo) }, 3000)}Ajouter un thème de tableau
FWorksheet.addTableTheme: ajoute un thème au tableau dans la feuille de calcul
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Insert a table in the range B2:F11const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable( 'name-1', fRange.getRange(), 'id-1', { tableStyleId: 'table-default-4', },)if (success) { await fWorksheet.addTableTheme('id-1', { name: 'table-custom-1', headerRowStyle: { bg: { rgb: '#145f82', }, }, firstRowStyle: { bg: { rgb: '#c0e4f5', }, }, }) const tableInfo = fWorkbook.getTableInfo('id-1') console.log('debugger tableInfo', tableInfo)}Déplacer un tableau avec ses cellules
Déplacer une plage contenant un tableau entier déplace aussi le tableau, dans la même feuille ou vers une autre feuille du même classeur. Incluez son en-tête et toutes ses lignes. Identité, nom, style, métadonnées de colonnes et filtres sont conservés ; les références structurées suivent le tableau. La destination doit être modifiable, rester dans la feuille et ne pas chevaucher un autre tableau. Annuler et rétablir restaurent les cellules et les métadonnées du tableau.
Que pensez-vous de ce guide ?