`<gui-table />`

Usage

Column based

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.create([
  [
    new Date('2019-01-01T15:15:00Z'),
    new Date('2019-01-02T15:15:00Z'),
    new Date('2020-01-03T15:15:00Z'),
    new Date('2021-01-04T15:15:00Z'),
  ],
  [-2.5, 1.458, 0.009, 5.64],
]);
table.headers = ['Date', 'Value'];
el.value = table;
el.addEventListener('gui-click', (ev) => {
  window.alert(`Clicked row=${ev.detail.rowIdx},col=${ev.detail.colIdx}`);
});

Row based

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.fromRows([
  [new Date('2019-01-01T15:15:00Z'), -2.5],
  [new Date('2019-01-02T15:15:00Z'), 1.458],
  [new Date('2020-01-03T15:15:00Z'), 0.009],
  [new Date('2021-01-04T15:15:00Z'), 5.64],
]);
table.headers = ['Date', 'Value'];
el.value = table;
el.addEventListener('gui-click', (ev) => {
  window.alert(`Clicked row=${ev.detail.rowIdx},col=${ev.detail.colIdx}`);
});

Object based

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.fromObjects([
  { Date: new Date('2019-01-01T15:15:00Z'), Value: -2.5 },
  { Date: new Date('2019-01-02T15:15:00Z'), Value: 1.458 },
  { Date: new Date('2020-01-03T15:15:00Z'), Value: 0.009 },
  { Date: new Date('2021-01-04T15:15:00Z'), Value: 5.64 },
]);
el.value = table;
el.addEventListener('gui-click', (ev) => {
  window.alert(`Clicked row=${ev.detail.rowIdx},col=${ev.detail.colIdx}`);
});

Under-the-hood, <gui-table /> uses <gui-value /> to render cells. You can change the properties passed to <gui-value /> by setting cellProps.

Global filtering

The following example shows how to add an input to filter the table:

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.fromRows([
  ['1984', 'George Orwell', 1949, 328],
  ['To Kill a Mockingbird', 'Harper Lee', 1960, 281],
  ['The Great Gatsby', 'F. Scott Fitzgerald', 1925, 180],
  ['One Hundred Years of Solitude', 'Gabriel Garcia Marquez', 1967, 417],
  ['Moby Dick', 'Herman Melville', 1851, 635],
  ['War and Peace', 'Leo Tolstoy', 1869, 1225],
  ['Pride and Prejudice', 'Jane Austen', 1813, 279],
  ['The Catcher in the Rye', 'J.D. Salinger', 1951, 214],
  ['The Hobbit', 'J.R.R. Tolkien', 1937, 310],
]);
table.headers = ['Title', 'Author', 'Year Published', 'Pages'];
el.value = table;
el.globalFilter = true;
el.addEventListener('gui-click', (ev) => {
  window.alert(`Clicked row=${ev.detail.rowIdx},col=${ev.detail.colIdx}`);
});

Sort by column

Table can specify the current column used for sorting by using the sortBy property.

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.fromRows([
  ['1984', 'George Orwell', 1949, 328],
  ['To Kill a Mockingbird', 'Harper Lee', 1960, 281],
  ['The Great Gatsby', 'F. Scott Fitzgerald', 1925, 180],
  ['One Hundred Years of Solitude', 'Gabriel Garcia Marquez', 1967, 417],
  ['Moby Dick', 'Herman Melville', 1851, 635],
  ['War and Peace', 'Leo Tolstoy', 1869, 1225],
  ['Pride and Prejudice', 'Jane Austen', 1813, 279],
  ['The Catcher in the Rye', 'J.D. Salinger', 1951, 214],
  ['The Hobbit', 'J.R.R. Tolkien', 1937, 310],
]);
table.headers = ['Title', 'Author', 'Year Published', 'Pages'];
el.value = table;
el.sortBy = [2, 'desc']; // 'asc', 'desc' or undefined for default order

Filter by column

Table can be filtered by column using the filterColumns property.

PreviewSource

const el = document.createElement('gui-table');
const table = gc.core.Table.fromRows([
  ['1984', 'George Orwell', 1949, 328],
  ['To Kill a Mockingbird', 'Harper Lee', 1960, 281],
  ['The Great Gatsby', 'F. Scott Fitzgerald', 1925, 180],
  ['One Hundred Years of Solitude', 'Gabriel Garcia Marquez', 1967, 417],
  ['Moby Dick', 'Herman Melville', 1851, 635],
  ['War and Peace', 'Leo Tolstoy', 1869, 1225],
  ['Pride and Prejudice', 'Jane Austen', 1813, 279],
  ['The Catcher in the Rye', 'J.D. Salinger', 1951, 214],
  ['The Hobbit', 'J.R.R. Tolkien', 1937, 310],
]);
table.headers = ['Title', 'Author', 'Year Published', 'Pages'];
el.value = table;
el.filterColumns = ['the'];

Column factory (customElement)

