innovaphone.ui1.Table (JavaScript)

The JavaScript `innovaphone.ui1.Table` library provides a table component for creating and managing tables in web applications. It offers various customization options for styling and configuring the table layout based on media query conditions.

File information

Fileweb1.lib/innovaphone.ui1.Table.js

Objects innovaphone.ui1.TableConfig
innovaphone.ui1.Table
innovaphone.ui1.TableCss: internal class, do not use!

Objects

innovaphone.ui1.TableConfig

You can either use this object to define additional CSS or you define classes which you style yourself in your CSS file.
Make sure that you also use the same media query within your CSS file to style the classes in case of the media conditions.

innovaphone.ui1.TableConfig = innovaphone.ui1.TableConfig || function (mediaOrContainerQueryConditions, cl,
    styleTable, styleThead, styleTh, styleTr, styleTbody, styleTd,
    styleMediaTable, styleMediaThead, styleMediaTh, styleMediaTr, styleMediaTbody, styleMediaTd) {

    function checkClass(className) {
        return (className ? " " + className : "");
    }

    this.mediaOrContainerQueryConditions = mediaOrContainerQueryConditions || "@media (max-width:800px)";
    this.cl = checkClass(cl);
    this.styleTable = styleTable || "";
    this.styleThead = styleThead || "";
    this.styleTh = styleTh || "";
    this.styleTr = styleTr || "";
    this.styleTbody = styleTbody || "";
    this.styleTd = styleTd || "";
    this.styleMediaTable = styleMediaTable || "";
    this.styleMediaThead = styleMediaThead || "";
    this.styleMediaTh = styleMediaTh || "";
    this.styleMediaTr = styleMediaTr || "";
    this.styleMediaTbody = styleMediaTbody || "";
    this.styleMediaTd = styleMediaTd || "";
};

Properties

mediaOrContainerQueryConditions The media or container query conditions to apply the table styles for responsive layouts. The default value is "@media (max-width:800px)".
cl An additional CSS class which will be added to every HTML element in addition to innovaphone-ui1-table. The default value is an empty string.
styleTable The CSS style for the table element. The default value is an empty string.
styleThead The CSS style for the table header (thead) element. The default value is an empty string.
styleTh The CSS style for the table header cell (th) elements. The default value is an empty string.
styleTr The CSS style for the table row (tr) elements. The default value is an empty string.
styleTbody The CSS style for the table body (tbody) element. The default value is an empty string.
styleTd The CSS style for the table data cell (td) elements. The default value is an empty string.
styleMediaTable The additional CSS style for the table element applied under the specified media query conditions. The default value is an empty string.
styleMediaThead The additional CSS style for the table header (thead) element applied under the specified media query conditions. The default value is an empty string.
styleMediaTh The additional CSS style for the table header cell (th) elements applied under the specified media query conditions. The default value is an empty string.
styleMediaTr The additional CSS style for the table row (tr) elements applied under the specified media query conditions. The default value is an empty string.
styleMediaTbody The additional CSS style for the table body (tbody) element applied under the specified media query conditions. The default value is an empty string.
styleMediaTd The additional CSS style for the table data cell (td) elements applied under the specified media query conditions. The default value is an empty string.

innovaphone.ui1.Table

innovaphone.ui1.Table = innovaphone.ui1.Table || function (config, texts) {
    Contructor
    function addColumn
    function addRow
    function removeRow
    function getRows
    function onLanguageChanged
    function toggleSortOrder
    function sort
    function clear
};

Constructor

innovaphone.ui1.Table(config, texts, defaultDescending)
Constructs a new instance of the `innovaphone.ui1.Table` component with the specified configuration and translation texts.

Parameters

config instance of innovaphone.ui1.TableConfig
texts instance of innovaphone.lib1.Languages or null if no translations are needed
defaultDescending boolean; if set, the table knows that the content is sorted descending by default

Methods

addColumn(headerTranslationId, headerText)
Adds a column to the table with the specified header translation ID and text.

Parameters

headerTranslationId The translation ID for the column header text.
headerText The text for the column header.

Return value

Returns the created header element for the added column.
addRow(id, data, object, dataSorting)
Adds a row to the table with the specified ID and data.

Parameters

id The ID of the row.
data The array of data to fill the row cells.
[object] An optional object which will be attached to the row for later usage.
[dataSorting] If the row data are not simple strings/numbers and you e.g. have date values, you can hand an array which will be used for sorting instead of the data array values. E.g. if one column data is "03.03.2022", you could hand the unix timestamp 1646262000000 which is perfectly suitable for numeric sorting.

Return value

Returns the created row element.
removeRow(id)
Removes the row with the specified ID from the table.

Parameters

id The ID of the row to remove.
getRows()

Return value

An object with all rows, while each object key is the id of a row. Every row object contains the array tds with all td elements and the property object, which has been handed in addRow.
onLanguageChanged()
Handles the language change event. This function should be called when the language changes to update the translations in the table column header in mobile view.

Remarks

Make sure to provide the translation texts during the component's initialization.
toggleSortOrder()
Changes the sort direction (but doesn't trigger a sort).
sort(column)
Sorts the table for the given column. Sorting is supported for strings and numeric values. If you need more complex sorting, e.g. for date time representations, hand a dataSorting array with suitable data in addRow.

Parameters

[column] The column number to sort. If not given, the table will be sorted with the last sorted column.
clear
Removes all rows from the table.

Example

// Create a table with two columns: "Name" and "Age"
var table = new innovaphone.ui1.Table();

table.addColumn("nameTranslationId");   // translated column head
table.addColumn(null, "Age");           // fixed column head

// Add a row with ID "row1" and data ["John Doe", "25"]
table.addRow("row1", ["John Doe", "25"]);

// Remove the row with ID "row1"
table.removeRow("row1");

// Handle language change event
table.onLanguageChanged();