<gui-object />


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

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

Complex example

const el = document.createElement('gui-object');
el.withHeader = true;
const { cols, meta } = greycat.toColumnBasedTable([
  { 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},
el.value = {
  name: 'List of books',
  creation: core.time.fromDate(new Date()),
  books: core.Table.create(cols, meta),
// You can catch all 'table-click' event. Note that, all `gui-table` events will bubble up.
// Make sure to validate which table fires the event in the case of multiple displayed table.
el.addEventListener('table-click', (ev) => {

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. See above with the managers attribute.