Datatable

This component helps you to create frontend table faster and easier. Only need an array data or url for server side data.

Usage Example

<DataTable :table="table" ref="ServerSide" />

export default {
  data() {
    return {
      table: {
        toolbar: {
          archivedTableSwitcher: true,
          search: true,
          selectAll: true,
          daterange: {
            display: false,
            fieldName: 'createdAt'
          },
          topRightButtons: [
            {
              text: "Add Item", 
              icon: "add", 
              isVisible: () => this.hasAccess(['read', 'write', 'admin']),
              action: () => { 
                this.$router.push({ name: 'index' });
              }
            },
            {
              groupName: "moreActions", 
              text: "Get Selected",
              icon: "filter_list",
              isVisible: () => this.hasAccess(['read', 'write', 'admin']),
              action: () => {
                alert(JSON.stringify(this.table.selected, null, '  '));
              }
            },
            {
              groupName: "moreActions",
              text: "Another Action",
              isVisible: () => this.hasAccess(['read', 'write', 'admin']),
              action: () => {
                alert('Another action triggered');
              }
            }
          ]
        },
        settings: {
          url: "users/table",
          isServerSide: true,
          pagination: {
            sortBy: 'createdAt',
            descending: true,
            rowsPerPage: 25
          }
        },
        headers: [
          { text: "Name", align: "left" },
          { text: "Username" },
          { text: "Email" },
          { text: "Role", sortable: false },
          { text: "Created At" }
        ],
        contents: [
          {
            data: "firstName", 
            render: (data, full) => {
              return data + full.lastName;
            }
          },
          { data: "username" },
          { 
            data: "email",
            render: data => {
              return '<button type="button" class="blue--text text-lowercase theme--dark v-btn v-btn--depressed v-btn--outline v-btn--round v-btn--small">
                    <div class="v-btn__content">' + data + '</div>
                  </button>';
            },
            getRecord: data => {
              alert('Column action. Get row data, email: ' + data.email);
            }
          },
          { data: "role.name" },
          {
            data: "createdAt",
            render: data => {
              return this.timeZone(data, 'DD MMM YYYY H:mm z');
            }
          },
          { data: "lastName", hideColumn: true }
        ],
        actions: [
          {
            text: "View Data",
            icon: "remove_red_eye",
            color: "orange",
            isVisible: data => this.hasAccess(['read', 'write', 'admin']),
            getRecord: data => {
              alert(JSON.stringify(data, null, '  '));
            }
          },
          {
            text: "View or Edit",
            icon: "mdi-lead-pencil",
            color: "teal lighten-2",
            getRecord: data => {
              alert(JSON.stringify(data, null, '  '));
            }
          },
          {
            text: "Delete Data",
            icon: "delete",
            color: "red accent-2",
            getRecord: data => {
              alert(JSON.stringify(data, null, '  '));
            }
          }
        ]
      }
    }
  }
}