Table

Table muestra conjuntos de datos bidimensionales. Cada parte es una primitiva que se puede componer libremente, así que la tabla no impone de dónde vienen los datos.

File	Author	Last updated
Meeting notes	Max Mustermann	7h ago
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM
Training recording	John Doe	Yesterday at 1:45 PM
Purchase order	Jane Doe	Tue at 9:30 AM

Los componentes son deliberadamente de bajo nivel: la ordenación, la selección y el filtrado no vienen incluidos. La tabla renderiza lo que le entregas y refleja el estado que le das, así que cualquier capa de datos la controla sin pelearse con un motor interno.

Para crear una tabla, necesitarás usar los siguientes componentes:

Table: El componente raíz que crea el contexto que leen las demás partes: el tamaño, si las partes se renderizan como elementos nativos de tabla y si las columnas son ordenables.
TableHeader: La sección de encabezado de la tabla.
TableHeaderCell: El encabezado de una columna. Se convierte en un botón de ordenación cuando la columna es ordenable.
TableBody: La sección del cuerpo de la tabla, donde viven las filas de datos.
TableRow: Una fila de la tabla. Se puede rellenar para marcarla como seleccionada.
TableCell: Una celda de una fila.

Otros componentes que se pueden usar dentro de la tabla incluyen:

TableCellLayout: Distribuye una celda en elemento visual, contenido principal y una descripción opcional.
TableSelectionCell: Una celda que contiene la casilla o el botón de radio que indica si la fila está seleccionada.
TableCellActions: Acciones fijadas al final de una celda, reveladas mientras la fila tiene el puntero encima o el foco dentro.

Uso

Compón las partes igual que escribirías el marcado a mano: una fila de encabezado con celdas de encabezado y después una fila de celdas por elemento.

<script>
	import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from 'fluentui-svelte';

	const columns = ['File', 'Author', 'Last updated'];
	const items = [{ file: 'Meeting notes', author: 'Max Mustermann', lastUpdated: '7h ago' }];
</script>

