tables

Table utilities for Tailwind CSS

Table Display Utilities

Display utilities for creating and styling table elements:

TableDisplayFactory


def TableDisplayFactory(
    
):

Factory for table display utilities.

test_tables_display_examples


def test_tables_display_examples(
    
):

Test table display utilities.

Exported source 
# Create the table display factory
table_display = TableDisplayFactory() # The table display factory
Exported source 
def test_tables_display_examples():
    """Test table display utilities."""
    # Basic table display
    assert str(table_display) == "table"
    assert table_display.inline == "inline-table"
    
    # Table element display types
    assert table_display.caption == "table-caption"
    assert table_display.cell == "table-cell"
    assert table_display.column == "table-column"
    assert table_display.column_group == "table-column-group"
    assert table_display.footer_group == "table-footer-group"
    assert table_display.header_group == "table-header-group"
    assert table_display.row_group == "table-row-group"
    assert table_display.row == "table-row"
    
    # Test with modifiers
    assert str(table_display.hover) == "hover:table"
    assert str(table_display.md) == "md:table"

# Run the tests
test_tables_display_examples()

Border Collapse

Control whether table borders should collapse or be separated:

test_tables_border_collapse_examples


def test_tables_border_collapse_examples(
    
):

Test border collapse utilities.

Exported source 
border_collapse = SimpleFactory(
    {
        "collapse": "border-collapse",
        "separate": "border-separate"
    },
    "Border collapse utilities for controlling whether table borders should collapse or be separated"
) # Border collapse factory
Exported source 
def test_tables_border_collapse_examples():
    """Test border collapse utilities."""
    assert str(border_collapse.collapse) == "border-collapse"
    assert str(border_collapse.separate) == "border-separate"

# Run the tests
test_tables_border_collapse_examples()

Border Spacing

Control the spacing between table borders when using border-separate:

BorderSpacingFactory


def BorderSpacingFactory(
    
):

Factory for border-spacing utilities with directional support.

Exported source 
border_spacing = BorderSpacingFactory() # The border spacing factory

Basic Border Spacing

Apply equal spacing to all sides:

test_tables_border_spacing_basic_examples


def test_tables_border_spacing_basic_examples(
    
):

Test basic border spacing utilities.

Exported source 
def test_tables_border_spacing_basic_examples():
    """Test basic border spacing utilities."""
    # Numeric scales
    assert str(border_spacing(0)) == "border-spacing-0"
    assert str(border_spacing(4)) == "border-spacing-4"
    assert str(border_spacing(8)) == "border-spacing-8"
    assert str(border_spacing(2.5)) == "border-spacing-2.5"
    
    # Special values
    assert str(border_spacing.px) == "border-spacing-px"

# Run the tests
test_tables_border_spacing_basic_examples()

Directional Border Spacing

Apply different spacing to horizontal and vertical borders:

test_tables_border_spacing_directional_examples


def test_tables_border_spacing_directional_examples(
    
):

Test directional border spacing utilities.

Exported source 
def test_tables_border_spacing_directional_examples():
    """Test directional border spacing utilities."""
    # Horizontal spacing
    assert str(border_spacing.x(4)) == "border-spacing-x-4"
    assert str(border_spacing.x(8)) == "border-spacing-x-8"
    assert str(border_spacing.x.px) == "border-spacing-x-px"
    
    # Vertical spacing
    assert str(border_spacing.y(2)) == "border-spacing-y-2"
    assert str(border_spacing.y(6)) == "border-spacing-y-6"
    assert str(border_spacing.y.px) == "border-spacing-y-px"

# Run the tests
test_tables_border_spacing_directional_examples()

Arbitrary Border Spacing Values

Use custom values when needed:

test_tables_border_spacing_arbitrary_examples


def test_tables_border_spacing_arbitrary_examples(
    
):

Test border spacing utilities with arbitrary values.

Exported source 
def test_tables_border_spacing_arbitrary_examples():
    """Test border spacing utilities with arbitrary values."""
    # Arbitrary values
    assert str(border_spacing("5px")) == "border-spacing-[5px]"
    assert str(border_spacing("0.125rem")) == "border-spacing-[0.125rem]"
    assert str(border_spacing.x("10px")) == "border-spacing-x-[10px]"
    assert str(border_spacing.y("0.5em")) == "border-spacing-y-[0.5em]"
    
    # Custom properties
    assert str(border_spacing("--table-spacing")) == "border-spacing-(--table-spacing)"
    assert str(border_spacing.x("--horizontal-gap")) == "border-spacing-x-(--horizontal-gap)"

