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. |
dbTable (table) | This field may contain a table object. Useful when showing a database 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. |
showHeader (boolean) | This field may contain a boolean if the table should have a header. |
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. |
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. |