<script type='javascript'>
      const $table = document.getElementById('table');
      // Columns
      $table.columns = [
        {
          'name': 'name',
          'label': 'Name',
          'width': 16,
          'fixed': true,
        },
        {
          'name': 'age',
          'label': 'Age',
          'width': 7,
        },
        {
          'name': 'eyeColor',
          'label': 'Eye Color',
          'template': function(row, column) {
            return "<goat-tag style='padding: 10px; max-width: 100%;' color='"+row[column.name]+"'>"+row[column.name]+"</goat-tag>";
          },
        },
        {
          'name': 'company',
          'label': 'Company',
        },
        {
          'name': 'email',
          'label': 'Email',
          'width': 25,
        },
        {
          'name': 'address',
          'label': 'Address',
          'width': 20,
        },
      ];
      // Data
      $table.data = JSON.stringify(dataSource.slice(0, 3), null, 2);

      // Events
      $table.addEventListener('goat-table--cell-click', function(evt) {
        document.getElementById('record').innerText = JSON.stringify(evt.detail.record, null, 3);
        document.getElementById('column').innerText = evt.detail.column.label;
      });
      $table.addEventListener('goat-table--selection-change', function(evt) {
        document.getElementById('selected-rows').innerText = JSON.stringify(evt.detail.value, null, 4);
      });
    </script>