Table

Tabla responsive: 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). Las columnas sin width fijo se reparten el ancho disponible por igual — así la tabla se adapta sin necesitar scroll horizontal. Por debajo de 480px de ancho medido (el ancho real del propio componente, no el viewport — misma lógica “container query” que usa OrbitAppShell), la grilla de filas/ columnas se abandona del todo por una pila de cards, una por fila, con el label de cada columna como caption chico arriba de su celda.

Una columna sortable agrega una flechita después del label y la vuelve clickeable — la tabla solo reporta la intención (onSortChange), nunca ordena rows ella misma; el caller reordena sus propios datos y retroalimenta sortColumnIndex/sortDirection, el mismo circuito controlado que usa el resto de Orbit. resizable agrega un handle de arrastre después de la columna que reporta deltas de ancho de la misma forma (onColumnWidthChange) — tampoco guarda estado propio.

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', sortable: true },
    {
      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);
  table.onSortChange = (index, direction) => {
    // reordenar table.rows vos mismo y reasignarlo
    table.sortColumnIndex = index;
  };
</script>

Compose Multiplatform

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

OrbitTable(
    columns = listOf(
        OrbitTableColumn("Pantalla", sortable = true) { 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 -> /* ... */ },
    sortColumnIndex = 0,
    onSortChange = { index, direction -> /* reordenar rows vos mismo */ },
)

Props

Prop	Tipo	Default	Descripción
columns	List<OrbitTableColumn<T>> (Kotlin) / propiedad JS columns (web)	—	{ label, cell, sortable?, resizable?, width? } (Kotlin) / { key, label, render?, sortable? } (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.
sortColumnIndex / sortDirection	Int? / OrbitSortDirection	null / Ascending	Índice y dirección de la columna actualmente ordenada — la tabla solo lo refleja, no ordena rows.
onSortChange	(index, direction) -> Unit	null	Se dispara al clickear el header de una columna sortable.
onColumnWidthChange	(index, delta) -> Unit	null	Se dispara al arrastrar el handle de una columna resizable.