Vue Paper Dashboard Laravel

Tables

All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and tables with switches. We also combine Element-UI tables to achieve highly customizable tables that can suit any needs. You can see some code samples below:

To use the table component, import it 
import {Table, TableColumn} from 'element-ui'

Global usage

Vue.use(Table)
Vue.use(TableColumn)

For local usage

export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  }
}

Table with actions

<template>
<el-table :data="tableData">
  <el-table-column min-width="50" type="index"></el-table-column>
  <el-table-column min-width="150" prop="name"
                   label="Name">
  </el-table-column>
  <el-table-column min-width="200" prop="job"
                   label="Job Position">
  </el-table-column>
  <el-table-column min-width="150" prop="salary"
                   label="Salary">
  </el-table-column>
  <el-table-column min-width="150"
                   header-align="right"
                   label="Actions">
    <div slot-scope="{row}" class="text-right">
      <el-tooltip content="Info"
                  :open-delay="300"
                  placement="top">
        <p-button type="info" size="sm" icon>
          <i class="nc-icon nc-alert-circle-i"></i>
        </p-button>
      </el-tooltip>


      <el-tooltip content="Settings"
                  :open-delay="300"
                  placement="top">
        <p-button type="success" size="sm" icon>
          <i class="nc-icon nc-settings"></i>
        </p-button>
      </el-tooltip>

      <el-tooltip content="Delete"
                  :open-delay="300"
                  placement="top">
        <p-button type="danger" size="sm" icon>
          <i class="nc-icon nc-simple-delete"></i>
        </p-button>
      </el-tooltip>

    </div>
  </el-table-column>
</el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            id: 1,
            name: 'Dakota Rice',
            salary: '$36.738',
            country: 'Niger',
            city: 'Oud-Turnhout'
          },
          {
            id: 2,
            name: 'Minerva Hooper',
            salary: '$23,789',
            country: 'Curaçao',
            city: 'Sinaai-Waas'
          },
          {
            id: 3,
            name: 'Sage Rodriguez',
            salary: '$56,142',
            country: 'Netherlands',
            city: 'Baileux'
          },
          {
            id: 4,
            name: 'Philip Chaney',
            salary: '$38,735',
            country: 'Korea, South',
            city: 'Overland Park'
          },
          {
            id: 5,
            name: 'Doris Greene',
            salary: '$63,542',
            country: 'Malawi',
            city: 'Feldkirchen in Kärnten'
          }]
      }
    }
  }
</script>

Table with switches

<template>
<el-table class="table-striped"
          :data="tableData">
  <el-table-column type="index">

  </el-table-column>
  <el-table-column prop="name"
                   label="Name">
  </el-table-column>
  <el-table-column prop="job"
                   label="Job Position">
  </el-table-column>
  <el-table-column prop="salary"
                   label="Salary">
  </el-table-column>
  <el-table-column
    label="Active">
    <template slot-scope="props">
      <p-switch v-model="props.row.active" color="black"></p-switch>
    </template>
  </el-table-column>
</el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: 'Andrew Mike',
          job: 'Develop',
          salary: '€ 99,225',
          active: false
        }, {
          name: 'John Doe',
          job: 'Design',
          salary: '€ 89,241',
          active: false
        }, {
          name: 'Alex Mike',
          job: 'Design',
          salary: '€ 92,144',
          active: false
        }, {
          name: 'Mike Monday',
          job: 'Marketing',
          salary: '€ 49,990',
          active: true
        },
        {
          name: 'Paul dickens',
          job: 'Communication',
          salary: '€ 69,201',
          active: true
        }]
      }
    }
  }
</script>

Shopping table

<template>
<el-table style="width: 100%"
              :data="productsTable">
  <el-table-column min-width="220">
    <div slot-scope="{row}" class="img-container">
      <img :src="row.image" alt="Agenda">
    </div>
  </el-table-column>
  <el-table-column min-width="220" label="Product">
    <div class="td-name" slot-scope="{row}">
      <a href="#jacket">{{row.title}}</a>
      <br>
      <small>{{row.description}}</small>
    </div>
  </el-table-column>
  <el-table-column min-width="180" label="Color" prop="color"></el-table-column>
  <el-table-column min-width="100" label="Size" prop="size"></el-table-column>
  <el-table-column min-width="200" label="Price">
    <div slot-scope="{row}" class="td-number">
      <small>€</small>
      {{row.price}}
    </div>
  </el-table-column>
  <el-table-column min-width="200" label="Quantity">
    <div slot-scope="{row}" class="td-number">
      {{row.quantity}}
      <div class="btn-group">
        <p-button type="info" size="sm" @click.native="decreaseQuantity(row)">
          <i class="nc-icon nc-simple-delete"></i>
        </p-button>
        <p-button type="info" size="sm" @click.native="increaseQuantity(row)">
          <i class="nc-icon nc-simple-add"></i>
        </p-button>
      </div>
    </div>
  </el-table-column>
  <el-table-column min-width="200" label="Amount">
    <div slot-scope="{row}" class="td-number">
      <small>€</small>
      {{row.amount}}
    </div>
  </el-table-column>
  <el-table-column min-width="100" label="">
    <div slot-scope="{row}" class="td-actions">
      <p-button type="danger" size="sm" simple icon>
        <i class="nc-icon nc-simple-delete"></i>
      </p-button>
    </div>
  </el-table-column>
</el-table>
</template>

<script>
  export default {
    data() {
      return {
       productsTable: [
         {
           image: 'http://vuejs.creative-tim.com/vue-now-ui-dashboard-pro/documentation/img/saint-laurent.jpg',
           title: 'Suede Biker Jacket ',
           description: 'by Saint Laurent',
           color: 'Black',
           size: 'M',
           price: 3390,
           quantity: 1,
           amount: 3390
         },
         {
           image: 'http://vuejs.creative-tim.com/vue-now-ui-dashboard-pro/documentation/img/balmain.jpg',
           title: 'Jersey T-Shirt',
           description: 'by Balmain',
           color: 'Black',
           size: 'M',
           price: 499,
           quantity: 2,
           amount: 998
         },
         {
           image: 'http://vuejs.creative-tim.com/vue-now-ui-dashboard-pro/documentation/img/prada.jpg',
           title: '\tSlim-Fit Swim Short ',
           description: 'by Prada',
           color: 'Red',
           size: 'M',
           price: 200,
           quantity: 1,
           amount: 200
         }
       ]

      }
    },
    methods: {
      increaseQuantity(row) {
        row.quantity++;
        this.computeAmount(row);
      },
      decreaseQuantity(row) {
        if (row.quantity > 1) {
          row.quantity--;
          this.computeAmount(row);
        }
      },
      computeAmount(row) {
        row.amount = row.quantity * row.price;
      },
    }
  }
</script>

← Button →