Create a User Interface Component

[tbenbow]

To make development easier for authors and to increase visual consistency in the experience we will provide a set of interface components that authors can use in their own components. Using a table component may look like the following.

const markup = `<c-table labels="ID, Name, Email" vars="id, name, email" />`

const data = {
  users: [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
    { id: 3, name: 'Sam Green', email: 'sam@example.com' }
  ]
};

Cartographer core will translate this component into a markup string and feed it into the same handlebars process to populate it with data. On the cartographer side defining a table component may look like this.