Table styling

Tables carry their look in attrs, so screen, canvas, PDF and DOCX draw the same thing from the same layout (@nextgensoftwares/folio-layout resolves every cell's borders, fill and text weight once; painters and exporters only read it).

Styles and the look

table.attrs.tableStyle names a built-in style; look says which of its conditional parts apply (Word's tblLook).

Style	What it is
grid	1px grid, grey header
plain	no lines
lines	horizontal rules, strong top/bottom
banded	horizontal rules, banded body
boxed	thick frame, thin inside lines
accent	blue grid, banded, double line over the total row
light, light-2 … light-6	thin accent lines, accent rule under the header, faint bands
medium, medium-2 … medium-6	accent header with white text, tinted bands and first column
dark, dark-2 … dark-6	every cell filled with accent shades, white inside lines

The accent styles take their colour from the theme: theme.table.accents (six colours), with accent 1 defaulting to the theme's accent (the blockquote colour). Change the theme and every accent table follows.

mergeTheme({ table: { accents: ['#0e9aa7', '#2563eb', '#16a34a', '#d97706', '#dc2626', '#7c3aed'] } });

look flags (all optional): headerRow (default on), firstColumn, lastRow (the "total row"), lastColumn, bandedRows (default on), bandedColumns. Header, total and first/last column text is bold.

Cells, borders and size

Attr	On	Meaning
backgroundColor	cell	shading; beats the style's fill
borders	cell	{top, bottom, start, end} of {style: 'single'|'double'|'dashed'|'dotted'|'none', width, color}; beats the table's and the style's
padding	cell	{top, bottom, start, end} px; else the table's cellPadding, else the theme's
verticalAlign	cell	top (default), middle, bottom
colwidth	cell	px per spanned column; columns without one share what's left
borders	table	{top, bottom, start, end, insideH, insideV}; beats the style's
width, align, indent	table	px / "NN%" / "auto"; start/center/end; px from the start side
repeatHeader	table	false keeps leading header rows on the first page only (default: they repeat on every page)

Borders are collapsed: a shared edge is drawn once, and when two cells set it the visible, then wider, then heavier line wins.

Commands

All of these are in createTableCommands() (@nextgensoftwares/folio-editor) and work on the caret's cell or a CellSelection:

const t = createTableCommands();
editor.run(t.tableStyle('medium-2'));
editor.run(t.tableLook({ firstColumn: true, bandedRows: false }));
editor.run(t.cellBackground('#fde68a'));
editor.run(t.cellBorders('outside', { style: 'dashed', width: 2, color: '#dc2626' })); // or 'all' | 'inside' | 'insideH' | 'insideV' | 'top' | 'bottom' | 'start' | 'end'
editor.run(t.cellBorders('all', null));      // back to the table's / style's borders
editor.run(t.cellPadding({ top: 4, bottom: 4, start: 12, end: 12 }));
editor.run(t.cellVerticalAlign('middle'));
editor.run(t.columnWidth(160));             // selected columns; null to share again
editor.run(t.distributeColumns());
editor.run(t.tableWidth('75%'));
editor.run(t.tableAlign('center'));
editor.run(t.tableIndent(24));
editor.run(t.repeatHeader(false));

UI

• The table context bar (ContextBar, @nextgensoftwares/folio-react) has a Table styles dropdown: a gallery of previews drawn with the current look, the look switches and "repeat header rows".
• tablePanelItem() is a sidebar tab (shown while the caret is in a table) with the style and look, width/alignment/indent, header repeat, table borders and padding, then the selected cells' shading, vertical alignment, padding, column width and per-side borders.

const tablePanel: FolioPlugin = { name: 'table-panel', ui: { slots: [tablePanelItem()] } };

DOCX

Export writes each cell's resolved shading (w:shd) and borders (w:tcBorders, on both cells of a shared edge, since readers resolve shared edges differently), the table's w:tblBorders, w:tblLook, header rows as w:tblHeader (unless repeatHeader: false), and a real Word table style for the Folio style (w:tblStyle → a Folio Table <name> style in styles.xml), so Word shows it by name.

Import recognises those styles by name and gives back tableStyle and look with only the cells' own shading and borders, so a Folio table round-trips as a styled table rather than baked formatting. Other Word table styles are resolved into cell borders and fills (their look can't be re-applied in Folio).