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

File	web1/ui1.table/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.

Simple 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();

More complex example

See example.htm which uses a custome CSS example.css.