TableBuilder Styling

Complete guide for customizing table appearance using the field-first pattern. Apply CSS classes directly to fields, conditionally style based on values, and create dynamic, visually appealing tables.

Table-Level Styling

Quick Color Themes

$table = \Builders\TableBuilder::create($model, 'posts_table')
    ->tableColor('primary')    // Blue theme
    ->tableColor('success')    // Green theme
    ->tableColor('danger')     // Red theme
    ->tableColor('striped')    // Striped rows
    ->getResponse();
echo $table['html'];

Custom Table Classes

$table = \Builders\TableBuilder::create($model, 'posts_table')
    // Combine multiple Bootstrap classes
    ->tableClass('table table-hover table-bordered table-sm')
    ->getResponse();
echo $table['html'];

Field-First Styling

The field-first pattern allows you to apply styling directly to each field using method chaining. This keeps all field configurations (data, display, and styling) in one place.

Basic Field Styling

$table = \Builders\TableBuilder::create($model, 'sales_table')
    // Right-align and bold the amount column
    ->field('amount')
        ->label('Total Amount')
        ->class('text-end fw-bold')

    // Center-align status column
    ->field('status')
        ->label('Status')
        ->class('text-center')

    // Left-align customer name
    ->field('customer_name')
        ->label('Customer')
        ->class('text-start')

    ->getTable();

Header Column Styling

$table = \Builders\TableBuilder::create($model, 'sales_table')
    // Custom header styling for specific fields
    ->field('amount')
        ->label('Amount')
        ->colHeaderClass('bg-success text-white text-end')
        ->class('text-end')

    ->field('status')
        ->label('Status')
        ->colHeaderClass('bg-info text-center')
        ->class('text-center')

    ->getTable();

Conditional Styling

Style Based on Field Value

Apply CSS classes when a field matches a specific value using classValue().

$table = \Builders\TableBuilder::create($model, 'products_table')
    // Status field with color coding
    ->field('status')
        ->label('Status')
        ->classValue('active', 'text-success fw-bold')      // Green for active
        ->classValue('inactive', 'text-danger')             // Red for inactive
        ->classValue('pending', 'text-warning')             // Orange for pending

    // Stock with conditional styling
    ->field('stock')
        ->label('Stock')
        ->classValue(10, 'text-danger fw-bold', '<')       // Red if < 10
        ->classValue(50, 'text-warning', '<')              // Orange if < 50
        ->classValue(50, 'text-success', '>=')             // Green if >= 50

    // Price highlighting
    ->field('price')
        ->label('Price')
        ->classValue(100, 'text-success fs-5', '>')        // Large green if > 100
        ->class('text-end')

    ->getTable();

// Supported operators: '==', '!=', '>', '<', '>=', '<=', 'contains'

Style Based on Another Field

Apply CSS classes to a field based on the value of a different field using classOtherValue().

$table = \Builders\TableBuilder::create($model, 'products_table')
    // Highlight price when product has discount
    ->field('price')
        ->label('Price')
        ->classOtherValue('has_discount', true, 'text-success fw-bold')
        ->class('text-end')

    // Show title in muted color if not published
    ->field('title')
        ->label('Title')
        ->classOtherValue('published', false, 'text-muted')
        ->link('?page=products&action=edit&id=%id%')

    // Highlight quantity based on stock status
    ->field('quantity')
        ->label('Quantity')
        ->classOtherValue('stock_status', 'low', 'text-danger')
        ->classOtherValue('stock_status', 'out', 'text-danger text-decoration-line-through')

    ->getTable();

Cell-Level Styling

Cell Background Colors

Use cellClassValue() to apply background colors and other styles to individual cells.

$table = \Builders\TableBuilder::create($model, 'orders_table')
    // Status badges with background colors
    ->field('status')
        ->label('Status')
        ->cellClassValue('pending', 'bg-warning text-dark')
        ->cellClassValue('completed', 'bg-success text-white')
        ->cellClassValue('cancelled', 'bg-danger text-white')
        ->class('text-center')

    // Priority highlighting
    ->field('priority')
        ->label('Priority')
        ->cellClassValue('high', 'bg-danger text-white fw-bold')
        ->cellClassValue('medium', 'bg-warning text-dark')
        ->cellClassValue('low', 'bg-light')

    ->getTable();

Cell Styling Based on Other Fields

Use cellClassOtherValue() to style cells based on other field values.

$table = \Builders\TableBuilder::create($model, 'products_table')
    // Highlight price cell when on sale
    ->field('price')
        ->label('Price')
        ->cellClassOtherValue('on_sale', true, 'bg-warning text-dark fw-bold')
        ->class('text-end')

    // Show discount price in green background
    ->field('discount_price')
        ->label('Discount')
        ->cellClassOtherValue('has_discount', true, 'bg-success text-white')
        ->class('text-end')

    ->getTable();

Alternating Column Colors

Use classAlternate() to create striped column effects.

$table = \Builders\TableBuilder::create($model, 'data_table')
    ->field('value')
        ->label('Value')
        ->classAlternate('bg-light', 'bg-white')

    ->getTable();

Row-Level Styling

Conditional Row Highlighting

