Data Table

A FUIDataTable is a view that displaying data in either a list view or a grid table view.

Code usage:

let model = FUIDataTableModel(headerData: nil,
                              rowData: rowData,
                              isHeaderSticky: true,
                              isFirstColumnSticky: true,
                              columnAttributes: columnAttributes,
                              rowAlignment: .top,
                              isPinchZoomEnable: false,
                              showRowDivider: true,
                              showColoumnDivider: true,
                              headerCellPadding: UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16),
                              dataCellPadding: UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16),
                              minRowHeight: 48,
                              minColumnWidth: 48,
                              allowsPartialRowDisplay: true,
                              backgroundColor: .white,
                              showListView: false)
model.didSelectRowAt = { _ in
    print(model.selectedIndexes)
}

/// set a closure to check whether a dataItem located at (rowIndex, columnIndex) is valid; If it is valid, returns (true, nil); if it is not valid, returns false and an error message which is shown to users.
model.validateDataItem = { rowIndex, columnIndex, dataItem in
...
}

/// set a closure to provide a `FUIDataListItem` type dataItem located at (rowIndex, columnIndex) for an array of Strings and a title for inline editing mode
model.listItemDataAndTitle = { rowIndex, columnIndex in
...
}

/// set a closure to observe a value change for inline editing mode
model.valueDidChange = { change in
    print("valueDidChange: \(change.description)")
}

let dataTable = FUIDataTable(model: model)

Theming

Supported TEXT class paths:

fdlFUIDataTable_textItem {}: TEXT theme for all cells. It has lowest priority.
fdlFUIDataTable_textItem_row2 {}: TEXT theme for one speciif column. # is the column index. It has third priority.
fdlFUIDataTable_textItem_column1 {}: TEXT theme for one specific row. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTable_textItem_row2_column1{}: TEXT theme for one specific cell. Row index and column index are required. It has highest priority.

Supported TEXT properties:

font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUIDataTable_imageItem {}: IMAGE theme for all cells. It has lowest priority.
fdlFUIDataTable_imageItem_column# {}: IMAGE theme for one speciif column. # is the column index. It has third priority.
fdlFUIDataTable_imageItem_row# {}: IMAGE theme for one specific row. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTable_imageItem_row#_column# {}: IMAGE theme for one specific cell. Row index and column index are required. It has highest priority.

Supported IMAGE properties:

tint-color: Color;
image-name: String;

See more

@MainActor
open class FUIDataTable : UIView

FUIDataTableModel is the data structure being used in FUIDataTable view.

Code Usage:

let header = FUITableRowItem(leadingAccessories: [], trailingAccessory: nil, data: titles)
let model = FUIDataTableModel(headerData: nil,
                              rowData: rowData,
                              isHeaderSticky: true,
                              isFirstColumnSticky: true,
                              columnAttributes: columnAttributes,
                              rowAlignment: .top,
                              isPinchZoomEnable: false,
                              showRowDivider: true,
                              showColoumnDivider: true,
                              headerCellPadding: UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16),
                              dataCellPadding: UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16),
                              minRowHeight: 48,
                              minColumnWidth: 48,
                              allowsPartialRowDisplay: true,
                              backgroundColor: .white,
                              showListView: false)
model.didSelectRowAt = { _ in
print(model.selectedIndexes)
}
/// set a closure to check whether a dataItem located at (rowIndex, columnIndex) is valid; If it is valid, returns (true, nil); if it is not valid, returns false and an error message which is shown to users.
model.validateDataItem = { rowIndex, columnIndex, dataItem in
...
}

/// set a closure to provide a `FUIDataListItem` type dataItem located at (rowIndex, columnIndex) for an array of Strings and a title for inline editing mode
model.listItemDataAndTitle = { rowIndex, columnIndex in
...
}

/// set a closure to observe a value change for inline editing mode
model.valueDidChange = { change in
    print("valueDidChange: \(change.description)")
}

See more

public class FUIDataTableModel

Column attribute for FUIDataTableModel

See more

public struct FUITableColumnAttribute

An image item for FUIDataTable

See more

public struct FUITableImageItem : FUITableItem, FUIDataTableImageTheme, FUIDataTableItemConvertion, Equatable

An enum representing the different item styles that a FUIDataTable can have.

See more

public enum FUIDataItemType : CaseIterable

A protocol defines style of a FUITableItem.

See more

public protocol FUITableItem

Data structure for each row in the FUIDataTable

See more

public struct FUITableRowItem : Equatable

Text item for FUIDataTable

See more

public struct FUITableTextItem : FUITableItem, FUIDataTableTextTheme, FUIDataTableItemConvertion, Equatable