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
  }
}

Simple Table with Actions

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144 
<template>
<base-table :data="tableData"
            :columns="columns">
        <template slot="columns">
          <th class="text-center">#</th>
          <th>Name</th>
          <th>Job Position</th>
          <th>Since</th>
          <th class="text-right">Salary</th>
          <th class="text-right">Actions</th>
        </template>  
        <template slot-scope="{row}">
          <td>{{row.id}}</td>
          <td>{{row.name}}</td>
          <td>{{row.job}}</td>
          <td>{{row.since}}</td>
          <td>{{row.salary}}</td>
          <td class="td-actions text-right">
            <base-button type="info" size="sm" icon>
              <i class="tim-icons icon-single-02"></i>
            </base-button>
            <base-button type="success" size="sm" icon>
              <i class="tim-icons icon-settings"></i>
            </base-button>
            <base-button type="danger" size="sm" icon>
              <i class="tim-icons icon-simple-remove"></i>
            </base-button>
          </td>
        </template>    
</base-table>
</template>

<script>
export default {
  data() {
    return {
      columns: ["id", "name", "job", "since", "salary", "actions"],
      tableData: [
        {
          id: 1,
          name: "	Andrew Mike",
          salary: "€ 99,225	",
          job: "Develop",
          since: 2013,
        },
        {
          id: 2,
          name: "	John Doe",
          salary: "€ 89,241",
          job: "Design",
          since: 2012,
        },
        {
          id: 3,
          name: "Alex Mike",
          salary: "€ 92,144	",
          job: "Design",
          since: 2010
        }
      ]
    }
  }
}
</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">
      <base-switch v-model="props.row.active" color="black"></base-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>
  <div class="table-shopping">
    <el-table style="width: 100%" :data="productsTable">
      <el-table-column min-width="140">
        <div slot-scope="{ row }" class="img-container">
          <img :src="row.image" alt="product image" />
        </div>
      </el-table-column>
      <el-table-column min-width="270" 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="120"
        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="100" label="Price" align="center">
        <template slot-scope="{ row }">
          <small>€</small> {{ row.price }}
        </template>
      </el-table-column>
      <el-table-column min-width="160" label="QTY" align="center">
        <template slot-scope="{ row }">
          <div class="btn-group my-5">
            <base-button
              type="info"
              class="btn-simple"
              size="sm"
              @click="decreaseQuantity(row)"
            >
              <i class="tim-icons icon-simple-delete"></i>
            </base-button>
            <base-button type="info" size="sm" @click="increaseQuantity(row)">
              <i class="tim-icons icon-simple-add"></i>
            </base-button>
          </div>
          {{ row.quantity }}
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="Amount" align="right">
        <template slot-scope="{ row }">
          <small>€</small> {{ row.amount }}
        </template>
      </el-table-column>
      <el-table-column min-width="60" label="" align="left">
        <template slot-scope="{ row }">
          <base-button type="primary" class="btn-link">
            <i class="tim-icons icon-simple-remove"></i>
          </base-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

Base Table props

← Tooltips →