$table = \Builders\TableBuilder::create($model, 'orders_table')
    // Highlight entire rows based on status
    ->rowClassByValue('status', 'cancelled', 'table-danger')
    ->rowClassByValue('status', 'pending', 'table-warning')

    // Highlight high-value orders (total > 1000)
    ->rowClassByValue('total', 1000, 'table-success', '>')

    // Supported operators: '==', '!=', '>', '<', '>=', '<='
    ->getTable();

Alternating Row Colors

$table = \Builders\TableBuilder::create($model, 'orders_table')
    // Classic striped rows
    ->rowClassAlternate('', 'table-light')

    // Or use tableColor for built-in striping
    ->tableColor('striped')

    ->getTable();

Footer Styling

Footer with Totals

$table = \Builders\TableBuilder::create($model, 'sales_table')
    // Define footer content (one value per column)
    ->setFooter([
        '',              // Empty for ID column
        'Total:',        // Label
        '€ 15,420.50',   // Total amount
        '',              // Empty for actions
    ])

    // Style the footer row
    ->footerClass('table-dark fw-bold')

    ->getTable();

Complete Styling Example

$model = new \Models\OrderModel();

$table = \Builders\TableBuilder::create($model, 'orders_table')
    // Query configuration
    ->where('deleted = ?', [0])
    ->orderBy('created_at', 'desc')
    ->limit(50)

    // Table-level styling
    ->tableClass('table table-hover table-bordered')

    // Field configurations with styling
    ->field('id')
        ->label('Order #')
        ->class('text-muted')

    ->field('customer')
        ->label('Customer Name')
        ->link('?page=customers&id=%customer_id%')
        ->classOtherValue('vip_status', true, 'fw-bold text-primary')

    ->field('total')
        ->label('Total Amount')
        ->class('text-end fw-bold')
        ->colHeaderClass('bg-primary text-white text-end')
        ->classValue(5000, 'text-success fs-5', '>')       // Large green if > 5000
        ->classValue(1000, 'text-warning', '>')            // Orange if > 1000

    ->field('status')
        ->label('Status')
        ->class('text-center')
        ->cellClassValue('pending', 'bg-warning text-dark')
        ->cellClassValue('completed', 'bg-success text-white')
        ->cellClassValue('cancelled', 'bg-danger text-white')

    ->field('priority')
        ->label('Priority')
        ->classValue('high', 'badge bg-danger')
        ->classValue('medium', 'badge bg-warning')
        ->classValue('low', 'badge bg-secondary')

    ->field('created_at')
        ->label('Order Date')
        ->type('datetime')
        ->class('text-muted')

    // Row-level conditional highlighting
    ->rowClassByValue('status', 'cancelled', 'table-danger')
    ->rowClassByValue('total', 5000, 'table-success', '>')

    // Footer with totals
    ->setFooter(['', '', 'Total:', '€ 125,430.00', '', '', ''])
    ->footerClass('table-dark fw-bold')

    // Actions
    ->setDefaultActions()

    ->getTable();

Method Reference

Field-First Styling Methods

Method	Parameters	Description	Example
`field()`	$key	Select field for styling	`->field('status')`
`class()`	$classes	Set CSS classes for field column	`->class('text-end fw-bold')`
`colHeaderClass()`	$classes	Set CSS classes for column header	`->colHeaderClass('bg-primary text-white')`
`classValue()`	$value, $classes, $operator	Conditional classes based on field value	`->classValue('active', 'text-success')`
`classOtherValue()`	$field, $value, $classes, $operator	Conditional classes based on other field	`->classOtherValue('published', true, 'fw-bold')`
`cellClassValue()`	$value, $classes, $operator	Cell background/style based on value	`->cellClassValue('pending', 'bg-warning')`
`cellClassOtherValue()`	$field, $value, $classes, $operator	Cell background/style based on other field	`->cellClassOtherValue('on_sale', true, 'bg-success')`
`classAlternate()`	$odd_classes, $even_classes	Alternate column row colors	`->classAlternate('bg-light', 'bg-white')`

Table-Level Styling Methods

Method	Parameters	Description
`tableColor()`	$color	Quick theme colors (primary, success, danger, striped)
`tableClass()`	$class	Custom CSS classes for table element
`rowClassAlternate()`	$class1, $class2	Alternate row colors
`rowClassByValue()`	$field, $value, $class, $operator	Conditional row classes based on field value
`setFooter()`	$footerArray	Set footer content (array of values per column)
`footerClass()`	$class	CSS classes for footer row

Supported Comparison Operators

== - Equal to (default)
!= - Not equal to
> - Greater than
< - Less than
>= - Greater than or equal to
<= - Less than or equal to
contains - String contains value

Best Practices

Group related styling: Keep all styling for a field together using the field-first pattern
Use semantic classes: Prefer Bootstrap utility classes (text-success, bg-danger) for consistency
Combine methods: You can chain multiple classValue() calls for different conditions on the same field
Test responsiveness: Ensure your styling works on mobile devices
Accessibility: Don't rely solely on color; use text or icons for critical information

Milk Admin

Getting started

Abstracts Class

Builders

Advanced

Modules

Expressions

Extensions

Form

List

Model

Related Content

Table