Mejik Datatable - full featured data table

<!-- 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>