Data Table

Una tabla de datos ordenable que demuestra el ordenamiento de columnas al hacer clic en los encabezados.

Paquete: @solidiom/data-table
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

El ejemplo en vivo muestra una tabla de lenguajes de programación que se puede ordenar por nombre, año o paradigma. Haz clic en cualquier encabezado de columna para alternar entre los estados ascendente, descendente y sin ordenar.

La interacción por teclado está completamente soportada: presiona Tab para mover el foco entre los encabezados ordenables y luego presiona Enter o Espacio para alternar la dirección de ordenamiento. La columna activa expone aria-sort con la dirección actual para que los lector de pantalla anuncien el cambio de estado.

Nombre	Año	Paradigma
Rust	2010	Systems
TypeScript	2012	Multi-paradigm
Go	2009	Concurrent
Kotlin	2011	Object-oriented
Swift	2014	Multi-paradigm
Elixir	2011	Functional

Ver código fuente

        export function DataTableExample(props: DataTableExampleProps) {
  const headers = () => COLUMN_HEADERS[props.locale]

  const columns = () => [
    { id: "name", header: headers().name, accessorKey: "name" as const, sortable: true },
    { id: "year", header: headers().year, accessorKey: "year" as const, sortable: true },
    {
      id: "paradigm",
      header: headers().paradigm,
      accessorKey: "paradigm" as const,
      sortable: true,
    },
  ]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="data-table-example"
      data-data-table-example
    >
      <DataTable.Root columns={columns()} data={DATA}>
        <DataTable.Header>
          <tr>
            <DataTable.HeaderCell columnId="name">
              <span class="data-table-example__header-label">{headers().name}</span>
            </DataTable.HeaderCell>
            <DataTable.HeaderCell columnId="year">
              <span class="data-table-example__header-label">{headers().year}</span>
            </DataTable.HeaderCell>
            <DataTable.HeaderCell columnId="paradigm">
              <span class="data-table-example__header-label">{headers().paradigm}</span>
            </DataTable.HeaderCell>
          </tr>
        </DataTable.Header>
        <DataTable.Body>
          {DATA.map((row) => (
            <DataTable.Row rowId={row.id}>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.name}</span>
              </DataTable.Cell>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.year}</span>
              </DataTable.Cell>
              <DataTable.Cell>
                <span class="data-table-example__cell-text">{row.paradigm}</span>
              </DataTable.Cell>
            </DataTable.Row>
          ))}
        </DataTable.Body>
      </DataTable.Root>
    </div>
  )
}