Table Component UDRs

The following section explains the UDRs that can be used to create a component in a table.

Table UDR

The Table UDR is used to create a table. This UDR is used together with TableRow UDR or a Table object. The table rows are default striped.

To create the table shown above, you can use the following APL code

// Create a table row for the header row   
TableRow headerRow = udrCreate(TableRow);
headerRow.columns = listCreate(TableColumn);
// Create columns and add them to the header row
listAdd(headerRow.columns, getTableColumn(getText("Decimal"), 0));
listAdd(headerRow.columns, getTableColumn(getText("Hexadecimal"), 0));

// Create the Table UDR
Table myTable = udrCreate(Table);
myTable.columnNames = headerRow;
// Insert table rows that contain the table columns into the data field.
myTable.data = listCreate(TableRow);
listAdd(myTable.data, getTableRow([getTableColumn(getText("10"), 0), getTableColumn(getText("0xA"), 0)]));
listAdd(myTable.data, getTableRow([getTableColumn(getText("11"), 0), getTableColumn(getText("0xB"), 0)]));
listAdd(myTable.data, getTableRow([getTableColumn(getText("12"), 0), getTableColumn(getText("0xC"), 0)]));

// Helper functions for table creation
PlainText getText(string text) {
    PlainText pText = udrCreate(PlainText);
    pText.value = text;
    return pText;
}
TableColumn getTableColumn(ComponentUDR comp, int width){
    TableColumn col = udrCreate(TableColumn);
    if(width > 0){
        col.width = width;
    }
    col.components = listCreate(ComponentUDR, comp);
    return col;
}
TableRow getTableRow(list<TableColumn> columns){
    TableRow row = udrCreate(TableRow);
    row.columns = listCreate(TableColumn);
    for (TableColumn column: columns) {
        listAdd(row.columns, column);
    }
    return row;
}

The following fields are included in the Table UDR:

Field	Description
attributes (map<string,string>)	This field may contain extra attributes to be added.
columnNames (TableRow)	This field may contain a TableRow UDR to define the header.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
currentPage (int)	This field may contain the current page, only used when usePagination is true.
data (list<TableRow>)	This field may contain the table data in form of a list of TableRow UDRs. Either this or dbTable field is required to show a table.
dbTable (table)	This field may contain a table object. Useful when showing a database table. Either this or data field is required to show a table.
id (string)	This field may contain the id of the component
rowsPerPage (int)	This field may contain the number of rows in the table, only used when usePagination is true.
showBorders (boolean)	This field may contain a boolean if borders on all sides of the table and cells should be added. Default is true
showHeader (boolean)	This field may contain a boolean if the table should have a header. Default is true
url (string)	This field is used to provide the url stub that will be used for pagination. If you provide e.g. "/table/mytable?page=" the url for page 5 will be "/table/mytable?page=5, only used when usePagination is true.
usePagination (boolean)	This field may contain a boolean if the table should use pagination, when true currentPage, rowsPerPage and url also needs to be set.

TableColumn UDR

The TableColumn UDR is used to create a table column see Table UDR for example.

The following fields are included in the TableColumn UDR:

Field	Description
attributes (map<string,string>)	This field may contain extra attributes to be added.
colspan (int)	This field may contain a number of how many columns this column will span over.
components (list<ComponentUDR>)	This field contain a list of child components, the components that will present in the column.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
id (string)	This field may contain the id of the component
width (int)	This field may contain a width value. Possible values are 1-12. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (e.g., 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing. Default is auto, the column will take as much as it get.

TableRow UDR

The TableRow UDR is used to create a table row, it is used together with TableColumn UDR, see Table UDR for example.

The following fields are included in the TableRow UDR:

Field	Description
columns (list<TableColumnUDR>)	This field contain a list of TableColumn UDRs.
cssClasses (list<string>)	This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.