#Vue Data Table

  npm i @zlonneman/vue-data-table

<template>
 <div class="">
   <DataTable 
     :headers="headers" 
     :dataSource="dataSource" 
     :inlineEditing="true" 
     :enable-pagination="true"
     :include-summary-row="true"
     :global-search="true"/>
 </div>
</template>

<script>
import DataTable          from '@zlonneman/vue-data-table';
export default {
 name: 'HelloWorld',
 components:{
   DataTable
 },
 data(){
   return{
     headers: [
       {text: 'Name', value: 'name', align: 'left'},
       {text: 'Age', value: 'age', align: 'right', type: 'number'}
     ],
     dataSource: [
       {name: 'John Doe', age: 36}, 
       {name: 'Jane Doe', age, 34}
     ]
   }
 }
}
</script>

#Props Props | Type | Default | Example or Details ------------ | ------------- | ------------- | ------------ headers | Array | [] | [{text: 'Header 1', value: h1}, {text: 'Header 2', value: h2}] dataSource | Array | [] | [{h1: Hello, h2: 100}, {h1: World, h2: 200}] actions | Array | [] | [{icon: 'fa-trash', title: 'delete', style: {cursor: 'pointer'}, emitFunction: this.deleteRow}] bordered | Boolean | true | adds border to data table borderColor | String | 'black' | sets border color borderWidth | String | '1px' | sets border width borderStyle | String | 'solid' | sets border style columnLines | Boolean | true | adds lines separating each column columnSearchFilter | Boolean | false | allows the user to filter by using a search in the column header enablePagination | Boolean | false | adds page details and option to the bottom of the table row to bottom of data table globalSearch | Boolean | false | allows the user to filter entire grid by using a global search height | String | '500px' | sets height of data table includeSummaryRow | Boolean | false | adds summary row to bottom of data table (functions are added to the headers array for each column) initialPageSize | Number | 25 | initial number of rows to show per page inlineEditing | Boolean | false | allows inline editing of dataSource element pageSizeOptions | Array | [25, 50, 100] | array of page size options to show at bottom of page rowLines | Boolean | true | adds lines separating each row sort | Boolean | true | allows columns to be sorted using a sort icon near the header text summaryType | String | 'All' | determines if summary calcs should be done on all data or just the data on the current page. Options: ('All', 'All Filtered', 'Page') width | String | '100%' | sets width of data table Cell Styles | | |
cellBackgroundColor | String | 'traparent' | sets ckground-color of cells cellColor | String | 'black' | sets text color of cells cellFontSize | String | '12px' | sets font size of cells cellHeight | String | '24px' | sets height of cells cellOverflow | String | 'hidden' | sets overflow type of cells cellPadding | String | '5px' | sets padding of cells Header Styles | | |
headerFontSize | String | '16px' | sets font size of headers headerBackgroundColor | String | 'transparent' | sets background-color of headers headerColor | String | 'black' | sets text color of headers headerHeight | String | '36px' | sets height of headers headerOverflow | String | 'hidden' | sets overflow type of headers headerPadding | String | '5px' | sets padding of headers Summary Styles | | |
summaryBackgroundColor | String | 'transparent' | sets background-color of summary row Search Styles | | |
searchWidth | String | '100%' | sets width of global search input

#Headers Array

let headers = [{
  text: 'Header 1',
  value: 'h1',
  width: '500px',
  type: 'text',
  align: 'right',
  disableSort: false,
  summaryCalc: () => {return 'summary'}
}]

Object Values | Type | Default | Details ------------ | ------------- | ------------- | ------------ align | String | left | sets the text-align of the column disableSort | Boolean | false | disables sortability of column text | String | N/A | sets the display value of the column type | String | text | options: 'text', 'number', 'usd', 'percent', 'actions' value | String | N/A | sets the value to be paired with dataSource properties width | String | N/A | sets the width of the column summaryCalc | Function | return null | function to be called when determining the summary of the column (see example below)

#Header summaryCalc The first parameter in the summaryCalc is always an array containing all values for the given summaryType ('All', 'All Filtered', 'Page') in the dataSource for the specified column

let headers = [{
  text: 'Header 1',
  value: 'h1',
  summaryCalc: (array) => {
    return array.reduce((total,value) => {
      return total + value;
    })
  }
}]

you can also use methods defined in the script section of your vue template.

let headers = [{
  text: 'Header 1',
  value: 'h1',
  summaryCalc: this.h1Calc
}]

methods: {
  h1Calc(array){
    return array.reduce((total,value) => {
      return total + value;
    })
  }
}

#Actions Array

let headers = [{
  text: '',
  width: '75px',
  type: 'actions',
  align: 'center'
}]
let actions = [{
  icon: 'fa fa-trash',
  title: 'delete',
  style: {cursor: 'pointer'},
  emitFunction: this.deleteRow
}]

Object Values | Type | Default | Details ------------ | ------------- | ------------- | ------------ icon | String | N/A | free font-awesome icon library link to Gallery! title | String | N/A | title to be displayed when user hovers over icon style | Object | {} | add CSS Styles to div container of icon emitFunction | Function | return null | function to be called when icon is clicked, returns row clicked as first parameter

#Header emitFunction The first parameter in the emitFunction is always the object of the row that was clicked

let actions = [{
  icon: 'fa fa-trash',
  title: 'delete',
  style: {cursor: 'pointer'},
  emitFunction: (row) => {
    let index = this.dataSource.map(item => item.id).indexOf(row.id)
    this.dataSource.splice(index, 1)
  }
}]

you can also use methods defined in the script section of your vue template.

let headers = [{
  text: 'Header 1',
  value: 'h1',
  emitFunction: this.deleteRow
}]

methods: {
  deleteRow(row){
    let index = this.dataSource.map(item => item.id).indexOf(row.id)
    this.dataSource.splice(index, 1)
  }
}