You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.3 KiB
100 lines
2.3 KiB
6 years ago
|
<template>
|
||
|
<div class="content">
|
||
|
<div class="container-fluid">
|
||
|
<div class="row">
|
||
|
<div class="col-12">
|
||
|
<card>
|
||
|
<template slot="header">
|
||
|
<h4 class="card-title">Striped Table with Hover</h4>
|
||
|
<p class="card-category">Here is a subtitle for this table</p>
|
||
|
</template>
|
||
|
<div class="table-responsive">
|
||
|
<l-table class="table-hover table-striped"
|
||
|
:columns="table1.columns"
|
||
|
:data="table1.data">
|
||
|
</l-table>
|
||
|
</div>
|
||
|
</card>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<div class="col-12">
|
||
|
<card class="card-plain">
|
||
|
<template slot="header">
|
||
|
<h4 class="card-title">Table on Plain Background</h4>
|
||
|
<p class="card-category">Here is a subtitle for this table</p>
|
||
|
</template>
|
||
|
<div class="table-responsive">
|
||
|
<l-table class="table-hover"
|
||
|
:columns="table2.columns"
|
||
|
:data="table2.data">
|
||
|
</l-table>
|
||
|
</div>
|
||
|
</card>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
import LTable from 'src/components/UIComponents/Table.vue'
|
||
|
import Card from 'src/components/UIComponents/Cards/Card.vue'
|
||
|
const tableColumns = ['Id', 'Name', 'Salary', 'Country', 'City']
|
||
|
const 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'
|
||
|
}]
|
||
|
export default {
|
||
|
components: {
|
||
|
LTable,
|
||
|
Card
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
table1: {
|
||
|
columns: [...tableColumns],
|
||
|
data: [...tableData]
|
||
|
},
|
||
|
table2: {
|
||
|
columns: [...tableColumns],
|
||
|
data: [...tableData]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
|
</style>
|