GitHub

Styling

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

SwiftDataTables provides multiple levels of styling control: configuration properties for global settings, per-cell callbacks for conditional styling, and complete cell replacement for custom layouts.

Per-Cell Styling

The defaultCellConfiguration closure is called for every cell as it's displayed. Use it to customize fonts, colors, and appearance based on the cell's value, position, or whether its column is currently sorted.

The closure receives four parameters:

  • cell — the DataCell being configured (access .dataLabel for the text label)
  • value — the DataTableValueType for this cell (use .stringValue, .doubleValue, etc.)
  • indexPath — the cell's position (.section = row, .item = column)
  • isHighlighted — true if this cell's column is the current sort column
var config = DataTableConfiguration()
config.defaultCellConfiguration = { cell, value, indexPath, isHighlighted in
    // Custom font for all cells
    cell.dataLabel.font = UIFont.systemFont(ofSize: 14, weight: .medium)
    
    // Red text for negative numbers
    if let number = value.doubleValue, number < 0 {
        cell.dataLabel.textColor = .systemRed
    } else {
        cell.dataLabel.textColor = .label
    }
    
    // Bold text in the sorted column
    if isHighlighted {
        cell.dataLabel.font = UIFont.systemFont(ofSize: 14, weight: .bold)
    }
}

Alternating Row Colors

Zebra striping improves readability for wide tables. SwiftDataTables uses two color arrays — one for regular columns and one for the currently sorted column (highlighted). Colors cycle through the array as rows alternate.

PropertyWhat It ColorsDefault
unhighlightedAlternatingRowColorsCells in non-sorted columnsWhite / Light gray
highlightedAlternatingRowColorsCells in the sorted columnLight blue tints
var config = DataTableConfiguration()

// Regular columns: subtle alternation
config.unhighlightedAlternatingRowColors = [
    .systemBackground,
    .secondarySystemBackground
]

// Sorted column: tinted to stand out
config.highlightedAlternatingRowColors = [
    UIColor.systemBlue.withAlphaComponent(0.08),
    UIColor.systemBlue.withAlphaComponent(0.12)
]

Use semantic colors (.systemBackground, .secondarySystemBackground) for automatic dark mode adaptation. Avoid hardcoded RGB values.

Sort Indicators

When a column is sorted, an arrow appears in the header (and optionally footer) indicating the sort direction. You can customize the arrow color or hide it entirely.

PropertyEffectDefault
sortArrowTintColorColor of the sort arrowSystem blue
shouldShowHeaderSortingIndicatorShow arrow in headertrue
shouldShowFooterSortingIndicatorShow arrow in footertrue
var config = DataTableConfiguration()

// Match your app's accent color
config.sortArrowTintColor = .systemIndigo

// Hide the footer arrow (header only)
config.shouldShowFooterSortingIndicator = false

Spacing and Heights

Control the vertical dimensions of rows, headers, footers, and the gaps between them.

PropertyWhat It ControlsDefault
rowHeightModeHeight of data rows (.fixed(CGFloat) or .automatic).automatic
heightOfInterRowSpacingVertical gap between rows in points0
heightForSectionHeaderHeight of the column header row50
heightForSectionFooterHeight of the column footer row50
heightForSearchViewHeight of the search bar area44
var config = DataTableConfiguration()

// Fixed row height for uniform appearance
config.rowHeightMode = .fixed(52)

// Add subtle separation between rows
config.heightOfInterRowSpacing = 1

// Taller header for emphasis
config.heightForSectionHeader = 56

Visibility Options

Show or hide optional UI elements. Hiding elements you don't need creates a cleaner interface.

PropertyWhat It Shows/HidesDefault
shouldShowSearchSectionThe search bar above the tabletrue
shouldShowFooterThe column footer rowtrue
shouldShowVerticalScrollBarsVertical scroll indicatortrue
shouldShowHorizontalScrollBarsHorizontal scroll indicatortrue
var config = DataTableConfiguration()

// Hide search if filtering is handled externally
config.shouldShowSearchSection = false

// Hide footer if you don't need column summaries
config.shouldShowFooter = false

Floating Behavior

Floating elements stay visible while scrolling. The header floats by default so column names remain visible; you can enable the same for footers and the search bar.

PropertyEffect When trueDefault
shouldSectionHeadersFloatHeader sticks to top during vertical scrolltrue
shouldSectionFootersFloatFooter sticks to bottom during vertical scrollfalse
shouldSearchHeaderFloatSearch bar sticks to toptrue
var config = DataTableConfiguration()

// Keep footer visible for running totals
config.shouldSectionFootersFloat = true

Putting It Together

Here are two complete examples showing how these properties combine.

Corporate Theme

Professional appearance with brand colors and comfortable spacing:

var config = DataTableConfiguration()

// Brand-tinted sorted column
config.highlightedAlternatingRowColors = [
    UIColor.systemIndigo.withAlphaComponent(0.08),
    UIColor.systemIndigo.withAlphaComponent(0.12)
]
config.sortArrowTintColor = .systemIndigo

// Comfortable row height with subtle separation
config.rowHeightMode = .fixed(48)
config.heightOfInterRowSpacing = 1

// Prominent header
config.heightForSectionHeader = 56

Minimal Style

Clean, borderless appearance that lets the data speak:

var config = DataTableConfiguration()

// No zebra striping — solid background
config.unhighlightedAlternatingRowColors = [.systemBackground]
config.highlightedAlternatingRowColors = [.systemBackground]

// Hide all optional chrome
config.shouldShowFooter = false
config.shouldShowSearchSection = false
config.shouldShowVerticalScrollBars = false
config.shouldShowHorizontalScrollBars = false

// No gaps between rows
config.heightOfInterRowSpacing = 0