By default, gui-table uses gui-value to render its cells. But that is not always what the user wants. Therefore, each column can define its own “tagName” to use for the rendering of its cells. This is done by setting cellTagNames, see the example below:

PreviewSource

const el = document.createElement('gui-table');
el.value = gc.core.Table.fromObjects([
  { Date: new Date('2019-01-01T15:15:00Z'), Value: -2.5, Sentiment: null },
  { Date: new Date('2019-01-02T15:15:00Z'), Value: 1.458, Sentiment: 'up' },
  { Date: new Date('2020-01-03T15:15:00Z'), Value: 0.009, Sentiment: 'down' },
  { Date: new Date('2021-01-04T15:15:00Z'), Value: 5.64, Sentiment: 'up' },
]);
// will use 'arrow-icon' to render cells for column '2'
el.columnFactory = { 2: 'arrow-icon' };

class ArrowIcon extends HTMLElement {
  /** This will be called by `gui-table` to render the cell of column 2 */
  set value(value) {
    switch (value) {
      case 'up':
        this.title = value;
        this.innerHTML =
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path d="M12 6V18M12 6L7 11M12 6L17 11" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        break;
      case 'down':
        this.innerHTML =
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path d="M12 6V18M12 18L7 13M12 18L17 13" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        this.title = value;
        break;
      default:
        this.innerHTML =
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none"><path d="M12 19H12.01M8.21704 7.69689C8.75753 6.12753 10.2471 5 12 5C14.2091 5 16 6.79086 16 9C16 10.6565 14.9931 12.0778 13.558 12.6852C12.8172 12.9988 12.4468 13.1556 12.3172 13.2767C12.1629 13.4209 12.1336 13.4651 12.061 13.6634C12 13.8299 12 14.0866 12 14.6L12 16" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
        this.title = 'unknown';
    }
  }
}

if (!customElements.get('arrow-icon')) {
  customElements.define('arrow-icon', ArrowIcon);
}

Column factory (function)

Because sometimes creating a WebComponent for a simple cell override is too boilerplatty, gui-table allows the 'tag-name' to be a function. Internally it will create the WebComponent with a random name using the given function for the rendering:

PreviewSource

const el = document.createElement('gui-table');
el.value = gc.core.Table.fromObjects([
  { Date: new Date('2019-01-01T15:15:00Z'), Value: -2.5, Sentiment: null },
  { Date: new Date('2019-01-02T15:15:00Z'), Value: 1.458, Sentiment: 'up' },
  { Date: new Date('2020-01-03T15:15:00Z'), Value: 0.009, Sentiment: 'down' },
  { Date: new Date('2021-01-04T15:15:00Z'), Value: 5.64, Sentiment: 'up' },
]);
el.columnFactory = {
  2: (value, _, el) => {
    const inner = document.createElement('span');
    switch (value) {
      case 'up': {
        el.title = 'up';
        inner.style.fontSize = '24px';
        inner.textContent = '↑';
        break;
      }
      case 'down': {
        el.title = 'down';
        inner.style.fontSize = '24px';
        inner.textContent = '↓';
        break;
      }
      default: {
        el.title = 'unknown';
        inner.style.fontSize = 'var(--font-size)';
        inner.style.color = 'var(--muted-color)';
        inner.textContent = 'unknown';
        break;
      }
    }
    return inner;
  },
};

Table Mappings

The mappings utility allows you to create a new table based on an existing table. The new table will have the same rows as the original table, but the columns will be mapped to new columns. This is useful when you want to create a new table with a subset of the columns of the original table.

In the example below, the original table has two columns, the time index and an object, which is not very user friendly. So we extract the values that interest us into new columns.

We also leverage the ignoreCols property to hide the original object column.

Also works with Maps, node and Array types.

PreviewSource

const el = document.createElement('div');
el.className = 'row';
const tableWithoutMapping = document.createElement('gui-table');
const tableWithMapping = document.createElement('gui-table');
gc.project.tableMappingExample().then((table) => {
  tableWithoutMapping.value = table;

  // Create a mapping to extract the values of the object column
  // first parameter is the index of the column to map
  // second param is the attribute to extract from the object
  const mappings = [
    new gc.core.TableColumnMapping(1, ['valA']),
    new gc.core.TableColumnMapping(1, ['valB']),
  ];

  gc.core.Table.applyMappings(table, mappings).then((mappedTable) => {
    tableWithMapping.value = mappedTable;
  });
});
tableWithMapping.ignoreCols = [1]; // Hide the original object column
el.append(tableWithoutMapping, tableWithMapping);

Events

Name	Detail	Description
`gui-click`	`TableClickEventDetail`	Triggered when a row is clicked
`gui-dblclick`	`TableClickEventDetail`	Triggered when a row is double-clicked

TableClickEventDetail

export type TableClickEventDetail = {
  /** The clicked row index. */
  rowIdx: number;
  /** The clicked column index. */
  colIdx: number;
};