# Run the tests
test_tables_border_spacing_arbitrary_examples()

Table Layout

Control the table layout algorithm:

test_tables_layout_examples


def test_tables_layout_examples(
    
):

Test table layout utilities.

Exported source 
table_layout = SimpleFactory(
    {
        "auto": "table-auto",
        "fixed": "table-fixed"
    },
    "Table layout utilities for controlling the table layout algorithm"
) # Table layout factory
Exported source 
def test_tables_layout_examples():
    """Test table layout utilities."""
    assert str(table_layout.auto) == "table-auto"
    assert str(table_layout.fixed) == "table-fixed"

# Run the tests
test_tables_layout_examples()

Caption Side

Control the alignment of a caption element inside of a table:

test_tables_caption_side_examples


def test_tables_caption_side_examples(
    
):

Test caption side utilities.

Exported source 
caption_side = SimpleFactory(
    {
        "top": "caption-top",
        "bottom": "caption-bottom"
    },
    "Caption side utilities for controlling the alignment of a caption element inside of a table"
) # Caption side factory
Exported source 
def test_tables_caption_side_examples():
    """Test caption side utilities."""
    assert str(caption_side.top) == "caption-top"
    assert str(caption_side.bottom) == "caption-bottom"

# Run the tests
test_tables_caption_side_examples()

Comprehensive Test Functions

Test all table utilities to ensure they work correctly:

test_tables_all_utilities


def test_tables_all_utilities(
    
):

Comprehensive test of all table utilities.

Practical Examples

Let’s see how to use these table utilities in real FastHTML components:

test_tables_fasthtml_examples


def test_tables_fasthtml_examples(
    
):

Test table utilities in practical FastHTML component examples.

