OrbitTable

Tabla mínima: fila de encabezado (labels typography.overline, línea inferior surface.border-strong) + filas de cuerpo (divisores finos field.border, hover surface.raised cuando hay onRowClick). Sin ordenamiento/paginación/resize de columnas — son features reales para agregar después detrás de esta misma forma, no algo para simular ahora.

Los datos tabulares no entran en atributos HTML (solo strings) — columns y rows son propiedades de JS en vez de atributos.

Uso

Web

<orbit-table id="table"></orbit-table>
<script>
  table.columns = [
    { key: 'name', label: 'Pantalla' },
    { key: 'status', label: 'Estado', render: (row) => `<orbit-badge label="${row.status}"></orbit-badge>` },
  ];
  table.rows = [
    { name: 'Dashboard.kt', status: 'lista' },
    { name: 'Settings.kt', status: 'en progreso' },
  ];
  table.onRowClick = (row) => console.log(row);
</script>

Compose Multiplatform

data class Screen(val name: String, val status: String)

OrbitTable(
    columns = listOf(
        OrbitTableColumn("Pantalla") { screen: Screen -> Text(screen.name) },
        OrbitTableColumn("Estado") { screen: Screen ->
            OrbitBadge(label = screen.status, intent = if (screen.status == "lista") OrbitIntent.Success else OrbitIntent.Neutral)
        },
    ),
    rows = listOf(Screen("Dashboard.kt", "lista"), Screen("Settings.kt", "en progreso")),
    onRowClick = { screen -> /* ... */ },
)

Props

Prop	Tipo	Default	Descripción
columns	List<OrbitTableColumn<T>> (Kotlin) / propiedad JS columns (web)	—	{ label, cell } (Kotlin) / { key, label, render? } (web).
rows	List<T> (Kotlin) / propiedad JS rows (web)	—	Los datos de la tabla.
onRowClick	((T) -> Unit)? (Kotlin) / propiedad JS onRowClick (web)	null	Si está presente, las filas son clickeables con hover.