Simple Table

Simple Table is a lightweight component built upon FFTable, offering functionalities for creating complex table headers and footers with ease. Unlike FFTable, it doesn't include a built-in form for editing data, paging and sorting.

Features

• Complex header and footer layouts
• Dynamic row and cell styling
• Custom column formatting
• Responsive design
• Dark mode support
• Keyboard navigation support
• Screen reader accessibility
• Interactive hover states

Basic Implementation

Include the component in your view:

<f3:inject id="content">
    <div x-data="data" class="max-w-screen-md">
        <include href="blocks/simple-table.html" />
    </div>
</f3:inject>

<f3:inject id="script" mode="append">
    <script src="{{@BASE}}/js/fftable.min.js"></script>
    <script src="{{@BASE}}/js/util.js"></script>
    <script>
        let data = {
            table: {
                fullWidth: true,
                size: 'none',
                display: 'compact',
                containerClass: 'h-[60vh]',
                // Dynamic row styling
                rowClass(idx, row) {
                    return {
                        'whitespace-nowrap': true,
                        'bg-blue-200': idx % 5 == 0
                    };
                },
                // Dynamic cell styling
                cellClass(cidx, ridx, row, col) {
                    return {
                        'bg-red-200': ridx == 5 && cidx == 3,
                        'bg-yellow-200': row[col] > 95,
                    }
                },
                // Column definitions
                columns: [
                    { name: 'city' },
                    { name: 'trousers', class: 'text-right', type: 'number' },
                    { name: 'skirts', class: 'text-right', type: 'number' },
                    { name: 'dresses', class: 'text-right', type: 'number' },
                    { name: 'bracelets', class: 'text-right', type: 'number' },
                    { name: 'rings', class: 'text-right', type: 'number' }
                ],
                // Complex header with merged cells
                customHeader: [
                    [
                        { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
                        { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
                        { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
                    ],
                    [
                        { title: 'Trousers', class: 'border-r' },
                        { title: 'Skirts', class: 'border-r' },
                        { title: 'Dresses', class: 'border-r' },
                        { title: 'Bracelets', class: 'border-r' },
                        { title: 'Rings' }
                    ]
                ],
                // Footer with calculations
                customFooter: [
                    [
                        { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
                        { name: 'total-trousers', class: 'text-right border-r' },
                        { name: 'total-skirts', class: 'text-right border-r' },
                        { name: 'total-dresses', class: 'text-right border-r' },
                        { name: 'total-bracelets', class: 'text-right border-r' },
                        { name: 'total-rings', class: 'text-right' }
                    ]
                ]
            }
        };
    </script>
</f3:inject>

Configuration Options

Table Properties

Dynamic Styling

Column Configuration

Complex Headers & Footers

Best Practices

• Use semantic column types for proper data formatting
• Implement responsive classes for mobile compatibility
• Use consistent border classes for merged cells
• Add descriptive headers and footers for data clarity
• Implement dynamic styling for better data visualization
• Ensure table headers have meaningful descriptions for screen readers
• Test keyboard navigation for accessibility compliance
• Maintain sufficient color contrast for hover and focus states

Accessibility Features

Properties

Interactive States