# 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'
1

Global usage

Vue.use(Table)
Vue.use(TableColumn)
1
2

For local usage

export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  }
}
1
2
3
4
5
6

# Table with actions

Name
Job Position
Salary
Actions
1
Andrew Mike
Develop
€ 99,225
2
John Doe
Design
€ 89,241
3
Alex Mike
Design
€ 92,144
4
Mike Monday
Marketing
€ 49,990
5
Paul dickens
Communication
€ 69,201
<div class="row">
  <div class="col-12">
    <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 table-actions">
          <el-tooltip content="Info" :open-delay="300" placement="top">
            <n-button type="info" size="sm" icon>
              <i class="now-ui-icons users_single-02"></i>
            </n-button>
          </el-tooltip>
          <el-tooltip content="Settings" :open-delay="300" placement="top">
            <n-button type="success" size="sm" icon>
              <i class="now-ui-icons ui-2_settings-90"></i>
            </n-button>
          </el-tooltip>
          <el-tooltip content="Delete" :open-delay="300" placement="top">
            <n-button type="danger" size="sm" icon>
              <i class="now-ui-icons ui-1_simple-remove"></i>
            </n-button>
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>
  </div>
</div>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

# Table with switches

Name
Job Position
Salary
Active
1
Andrew Mike
Develop
€ 99,225
2
John Doe
Design
€ 89,241
3
Alex Mike
Design
€ 92,144
4
Mike Monday
Marketing
€ 49,990
5
Paul dickens
Communication
€ 69,201
<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">
      <n-switch v-model="props.row.active" color="black"></n-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# Shopping table

Product
Color
Size
Price
Quantity
Amount
Agenda
Suede Biker Jacket

by Saint Laurent

Black
M
€ 3390
1
€ 3390
Agenda
Jersey T-Shirt

by Balmain

Black
M
€ 499
2
€ 998
Agenda
Slim-Fit Swim Short

by Prada

Red
M
€ 200
1
€ 200
<div class="row">
  <div class="col-12">
    <el-table :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>
          <p><small>{{row.description}}</small></p>
        </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">€ {{row.price}}</div>
      </el-table-column>
      <el-table-column min-width="180" label="Quantity" header-align="right">
        <div slot-scope="{row}" class="td-number">
          {{row.quantity}}
          <div class="btn-group">
            <n-button type="info" size="sm" @click.native="decreaseQuantity(row)">
              <i class="now-ui-icons ui-1_simple-delete"></i>
            </n-button>
            <n-button type="info" size="sm" @click.native="increaseQuantity(row)">
              <i class="now-ui-icons ui-1_simple-add"></i>
            </n-button>
          </div>
        </div>
      </el-table-column>
      <el-table-column min-width="200" label="Amount">
        <div slot-scope="{row}" class="td-number">€ {{row.amount}}</div>
      </el-table-column>
      <el-table-column min-width="100" label="">
        <div slot-scope="{row}" class="td-actions">
          <n-button type="neutral">
            <i class="now-ui-icons ui-1_simple-remove"></i>
          </n-button>
        </div>
      </el-table-column>
    </el-table>
  </div>
</div>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

For props, slots & events, please check element ui docs

← Tabs →