Skip to content

Grid Table View Header


open class FUIGridTableViewHeader: FUIGridTableViewHeaderFooterView

FUIGridTableViewHeader is a Fiori UI component that extends UITableViewHeaderFooterView for showing a list of FUIGridRowItem column titles. It will display as a section header in table view.

Columns widths may be specified in absolute points, or as a set of fractions in 0.0..<1. A developer may also designate one column for flexible width, by assigning the value -1 to that column width.

  • Remark: Developers should always use the same column widths or percents for all headers, footers and rows in a grid. Developers should also set common accessory types to rows, headers and footers.

The FUIGridTableViewHeader is adaptive for regular and compact horizontal content modes. It is hidden by design, when in compact mode. The AutoLayout automatic dimension technique should be used for computing the header height.

Example Initialization and Configuration

override open func viewDidLoad() {
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
tableView.register(FUIGridTableViewHeader.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewHeader.reuseIdentifier)

Override tableView(_: viewForHeaderInSection:) dataSource Method and Configure Header

// header data list
var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")
let item1 = FUIGridRowHeaderItem(text: "Symbol")
let item2 = FUIGridRowHeaderItem(text: "Open")
let item3 = FUIGridRowHeaderItem(text: "High")
let item4 = FUIGridRowHeaderItem(text: "Low")
let item5 = FUIGridRowHeaderItem(text: "Close")
return [item0, item1, item2, item3, item4, item5]

// set column widths.  Should be shared by rows and header.
let columnWidths = [-1, 0.2, 0.1, 0.1, 0.1, 0.1]

// configure header view
header.items = headerData
header.columnWidthPercent = columnWidths
header.accessoryType = .disclosureIndicator // match row cell accessory types!

Last update: January 15, 2021