# 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.
  The row is automatically inserted according to the current sorting, so you do not need to sort the table yourself.

  #### 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.