Function renderTable

apps/sim/lib/pptx-renderer/renderer/table-renderer.ts:397–529

(node: TableNodeData, ctx: RenderContext)

 * Render a table node into an absolutely-positioned HTML element.
 */
export function renderTable(node: TableNodeData, ctx: RenderContext): HTMLElement {
  const wrapper = document.createElement('div')
  wrapper.style.position = 'absolute'
  wrapper.style.left = `${node.position.x}px`
  wrapper.style.top = `${node.position.y}px`
  wrapper.style.width = `${node.size.w}px`
  wrapper.style.height = `${node.size.h}px`
  wrapper.style.overflow = 'hidden'

  // Apply transforms
  const transforms: string[] = []
  if (node.rotation !== 0) {
    transforms.push(`rotate(${node.rotation}deg)`)
  }
  if (node.flipH) {
    transforms.push('scaleX(-1)')
  }
  if (node.flipV) {
    transforms.push('scaleY(-1)')
  }
  if (transforms.length > 0) {
    wrapper.style.transform = transforms.join(' ')
  }

  // Resolve table style
  const tblStyle = findTableStyle(node.tableStyleId, ctx)
  const tblPr = node.properties
  const totalRows = node.rows.length
  const totalCols = node.columns.length

  // Create table element
  const table = document.createElement('table')
  table.style.borderCollapse = 'collapse'
  table.style.width = '100%'
  table.style.height = '100%'
  table.style.tableLayout = 'fixed'

  // Apply table background from table style (tblBg)
  if (tblStyle) {
    applyTableBackground(table, tblStyle, ctx)
  }

  // Column widths
  const totalWidth = node.columns.reduce((sum, w) => sum + w, 0)
  if (totalWidth > 0 && node.columns.length > 0) {
    const colgroup = document.createElement('colgroup')
    for (const colW of node.columns) {
      const col = document.createElement('col')
      col.style.width = `${(colW / totalWidth) * 100}%`
      colgroup.appendChild(col)
    }
    table.appendChild(colgroup)
  }

  // Compute total row height so we can express each row as a proportion
  const totalRowHeight = node.rows.reduce((sum, r) => sum + r.height, 0)

  // Render rows