Tables Demo vitrine-tables + vitrine-tables-adapter integration patterns -

Integration Pattern

Each cell content is a Vitrine block tree with optional intrinsic metrics. The layout engine computes geometry, then the adapter maps frames to renderable blocks.

const engine = new ReferenceTableLayoutEngine();
const measurer = createVitrineTableCellMeasurer();
const delegate = createVitrineTableRenderDelegate({
  frameStroke: '#b6c2d2',
  insetX: 8,
  insetY: 6
});

const layout = engine.layout(tableModel, { availableWidth }, measurer);
const tableBlock = buildVitrineBlocksFromTableLayout(
  tableModel,
  layout,
  delegate,
  { rootGroupProps: { x: 24, y: 52 } }
);

Try mouse wheel over canvas to pan examples vertically and horizontally.