Untitled

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    </head>
    <body>
      <div id="app">

        <vs-row>
          <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="12">
            <vs-row vs-justify="center">

              <vs-col type="flex" vs-justify="center" vs-align="center" vs-w="6">
                <vs-card>
                  <div slot="header">
                    <h3>
                      Hello world !
                    </h3>
                  </div>
                  <div>
                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
                  </div>

                </vs-card>
              </vs-col>
              <br>

              <!--Tabela-->
                <template lang="pl">
                  <div>
                    <vs-table
                      multiple
                      v-model="selected"
                      pagination
                      max-items="3"
                      search
                      :data="users">
                      <template slot="header">
                        <h3>
                          Users
                        </h3>
                      </template>
                      <template slot="thead">
                        <vs-th sort-key="email">
                          Email
                        </vs-th>
                        <vs-th sort-key="username">
                          Name
                        </vs-th>
                        <vs-th sort-key="website">
                          Website
                        </vs-th>
                        <vs-th sort-key="id">
                          Nro
                        </vs-th>
                      </template>

                      <template slot-scope="{data}">
                        <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
                          <vs-td :data="data[indextr].email">
                            {{data[indextr].email}}
                          </vs-td>

                          <vs-td :data="data[indextr].username">
                            {{data[indextr].username}}
                          </vs-td>

                          <vs-td :data="data[indextr].id">
                            {{data[indextr].website}}
                          </vs-td>

                          <vs-td :data="data[indextr].id">
                            {{data[indextr].id}}
                          </vs-td>
                        </vs-tr>
                      </template>
                    </vs-table>

                    <pre>{{ selected }}</pre>
                  </div>
                </template>

                <script>
                export default {
                  data:()=>({
                    selected:[],
                    users:[
                      {
                        "id": 1,
                        "name": "Leanne Graham",
                        "username": "Bret",
                        "email": "Sincere@april.biz",
                        "website": "hildegard.org",
                      },
                      {
                        "id": 2,
                        "name": "Ervin Howell",
                        "username": "Antonette",
                        "email": "Shanna@melissa.tv",
                        "website": "anastasia.net",
                      },
                      {
                        "id": 3,
                        "name": "Clementine Bauch",
                        "username": "Samantha",
                        "email": "Nathan@yesenia.net",
                        "website": "ramiro.info",
                      },
                      {
                        "id": 4,
                        "name": "Patricia Lebsack",
                        "username": "Karianne",
                        "email": "Julianne.OConner@kory.org",
                        "website": "kale.biz",
                      },
                      {
                        "id": 5,
                        "name": "Chelsey Dietrich",
                        "username": "Kamren",
                        "email": "Lucio_Hettinger@annie.ca",
                        "website": "demarco.info",
                      },
                      {
                        "id": 6,
                        "name": "Mrs. Dennis Schulist",
                        "username": "Leopoldo_Corkery",
                        "email": "Karley_Dach@jasper.info",
                        "website": "ola.org",
                      },
                      {
                        "id": 7,
                        "name": "Kurtis Weissnat",
                        "username": "Elwyn.Skiles",
                        "email": "Telly.Hoeger@billy.biz",
                        "website": "elvis.io",
                      },
                      {
                        "id": 8,
                        "name": "Nicholas Runolfsdottir V",
                        "username": "Maxime_Nienow",
                        "email": "Sherwood@rosamond.me",
                        "website": "jacynthe.com",
                      },
                      {
                        "id": 9,
                        "name": "Glenna Reichert",
                        "username": "Delphine",
                        "email": "Chaim_McDermott@dana.io",
                        "website": "conrad.com",
                      },
                      {
                        "id": 10,
                        "name": "Clementina DuBuque",
                        "username": "Moriah.Stanton",
                        "email": "Rey.Padberg@karina.biz",
                        "website": "ambrose.net",
                      }
                    ]
                  }),
                }
                </script>

              <!--koniec tabeli-->

            </vs-row>
          </vs-col>
        </vs-row>

        <vs-row>
          <vs-col :key="index" v-for="col,index in 2" vs-type="flex" vs-justify="center" vs-align="center" vs-w="6">
            50%
          </vs-col>
        </vs-row>

      </div>


      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.umd.js"></script>
      <script>
        new Vue({
          el: '#app'
          //components: { App }
          //template: "<App/>"
        })
      </script>
    </body>
    </html>