<gui-object />

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

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) => {
  window.alert(ev.detail.row[0].value);
});