<template>
  <div class="vue-root">
    <div class="demo-description">
      The Grid in this demo displays data in a series of rows and columns. This
      is the simplest case when the Grid is bound to a local data source.
    </div>
    <smart-grid id="grid"></smart-grid>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.grid.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {
      window.Smart(
        "#grid",
        class {
          get properties() {
            return {
              behavior: {
                columnResizeMode: "growAndShrink"
              },
              appearance: {
                alternationCount: 2,
                showRowHeader: true,
                showRowHeaderSelectIcon: true,
                showRowHeaderFocusIcon: true
              },
              paging: {
                enabled: true
              },
              pager: {
                visible: true
              },
              sorting: {
                enabled: true
              },
              editing: {
                enabled: true
              },
              selection: {
                enabled: true,
                allowCellSelection: true,
                allowRowHeaderSelection: true,
                allowColumnHeaderSelection: true,
                mode: "extended"
              },
              dataSource: [  
				  { "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte"},   
				  { "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte"},   
				  { "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea"},   
				  { "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte"},   
				  { "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna"},   
				  { "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },  
				  { "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte"},   
				  { "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano"},  
				  { "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna"},   
				  { "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea"},   
				  { "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle"},  
				  { "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist"},  
				  { "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha"}  
				],
              columns: [
                {
                  label: "First Name",
                  dataField: "firstName"
                },
                {
                  label: "Last Name",
                  dataField: "lastName"
                },
                {
                  label: "Product",
                  dataField: "productName"
                }
              ]  
            };
          }
        }
      );
    });
  }
};
</script>

<style>
body {
  min-height: 700px;
}

smart-grid {
  width: 100%;
  height: auto;
}
</style>