Styling

Customise colours, fonts, spacing, and visual appearance of your data table.

Per-Cell Styling

The most flexible way to style cells is via defaultCellConfiguration:

var config = DataTableConfiguration()
config.defaultCellConfiguration = { cell, value, indexPath, isHighlighted in
    // Custom font
    cell.dataLabel.font = UIFont(name: "Avenir-Medium", size: 14)

    // Conditional text colour
    if let number = value.doubleValue, number < 0 {
        cell.dataLabel.textColor = .systemRed
    } else {
        cell.dataLabel.textColor = .label
    }

    // Alternating row colours
    cell.backgroundColor = indexPath.item % 2 == 0 ? .systemGray6 : .systemBackground
}

Alternating Row Colours

var config = DataTableConfiguration()

// Standard rows (non-sorted columns)
config.unhighlightedAlternatingRowColors = [
    .systemBackground,
    .secondarySystemBackground
]

// Sorted column rows (highlighted)
config.highlightedAlternatingRowColors = [
    UIColor.systemBlue.withAlphaComponent(0.08),
    UIColor.systemBlue.withAlphaComponent(0.12)
]

Use semantic colors for automatic dark mode adaptation: .systemBackground, .secondarySystemBackground, etc.

Sort Indicators

// Arrow color
config.sortArrowTintColor = .systemBlue

// Hide sort indicators
config.shouldShowHeaderSortingIndicator = false
config.shouldShowFooterSortingIndicator = false

Spacing and Heights

// Row height
config.rowHeightMode = .fixed(52)

// Inter-row spacing
config.heightOfInterRowSpacing = 2  // 2pt gap between rows

// Header and footer heights
config.heightForSectionHeader = 50
config.heightForSectionFooter = 40

// Search bar height
config.heightForSearchView = 56

Visibility Options

// Search bar
config.shouldShowSearchSection = false

// Footer
config.shouldShowFooter = false

// Scroll indicators
config.shouldShowVerticalScrollBars = true
config.shouldShowHorizontalScrollBars = false

Floating Behavior

// Header sticks to top
config.shouldSectionHeadersFloat = true

// Footer sticks to bottom
config.shouldSectionFootersFloat = true

// Search bar sticks to top
config.shouldSearchHeaderFloat = true

Example: Dark Theme

var config = DataTableConfiguration()

// Dark backgrounds
config.unhighlightedAlternatingRowColors = [
    UIColor(white: 0.15, alpha: 1),
    UIColor(white: 0.12, alpha: 1)
]

config.highlightedAlternatingRowColors = [
    UIColor.systemIndigo.withAlphaComponent(0.3),
    UIColor.systemIndigo.withAlphaComponent(0.4)
]

// Accent color for sort arrows
config.sortArrowTintColor = .systemIndigo

// Comfortable spacing
config.heightOfInterRowSpacing = 1
config.heightForSectionHeader = 48

Example: Minimal Style

var config = DataTableConfiguration()

// No alternation
config.unhighlightedAlternatingRowColors = [.systemBackground]
config.highlightedAlternatingRowColors = [.systemBackground]

// Hide non-essential elements
config.shouldShowFooter = false
config.shouldShowSearchSection = false
config.shouldShowVerticalScrollBars = false

// No inter-row spacing
config.heightOfInterRowSpacing = 0