`<gui-object />`

Usage

This component can display any complex object instance using a “key-value” representation.

It will, by default, collapse any nested properties (eg. arrays, objects) in a collapsible <details /> and only load the nested content when requested.

This is convenient to quickly dump GreyCat responses and get a feel of the actual response data.

Simple example

PreviewSource

const el = document.createElement('gui-object');
el.value = 'Hello world!';

Complex example

PreviewSource

const el = document.createElement('gui-object');
el.withHeader = true;
el.value = {
  name: 'List of books',
  creation: gc.core.time.now(),
  books: [
    { title: '1984', author: 'George Orwell', year: 1949, pages: 328 },
    { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960, pages: 281 },
    { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925, pages: 180 },
    {
      title: 'One Hundred Years of Solitude',
      author: 'Gabriel Garcia Marquez',
      year: 1967,
      pages: 417,
    },
    { title: 'Moby Dick', author: 'Herman Melville', year: 1851, pages: 635 },
    { title: 'War and Peace', author: 'Leo Tolstoy', year: 1869, pages: 1225 },
    { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813, pages: 279 },
    { title: 'The Catcher in the Rye', author: 'J.D. Salinger', year: 1951, pages: 214 },
    { title: 'The Hobbit', author: 'J.R.R. Tolkien', year: 1937, pages: 310 },
  ],
};
// Make sure to validate which table fires the event in the case of multiple displayed table.
el.addEventListener('gui-click', (ev) => {
  window.alert(`rowIdx=${ev.detail.rowIdx}, colIdx=${ev.detail.colIdx}`);
});

If the given value is a core::Table, this component will actually use <gui-table /> for the display.
This is also true when the tables are nested within the structure.