ReactomeTable

This Angular library creates a table in a spreadsheet like format supporting the following features:

• Renaming of columns and rows
• Adding columns and rows
• Range selection
• Range deletion
• Range copy-paste
• Drap and drop of tabular tsv or csv files
• Keyboard movement
• Import and export of table as files

Compatibility

| reactome-table version | angular version | |------------------------|-----------------| | 19.X.X | 19.X.X |

Install

npm install --save reactome-table

Usage

styles.scss

@use "reactome-table";

@include reactome-table.configure-table-globals();

// If You want to use a different symbol version from the default
body {
 --reactome-table-symbols-font-family: 'Material Symbols Outlined';
 --reactome-symbols-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

Main component

The main component is <reactome-table>.

Inputs supported

2 main types of tables are supported by the library:

1. Definite tables of relatively fixed dimensions
2. Indefinite tables with high number of rows

For the first type, you can simply provide the table as an input as follow:

<reactome-table [(table)]="table"></reactome-table>

import {Component, signal} from "@angular/core";

@Component({...})
class ExampleComponent {
  table = signal<string[][]>([
    ['', 'Col A', 'Col B'],
    ['Row 1', '  x  ', '  y  '],
    ['Row 2', '  z  ', '     '],
  ])
}

For the second type, the table is generated by the library, no need to provide one as in put.

However you need to provide the dimensions of the desired table.

• Rows are optimised so you can have as many as you wish, be careful about memory usage though
• Columns are not optimised, so I would suggest to limit bellow 100 columns

<reactome-table numberOfColumns="27" numberOfRows="100000" (tableChange)="onTableUpdate($event)"></reactome-table>

import {Component, signal} from "@angular/core";

@Component({...})
class ExampleComponent {
  onTableUpdate(table: string[][]) {
    console.log(table); // Only the rows and columns having something in their first non-header cells are provided 
  }
}