j3d1/c3lf-system-3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

create basic table component

Browse source
This commit is contained in:
busti 2019-11-14 04:37:35 +01:00
parent fd0f3bd770
commit 66b1e070d6
2 changed files with 27 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/App.vue
View file

@ -2,94 +2,19 @@
<div id="app"> <div id="app">
<Navbar/> <Navbar/>
<div class="input-group mt-2 mx-2">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="container mt-2"> <div class="container mt-2">
<table class="table table-striped table-dark"> <Table/>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Buttons</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-success active">
<font-awesome-icon icon="check-circle"/>
</button>
<button class="btn btn-secondary active">
<font-awesome-icon icon="edit"/>
</button>
<button class="btn btn-danger active">
<font-awesome-icon icon="trash"/>
</button>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-success active">
<font-awesome-icon icon="check-circle"/>
</button>
<button class="btn btn-secondary active">
<font-awesome-icon icon="edit"/>
</button>
<button class="btn btn-danger active">
<font-awesome-icon icon="trash"/>
</button>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-success active">
<font-awesome-icon icon="check-circle"/>
</button>
<button class="btn btn-secondary active">
<font-awesome-icon icon="edit"/>
</button>
<button class="btn btn-danger active">
<font-awesome-icon icon="trash"/>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Table from '@/components/Table';
import Navbar from '@/components/Navbar'; import Navbar from '@/components/Navbar';
export default { export default {
name: 'app', name: 'app',
components: {Navbar}, components: { Navbar, Table },
}; };
</script> </script>

23
src/components/Table.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col" v-for="(column, index) in columns" :key="index">{{ column.name }}</th>
</tr>
</thead>
</table>
</template>
<script>
export default {
name: 'Table',
data: () => ({
columns: [
{ name: 'uid', sortFn: (items) => items },
{ name: 'description', sortFn: (items) => items },
{ name: 'box', sortFn: (items) => items },
{ name: 'image', sortFn: (items) => items }
]
})
};
</script>