Table layout

Explicit row by column grid for tabular form sections, Customer / Product / Quantity headers across the top, repeating rows beneath.

The Table layout creates an explicit row-and-column grid. Each cell can contain a field. Useful for tabular sections, order line items, attendee lists, where the form really is a spreadsheet shape rather than a stack of fields.

For database-backed repeating rows (write to a child SharePoint list), use

LinkedList instead.

Properties

PropertyDescription
columnCount
number
default: 3
Number of columns in the grid. Shared with the columns container.
rowCount
number
default: 2
Number of rows in the grid.
tableHeader
boolean
default: false
Show a static header row. When on, the runtime renders tableHeaderLabels as static HTML with no drop zones. Toggling off preserves the labels and styles.
tableHeaderLabels
string[]
One label per column, parallel to columnCount. Missing entries render as empty strings.
tableHeaderBackground
CSS color
Header background colour (any CSS colour string).
tableHeaderBorderColor
CSS color
Header border colour, cell dividers and outer edge.
tableHeaderColor
CSS color
Header font colour.
tableHeaderTextAlign
'left' | 'center' | 'right'
Text alignment within each header cell.
tableHeaderFontSize
number
Header font size in px.
tableHeaderFontWeight
'normal' | 'bold'
Header font weight.

JavaScript recipes

Read a value from a cell field

// Fields placed inside table cells are addressed by their own key.
const qty = Number(f365.field('Quantity').value) || 0;

Sum a column of cell fields into a total

f365.events.onChange((e) => {
  if (e.fieldKey !== 'Price') return;
  const total = ['LineA', 'LineB', 'LineC'].reduce(
    (sum, key) => sum + (Number(f365.field(key).value) || 0),
    0
  );
  f365.field('Total').value = total;
});

Hide a row of cell fields conditionally

f365.events.onChange((e) => {
  if (e.fieldKey !== 'IncludeShipping') return;
  const on = Boolean(e.newValue);
  for (const key of ['ShipMethod', 'ShipCost']) {
    f365.field(key).visible = on;
  }
});

Format a computed cell value for display

const formatted = f365.format.currency(Number(f365.field('Total').value) || 0, 'AUD');
f365.field('TotalLabel').value = formatted;

Related articles

  • LinkedList field

    Edit child-list rows inline on the parent form, repeatable mini-grids backed by a related SharePoint list.

  • Columns container

    Lay out child fields in 2, 3, or 4 columns. Collapses to one column on mobile.