VisualTableEditor

All Components

Basic Table

A simple 4-column, 5-row table with a styled header row in edit mode. Click any cell to edit; use the formatting toolbar to apply bold, italic, underline, alignment, and colours.

Presets Gallery

Six built-in presets applied via the preset option. Each preset configures header styling, alternating row colours, and border treatment. The "minimal" and "striped" presets adapt to dark mode automatically.

blue-header

dark-header

green-accent

warm

minimal

striped

Aggregates

Table with numeric data showing the summary bar on cell selection and footer aggregates (sum, average). Select cells to see live aggregate computations. Aggregates are unit-aware and recompute automatically.

Select numeric cells to see aggregates

Rich Content

Table with mixed content types: bold/italic text, hyperlinks, and inline images. Demonstrates the VisualTableCellContent rich content segments for complex cell formatting.

View Mode

Read-only table with mode: "view". Cells are not editable, the toolbar is hidden, and the table is presented as a clean read-only view suitable for dashboards and reports.

Compact Mode

Compact table with compact: true for tight spaces. Reduced cell padding and smaller font size make it ideal for dense data panels, sidebars, and embedded views.

Programmatic API

Buttons to exercise the programmatic API: insert/remove rows and columns, apply cell styles, undo/redo, and export data as JSON.