<!-- MyDataPage.vue -->
<template>
<div>
<MejikDatatable
:columns="columns"
:rows="rows"
:total-rows="total"
:is-loading="loading"
:pagination-options="pagination"
:sort-by="sort"
:selected-rows.sync="selected"
@on-page-change="updateParamsAndReload"
@on-per-page-change="updateParamsAndReload"
@on-sort-change="updateParamsAndReload"
@on-search="updateParamsAndReload"
>
<!-- Example: Customizing the 'status' column -->
<template #table-cell-status="props">
<span :class="`badge badge-${props.row.status === 'active' ? 'success' : 'danger'}`">
{{ props.row.status }}
</span>
</template>
</MejikDatatable>
</div>
</template>
<script>
import axios from 'axios';
import MejikDatatable from './components/MejikDatatable.vue';
export default {
components: { MejikDatatable },
data() {
return {
// Data from server
rows: [],
total: 0,
loading: true,
selected: [],
// Datatable parameters
pagination: { currentPage: 1, perPage: 10 },
sort: [{ field: 'created_at', type: 'desc' }],
searchTerm: '',
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Email', field: 'email' },
{ label: 'Status', field: 'status' },
{ label: 'Created At', field: 'created_at', type: 'date' },
],
};
},
mounted() {
this.loadData();
},
methods: {
// This method handles all updates from the datatable
updateParamsAndReload(newParams) {
// Merge new parameters into our state
if (newParams.currentPage) this.pagination.currentPage = newParams.currentPage;
if (newParams.currentPerPage) this.pagination.perPage = newParams.currentPerPage;
if (Array.isArray(newParams)) this.sort = newParams;
if (newParams.searchTerm !== undefined) this.searchTerm = newParams.searchTerm;
this.loadData();
},
async loadData() {
this.loading = true;
try {
const params = {
page: this.pagination.currentPage,
per_page: this.pagination.perPage,
sort_by: this.sort[0]?.field,
sort_dir: this.sort[0]?.type,
search: this.searchTerm,
};
const response = await axios.get('/api/users', { params });
this.rows = response.data.data;
this.total = response.data.meta.total;
} catch (e) {
console.error("Failed to load data", e);
} finally {
this.loading = false;
}
}
}
}
</script>
