componente · @solu30/ui-kit/data-display

TableSkeleton

Esqueleto de carga con la forma de una tabla, con las filas y columnas que se le pidan.

Seguir leyendo — 2 párrafos más

Loading skeleton that simulates a table structure. Displays a grid of animated skeleton blocks for loading states.

Uses Tailwind's animate-pulse for shimmer effect.

89 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

export function TableSkeletonSpecimen() {
  return (
    <Stage label="TableSkeleton · el fallback de la ruta de productos y el mismo listado cargado" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-4 px-1 py-1">
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">
            cargando · `rows={'{'}4{'}'}` — el número lo elige la pantalla, y es lo único que se le pasa
          </span>
          <div className="w-full overflow-x-auto rounded-md border border-content/10">
            <TableSkeleton rows={4} />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">cargada · las mismas cuatro filas</span>
          <div className="w-full overflow-x-auto rounded-md border border-content/10">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Producto</TableHead>
                  <TableHead>Unidad</TableHead>
                  <TableHead>Stock</TableHead>
                  <TableHead>Estado</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { p: 'Harina 000', u: 'kg', s: '48', e: 'OK' },
                  { p: 'Levadura fresca', u: 'kg', s: '3', e: 'Bajo' },
                  { p: 'Aceite de girasol', u: 'l', s: '22', e: 'OK' },
                  { p: 'Azúcar impalpable', u: 'kg', s: '0', e: 'Sin stock' },
                ].map((r) => (
                  <TableRow key={r.p}>
                    <TableCell>{r.p}</TableCell>
                    <TableCell>{r.u}</TableCell>
                    <TableCell>{r.s}</TableCell>
                    <TableCell>
                      <Badge color={r.e === 'OK' ? 'success' : r.e === 'Bajo' ? 'warning' : 'error'} variant="soft" size="sm">
                        {r.e}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/data-display.tsx · TableSkeletonSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { TableSkeleton } from '@solu30/ui-kit/data-display'

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
rows	opcional	`number`	—
columns	opcional	`number`	—
className	opcional	`string`	—
showHeader	opcional	`boolean`	Whether to render a header row above the data rows

Ejemplo del paquete

// La tabla entera mientras carga, con su encabezado.
<TableSkeleton rows={8} columns={4} showHeader />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.