FUIGridTableViewCell

FUIGridTableViewCell is a Firoi 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:

Image

Example Initialization and Configuration:

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 Firoi 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:

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
}