vue3-table-lite

Mode

vue3-table-lite is supported 3 rendering mode.

Default Mode

If you are always use API to get rows data. choose this mode.

Template:

<table-lite
  :is-loading="table.isLoading"
  :columns="table.columns"
  :rows="table.rows"
  :total="table.totalRecordCount"
  :sortable="table.sortable"
  @do-search="doSearch"
  @is-finished="tableLoadingFinish"
/></table-lite>
                    

Code(composition API):

  export default defineComponent({
    name: "App",
    components: { TableLite },
    setup() {
      // Init Your table settings
      const table = reactive({
        isLoading: false,
        columns: [
          {
            label: "ID",
            field: "id",
            width: "3%",
            sortable: true,
            isKey: true,
          },
          {
            label: "Name",
            field: "name",
            width: "10%",
            sortable: true,
          },
          {
            label: "Email",
            field: "email",
            width: "15%",
            sortable: true,
          },
        ],
        rows: [],
        totalRecordCount: 0,
        sortable: {
          order: "id",
          sort: "asc",
        },
      });
  
      /**
       * Table search event
       */
       const doSearch = (offset, limit, order, sort) => {
        table.isLoading = true;
  
        // Start use axios to get data from Server
        let url = 'https://www.example.com/api/some_endpoint?offset=' + offset + '&limit=' + limit + '&order=' + order + '&sort=' + sort;
        axios.get(url)
        .then((response) => {
          // Point: your response is like it on this example.
          //   {
          //   rows: [{
          //     id: 1,
          //     name: 'jack',
          //     email: 'example@example.com'
          //   },{
          //     id: 2,
          //     name: 'rose',
          //     email: 'example@example.com'
          //   }],
          //   count: 2,
          //   ...something
          // }
          
          // refresh table rows
          table.rows = response.rows;
          table.totalRecordCount = response.count;
          table.sortable.order = order;
          table.sortable.sort = sort;
        });
        // End use axios to get data from Server
      };
  
      /**
       * Table search finished event
       */
      const tableLoadingFinish = (elements) => {
        table.isLoading = false;
      };

      // Get data first
      doSearch(0, 10, 'id', 'asc');
  
      return {
        table,
        doSearch,
        tableLoadingFinish,
      };
  },
                    

V-slot Mode

If you are use API to get rows data and need use vue components on rendering. choose this mode.

Template:

    <table-lite
      :is-slot-mode="true"
      :is-loading="table.isLoading"
      :columns="table.columns"
      :rows="table.rows"
      :total="table.totalRecordCount"
      :sortable="table.sortable"
      @do-search="doSearch"
      @is-finished="table.isLoading = false"
    >
      <template v-slot:name="data">
        {{ data.value.name }}
      </template>
    </table-lite>
                        

Code(composition API):

  export default defineComponent({
    name: "App",
    components: { TableLite },
    setup() {
      // Init Your table settings
      const table = reactive({
        isLoading: false,
        columns: [
          {
            label: "ID",
            field: "id",
            width: "3%",
            sortable: true,
            isKey: true,
          },
          {
            label: "Name",
            field: "name",
            width: "10%",
            sortable: true,
          },
          {
            label: "Email",
            field: "email",
            width: "15%",
            sortable: true,
          },
        ],
        rows: [],
        totalRecordCount: 0,
        sortable: {
          order: "id",
          sort: "asc",
        },
      });
  
      /**
       * Table search event
       */
       const doSearch = (offset, limit, order, sort) => {
        table.isLoading = true;
  
        // Start use axios to get data from Server
        let url = 'https://www.example.com/api/some_endpoint?offset=' + offset + '&limit=' + limit + '&order=' + order + '&sort=' + sort;
        axios.get(url)
        .then((response) => {
          // Point: your response is like it on this example.
          //   {
          //   rows: [{
          //     id: 1,
          //     name: 'jack',
          //     email: 'example@example.com'
          //   },{
          //     id: 2,
          //     name: 'rose',
          //     email: 'example@example.com'
          //   }],
          //   count: 2,
          //   ...something
          // }
          
          // refresh table rows
          table.rows = response.rows;
          table.totalRecordCount = response.count;
          table.sortable.order = order;
          table.sortable.sort = sort;
        });
        // End use axios to get data from Server
      };
  
      /**
       * Table search finished event
       */
      const tableLoadingFinish = (elements) => {
        table.isLoading = false;
      };

      // Get data first
      doSearch(0, 10, 'id', 'asc');
  
      return {
        table,
        doSearch,
        tableLoadingFinish,
      };
  },
                    

Static Mode

If you are not use API to get rows data. choose this mode.

Template:

    <table-lite
      :is-static-mode="true"
      :is-loading="table.isLoading"
      :columns="table.columns"
      :rows="table.rows"
      :total="table.totalRecordCount"
      :sortable="table.sortable"
      @is-finished="table.isLoading = false"
    ></table-lite>
                        

Code(composition API):

  export default defineComponent({
    name: "App",
    components: { TableLite },
    setup() {
      // Init Your table settings
      const table = reactive({
        isLoading: false,
        columns: [
          {
            label: "ID",
            field: "id",
            width: "3%",
            sortable: true,
            isKey: true,
          },
          {
            label: "Name",
            field: "name",
            width: "10%",
            sortable: true,
          },
          {
            label: "Email",
            field: "email",
            width: "15%",
            sortable: true,
          },
        ],
        rows: [{
            id: 1,
            name: 'jack',
            email: 'example@example.com'
          },{
            id: 2,
            name: 'rose',
            email: 'example@example.com'
        }],
        totalRecordCount: 2,
        sortable: {
          order: "id",
          sort: "asc",
        },
      });
  
      return {
        table,
      };
  },