Skip to content

Grid View

FUIGridTableViewCell

FUIGridTableViewCell is a Fiori UI component that extends UITableViewCell for showing a list of FUIGridRowItem horizontally. By default, cell height is determined by the auto-layout system height of the tallest item in the cell. Row items will be vertically center aligned if cell only contains single-line text items. Otherwise, row items will be top aligned. Column width is configurable by assigning a fixed width or percent width. You can also have dynamic column in the cell by assigning value of -1 to that column. At most one column can be dynamic.

Image

A common usage is to create a table view with multiple FUIGridTableViewCells representing different rows for showing a list report. Each cell(row) has a collection of FUIGridRowItems. Each column in the table view can bind with a FUIGridrowHeaderItem to represent a type of data. SAPFiori provides three types of row items which conform to FUIGridRowItem protocol:

  • FUIGridRowHeaderItem - representing a header for a column.
  • FUIGridRowTextItem - representing a text or number item. Assign a NumberFormatter instance to FUIGridRowTextItem if you want to format textual representation of the number.
  • FUIGridRowImageItem - representing an image item.

Image

Example Initialization and Configuration of FUIGridTableViewCell

Register FUIGridTableViewCell for Table View. Set UITableViewAutomaticDimension to rowHeight if You Want Cell Height to Be Dynamic

override open func viewDidLoad() {
super.viewDidLoad()
tableView.register(FUIGridTableViewCell.self, forCellReuseIdentifier: FUIGridTableViewCell.reuseIdentifier)
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
tableView.register(FUIGridTableViewHeader.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewHeader.reuseIdentifier)
}

Override tableView(_:cellForRowAt:) dataSource Method and Configure Cell

//data model
var contentData: [FUIGridRowItem] {

let item0 = FUIGridRowImageItem(image: #imageLiteral(resourceName: "ProfilePic"))

let item1 = FUIGridRowTextItem(text: "PM01 PM01")

let item2 = FUIGridRowTextItem(number: 31.00)

let item3 = FUIGridRowTextItem(number: 31.00)

let item4 = FUIGridRowTextItem(number: 31.00)

let item5 = FUIGridRowTextItem(number: 31.00)

return [item0, item1, item2, item3, item4, item5]
}

var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")

let item1 = FUIGridRowHeaderItem(text: "Product Name")

let item2 = FUIGridRowHeaderItem(text: "Model")

let item3 = FUIGridRowHeaderItem(text: "Category")

let item4 = FUIGridRowHeaderItem(text: "Availability")

let item5 = FUIGridRowHeaderItem(text: "Price")

return [item0, item1, item2, item3, item4, item5]
}

override open func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: FUIGridTableViewCell.reuseIdentifier, for: indexPath) as! FUIGridTableViewCell

if let data = displayedData?[indexPath.row] {
cell.gridItems = data.gridItems
cell.tag = data.index
cell.columnWidthPercent = columnWidthPercent
cell.accessoryType = .disclosureIndicator
}

return cell
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUIGridTableViewHeader.reuseIdentifier) as! FUIGridTableViewHeader

header.gridItems = self.header?.gridItems
header.columnWidthPercent = columnWidthPercent
header.accessoryType = .disclosureIndicator

return header
}

FUIGridTableViewHeader

FUIGridTableViewHeader is a Fiori UI component that extends UITableViewHeaderFooterView for showing a list of FUIGridRowItem horizontally. It will display as a section header in table view. By default, header height is determined by the auto-layout system height of the tallest item in the cell. Row items will be vertically center aligned if cell only contains single-line text items. Otherwise, row items will be top aligned.

Setting column width by assigning a fixed width or percentage for each column. You can also have dynamic column in the cell by assigning value of -1 to that column. At most one column can be dynamic.

Image

Example Initialization and Configuration of FUIGridTableViewHeader

Register FUIGridTableViewHeader for Table View. Set UITableViewAutomaticDimension to rowHeight if You Want Cell Height to Be Dynamic

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

Override tableView(_: viewForHeaderInSection:) DataSource Method and Configure Cell

//data model
var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")

let item1 = FUIGridRowHeaderItem(text: "Product Name")

let item2 = FUIGridRowHeaderItem(text: "Model")

let item3 = FUIGridRowHeaderItem(text: "Category")

let item4 = FUIGridRowHeaderItem(text: "Availability")

let item5 = FUIGridRowHeaderItem(text: "Price")

return [item0, item1, item2, item3, item4, item5]
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUIGridTableViewHeader.reuseIdentifier) as! FUIGridTableViewHeader

header.gridItems = self.header?.gridItems
header.columnWidthPercent = columnWidthPercent
header.accessoryType = .disclosureIndicator

return header
}

Last update: April 14, 2021