laravel-vue-datatable
Version:
Vue.js datatable made with Laravel and Bootstrap in mind
131 lines (118 loc) • 3.11 kB
Markdown
### Tailwind Config
> (mixins/tailwind.js)
Custom Class
```css
.stripped-table:nth-child(even) {
bg-black;
}
```
```javascript
export default {
data() {
return {
classes: {
'table-container': {
'justify-center': true,
'w-full': true,
'flex': true,
'rounded': true,
'mb-6': true,
'shadow-md': true,
},
table: {
'text-left': true,
'w-full': true,
'border-collapse': true,
},
't-head': {
'text-grey-dark': true,
'bg-black': true,
'border-grey-light': true,
'py-4': true,
'px-6': true,
},
"t-body": {
'bg-grey-darkest': true,
},
"t-head-tr": {
},
"t-body-tr": {
'stripped-table': true,
'bg-grey-darkest': true,
},
"td": {
'py-4': true,
'px-6': true,
'border-b': true,
'border-grey-light': true,
'text-grey-light': true,
},
"th": {
'py-4': true,
'px-6': true,
'font-bold': true,
'uppercase': true,
'text-sm': true,
'text-grey-dark': true,
'border-b': true,
'border-grey-light': true,
},
}
};
},
}
```
### Tailwind Datatable
```html
<data-table
:url="url"
:columns="columns"
:classes="classes"
:per-page="perPage">
<span slot="filters" slot-scope="{ tableData, perPage }">
<data-table-filters
:table-data="tableData"
:per-page="perPage">
</data-table-filters>
</span>
<span slot="pagination" slot-scope="{ links, meta }">
<paginator
="updateUrl"
="updateUrl"
:meta="meta"
:links="links">
</paginator>
</span>
</data-table>
```
```javascript
import TailwindDatatable from '../mixins/tailwind.js';
export default {
data() {
return {
url: 'http://vue-datatable.test/ajax',
perPage: ['10', '25', '50'],
columns: [
{
label: 'ID',
name: 'id',
orderable: true,
},
{
label: 'Name',
name: 'name',
orderable: true,
},
{
label: 'Email',
name: 'email',
orderable: true,
}
]
}
},
mixins: [
TailwindDatatable
]
}
```