Events

Events can be observed in two ways, either by assigning a function to a property or by listening to custom events fired from the element.

info

Take care not to re-render the component when using event information to update parent state.

onCellUpdate

• Function: (cellUpdate: Body) => void
• Event: cell-update
• Body: {
      text: string,
      rowIndex: number,
      columnIndex: number,
      updateType: "add"|"update"|"remove"
  }

Triggered when any data within the table has changed. Both rowIndex and columnIndex begin at 0 where it is the header row for rowIndex and the left-most column for columnIndex.

Example

Latest events:

>

Function

tableElementRef.onCellUpdate = (cellUpdate) => { console.log(cellUpdate); });

Event

// This example is for Vanilla JS and should be tailored to your framework (see Examples)

tableElementRef.addEventListener('cell-update', (cellUpdate) => {
  console.log(cellUpdate.detail);
});

onDataUpdate

• Function: (dataUpdate: Body) => void
• Event: data-update
• Body: (string|number)[][]

Similarly to onCellUpdate this is triggered when any cell is updated - however this property returns the full table data in a 2D array instead.

Example

Latest events:

>

Function

tableElementRef.onDataUpdate = (dataUpdate) => {
  console.log(dataUpdate);
};

Event

// This example is for Vanilla JS and should be tailored to your framework (see Examples)

tableElementRef.addEventListener('data-update', (dataUpdate) => {
  console.log(dataUpdate.detail);
});

onColumnsUpdate

• Function: (columnsUpdate: Body) => void
• Event: columns-update
• Body: ColumnsDetails

Triggered when any of the properties inside the ColumnsDetails object are updated. This is particularly useful if the user has made changes to columns and you want to recreate them in the next session on the initial load.

Example

Latest events:

>

Function

tableElementRef.onColumnsUpdate = (columnsUpdate) => {
  console.log(columnsUpdate);
};

Event

// This example is for Vanilla JS and should be tailored to your framework (see Examples)

tableElementRef.addEventListener('columns-update', (columnsUpdate) => {
  console.log(columnsUpdate.detail);
});

onRender

• Function: () => void
• Event: render

Triggered when the component has finished rendering on the browser's window.

Example

Latest events:

> "Finished rendering"

Function

tableElementRef.onRender = () => {
  console.log('Finished rendering');
};

Event

// This example is for Vanilla JS and should be tailored to your framework (see Examples)

tableElementRef.addEventListener('render', () => {
  console.log('Finished rendering');
});