Tablas de datos
Tabla con búsqueda, filtros, orden por columna, selección de filas y paginación. Funciona con un script ligero de JavaScript puro; no necesita Alpine, Livewire ni jQuery.
Tabla de datos completa
Escribe en el buscador, filtra por estado, haz clic en un encabezado para ordenar, marca filas para ver las acciones en lote y cambia de página.
| Folio | Nombre | Grado | Estado | Responsable | Cuota | Acciones | |
|---|---|---|---|---|---|---|---|
| REG-14958 | ML
María López |
5º Primaria | Completo | Laura Ramírez | $15,310 |
|
|
| REG-14960 | JH
Jorge Hernández |
1º Primaria | Nuevo | Sin asignar | $14,200 |
|
|
| REG-05318 | CR
Carlos Rivas |
Bachillerato | En revisión | Laura Ramírez | $18,900 |
|
|
| REG-14961 | AS
Ana Sofía Pérez |
3º Secundaria | Completo | Mario Díaz | $16,750 |
|
|
| REG-14955 | LF
Luis Fernández |
2º Preescolar | Rechazado | Mario Díaz | $12,800 |
|
|
| REG-14952 | VO
Valeria Ortiz |
6º Primaria | Nuevo | Laura Ramírez | $15,310 |
|
|
| REG-14950 | DS
Diego Salazar |
1º Secundaria | En revisión | Sin asignar | $16,750 |
|
|
| REG-14947 | CR
Camila Reyes |
4º Primaria | Completo | Mario Díaz | $15,310 |
|
|
| REG-14944 | MC
Mateo Cruz |
Bachillerato | Nuevo | Laura Ramírez | $18,900 |
|
|
| REG-14940 | RG
Renata Guzmán |
2º Primaria | Completo | Mario Díaz | $14,200 |
|
|
| REG-14937 | EV
Emilio Vargas |
3º Preescolar | En revisión | Sin asignar | $12,800 |
|
|
| REG-14933 | PM
Paula Medina |
5º Primaria | Rechazado | Laura Ramírez | $15,310 |
|
|
Sin resultados
Prueba con otra búsqueda o quita los filtros.
| |||||||
<div data-mr-table data-mr-page-size="5">
<input type="search" data-mr-search>
<select data-mr-filter="3">…</select> {{-- índice de la columna a filtrar --}}
<div data-mr-bulk hidden><strong data-mr-selected>0</strong> seleccionados …</div>
<table class="table">
<thead><tr>
<th><input type="checkbox" data-mr-select-all></th>
<th data-mr-sort>Folio</th> {{-- orden al hacer clic --}}
</tr></thead>
<tbody>
<tr><td><input type="checkbox" data-mr-select></td><td>REG-14958</td></tr>
<tr data-mr-empty hidden><td colspan="2">Sin resultados</td></tr>
</tbody>
</table>
<span data-mr-info></span>
<ul class="pagination" data-mr-pager></ul>
</div>
{{-- Para ordenar por un valor distinto al texto visible: <td data-sort="15310">$15,310</td> --}}Con filtros avanzados y paginación del servidor
Para listas grandes (Livewire, controlador): la misma pieza, pero buscar, filtrar y paginar lo hace el servidor. Los filtros menos usados van en un panel que se despliega bajo la barra. Lo urgente (por ejemplo, registros sin atención) va como chip con mr-filter-danger o mr-filter-warning: lleva el color del tono desde el inicio para que se vea que se puede pulsar.
| Folio | Nombre | Estado |
|---|---|---|
| FUNNEL-15037 | Lisbeth Alarcón | Contactado |
| FUNNEL-14967 | Eduardo Juárez | Nuevo |
<div class="mr-dt" x-data="{ abierto: false }">
<div class="mr-dt-toolbar">
<div class="mr-dt-search"><i class="ri-search-line"></i><input type="search" class="form-control form-control-sm" wire:model.live.debounce.300ms="search"></div>
<button class="btn btn-light btn-sm" @click="abierto = !abierto" :aria-expanded="abierto">
<i class="ri-filter-3-line"></i>Filtros <span class="mr-filter-count">2</span>
</button>
<button class="mr-filter mr-filter-danger" wire:click="…"><i class="ri-error-warning-line"></i>582 sin atención</button> {{-- is-active al estar aplicado --}}
<div class="mr-dt-toolbar-end">…acciones de la pantalla (una sola primaria)…</div>
</div>
<div class="mr-dt-panel" x-show="abierto" x-cloak>…selects con form-label…</div>
<div class="mr-table-wrap"><div class="table-responsive"><table class="table table-hover mb-0">…</table></div></div>
<div class="mr-dt-footer">
<span class="mr-small">1502 resultados</span>
<div>…filas por página… {{ $items->links() }}</div>
</div>
</div>Fila con conflicto y barra de acciones fija
mr-row-danger resalta una fila con un error. mr-action-bar queda pegada al pie mientras haya algo seleccionado: así no hay que bajar hasta el final para confirmar.
| Oferta | Estado | |
|---|---|---|
| 1º Primaria Matutino | Lista para importar | |
| 2º Primaria Matutino | Conflicto de ID |
<tr class="mr-row-danger">…</tr>
<div class="mr-action-bar">
<span><strong>3</strong> cambios seleccionados</span>
<button class="btn btn-primary">Aplicar cambios seleccionados</button>
</div>Tabla compacta
Con la clase table-sm: menos relleno vertical para pantallas con muchas filas.
| Concepto | Monto | Saldo |
|---|---|---|
| Inscripción | $15,310.00 | $0.00 |
| Colegiatura agosto | $4,200.00 | $4,200.00 |
| Beca académica | −$1,200.00 | −$1,200.00 |
<div class="mr-table-wrap w-100"><div class="table-responsive">
<table class="table table-sm table-hover mb-0">
<thead><tr><th>Concepto</th><th class="text-end">Monto</th><th class="text-end">Saldo</th></tr></thead>
<tbody>
<tr><td>Inscripción</td><td class="text-end">$15,310.00</td><td class="text-end">$0.00</td></tr>
<tr><td>Colegiatura agosto</td><td class="text-end">$4,200.00</td><td class="text-end">$4,200.00</td></tr>
<tr><td>Beca académica</td><td class="text-end">−$1,200.00</td><td class="text-end">−$1,200.00</td></tr>
</tbody>
</table>
</div></div>Cargando y vacía
| Folio | Nombre | Estado |
|---|---|---|
<div class="mr-table-wrap w-100"><div class="table-responsive">
<table class="table mb-0">
<thead><tr><th>Folio</th><th>Nombre</th><th>Estado</th></tr></thead>
<tbody>
<tr><td><span class="mr-skeleton" style="width: 5rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 9rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 4rem; height: .8rem; display: inline-block"></span></td></tr>
<tr><td><span class="mr-skeleton" style="width: 5rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 9rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 4rem; height: .8rem; display: inline-block"></span></td></tr>
<tr><td><span class="mr-skeleton" style="width: 5rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 9rem; height: .8rem; display: inline-block"></span></td><td><span class="mr-skeleton" style="width: 4rem; height: .8rem; display: inline-block"></span></td></tr>
</tbody>
</table>
</div></div>
Sí
Pon la búsqueda y los filtros arriba, a la izquierda, y las acciones en lote solo cuando hay filas marcadas. Alinea los números a la derecha y el texto a la izquierda.
No
No escondas la acción principal dentro del menú de la fila ni pongas más de 7 columnas visibles en una pantalla angosta: usa desplazamiento horizontal.