Block Table

Data table component with styling options.

Theme: Bootstrap
ID Nombre Email Estado
1 Juan Pérez [email protected] Activo
2 María López [email protected] Inactivo
3 Carlos Ruiz [email protected] Pendiente

Reporte de Ventas 2024
Región Ventas por Trimestre
Q1 Q2 Q3 Q4
Norte 10,500 12,300 11,800 13,200
Sur 8,900 9,200 9,800 10,100
Este 11,200 11,500 12,100 12,800
Total 30,600 33,000 33,700 36,100

Producto Categoría Stock Precio
Laptop XPS Computadoras 15 $1,299.99
Mouse Wireless Accesorios 45 $29.99
Monitor 27'' Pantallas 8 $299.99

# Título Fecha Estado
1 Documento 1 2024-02-22 Aprobado
2 Documento 2 2024-02-21 Pendiente
3 Documento 3 2024-02-20 Rechazado
{# derafu_twig:templates/pages/components/block-table.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}
{# Tabla básica #}
{% for theme, name in themes %}
    <twig:block-table
        caption="Theme: {{ name }}"
        :headers="[
            [
                {'text': 'ID', 'scope': 'col', 'align': 'center'},
                {'text': 'Nombre', 'scope': 'col'},
                {'text': 'Email', 'scope': 'col'},
                {'text': 'Estado', 'scope': 'col', 'align': 'center'}
            ]
        ]"
        :rows="[
            ['1', 'Juan Pérez', '[email protected]', 'Activo'],
            ['2', 'María López', '[email protected]', 'Inactivo'],
            ['3', 'Carlos Ruiz', '[email protected]', 'Pendiente']
        ]"
        :columns="[
            {'index': 0, 'width': '80px', 'align': 'center'},
            {'index': 3, 'align': 'center', 'class': 'fw-bold'}
        ]"
        :rowClasses="[
            {'col': 3, 'values': {
                'Activo': 'table-success',
                'Inactivo': 'table-danger',
                'Pendiente': 'table-warning'
            }}
        ]"

    />

    <br/>

{% endfor %}

{# Tabla con headers complejos y footer #}
<twig:block-table
    caption="Reporte de Ventas 2024"
    :headers="[
        [
            {text: 'Región', scope: 'col', rowspan: '2'},
            {text: 'Ventas por Trimestre', scope: 'col', colspan: '4', class: 'text-center'},
        ],
        [
            {text: 'Q1', scope: 'col', align: 'end'},
            {text: 'Q2', scope: 'col', align: 'end'},
            {text: 'Q3', scope: 'col', align: 'end'},
            {text: 'Q4', scope: 'col', align: 'end'}
        ]
    ]"
    :rows="[
        ['Norte', '10,500', '12,300', '11,800', '13,200'],
        ['Sur', '8,900', '9,200', '9,800', '10,100'],
        ['Este', '11,200', '11,500', '12,100', '12,800']
    ]"
    :footer="[
        [
            {text: 'Total', colspan: '1'},
            {text: '30,600', class: 'fw-bold text-end'},
            {text: '33,000', class: 'fw-bold text-end'},
            {text: '33,700', class: 'fw-bold text-end'},
            {text: '36,100', class: 'fw-bold text-end'}
        ]
    ]"
    :columns="[
        {width: '120px'},
        {align: 'end'},
        {align: 'end'},
        {align: 'end'},
        {align: 'end'}
    ]"
    :bordered="true"
    :striped="true"
    :hover="false"
/>

<br/>

{# Tabla con acciones y toggle #}
<twig:block-table
    :headers="[
        [
            {text: 'Producto', scope: 'col'},
            {text: 'Categoría', scope: 'col'},
            {text: 'Stock', scope: 'col', align: 'center'},
            {text: 'Precio', scope: 'col', align: 'end'}
        ]
    ]"
    :rows="[
        ['Laptop XPS', 'Computadoras', '15', '$1,299.99'],
        ['Mouse Wireless', 'Accesorios', '45', '$29.99'],
        ['Monitor 27\'\'', 'Pantallas', '8', '$299.99']
    ]"
    :actions="[
        {
            text: 'Exportar a Excel',
            icon: 'fas fa-file-excel',
            url: '/exportar/excel'
        },
        {
            text: 'Exportar a PDF',
            icon: 'fas fa-file-pdf',
            url: '/exportar/pdf'
        },
        {type: 'divider'},
        {
            text: 'Imprimir',
            icon: 'fas fa-print',
            onclick: 'window.print()'
        }
    ]"
    :toggleable="true"
    :visible="true"
    :maxHeight="300"
    :hover="false"
/>

<br/>

{# Tabla minimalista responsiva #}
<twig:block-table
    :headers="[
        [
            {text: '#', scope: 'col'},
            {text: 'Título', scope: 'col'},
            {text: 'Fecha', scope: 'col'},
            {text: 'Estado', scope: 'col'}
        ]
    ]"
    :rows="[
        ['1', 'Documento 1', '2024-02-22', '<span class=\'badge bg-success\'>Aprobado</span>'],
        ['2', 'Documento 2', '2024-02-21', '<span class=\'badge bg-warning\'>Pendiente</span>'],
        ['3', 'Documento 3', '2024-02-20', '<span class=\'badge bg-danger\'>Rechazado</span>']
    ]"
    :small="true"
    :striped="false"
    :bordered="false"
    :hover="false"
/>
{% endblock %}