Web SDK

テーブル

テーブル機能は、スプレッドシート内で表（テーブル）を作成および管理し、データの整理や表示を向上させます。さまざまなテーブルスタイルや操作をサポートし、ユーザーが情報を素早く処理・分析できるように支援します。

プラグインモード

インストール

Shell
pnpm add @univerjs/sheets-table @univerjs/sheets-table-ui

使い方

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsTablePlugin } from '@univerjs/sheets-table'import { UniverSheetsTableUIPlugin } from '@univerjs/sheets-table-ui'import SheetsTableUIJaJP from '@univerjs/sheets-table-ui/locale/ja-JP'import '@univerjs/sheets-table-ui/lib/index.css'import '@univerjs/sheets-table/facade'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      SheetsTableUIJaJP,     ),  },})univer.registerPlugin(UniverSheetsTablePlugin)univer.registerPlugin(UniverSheetsTableUIPlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs/sheets-table-uiUniverSheetsTableUIPluginUniverSheetsTableMobileUIPlugin

プリセットモード

インストール

Shell
pnpm add @univerjs/preset-sheets-table

使い方

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsTablePreset } from '@univerjs/preset-sheets-table'import UniverPresetSheetsTableJaJP from '@univerjs/preset-sheets-table/locales/ja-JP'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.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsTableJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsTablePreset(),   ],})

Facade API

完全な Facade API の型定義は、FacadeAPIで確認できます。

インポート

プラグインモード注意

Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

TypeScript
import '@univerjs/sheets-table/facade'

テーブルの挿入

  • FWorkbook.addTable: 指定したワークブックのワークシートにテーブルを挿入します
  • FWorksheet.addTable: ワークシートにテーブルを挿入します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const 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)}

テーブルの取得

  • FWorkbook.getTableList: ワークブック内のすべてのテーブル一覧を取得します
  • FWorksheet.getSubTableInfos: ワークシート内のすべてのテーブル一覧を取得します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const tables = fWorkbook.getTableList()console.log('debugger tables', tables)
  • FWorkbook.getTableInfo: テーブル ID でテーブル情報を取得します
  • FWorkbook.getTableInfoByName: テーブル名でテーブル情報を取得します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const 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: セル位置からテーブル情報を取得します
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))// B2:F11 範囲内にテーブルを挿入const 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))

フィルターの設定

  • FWorkbook.setTableFilter: ワークブック内のテーブルにフィルターを設定します
  • FWorksheet.setTableFilter: ワークシート内のテーブルにフィルターを設定します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // 2列目にフィルターを設定  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: ワークシート内のテーブルのフィルターをリセットします
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // 2列目にフィルターを設定  await fWorksheet.setTableFilter('id-1', 1, {    filterType: univerAPI.Enum.TableColumnFilterTypeEnum.condition,    filterInfo: {      conditionType: univerAPI.Enum.TableConditionTypeEnum.Number,      compareType: univerAPI.Enum.TableNumberCompareTypeEnum.GreaterThan,      expectedValue: 10,    },  })  // 3 秒後に2列目のフィルターをリセット  setTimeout(async () => {    await fWorksheet.resetFilter('id-1', 1)  }, 3000)  const tableInfo = fWorkbook.getTableInfo('id-1')  console.log('debugger tableInfo', tableInfo)}

テーブルの変更・削除

  • FWorkbook.removeTable: ワークブック内のテーブルを削除します
  • FWorksheet.removeTable: ワークシート内のテーブルを削除します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const tableInfo = fWorkbook.getTableInfo('id-1')console.log('debugger tableInfo', tableInfo)if (tableInfo) {  // 指定したIDのテーブルを削除  await fWorksheet.removeTable('id-1')}
  • FWorksheet.setTableRange: ワークシート内のテーブル範囲を更新します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // 3 秒後にテーブル範囲を B2:F21 に更新  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: ワークシート内のテーブル名を更新します
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// B2:F11 範囲内にテーブルを挿入const fRange = fWorksheet.getRange('B2:F11')const success = await fWorksheet.addTable(  'name-1',  fRange.getRange(),  'id-1',  {    tableStyleId: 'table-default-4',  },)if (success) {  // 3 秒後にテーブル名を更新  setTimeout(async () => {    await fWorksheet.setTableName('id-1', 'new-name')    const tableInfo = fWorkbook.getTableInfo('id-1')    console.log('debugger tableInfo', tableInfo)  }, 3000)}

テーブルテーマの追加

  • FWorksheet.addTableTheme: ワークシート内のテーブルにテーマを追加します
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)}

セルと一緒にテーブルを移動

テーブル全体を含むセル範囲を移動すると、テーブルも同じシート内または同じブックの別シートへ移動します。ヘッダーと全データ行を含めてください。ID、名前、スタイル、列情報、フィルターを保持し、構造化参照も移動先を追従します。移動先は編集可能でシート内に収まり、他のテーブルと重なってはなりません。元に戻す・やり直しはセルとテーブル情報の両方に適用されます。

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.