Table extension

Tables are optional structured content, installed through the portable extension and, for interactive table chrome, its Flutter extension.

Library	Holds
package:vyuh_diagram_extension_table/vyuh_diagram_extension_table.dart	TableExtension (TableExtension.shapeType, TableExtension.toolId), ShapeTable, ShapeTableStyle, ShapeTableControls, ShapeTableCapabilities, ShapeTableControlPresentation, TableCellSelection, DiagramTableDirection and the typed DiagramTableVerbs.
package:vyuh_diagram_extension_table/extension_api.dart	The table model (TextTable, DiagramTableCell, DiagramTableRow, DiagramTableColumn, merges, ranges, DiagramTableNavigation), TableStoryContent (story.tables), the DiagramTables and DiagramTableCells reads and navigation, the codec, layout and geometry, ShapeTableLayerDefinition, tableVerbs and tableProperty.
package:vyuh_diagram_extension_table_flutter/vyuh_diagram_extension_table_flutter.dart	TableFlutterExtension, TableFlutterOptions, TableOverlayMode and TableTheme.

Install and create

import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_extension_table/vyuh_diagram_extension_table.dart';
import 'package:vyuh_diagram_extension_table_flutter/vyuh_diagram_extension_table_flutter.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [EditorExtension(), TableFlutterExtension()],
  ),
);
final ownerId = controller.createShape(TableExtension.shapeType, at: const DiagramPoint(200, 160));
// DiagramCanvas(controller: controller)

TableExtension({tool = true, shortcut}), id vyuh.table, contributes the table shape (TableExtension.shapeType), its creation tool (TableExtension.toolId, activated by shortcut, Shift+T by default) unless tool is false, and the table content, which pairs TableContentLayoutProvider with TableContentCodec. The content type is vyuh.content.table. TableFlutterExtension() installs TableExtension() as a dependency, so a Flutter application lists only TableFlutterExtension(); a pure Dart host installs TableExtension(). No table implementation is installed by the foundation default.

Compose a custom table shape

import 'package:vyuh_diagram_extension_table/vyuh_diagram_extension_table.dart';
import 'package:vyuh_diagram_flutter/extension_api.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final grid = ShapeDefinition(
  type: 'app.grid',
  body: const ShapeTable(
    'body',
    rows: 4,
    columns: 3,
    controls: ShapeTableControls(
      capabilities: ShapeTableCapabilities(mergeCells: false, mergeRows: false),
    ),
  ),
);
final grids = DiagramExtension(
  id: 'app.grids',
  dependencies: [TableExtension()],
  shapes: [grid],
);

Declaration	Configuration
ShapeTable	A content part: stable slot ID, initial rows/columns (default 3), controls, style and cell textType. Nest inside rows, columns, stacks and padding.
ShapeTableLayerDefinition	What a ShapeTable compiles to in definition.layers; read it, do not author it.
ShapeTableControls	Row/column controls, labels, row renaming and control presentation.
ShapeTableCapabilities	Add/remove/resize rows and columns, merge cells or whole rows, unmerge, resize table. Defaults allow each operation.
ShapeBehavior	Outer shape movement, rotation, selection and resizing.

Presentation is not permission. Hidden controls do not disable verbs; use the capability declaration to deny operations. resizeTable: false makes the owning shape not resizable. Initial rows and columns must each be at least one.

Flutter overlays

final tableUi = TableFlutterExtension(
  standalone: TableOverlayMode.full,
  embedded: TableOverlayMode.minimal,
  theme: const TableTheme(range: Color(0xFF0A7D5A)),
);
// Install tableUi in the configuration's extensions.

// Later, change the overlays at runtime.
controller.edits.setOptions(
  controller.options<TableFlutterOptions>().copyWith(
    embedded: TableOverlayMode.off,
  ),
);

TableFlutterExtension({standalone, embedded, resolve, theme}) owns TableFlutterOptions, which holds all of its settings; the table behavior reads them live. Modes are full, minimal and off; defaults are full for standalone tables and off for embedded tables. resolve(owner, table) can override individual instances, and TableFlutterOptions.modeFor(owner, table) returns the mode that applies. theme is the selected cell-range color, or null for the canvas selection color. A layer's explicit ShapeTableControlPresentation overrides automatic standalone/embedded selection. Overlays do not affect exported appearance. TableFlutterExtension.rangeHighlightKey keys the painted highlight of a selected cell range, for widget tests.

Verbs

Each table part offers the table verbs, declared by ShapeTableLayerDefinition.verbs. A shape with one table offers them under their plain names, such as insertRow; a shape with several addresses each table as part.verb, such as primary.insertRow, where the part is the table's slot ID. Importing the table model package enables the typed DiagramTableVerbs extension on DiagramController; its part: argument names the table and is omitted for a shape with one table.

controller.edits.insertRow(ownerId, at: 1);
controller.edits.setCellText(ownerId, cell: cellId, text: 'Total');
controller.edits.perform([entityId], 'primary.insertRow', {'at': 2});

Verb	Arguments after the owner ID
insertRow / removeRow	at; insertRow also takes optional focusColumn
insertColumn / removeColumn	at
removeTracks	anchor, focus cell IDs; rows (true for rows, false for columns)
resizeRow, resizeColumn	index, new height/width
mergeCells / splitCell	anchor, focus cell IDs; cell
setCellText	cell, text
clearCells	anchor, focus cell IDs
setBorders	outer, rows, columns borders
setRowBorder, setColumnBorder	index, nullable border

Calls through controller.edits return EditResult; inspect allowed or call requireAllowed(). Capabilities declared in ShapeTableCapabilities deny the matching verbs.

The DiagramTables and DiagramTableCells extensions, from package:vyuh_diagram_extension_table/extension_api.dart, add reads and navigation, which are not verbs. Owner IDs identify the containing shape; table IDs identify its structured content, not a row index. Read the table from the owner's story contents and retain its stable IDs.

Method	Meaning
tableControls(ownerId, tableId)	The declared table controls
resolvedTable(ownerId, tableId)	Resolved geometry, or null
selectTableCells(ownerId, tableId, anchor, focus)	Selects a cell range
focusTableCell(ownerId, tableId, cellId)	Places text editing in a cell
navigateTableCell(ownerId, cellId, backward: false)	Moves to the next or previous cell, appending a row past the last; returns a boolean

Shared undo/redo, selection and clipboard use the canonical document.

Persistence and output

Save with controller.save(DiagramJsonCodec.new) and open with controller.edits.load(json, format: DiagramJsonCodec.new); both build the codec over the installed extensions' codecs, so the table content codec is included. Table layout lowers to shared resolved primitives for SVG output; the SVG codec does not need a Flutter table widget.

See table examples, shape anatomy and Rich Text for related configuration.