refs:
  row*:
    eventListeners:
      click:
        handler: handleRowClick
  header*:
    eventListeners:
      click:
        handler: handleHeaderClick
styles:
  table:
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  thead:
    border-bottom: 2px solid var(--border)
  th:
    padding: 12px
    text-align: left
    font-weight: 500
    color: var(--foreground)
    background-color: var(--muted)
    cursor: pointer
    position: sticky
    top: 0
    z-index: 1
  tbody tr:
    border-bottom: 1px solid var(--border)
  tbody tr:last-child:
    border-bottom: none
  td:
    padding: 12px
    color: var(--foreground)
  .table-container:
    height: 100%
    overflow: auto
  .empty-state:
    text-align: center
    padding: 24px
    color: var(--muted-foreground)
template:
  - rtgl-view.table-container ${containerAttrString}:
      - $if rows.length > 0:
          - table:
              - thead:
                  - tr:
                      - $for column, i in columns:
                          - th#header${i} data-column-key=${column.key}: ${column.label}
              - tbody:
                  - $for row, rowIndex in rows:
                      - tr#row${rowIndex}:
                          - $for cell, cellIndex in row.cells:
                              - td: ${cell.value}
        $else:
          - rtgl-view.empty-state w=f p=xl:
              - rtgl-text c=mu-fg: ${emptyLabel}