Tabla por defecto #
Ejemplo: "Tabla por defecto", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.0.1, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- table-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
<caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
<thead>
<tr class="border-t border-neutral-base divide-x divide-neutral-base">
<th scope="col" id="table-default-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
<span class="inline-block relative">
Mes de pago
</span>
</th>
<th scope="col" id="table-default-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
<span class="inline-block relative">
Primer pago
</span>
</th>
<th scope="col" id="table-default-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
<span class="inline-block relative">
Segundo pago
</span>
</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
<td tabindex="-1" class="px-base py-sm">Enero</td>
<td tabindex="-1" class="px-base py-sm text-right">85€</td>
<td tabindex="-1" class="px-base py-sm text-right">95€</td>
</tr>
<tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
<td tabindex="-1" class="px-base py-sm">Febrero</td>
<td tabindex="-1" class="px-base py-sm text-right">75€</td>
<td tabindex="-1" class="px-base py-sm text-right">55€</td>
</tr>
<tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
<td tabindex="-1" class="px-base py-sm">Marzo</td>
<td tabindex="-1" class="px-base py-sm text-right">165€</td>
<td tabindex="-1" class="px-base py-sm text-right">125€</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<!-- /table-advanced -->
Ejemplo: "Tabla por defecto", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
"idPrefix": "table-default",
"caption": "Caption de la tabla",
"captionClasses": "sr-only mb-base font-bold text-left text-lg",
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
}
],
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
],
"classes": "min-w-full"
}) }}
Mes de pago | Primer pago | Segundo pago |
---|---|---|
Enero | 85€ | 95€ |
Febrero | 75€ | 55€ |
Marzo | 165€ | 125€ |
Mostrar códigodel ejemplo: Tabla por defecto
Contenido
Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
"idPrefix": "table-default",
"caption": "Caption de la tabla",
"captionClasses": "sr-only mb-base font-bold text-left text-lg",
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
}
],
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
],
"classes": "min-w-full"
}) }}