Methods

Method properties that can be called directly on the Active Table element.

info

Make sure the Active Table component has been fully rendered on the DOM before using these.

getData

• Type: () => (string|number)[][]

Returns current table contents 2D array.

Example

Method results:

>

Code

tableElementRef.getData();

getColumnsDetails

• Type: () => ColumnsDetails

Returns details related to existing columns - width, typeName and cellDropdownItems (if the column type contains a dropdown). 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

Method results:

>

Code

tableElementRef.getColumnsDetails();

updateCell

• Type: (update: CellDetails) => void

CellDetails

• Type: {
       newText: string | number,
       rowIndex: number,
       columnIndex: number
  }

Update cell text programmatically. Both rowIndex and columnIndex start at 0 where it is the header row for rowIndex and the left-most column for columnIndex.

Example

Sample code

tableElementRef.updateCell({newText: 'sample text', rowIndex: 1, columnIndex: 1});

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  id="active-table"
  data='[
    ["Name", "CPU", "Memory", "Disk", "Network"],
    ["Chrome", "4.5%", "1400MB", "0.2MB/s", "1.2Mbps"],
    ["Firefox", "2.5%", "800MB", "0.1MB/s", "0.5Mbps"],
    ["Edge", "5.5%", "1000MB", "1.4MB/s", "0.7Mbps"],
    ["Safari", "1.5%", "1200MB", "1.2MB/s", "0.2Mbps"],
    ["Opera", "3.5%", "400MB", "0.8MB/s", "0.5Mbps"]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>

<script>
  function updateCell(tableElement) {
    if (!tableElement?.isConnected) return;
    setTimeout(() => {
      const rowIndex = Math.floor(Math.random() * 5 + 1);
      const columnIndex = Math.floor(Math.random() * 5 + 1);
      let newText = '';
      if (columnIndex === 1) {
        newText = `${Math.round(Math.random() * 20 * 10) / 10}%`;
      } else if (columnIndex === 2) {
        newText = `${Math.round(Math.random() * 1500 * 10) / 10}MB`;
      } else if (columnIndex === 3) {
        newText = `${Math.round(Math.random() * 1.5 * 10) / 10}MB/s`;
      } else {
        newText = `${Math.round(Math.random() * 1.5 * 10) / 10}Mbps`;
      }
      tableElement.updateCell({newText, rowIndex, columnIndex});
      updateCell(tableElement);
    }, 100);
  }
  const tableElementRef = document.getElementById('active-table');
  updateCell(tableElementRef);
</script>

updateStructure

• Type: (update: StructureDetails) => void

StructureDetails

• Type: {
       structure: "row" | "column",
       isInsert: boolean,
       index: number,
       data?: (string|number)[]
  }

Programmatically insert/remove rows/columns.
structure defines whether the structure type is for a "row" or a "column".
isInsert sets the update behaviour; true will create a new structure, false will remove an existing one.
index is the row/column index. When adding a new structure, a value of -1 will append it to the end of the table.
data defines the new cells' content. If not defined and the update is for an insert, this will be populated with defaultText.

Example

Code

tableElementRef.updateStructure({
  structure: 'row',
  isInsert: true,
  index: -1,
  data: ['New Planet', '12345', '500', '10', '357'],
});

updateData

• Type: (data: (number | string)[][]) => void

Programmatically reset table data using the new data iside the data argument.

Example

Code

tableElementRef.updateData([
  ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
  ['Mercury', 4879, 0.33, 0, 5429],
  ['Venus', 12104, 4.87, 0, 5243],
  ['Uranus', 51118, 86.8, 27, 1270],
  ['Pluto', 2376, 0.013, 5, 1850],
  ['Moon', 3475, 0.073, 0, 3340],
]);

importFile

• Type: (options?: ImportOptions) => void
• Default: ({formats: ["csv"]}) => void

Opens up a file browser window to select a file and import its data. You can optionally pass an options object to define the allowed file formats and what they will overwrite. For browser security reasons - this method can ONLY be activated through user actions, such as a click of a button.

Example

Code

tableElementRef.importFile();

info

csv files are supported natively, however if you want to import any of the other file formats - you will need to add the xlsx module into your project. Please see examples here.

exportFile

• Type: (options?: ExportSingleFile) => void
• Default: ({fileName: "table_data", format: "csv"}) => void

ExportSingleFile

• Type: {fileName?: string, format?: FileFormat}

Exports existing table data into a file. You can optionally pass a ExportSingleFile object to define the exported file's name and its format.

Example

Code

tableElementRef.exportFile();

info

csv files are supported natively, however if you want to export any of the other file formats - you will need to add the xlsx module into your project. Please see examples here.