yapsr-vue2-bootstrap-table2
Version:
A sortable and searchable vue table, as a Vue component, using bootstrap styling.
58 lines (56 loc) • 3.13 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Bootstrap Table</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link rel="stylesheet" href="examples/app.css">
</head>
<body>
<h1>Vue Bootstrap Table</h1>
<div id="app" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<button @click="addItem" class="btn btn-primary"><i class="fas fa-plus"></i> Add an item
</button>
<button @click="toggleFilter" class="btn btn-default">Toggle Filter</button>
<button @click="togglePicker" class="btn btn-default">Toggle Column Picker</button>
<button @click="togglePagination" class="btn btn-default">Toggle Pagination</button>
</div>
</div>
<div class="row">
<vue-bootstrap-table
:table="table"
:columns="columns"
:values="values"
:show-filter="showFilter"
:show-column-picker="showPicker"
:paginated="paginated"
:multi-column-sortable="multiColumnSortable"
:ajax="ajax"
:filter-case-sensitive=false
:default-filter-key="defaultFilterKey"
:default-sort-keys="defaultSortKeys"
:default-sort-orders="defaultSortOrders"
:extended-methods="extendedMethods"
:messages="messages"
:table-classes="tableClasses"
@cell-data-modified="onCellDataModified"
@column-toggled="onColumnToggled"
@filter-key-modified="onFilterKeyModified"
@sort-modified="onSortModified"
@row-clicked="onRowClicked"
@cell-clicked="onCellClicked"
@footer-cell-clicked="onFooterCellClicked"
></vue-bootstrap-table>
</div>
</div>
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="build/bundle.js"></script>
</body>
</html>