<Table aria-label="Files">
	<TableHeader>
		<TableRow>
			{#each columns as column (column)}
				<TableHeaderCell>{column}</TableHeaderCell>
			{/each}
		</TableRow>
	</TableHeader>
	<TableBody>
		{#each items as item (item.file)}
			<TableRow>
				<TableCell>{item.file}</TableCell>
				<TableCell>{item.author}</TableCell>
				<TableCell>{item.lastUpdated}</TableCell>
			</TableRow>
		{/each}
	</TableBody>
</Table>

Tamaño

Usa `size` para fijar de una vez la altura de fila y la escala tipográfica de cada parte.

Ver Código

<Table size="extra-small">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

File	Author	Last updated
Meeting notes	Max Mustermann	7h ago
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM

File	Author	Last updated
Meeting notes	Max Mustermann	7h ago
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM

File	Author	Last updated
Meeting notes	Max Mustermann	7h ago
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM

Ordenación

`sortable` en la tabla convierte cada celda de encabezado en un botón, y una celda concreta puede activarlo o desactivarlo con su propio `sortable`. La tabla nunca ordena los datos: dale a cada encabezado el `sortDirection` que debe anunciar, maneja `onclick` y devuelve las filas en el orden que quieras.

Ver Código

<script>
  let sortColumn = $state('file');
  let sortDirection = $state('ascending');

  const sorted = $derived(
    [...items].sort((a, b) =>
      (sortDirection === 'ascending' ? 1 : -1) * a[sortColumn].localeCompare(b[sortColumn])
    )
  );

  const toggleSort = (column) => {
    if (sortColumn === column) {
      sortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
    } else {
      sortColumn = column;
      sortDirection = 'ascending';
    }
  };
</script>

<Table sortable aria-label="Table with sort">
  <TableHeader>
    <TableRow>
      <TableHeaderCell
        sortDirection={sortColumn === 'file' ? sortDirection : undefined}
        onclick={() => toggleSort('file')}
      >
        File
      </TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each sorted as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

		Last updated
Meeting notes	Max Mustermann	7h ago
Purchase order	Jane Doe	Tue at 9:30 AM
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM
Training recording	John Doe	Yesterday at 1:45 PM

Selección múltiple

La celda de selección muestra la selección, no es su dueña. El clic en el indicador también llega a la fila de abajo, así que la fila es el único sitio donde conectar `onclick`. Márcala con `aria-selected`, rellénala con `appearance="brand"` y aliméntale `checked` desde tu propio estado.

Ver Código

<script>
  let selected = $state([items[0].file]);

  const allSelected = $derived(selected.length === items.length);
  const someSelected = $derived(selected.length > 0 && !allSelected);

  const toggleRow = (file) => {
    selected = selected.includes(file) ? selected.filter((f) => f !== file) : [...selected, file];
  };
</script>

<Table aria-label="Table with multiselect">
  <TableHeader>
    <TableRow>
      <TableSelectionCell
        checked={allSelected ? true : someSelected ? 'mixed' : false}
        checkboxIndicator={{ 'aria-label': 'Select all rows' }}
        onclick={() => (selected = allSelected ? [] : items.map((item) => item.file))}
      />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      {@const isSelected = selected.includes(item.file)}
      <TableRow
        aria-selected={isSelected}
        appearance={isSelected ? 'brand' : 'none'}
        onclick={() => toggleRow(item.file)}
      >
        <TableSelectionCell checked={isSelected} checkboxIndicator={{ 'aria-label': 'Select row' }} />
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

	File	Author
	Meeting notes	Max Mustermann
	Thursday presentation	Erika Mustermann
	Training recording	John Doe
	Purchase order	Jane Doe

Selección simple

Usa `type="radio"` en la celda de selección cuando solo se pueda seleccionar una fila a la vez. Dale el mismo `name` a todos los indicadores para que el navegador los agrupe, y usa `invisible` en la celda del encabezado para mantener la columna alineada sin ofrecer un "seleccionar todo".

Ver Código

<script>
  let picked = $state(items[0].file);
</script>

<Table aria-label="Table with single select">
  <TableHeader>
    <TableRow>
      <TableSelectionCell type="radio" invisible />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      {@const isPicked = picked === item.file}
      <TableRow
        aria-selected={isPicked}
        appearance={isPicked ? 'brand' : 'none'}
        onclick={() => (picked = item.file)}
      >
        <TableSelectionCell
          type="radio"
          checked={isPicked}
          radioIndicator={{ name: 'file', 'aria-label': 'Select row' }}
        />
        <TableCell>{item.file}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

	File	Author
	Meeting notes	Max Mustermann
	Thursday presentation	Erika Mustermann
	Training recording	John Doe
	Purchase order	Jane Doe

Selección sutil

`subtle` mantiene el indicador fuera de la vista hasta que la fila tiene el puntero encima, el foco dentro o está seleccionada. Calma una tabla densa sin perder la affordance.

Ver Código

<TableRow aria-selected={isSelected} appearance={isSelected ? 'brand' : 'none'} onclick={() => toggleSubtle(item.file)}>
  <TableSelectionCell subtle checked={isSelected} checkboxIndicator={{ 'aria-label': 'Select row' }} />
  <TableCell>{item.file}</TableCell>
</TableRow>

	File	Author
	Meeting notes	Max Mustermann
	Thursday presentation	Erika Mustermann
	Training recording	John Doe
	Purchase order	Jane Doe

Distribución de la celda

`TableCellLayout` le da a la celda la disposición estándar de Fluent: elemento visual, contenido principal y una segunda línea debajo. `appearance="primary"` enfatiza la celda y `truncate` recorta el contenido con puntos suspensivos.

Ver Código

<TableCell>
  <TableCellLayout media={DocumentRegular} description="7h ago" appearance="primary" truncate>
    Meeting notes
  </TableCellLayout>
</TableCell>

File	Author
Meeting notes 7h ago	Max Mustermann
Thursday presentation Yesterday at 1:45 PM	Erika Mustermann
Training recording Yesterday at 1:45 PM	John Doe
Purchase order Tue at 9:30 AM	Jane Doe

Acciones de celda

`TableCellActions` fija contenido al final de una celda y lo revela mientras la fila tiene el puntero encima o el foco dentro. Normalmente es una fila de botones, y `visible` los mantiene siempre a la vista.

Ver Código

<TableCell>
  <TableCellLayout media={item.icon}>{item.file}</TableCellLayout>
  <TableCellActions>
    <Button appearance="subtle" shape="circular" aria-label="Edit">
      <EditRegular />
    </Button>
    <Button appearance="subtle" shape="circular" aria-label="More actions">
      <MoreHorizontalRegular />
    </Button>
  </TableCellActions>
</TableCell>

File	Author
Meeting notes	Max Mustermann
Thursday presentation	Erika Mustermann
Training recording	John Doe
Purchase order	Jane Doe

Navegación por teclado

`enableTabspot` le da a la tabla una sola parada de tabulación y mueve el foco entre celdas con las flechas, con `Home`, `End`, `PageUp` y `PageDown` para saltar más lejos. También cambia la tabla al patrón `role="grid"`, que es lo que esa navegación exige.

Ver Código

<Table enableTabspot aria-label="Table with keyboard navigation">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
      <TableHeaderCell>Actions</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>

        <!-- Enter steps into the cell to reach the buttons, Escape steps back out. -->
        <TableCell focusMode="group">
          <TableCellActions visible>
            <Button appearance="subtle" shape="circular" aria-label="Edit {item.file}">
              <EditRegular />
            </Button>
          </TableCellActions>
        </TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

File	Author	Actions
Meeting notes	Max Mustermann
Thursday presentation	Erika Mustermann
Training recording	John Doe
Purchase order	Jane Doe

Columnas redimensionables

`resizableColumns` le da a cada celda de encabezado un tirador que ensancha o estrecha su columna, y fija la maquetación de la tabla para que el ancho se mantenga. `columnSizing` pone un mínimo por columna, `columnWidths` es bindable si quieres leer los anchos o restaurarlos después, y el tirador responde a las flechas izquierda y derecha para quien no use puntero.

Ver Código

<script>
  // Bind only if you want to read the widths back, or restore them later.
  let columnWidths = $state([200, 180, 160]);
</script>

<Table
  resizableColumns
  bind:columnWidths
  columnSizing={[{ minWidth: 120 }, { minWidth: 100 }, { minWidth: 100 }]}
  onColumnResize={(e, { index, width }) => console.log(index, width)}
  aria-label="Table with resizable columns"
>
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
      <TableHeaderCell>Author</TableHeaderCell>
      <TableHeaderCell>Last updated</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {#each items as item (item.file)}
      <TableRow>
        <TableCell>{item.file}</TableCell>
        <TableCell>{item.author}</TableCell>
        <TableCell>{item.lastUpdated}</TableCell>
      </TableRow>
    {/each}
  </TableBody>
</Table>

File	Author	Last updated
Meeting notes	Max Mustermann	7h ago
Thursday presentation	Erika Mustermann	Yesterday at 1:45 PM
Training recording	John Doe	Yesterday at 1:45 PM
Purchase order	Jane Doe	Tue at 9:30 AM

Sin líneas entre filas

`noRowBorders` elimina la línea que separa una fila de la siguiente, para una tabla que vive dentro de una tarjeta u otra superficie que ya la enmarca.

Ver Código

<Table noRowBorders aria-label="Table without row borders">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

File	Author
Meeting notes	Max Mustermann
Thursday presentation	Erika Mustermann
Training recording	John Doe
Purchase order	Jane Doe

Elementos no nativos

`noNativeElements` renderiza cada parte como un `div` y distribuye las filas con flexbox, escribiendo los roles ARIA que una tabla nativa aporta de forma implícita. Úsalo cuando la maquetación estricta de tabla estorbe, como ocurre con filas virtualizadas y encabezados fijos.

Ver Código

<Table noNativeElements aria-label="Table rendered with divs">
  <TableHeader>
    <TableRow>
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Meeting notes</TableCell>
    </TableRow>
  </TableBody>
</Table>

File

Author

Last updated

Meeting notes

Max Mustermann

7h ago

Thursday presentation

Erika Mustermann

Yesterday at 1:45 PM

Training recording

John Doe

Yesterday at 1:45 PM

Purchase order

Jane Doe

Tue at 9:30 AM

Virtualización

La tabla renderiza lo que le pongas dentro, así que cualquier librería de virtualización sirve. Combínala con `noNativeElements`, porque una `table` semántica la maqueta el navegador de una sola pasada y se pelea con una lista por ventanas. En el DOM solo existe una ventana de filas, así que nada de dentro puede dimensionar las columnas: dale un `min-width` a la tabla, e informa el tamaño real del conjunto con `aria-rowcount` y `aria-rowindex`.

Ver Código

<script>
  import SvelteVirtualList from '@humanspeak/svelte-virtual-list';
  import { SvelteSet } from 'svelte/reactivity';

  const rows = Array.from({ length: 2000 }, (_, i) => ({ id: i, file: `Document ${i + 1}` }));

  // A Set, because a windowed list asks "is this row selected?" on every render.
  let selected = $state(new SvelteSet([0]));
  let listRef = $state(null);

  const toggleRow = (id) => (selected.has(id) ? selected.delete(id) : selected.add(id));
</script>

<!--
  A semantic table is laid out by the browser in one pass, so virtualization needs the div layout.
  Only a window of rows exists, so nothing inside can size the columns: give the table a min-width.
  The virtualizer is what lets the arrow keys reach a row the list has not rendered yet.
-->
<Table
  noNativeElements
  enableTabspot
  style="min-width: 520px;"
  aria-label="Virtualized table"
  aria-rowcount={rows.length + 1}
  virtualizer={{
    size: rows.length,
    scrollToIndex: (index) => listRef?.scroll({ index, align: 'auto', smoothScroll: false })
  }}
>
  <TableHeader>
    <TableRow aria-rowindex={1}>
      <TableSelectionCell invisible />
      <TableHeaderCell>File</TableHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody style="height: 320px;">
    <SvelteVirtualList items={rows} bind:this={listRef} defaultEstimatedItemHeight={44}>
      {#snippet renderItem(row, index)}
        {@const isSelected = selected.has(row.id)}
        <TableRow
          aria-rowindex={index + 2}
          aria-selected={isSelected}
          appearance={isSelected ? 'brand' : 'none'}
          onclick={() => toggleRow(row.id)}
        >
          <TableSelectionCell checked={isSelected} checkboxIndicator={{ 'aria-label': `Select ${row.file}` }} />
          <TableCell>{row.file}</TableCell>
        </TableRow>
      {/snippet}
    </SvelteVirtualList>
  </TableBody>
</Table>

Propiedades del componente (Table)

Name	Type	Default	Description
`as`	`'table'` \| `'div'`	`'table'`	El elemento HTML con el que se renderiza la tabla. Es un `div` por defecto cuando se establece `noNativeElements`.
`ref` bindable	`HTMLTableElement` \| `HTMLDivElement`		La referencia DOM del elemento de la tabla.
`size`	`'extra-small'` \| `'small'` \| `'medium'`	`'medium'`	Afecta a los tamaños de todos los subcomponentes de la tabla.
`noNativeElements`	`boolean`	`false`	Renderiza cada parte de la tabla como un `div` en lugar de un elemento semántico de tabla. La maquetación pasa de `display: table` a `display: flex`, que es lo que necesitan la virtualización y los encabezados fijos.
`sortable`	`boolean`	`false`	Convierte cada celda de encabezado en un botón de ordenación. Las celdas individuales pueden seguir activándolo por su cuenta.
`noRowBorders`	`boolean`	`false`	Elimina la línea que separa una fila de la siguiente.
`enableTabspot`	`boolean`	`false`	Mueve el foco entre celdas con las flechas, a través de una sola parada de tabulación. También cambia la tabla al patrón `role="grid"`, que es lo que esa navegación exige.
`virtualizer`	`TableVirtualizer`		Permite que las flechas alcancen filas que una lista por ventanas todavía no ha renderizado. Solo se lee cuando `enableTabspot` está activo, y las filas necesitan un `aria-rowindex` para que pueda volver a encontrarlas.
`resizableColumns`	`boolean`	`false`	Le da a cada celda de encabezado un tirador que ensancha o estrecha su columna. También fija la maquetación de la tabla, para que una columna conserve el ancho que se le dio.
`columnWidths` bindable	`number[]`		El ancho de cada columna en píxeles, según la posición de la columna. Las columnas que se omitan conservan su propio tamaño.
`columnSizing`	`ColumnSizing[]`		Límites por columna, según la posición de la columna.
`onColumnResize`	`(e: Event, data: { index: number; width: number }) => void`		Se llama cada vez que una columna se arrastra o se ajusta a un ancho nuevo.
HTML Attributes

Propiedades del componente (TableHeader)

Name	Type	Default	Description
`as`	`'thead'` \| `'div'`	`'thead'`	El elemento HTML con el que se renderiza el encabezado. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableSectionElement` \| `HTMLDivElement`		La referencia DOM del elemento del encabezado.
HTML Attributes

Propiedades del componente (TableHeaderCell)

Name	Type	Default	Description
`as`	`'th'` \| `'div'`	`'th'`	El elemento HTML con el que se renderiza la celda de encabezado. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableCellElement` \| `HTMLDivElement`		La referencia DOM del elemento de la celda de encabezado.
`sortable`	`boolean`		Si la columna es ordenable. Se hereda de la tabla por defecto.
`sortDirection`	`'ascending'` \| `'descending'`		La dirección en la que está ordenada la columna actualmente. También establece `aria-sort`.
`sortIcon`	`Snippet` \| `Component`		El indicador que se renderiza junto a la etiqueta de una columna ordenable.
`aside`	`Snippet` \| `Component`		Contenido colocado después de la etiqueta, fuera del botón de ordenación.
`focusMode`	`'cell'` \| `'group'` \| `'none'`	`'cell'`	Cómo tratan las flechas a la celda. `'group'` mantiene el contenido focusable de la celda fuera del orden de tabulación hasta que `Enter` entra, y `Escape` vuelve a salir. `'none'` omite la celda por completo. Solo se lee cuando la tabla activa `enableTabspot`. Una celda de encabezado redimensionable usa `'group'` por defecto, para que las flechas alcancen su tirador en lugar de abandonar la columna.
`resizable`	`boolean`		Si la columna se puede redimensionar. Se hereda de la tabla por defecto.
`resizeLabel`	`string`	`'Resize column'`	El nombre accesible del tirador de redimensionado. Dale una cadena traducida, e idealmente propia de cada columna: los atributos de la celda llegan a la celda, nunca al tirador que hay dentro.
HTML Attributes

Propiedades del componente (TableBody)

Name	Type	Default	Description
`as`	`'tbody'` \| `'div'`	`'tbody'`	El elemento HTML con el que se renderiza el cuerpo. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableSectionElement` \| `HTMLDivElement`		La referencia DOM del elemento del cuerpo.
HTML Attributes

Propiedades del componente (TableRow)

Name	Type	Default	Description
`as`	`'tr'` \| `'div'`	`'tr'`	El elemento HTML con el que se renderiza la fila. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableRowElement` \| `HTMLDivElement`		La referencia DOM del elemento de la fila.
`appearance`	`'none'` \| `'brand'` \| `'neutral'`	`'none'`	Cómo se rellena la fila. Pensado para marcar una fila seleccionada.
HTML Attributes

Propiedades del componente (TableCell)

Name	Type	Default	Description
`as`	`'td'` \| `'div'`	`'td'`	El elemento HTML con el que se renderiza la celda. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableCellElement` \| `HTMLDivElement`		La referencia DOM del elemento de la celda.
`focusMode`	`'cell'` \| `'group'` \| `'none'`	`'cell'`	Cómo tratan las flechas a la celda. `'group'` mantiene el contenido focusable de la celda fuera del orden de tabulación hasta que `Enter` entra, y `Escape` vuelve a salir. `'none'` omite la celda por completo. Solo se lee cuando la tabla activa `enableTabspot`.
HTML Attributes

Propiedades del componente (TableSelectionCell)

Name	Type	Default	Description
`as`	`'td'` \| `'div'`	`'td'`	El elemento HTML con el que se renderiza la celda. Se hereda de la tabla por defecto.
`ref` bindable	`HTMLTableCellElement` \| `HTMLDivElement`		La referencia DOM del elemento de la celda.
`type`	`'checkbox'` \| `'radio'`	`'checkbox'`	Una tabla puede tener dos modos de selección.
`checked`	`boolean` \| `'mixed'`	`false`	Si la fila está seleccionada. `'mixed'` renderiza el estado indeterminado.
`subtle`	`boolean`	`false`	Solo muestra el indicador cuando está marcado, o cuando la fila tiene el puntero encima o el foco.
`invisible`	`boolean`	`false`	Oculta el indicador mientras sigue ocupando el mismo espacio.
`checkboxIndicator`	`CheckboxProps`		Las propiedades que se propagan a la casilla que se renderiza cuando `type` es `'checkbox'`.
`radioIndicator`	`RadioButtonProps`		Las propiedades que se propagan al botón de radio que se renderiza cuando `type` es `'radio'`.
HTML Attributes

Propiedades del componente (TableCellLayout)

Name	Type	Description
`ref` bindable	`HTMLDivElement`	La referencia DOM del elemento de la distribución.
`media`	`Snippet` \| `Component`	Un icono, un avatar o cualquier otro elemento visual colocado antes del contenido principal.
`description`	`string`	Una segunda línea de texto que describe o complementa el contenido principal.
`appearance`	`'primary'`	Enfatiza la celda ampliando el elemento visual y poniendo el contenido principal en negrita.
`truncate`	`boolean`	Recorta el contenido con puntos suspensivos en lugar de dejar que se ajuste en varias líneas.
HTML Attributes

Propiedades del componente (TableCellActions)

Name	Type	Description
`ref` bindable	`HTMLDivElement`	La referencia DOM del elemento de las acciones.
`visible`	`boolean`	Mantiene las acciones a la vista en lugar de esperar a que la fila tenga el puntero encima o el foco.
HTML Attributes