<template>
<section class="content">
<div class="row center-block">
<h2>Simple</h2>
<div class="col-md-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Striped Full Width Table</h3>
</div>
<!-- /.box-header -->
<div class="box-body no-padding table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
<tr>
<td>1.</td>
<td>Update software</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-red">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Clean database</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-yellow">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cron job running</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-light-blue">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-green">90%</span></td>
</tr>
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<div class="row center-block">
<h2>Data tables</h2>
<div class="col-md-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
<div class="row">
<div class="col-sm-6">
<div id="example1_length" class="dataTables_length">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 table-responsive">
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
<thead>
<tr role="row">
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="even" role="row">
<td class="sorting_1">Blink</td>
<td>Iridium 54.0</td>
<td>GNU/Linux</td>
<td>54</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td>1.9</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td>1</td>
<td>A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="1" rowspan="1">Rendering engine</th>
<th colspan="1" rowspan="1">Browser</th>
<th colspan="1" rowspan="1">Platform(s)</th>
<th colspan="1" rowspan="1">Engine version</th>
<th colspan="1" rowspan="1">CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import $ from 'jquery'
// Require needed datatables modules
import 'datatables.net'
import 'datatables.net-bs'
export default {
name: 'Tables',
mounted () {
this.$nextTick(() => {
$('#example1').DataTable()
})
}
}
</script>
<style>
/* Using the bootstrap style, but overriding the font to not draw in
the Glyphicons Halflings font as an additional requirement for sorting icons.
An alternative to the solution active below is to use the jquery style
which uses images, but the color on the images does not match adminlte.
@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
*/
@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
font-family: 'FontAwesome';
}
table.dataTable thead .sorting:after {
content: "\f0dc";
}
table.dataTable thead .sorting_asc:after {
content: "\f0dd";
}
table.dataTable thead .sorting_desc:after {
content: "\f0de";
}
</style>
|