Exported source 
def test_tables_fasthtml_examples():
    """Test table utilities in practical FastHTML component examples."""
    from fasthtml.common import Table, Thead, Tbody, Tr, Th, Td, Caption, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w, min_w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Basic table with collapsed borders
    basic_table = Table(
        Thead(
            Tr(
                Th("Name"),
                Th("Email"),
                Th("Role")
            )
        ),
        Tbody(
            Tr(
                Td("John Doe"),
                Td("john@example.com"),
                Td("Admin")
            ),
            Tr(
                Td("Jane Smith"),
                Td("jane@example.com"),
                Td("User")
            )
        ),
        cls=combine_classes(
            border_collapse.collapse,
            w.full
        )
    )
    assert "border-collapse" in basic_table.attrs['class']
    
    # Table with separated borders and spacing
    spaced_table = Table(
        Tbody(
            Tr(Td("Cell 1"), Td("Cell 2")),
            Tr(Td("Cell 3"), Td("Cell 4"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing(2),
            w.full
        )
    )
    assert "border-separate" in spaced_table.attrs['class']
    assert "border-spacing-2" in spaced_table.attrs['class']
    
    # Table with different horizontal and vertical spacing
    custom_spaced_table = Table(
        Tbody(
            Tr(Td("A"), Td("B"), Td("C")),
            Tr(Td("D"), Td("E"), Td("F"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing.x(4),
            border_spacing.y(2),
            w.full
        )
    )
    assert "border-spacing-x-4" in custom_spaced_table.attrs['class']
    assert "border-spacing-y-2" in custom_spaced_table.attrs['class']
    
    # Fixed layout table with caption
    fixed_table = Table(
        Caption("User Information", cls=str(caption_side.top)),
        Thead(
            Tr(
                Th("ID", cls=str(w(20))),
                Th("Name", cls=str(w(40))),
                Th("Description")
            )
        ),
        Tbody(
            Tr(
                Td("001"),
                Td("Product A"),
                Td("A detailed description of Product A that might be quite long")
            )
        ),
        cls=combine_classes(
            table_layout.fixed,
            border_collapse.collapse,
            w.full
        )
    )
    assert "table-fixed" in fixed_table.attrs['class']
    assert "caption-top" in fixed_table.children[0].attrs['class']
    
    # Auto layout table (default behavior)
    auto_table = Table(
        Caption("Sales Data", cls=str(caption_side.bottom)),
        Thead(
            Tr(Th("Month"), Th("Revenue"), Th("Growth"))
        ),
        Tbody(
            Tr(Td("January"), Td("$10,000"), Td("+5%")),
            Tr(Td("February"), Td("$12,000"), Td("+20%"))
        ),
        cls=combine_classes(
            table_layout.auto,
            border_collapse.separate,
            border_spacing.px,
            min_w.full
        )
    )
    assert "table-auto" in auto_table.attrs['class']
    assert "caption-bottom" in auto_table.children[0].attrs['class']
    assert "border-spacing-px" in auto_table.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        basic_table,
        spaced_table,
        custom_spaced_table,
        fixed_table,
        auto_table,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_tables_fasthtml_examples()
Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
Cell 1 Cell 2
Cell 3 Cell 4
A B C
D E F
User Information
ID Name Description
001 Product A A detailed description of Product A that might be quite long
Sales Data
Month Revenue Growth
January $10,000 +5%
February $12,000 +20% 
test_func = test_tables_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Complex Table Example

A more complex example combining multiple table utilities:

test_tables_complex_fasthtml_examples


def test_tables_complex_fasthtml_examples(
    
):

Test a complex table example with various styling.

Exported source 
def test_tables_complex_fasthtml_examples():
    """Test a complex table example with various styling."""
    from fasthtml.common import Table, Thead, Tbody, Tr, Th, Td, Caption, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.borders import border, border_color, rounded
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_family, font_weight, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_tailwind.utilities.layout import overflow
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Create a styled data table
    data_table = Div(
        Table(
            Caption(
                "Quarterly Sales Report",
                cls=combine_classes(
                    caption_side.top,
                    font_size.lg,
                    font_weight.semibold,
                    text_color.gray._700,
                    m.b(2)
                )
            ),
            Thead(
                Tr(
                    Th("Quarter", cls=combine_classes(text_align.left, p(4), bg.gray._100)),
                    Th("Product", cls=combine_classes(text_align.left, p(4), bg.gray._100)),
                    Th("Units Sold", cls=combine_classes(text_align.right, p(4), bg.gray._100)),
                    Th("Revenue", cls=combine_classes(text_align.right, p(4), bg.gray._100)),
                    cls=combine_classes(border.b._2, border_color.gray._300)
                )
            ),
            Tbody(
                Tr(
                    Td("Q1 2024", cls=str(p(4))),
                    Td("Widget A", cls=str(p(4))),
                    Td("1,234", cls=combine_classes(text_align.right, p(4))),
                    Td("$12,340", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q1 2024", cls=str(p(4))),
                    Td("Widget B", cls=str(p(4))),
                    Td("567", cls=combine_classes(text_align.right, p(4))),
                    Td("$8,505", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q2 2024", cls=str(p(4))),
                    Td("Widget A", cls=str(p(4))),
                    Td("1,567", cls=combine_classes(text_align.right, p(4))),
                    Td("$15,670", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q2 2024", cls=str(p(4))),
                    Td("Widget B", cls=str(p(4))),
                    Td("890", cls=combine_classes(text_align.right, p(4))),
                    Td("$13,350", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                )
            ),
            cls=combine_classes(
                table_layout.fixed,
                border_collapse.separate,
                border_spacing(0),
                w.full,
                bg.white,
                shadow.sm,
                rounded.lg,
                overflow.hidden
            )
        ),
        cls=str(p(6))
    )
    
    # Verify table utilities are applied
    table_elem = data_table.children[0]
    assert "table-fixed" in table_elem.attrs['class']
    assert "border-separate" in table_elem.attrs['class']
    assert "border-spacing-0" in table_elem.attrs['class']
    assert "caption-top" in table_elem.children[0].attrs['class']
    
    # Create a compact table with custom spacing
    compact_table = Table(
        Tbody(
            Tr(Td("Item 1"), Td("$10"), Td("✓")),
            Tr(Td("Item 2"), Td("$20"), Td("✓")),
            Tr(Td("Item 3"), Td("$15"), Td("✗"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing.x(1),
            border_spacing.y(0.5),
            table_layout.auto,
            font_size.sm
        )
    )
    
    assert "border-separate" in compact_table.attrs['class']
    assert "border-spacing-x-1" in compact_table.attrs['class']
    assert "border-spacing-y-0.5" in compact_table.attrs['class']
    assert "table-auto" in compact_table.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        data_table,
        compact_table,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the test
test_tables_complex_fasthtml_examples()
Quarterly Sales Report
Quarter Product Units Sold Revenue
Q1 2024 Widget A 1,234 $12,340
Q1 2024 Widget B 567 $8,505
Q2 2024 Widget A 1,567 $15,670
Q2 2024 Widget B 890 $13,350
Item 1 $10 ✓
Item 2 $20 ✓
Item 3 $15 ✗ 
test_func = test_tables_complex_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Export