Saltar al contenido principal

Tabla

El componente de tabla es usado para organizar y mostrar datos de manera eficiente.

Básica​

Básica
scroll to see more...
PackageInvoice dateStatus
Actions
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending

Tabla con bordes​

Tabla con bordes
scroll to see more...
PackageInvoice dateStatus
Actions
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending

Zebra​

Zebra
scroll to see more...
PackageInvoice dateStatus
Actions
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending

Estilos hover​

Estilos hover
scroll to see more...
PackageInvoice dateStatus
Actions
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending

Compacta​

Compacta
scroll to see more...
PackageInvoice dateAmount
Actions
Free packageJan. 13, 2023$287
Standard packageMar. 4, 2023$530
Business packageJun. 22, 2023$122
Basic packageNov. 28, 2023$890

Contenido escroleable​

Contenido escroleable
scroll to see more...
PackageInvoice dateStatus
Actions
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending
Free package
$287		Jan. 13, 2023paid
Standard package
$530		Mar. 4, 2023paid
Business package
$122		Jun. 22, 2023unpaid
Basic package
$890		Nov. 28, 2023pending

Uso básico​

Scroll​

Siempre deberás envolver la tabla en un <div> tal como se muestra abajo:

<div class="w-full overflow-x-auto scrollbar scrollbar-thumb-slate-400 scrollbar-track-slate-100">
  <table class="eolo-table" />
</div>

Ancho de la tabla​

Se le ha asigando un mínimo de 640px a las tablas en Eolo.

Cuando el ancho de la tabla supera el contenedor, se podrá escrolear horizontalmente, es por ello que se ha agregado un elemento adicional para indicar al usaurio que puede continuar viendo la tabla si se desplaza horizontalmente en su móvil.

<span class="text-slate-300 text-xs font-medium flex justify-end items-center mb-4 md:hidden">
  scroll to see more...
  <i class="ri-arrow-right-double-fill"></i>
</span>

Este elemento es ajeno al componente de tabla.