Simple Table Component For Vue.js

Install & Download:

Description:

A simple yet powerful table component for easily present tabular data with support for sortable columns, pagination, and custom CSS styles.

How to use it:

1. Import and register the needed components.

import TableView from '@/components/TableView'
import TablePagination from '@/components/TableView'
import Footer from '@/components/Footer'

export default {
  components:{
    TableView,
    TablePagination,
    Footer
  }
}

2. Add the TableView component to the component and populate the table with the data you provide.

<TableView
  :headers="columns"
  :rows="items"      
  :sort="sort1"
>
  <template v-slot:items="{ row }">
    <td>{{ row.first_name }}</td>
    <td>{{ row.last_name }}</td>   
    <td>{{ row.email }}</td>              
    <td>{{ row.age }}</td>     
    <td>{{ row.country }}</td>                 
    <td>{{ row.category }}</td>
    <td>{{ row.last_update }}</td>        
  </template>
  <template v-slot:no-data>
    <span>No data</span>
  </template>
</TableView>

export default {
  components:{
    TableView,
    Footer
  },
  data(){
    return{
      columns: [...], // column data
      items: [...], // tabular data
      sort1:{
        field: 'first_name',
        order: 'asc'
      },    
      pagination:{
        itemsPerPage: 7,
        align: 'center',
        visualStyle: 'select'
      }
    }    
  }
}

3. Default props.

headers: {
  type: Array,
  default() {
    return []
  },
  required: true
},   
rows: {
  type: Array,
  default() {
    return []
  }, 
  required: true
},        
sort: {
  type: Object,
  default() {
    return {}
  }
},
// page : Number,
// totalPages: Number,
// paginationOptions: Object
pagination: {
  type: Object,
  default() {
    return {}
  }
},
cssStyle: {
  type: String,
  default: 'ozn'
}