---
title: "Table"
description: "Data table component with styling options."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-table"
---

{# Basic table #}
<twig:block-table
    class="my-4"
    caption="Table"
    :headers="[
        [
            {'text': 'ID', 'scope': 'col', 'align': 'center'},
            {'text': 'Name', 'scope': 'col'},
            {'text': 'Email', 'scope': 'col'},
            {'text': 'Status', 'scope': 'col', 'align': 'center'}
        ]
    ]"
    :rows="[
        ['1', '<a href=\'https://www.example.com/\' target=\'_blank\'>John Smith</a>', 'john@example.com', 'Active'],
        ['2', 'Mary Johnson', 'mary@example.com', 'Inactive'],
        ['3', 'Charles Brown', 'charles@example.com', 'Pending']
    ]"
    :columns="[
        {'index': 0, 'width': '80px', 'align': 'center'},
        {'index': 3, 'align': 'center', 'class': 'fw-bold'}
    ]"
    :rowClasses="[
        {'col': 3, 'values': {
            'Active': 'table-success',
            'Inactive': 'table-danger',
            'Pending': 'table-warning'
        }}
    ]"
/>

{# Table with complex headers and footer #}
<twig:block-table
    class="my-4"
    caption="Sales Report 2024"
    :headers="[
        [
            {text: 'Region', scope: 'col', rowspan: '2'},
            {text: 'Quarterly Sales', 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="[
        ['North', '10,500', '12,300', '11,800', '13,200'],
        ['South', '8,900', '9,200', '9,800', '10,100'],
        ['East', '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"
/>

{# Table with actions and toggle #}
<twig:block-table
    class="my-4"
    :headers="[
        [
            {text: 'Product', scope: 'col'},
            {text: 'Category', scope: 'col'},
            {text: 'Stock', scope: 'col', align: 'center'},
            {text: 'Price', scope: 'col', align: 'end'}
        ]
    ]"
    :rows="[
        ['Laptop XPS', 'Computers', '15', '$1,299.99'],
        ['Wireless Mouse', 'Accessories', '45', '$29.99'],
        ['Monitor 27\'\'', 'Displays', '8', '$299.99']
    ]"
    :actions="[
        {
            text: 'Export to Excel',
            icon: 'fas fa-file-excel',
            url: '/export/excel'
        },
        {
            text: 'Export to PDF',
            icon: 'fas fa-file-pdf',
            url: '/export/pdf'
        },
        {type: 'divider'},
        {
            text: 'Print',
            icon: 'fas fa-print',
            onclick: 'window.print()'
        }
    ]"
    :toggleable="true"
    :visible="true"
    :maxHeight="300"
    :hover="false"
/>

{# Minimalist responsive table #}
<twig:block-table
    class="my-4"
    :headers="[
        [
            {text: '#', scope: 'col'},
            {text: 'Title', scope: 'col'},
            {text: 'Date', scope: 'col'},
            {text: 'Status', scope: 'col'}
        ]
    ]"
    :rows="[
        ['1', 'Document 1', '2024-02-22', '<span class=\'badge bg-success\'>Approved</span>'],
        ['2', 'Document 2', '2024-02-21', '<span class=\'badge bg-warning\'>Pending</span>'],
        ['3', 'Document 3', '2024-02-20', '<span class=\'badge bg-danger\'>Rejected</span>']
    ]"
    :small="true"
    :striped="false"
    :bordered="false"
    :hover="false"
/>



---
Last updated on 09/09/2026