Table Component
    A Bootstrap 5 component for creating responsive, styled tables with various features.

    Parameters:
    Core Options:
        - headers: array - Table header cells (required)
        - rows: array - Table rows, each containing an array of cells (required)
        - class: string - Additional CSS classes for the table
        - attributes: array - Additional HTML attributes for the table

    Style Options:
        - variant: string - Table style variant
            Values: 'dark', 'striped', 'hover', 'bordered', 'borderless', 'small'
        - responsive: boolean/string - Make table responsive
            Values: true, 'sm', 'md', 'lg', 'xl'

    Caption Options:
        - caption: string - Table caption text
        - caption_top: boolean - Place caption at the top of the table (default: false)

    Custom Classes:
        - header_class: string - Class for the header row
        - header_cell_class: string - Class for header cells
        - body_class: string - Class for the table body
        - row_class: string - Class for table rows
        - cell_class: string - Class for table cells

    ThemedComponent::make("content/table")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->body_class('value') //string - Class for the table body
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->caption('value') //string - Table caption text
	->caption_top('value') //boolean - Place caption at the top of the table (default: false)
	->cell_class('value') //string - Class for table cells
	->class('value') //string - Additional CSS classes for the table
	->header_cell_class('value') //string - Class for header cells
	->header_class('value') //string - Class for the header row
	->headers('value') //array - Table header cells (required)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->responsive('value') //boolean/string - Make table responsive
	->row_class('value') //string - Class for table rows
	->rows('value') //array - Table rows, each containing an array of cells (required)
	->variant('value') //string - Table style variant
	->render();

// Basic table example
echo ThemedComponent::make($component)
    ->headers(['#', 'First', 'Last', 'Handle'])
    ->rows([
        ['1', 'Mark', 'Otto', '@mdo'],
        ['2', 'Jacob', 'Thornton', '@fat'],
        ['3', 'Larry', 'Bird', '@twitter']
    ])
    ->variant('striped')
    ->responsive(true)
    ->render();

// Advanced table with styling and caption
echo ThemedComponent::make($component)
    ->headers([
        'Product',
        'Description',
        'Price',
        'Stock'
    ])
    ->rows([
        [
            'Widget Pro',
            'Advanced widget with premium features',
            '$199.99',
            '<span class="badge bg-success">In Stock</span>'
        ],
        [
            'Super Tool',
            'Professional-grade tool set',
            '$299.99',
            '<span class="badge bg-warning">Low Stock</span>'
        ],
        [
            'Mega Device',
            'Next-generation smart device',
            '$499.99',
            '<span class="badge bg-danger">Out of Stock</span>'
        ]
    ])
    ->variant('bordered')
    ->caption('Product Inventory')
    ->caption_top(true)
    ->header_class('table-dark')
    ->responsive('sm')
    ->render();

// Table style variants
echo ThemedComponent::make($component)
    ->headers(['Type', 'Description'])
    ->rows([
        ['Hover', 'Mouse over to highlight rows']
    ])
    ->variant('hover')
    ->render();

echo ThemedComponent::make($component)
    ->headers(['Type', 'Description'])
    ->rows([
        ['Dark', 'Dark theme table']
    ])
    ->variant('dark')
    ->render();

echo ThemedComponent::make($component)
    ->headers(['Type', 'Description'])
    ->rows([
        ['Small', 'Condensed table']
    ])
    ->variant('small')
    ->render();

Type	Description
Hover	Mouse over to highlight rows

Type	Description
Dark	Dark theme table

Type	Description
Small	Condensed table

Content of the table.twig file

{# Table Component
    A Bootstrap 5 component for creating responsive, styled tables with various features.

    Parameters:
    Core Options:
        - headers: array - Table header cells (required)
        - rows: array - Table rows, each containing an array of cells (required)
        - class: string - Additional CSS classes for the table
        - attributes: array - Additional HTML attributes for the table

    Style Options:
        - variant: string - Table style variant
            Values: 'dark', 'striped', 'hover', 'bordered', 'borderless', 'small'
        - responsive: boolean/string - Make table responsive
            Values: true, 'sm', 'md', 'lg', 'xl'

    Caption Options:
        - caption: string - Table caption text
        - caption_top: boolean - Place caption at the top of the table (default: false)

    Custom Classes:
        - header_class: string - Class for the header row
        - header_cell_class: string - Class for header cells
        - body_class: string - Class for the table body
        - row_class: string - Class for table rows
        - cell_class: string - Class for table cells
#}

{% set table_classes = ['table'] %}

{# Add variant classes #}
{% if content.variant %}
    {% if content.variant == 'dark' %}
        {% set table_classes = table_classes|merge(['table-dark']) %}
    {% elseif content.variant == 'striped' %}
        {% set table_classes = table_classes|merge(['table-striped']) %}
    {% elseif content.variant == 'hover' %}
        {% set table_classes = table_classes|merge(['table-hover']) %}
    {% elseif content.variant == 'bordered' %}
        {% set table_classes = table_classes|merge(['table-bordered']) %}
    {% elseif content.variant == 'borderless' %}
        {% set table_classes = table_classes|merge(['table-borderless']) %}
    {% elseif content.variant == 'small' %}
        {% set table_classes = table_classes|merge(['table-sm']) %}
    {% endif %}
{% endif %}

{# Add custom classes #}
{% if content.class %}
    {% set table_classes = table_classes|merge([content.class]) %}
{% endif %}

{% if content.responsive %}
    <div class="table-responsive{% if content.responsive != true %}-{{ content.responsive }}{% endif %}">
{% endif %}

<table class="{{ table_classes|join(' ') }}"
    {% if content.attributes %}
        {% for attr, value in content.attributes %}
            {{ attr }}="{{ value }}"
        {% endfor %}
    {% endif %}
>
    {% if content.caption %}
        <caption {% if content.caption_top %}class="caption-top"{% endif %}>
            {{ content.caption }}
        </caption>
    {% endif %}

    {% if content.headers %}
        <thead {% if content.header_class %}class="{{ content.header_class }}"{% endif %}>
            <tr>
                {% for header in content.headers %}
                    <th {% if content.header_cell_class %}class="{{ content.header_cell_class }}"{% endif %} scope="col">
                        {{ header|raw }}
                    </th>
                {% endfor %}
            </tr>
        </thead>
    {% endif %}

    {% if content.rows %}
        <tbody {% if content.body_class %}class="{{ content.body_class }}"{% endif %}>
            {% for row in content.rows %}
                <tr {% if content.row_class %}class="{{ content.row_class }}"{% endif %}>
                    {% for cell in row %}
                        <td {% if content.cell_class %}class="{{ content.cell_class }}"{% endif %}>
                            {{ cell|raw }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    {% endif %}
</table>

{% if content.responsive %}
    </div>
{% endif %}