Data tables with sorting, pagination, and various styling options.
Tabla básica con paginación
/ 10 páginas
| ID | Nombre | Correo electrónico | Rol | Estado | |
|---|---|---|---|---|---|
|
|
1 | John Doe | john.doe@example.com | Admin | Active |
|
|
2 | Jane Smith | jane.smith@example.com | User | Pending |
|
|
3 | Bob Johnson | bob.johnson@example.com | User | Active |
|
|
4 | Alice Brown | alice.brown@example.com | Moderator | Inactive |
|
|
5 | Charlie Wilson | charlie.wilson@example.com | User | Active |
/ 10 páginas
Tabla rayada
| Producto | Categoría | Precio | Existencias | Estado |
|---|---|---|---|---|
| Laptop Pro | Electronics | $1,299.99 | 15 | In Stock |
| Wireless Mouse | Accessories | $29.99 | 0 | Out of Stock |
| Office Chair | Furniture | $249.99 | 8 | In Stock |
| USB Cable | Accessories | $12.99 | 3 | Low Stock |
Tabla con espaciado 2x
/ 5 páginas
| Fecha | Transacción | Importe | Saldo | |
|---|---|---|---|---|
|
|
2024-01-15 | Purchase at Store ABC | -$45.67 | $1,234.56 |
|
|
2024-01-14 | Salary Deposit | +$2,500.00 | $1,280.23 |
|
|
2024-01-13 | ATM Withdrawal | -$100.00 | -$1,219.77 |
|
|
2024-01-12 | Online Transfer | -$200.00 | -$1,119.77 |
Posicionamiento de Cargar más
Tabla con «Cargar más» alineado al inicio
| Producto | Precio | Existencias | Estado |
|---|---|---|---|
| MacBook Pro | $2,399 | 12 | Available |
| iPhone 15 | $999 | 0 | Out of Stock |
| iPad Air | $599 | 8 | Available |
Tabla con «Cargar más» centrado
| Cliente | Correo electrónico | Pedidos | Total |
|---|---|---|---|
| John Smith | john@example.com | 23 | $4,567.89 |
| Sarah Johnson | sarah@example.com | 18 | $3,245.12 |
| Mike Davis | mike@example.com | 31 | $6,789.45 |
Tabla con «Cargar más» a la derecha (estado de carga)
| Factura | Fecha | Importe | Estado |
|---|---|---|---|
| #INV-001 | 2024-01-15 | $234.56 | Paid |
| #INV-002 | 2024-01-14 | $567.89 | Pending |
| #INV-003 | 2024-01-13 | $123.45 | Paid |
Ejemplos de posicionamiento del paginador
Paginador alineado al inicio
/ 10 páginas
Paginador alineado al centro (predeterminado)
/ 10 páginas
Paginador alineado al final
/ 10 páginas
Conjuntos de iconos de paginador alternativos
Ángulos dobles/simples (actual)
/ 10 páginas
Flechas triangulares
/ 10 páginas
Flechas simples
/ 10 páginas
Flechas dobles matemáticas
/ 10 páginas
Tablas de panel
The
--panel shape (<.table_container is_panel>) was
deprecated in pure-admin-core 2.9.0-rc10 as a near-duplicate of the table card. Use
<.table_card> for any table that needs a header, actions, or footer —
the examples below now use it.
Tarjeta de tabla básica (sin encabezado)
| Producto | SKU | Precio | Existencias |
|---|---|---|---|
| Wireless Keyboard | WK-2024 | $79.99 | 45 |
| USB-C Hub | HUB-7P | $49.99 | 120 |
| Monitor Stand | MS-ADJ | $129.99 | 28 |
Tarjeta de tabla con encabezado
Pedidos recientes
| ID de pedido | Cliente | Fecha | Total | Estado |
|---|---|---|---|---|
| #ORD-1001 | Alice Johnson | 2024-01-28 | $234.50 | Shipped |
| #ORD-1002 | Bob Williams | 2024-01-27 | $89.00 | Processing |
| #ORD-1003 | Carol Davis | 2024-01-27 | $567.25 | Delivered |
| #ORD-1004 | David Miller | 2024-01-26 | $145.00 | Cancelled |
Tarjetas de tabla en cuadrícula (división 75/25)
Table cards work inside grid just like cards.
Registro de actividad (75%)
| Hora | Usuario | Acción |
|---|---|---|
| 10:45 AM | admin | Updated product pricing |
| 10:32 AM | john.doe | Created new order #1005 |
| 10:15 AM | admin | Approved refund request |
Estadísticas (25%)
| Métrica | Valor |
|---|---|
| Orders | 156 |
| Revenue | $12.4k |
| Refunds | 3 |
Tarjetas de tabla
The pa-table-card component is a card specifically designed for tables. It includes header, body (for the table), footer, and color variants like regular cards.
Tarjeta de tabla básica con acciones
Pedidos recientes
| ID de pedido | Cliente | Fecha | Importe | Estado |
|---|---|---|---|---|
| #1001 | John Smith | 2024-01-28 | $250.00 | Completed |
| #1002 | Jane Doe | 2024-01-27 | $180.00 | Pending |
| #1003 | Bob Wilson | 2024-01-26 | $320.00 | Completed |
Variantes de color
Table cards support the same color variants as regular cards: --primary, --success, --warning, --danger, and theme colors --color-1 through --color-9.
Tarjeta de tabla principal
| Usuario | Rol | Estado |
|---|---|---|
| Alice | Admin | Active |
| Bob | Editor | Active |
Tarjeta de tabla de éxito
| Tarea | Completado |
|---|---|
| Database backup | 10:00 AM |
| Cache cleared | 10:15 AM |
Tarjeta de tabla de advertencia
| Alerta | Hora |
|---|---|
| High CPU usage | 2 min ago |
| Low disk space | 5 min ago |
Tarjeta de tabla de peligro
| Error | Recuento |
|---|---|
| Connection timeout | 23 |
| Auth failure | 7 |
Tarjetas de tabla simple
Use pa-table-card--plain to remove the card visual styling (border, shadow, background) while keeping grid behavior. Tables work side by side with proper gaps.
Ventas por región
| Región | Q1 | Q2 | Q3 |
|---|---|---|---|
| North | $45,000 | $52,000 | $48,000 |
| South | $38,000 | $41,000 | $44,000 |
| East | $62,000 | $58,000 | $65,000 |
Productos destacados
| Producto | Unidades | Ingresos |
|---|---|---|
| Widget Pro | 1,245 | $124,500 |
| Gadget Plus | 892 | $89,200 |
| Tool Master | 567 | $56,700 |
Tabla con borde
| Elemento | Cantidad | Precio | Total |
|---|---|---|---|
| Widget A | 10 | $25.00 | $250.00 |
| Widget B | 5 | $45.00 | $225.00 |
| Widget C | 8 | $30.00 | $240.00 |
Con borde + Rayas
| Departamento | Empleados | Presupuesto |
|---|---|---|
| Engineering | 45 | $2.5M |
| Marketing | 22 | $1.2M |
| Sales | 38 | $1.8M |
| HR | 12 | $0.6M |
Tabla simple con paginadores
| ID | Cliente | Fecha del pedido | Estado | Total |
|---|---|---|---|---|
| #1001 | John Smith | 2026-01-15 | Completed | $245.00 |
| #1002 | Jane Doe | 2026-01-16 | Pending | $189.50 |
| #1003 | Bob Wilson | 2026-01-17 | Completed | $312.75 |
| #1004 | Alice Brown | 2026-01-18 | Cancelled | $78.00 |
| #1005 | Charlie Davis | 2026-01-19 | Completed | $456.25 |
Ejemplo real: diseño de detalle de pedido
Cards and panel tables side by side — all with consistent visual treatment.
Información del cliente
Nombre
John Smith
Correo electrónico
john.smith@example.com
Teléfono
+1 (555) 123-4567
Cliente desde
March 2021
Detalles de entrega
Dirección
123 Main Street, Apt 4B
Ciudad
New York, NY 10001
Método de entrega
Express Shipping
Entrega est.
Jan 30, 2024
Artículos del pedido
| Producto | SKU | Cant. | Precio unitario | Total |
|---|---|---|---|---|
| Wireless Bluetooth Headphones | WBH-PRO-BK | 1 | $149.99 | $149.99 |
| USB-C Charging Cable (2m) | USB-C-2M | 2 | $19.99 | $39.98 |
| Carrying Case | CASE-HP-01 | 1 | $29.99 | $29.99 |
| Subtotal | $219.96 | |||
| Envío | $12.99 | |||
| Impuesto | $18.70 | |||
| Total | $251.65 | |||
Referencia de clases CSS
Tablas
pa-table-container— Bare framed + scrollable wrapper (no header)pa-table-card— Full card with header/body/footer/actions (blessed shape for tables with chrome)pa-table-card__body--scrollable— Horizontal scroll for wide tables inside the cardpa-table-card--plain— Table card without the card chromepa-table-container--panelpa-table-cardpa-table— Base table classpa-table--striped— Zebra striping on rowspa-table--xs— Extra small paddingpa-table--sm— Small paddingpa-table--lg— Large paddingpa-table--xl— Extra large paddingpa-table--responsive— Stacks into cards on mobilepa-table--responsive-grid— CSS grid layout on mobile.col-auto— Auto-width column (shrinks to content)
Tarjetas de tabla
pa-table-card— Card wrapper for tablespa-table-card--primary / success / warning / danger— Color variantspa-table-card--color-1through--color-9— Theme colorspa-table-card--plain— Remove card stylingpa-table-card__header— Card headerpa-table-card__title— Title wrapperpa-table-card__actions— Header actionspa-table-card__body— Table body wrapperpa-table-card__body--scrollable— Horizontal scrollpa-table-card__footer— Footer for pagination
Paginador
pa-pager— Pagination container (default: centered)pa-pager--start— Start-alignedpa-pager--center— Center-alignedpa-pager--end— End-alignedpa-pager__container— Inner wrapper (flex)pa-pager__controls— Navigation buttonspa-pager__info— Page input and textpa-pager__input— Page number inputpa-pager__text— "/ X pages" text
Cargar más
pa-load-more— Load more container (default: centered)pa-load-more--start— Start-alignedpa-load-more--center— Center-alignedpa-load-more--end— End-alignedpa-load-more__button— The button elementpa-load-more__button--loading— Loading statepa-load-more__spinner— Spinner elementpa-load-more__text— Button textpa-load-more__count— Count display (e.g., "3 of 150")