Class: Table

new Table(parent, props)

This class focuses on the specific properties of the Table component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Description
`parent`	HTMLElement	HTMLElement that is going to be the parent of the component
`props`	TComponents.TableProps

Source: as-table.js, line 59

Example

const table = new TComponents.Table(document.body, {
    position: 'absolute',
    zIndex: 1000,
    width: 320,
    height: 120,
    dataConfig: {
    columns: [
      { title: 'Name', width: 100 },
      { title: 'Age', width: 100 },
      { title: 'Country' },
    ],
    data: [
      ['John Doe', 25, 'USA'],
      ['Jane Smith', 30, 'UK'],
      ['Sam Brown', 22, 'Canada'],
    ],
    params: {
      mode: 'fixed', //fixed, variable
      type: '',
      isHidden: false,
      variablePath: '',
    },
  },
});

// Render the component.
table.render();

Extends

TComponents.Component_A

Members

selectedCell :string

Sets the selected cell.

Type:

string

Source: as-table.js, line 648

Example

table.selectedCell = 'USA';

selectedRow :string

Sets the selected row value.

Type:

string

Source: as-table.js, line 667

Example

table.selectedRow = ['Jane Smith', 30, 'UK'];

Methods

addRow(rowDataopt) → {void}

Add row data to the table component.

Parameters:

Name	Type	Attributes	Description
`rowData`	Array.<any>	<optional>	The data of the row to add.

Source: as-table.js, line 426

Throws:

Throws an error when calls deleteRow failed.
Type Error

Returns:

Type:: void

Example

const table = new TComponents.Table(document.body, {
    position: 'absolute',
    zIndex: 1000,
    width: 320,
    height: 120,
    dataConfig: {
    columns: [
      { title: 'Name', width: 100 },
      { title: 'Age', width: 100 },
      { title: 'Country' },
    ],
    data: [
      ['John Doe', 25, 'USA'],
      ['Jane Smith', 30, 'UK'],
      ['Sam Brown', 22, 'Canada'],
    ],
    params: {
      mode: 'fixed', //fixed, variable
      type: '',
      isHidden: false,
      variablePath: '',
    },
  },
});

table.render();

table.addRow([1, 2, 3]);

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides: TComponents.Component_A#afterRenderOnce
Source: as-table.js, line 220

Returns:

Type:: void

copyRow(rowIndexopt) → {Array.<any>}

Returns the row data of the table component.

Parameters:

Name	Type	Attributes	Description
`rowIndex`	number	<optional>	The index of the row to copy.

Source: as-table.js, line 312

Returns:

The data of the copied row.

Type:: Array.<any>

Example

const table = new TComponents.Table(document.body, {
    position: 'absolute',
    zIndex: 1000,
    width: 320,
    height: 120,
    dataConfig: {
    columns: [
      { title: 'Name', width: 100 },
      { title: 'Age', width: 100 },
      { title: 'Country' },
    ],
    data: [
      ['John Doe', 25, 'USA'],
      ['Jane Smith', 30, 'UK'],
      ['Sam Brown', 22, 'Canada'],
    ],
    params: {
      mode: 'fixed', //fixed, variable
      type: '',
      isHidden: false,
      variablePath: '',
    },
  },
});

table.render();

const rowData = table.copyRow(0);

// Logger the copied data.
console.log(rowData) // ['John Doe', 25, 'USA']

(protected) defaultProps() → {TComponents.TableProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-table.js, line 110

Returns:

Type:: TComponents.TableProps

deleteRow(rowIndexopt) → {void}

Deletes the row data of the table component.

Parameters:

Name	Type	Attributes	Description
`rowIndex`	number	<optional>	The index of the row to delete.

Source: as-table.js, line 365

Throws:

Throws an error when calls deleteRow failed.
Type Error

Returns:

Type:: void

Example

const table = new TComponents.Table(document.body, {
    position: 'absolute',
    zIndex: 1000,
    width: 320,
    height: 120,
    dataConfig: {
    columns: [
      { title: 'Name', width: 100 },
      { title: 'Age', width: 100 },
      { title: 'Country' },
    ],
    data: [
      ['John Doe', 25, 'USA'],
      ['Jane Smith', 30, 'UK'],
      ['Sam Brown', 22, 'Canada'],
    ],
    params: {
      mode: 'fixed', //fixed, variable
      type: '',
      isHidden: false,
      variablePath: '',
    },
  },
});

table.render();

table.deleteRow(0);

markup() → {string}

Returns the markup for the table component.

Overrides: TComponents.Component_A#markup
Source: as-table.js, line 302

Returns:

HTML markup string.

Type:: string

(async) onInit() → {Promise.<void>}

Initialization function for the table component.

Overrides: TComponents.Component_A#onInit
Source: as-table.js, line 211

Returns:

Type:: Promise.<void>

onRender() → {void}

Renders the table component.

Overrides: TComponents.Component_A#onRender
Source: as-table.js, line 249

Throws:

Throws error code ErrorCode.FailedToRunOnRender when runtime error happens.
Type Error

Returns:

Type:: void

setData(dataopt) → {void}

Set the data for the table component. This method updates the table's data configuration with the provided data. This operation will trigger the rebuild once.

Parameters:

Name	Type	Attributes	Description
`data`	Array.<Array.<any>>	<optional>	The data to set for the table.

Source: as-table.js, line 475

Returns:

Type:: void

Example

table.setData([[1, 2, 3], [4, 5, 6]]);

setHeader(headerConfigopt) → {void}

Sets the header configuration for the table component. This method updates the table's header configuration with the provided headerConfig. This operation will trigger the rebuild once.

Parameters:

Name	Type	Attributes	Description
`headerConfig`	Array.<object>	<optional>	The header configuration to set for the table.

Source: as-table.js, line 500

Returns:

Type:: void

Example

table.setHeader([{title: 'Column 1', width: 200}, {title: 'Column 2', width: 200}, {title: 'Column 3'}]);

setHeaderAndData(headeropt, dataopt) → {void}

Set the header and data for the table component. This method updates the table's header and data configuration with the provided config. The config should contain both header and data. And this operation only trigger the rebuild once.

Parameters:

Name	Type	Attributes	Description
`header`	Array.<object>	<optional>	The header configuration to set for the table.
`data`	Array.<object>	<optional>	The data to set for the table.

Source: as-table.js, line 518

Throws:

Error

Returns:

Type:: void

Example

table.setHeaderAndData([{title: 'Column 1', width: 200}, {title: 'Column 2', width: 200}, {title: 'Column 3'}], [[1, 2, 3], [4, 5, 6]]);

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-table.js, line 680

Returns:

Type:: void

Example

TComponents.Table.loadCssClassFromString(`
  .tc-table {
    height: 100%;
    width: 100%;
  }
`);