@tillhub/vue-table-page-pagination

Vue Table with Pagination for table range selection

Install

npm install --save @tillhub/vue-table-page

Demo

Usage

<template>
  <vue-table-page
    title="Example Page"
    :message="message"
    :table-length="tableLength"
    @page-change="changeTablesPage">
    <header-example slot="page-header"/>
    <table-example
      slot="page-table"
      :table-data="tableData" />
  </vue-table-page>
</template>

<script>
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

import VueTablePage from '@tillhub/vue-table-page'
import '@tillhub/vue-table-page/dist/vue-table-page.css'

export default {
  name: 'App',
  components: {
    VueTablePage
  },
  methods: {
    changeTablesPage(pages){
      console.log(pages)
    }
  },
}
</script>

CSS

import '@tillhub/vue-table-page/dist/vue-table-page.css'

Slots

There are three slots at the moment. The "header-left", "header-right", and the "page-table".

| Slot | required | location | |:------------ |:---------|:-------------------------------------------------------------------------------------------------- | | header-left | no | Top of page. Below the Title and Message box if present. All content will be aligned on the left. | | header-right | no | Top of page. Below the Title and Message box if present. All content will be aligned on the right. | | page-table | no | Middle of the page below the header and above the pagination footer. |

Properties

The Properties for the component.

| Property | type | required | example | default | description | |:--------------- |:--------|:---------|:------------------ |:------- |:--------------------------------------------------------------------------------------------------- | | locale | string | no | "de" or "en" | "en" | Currently only German and English is supported. Only 'de' and 'en ' | | table-size | number | no | 100 | null | Need the total size of table to calculate the pagination if not usting table-data | | table-data | Array | no | [{key: value}] | [] | Must provide if you wish to use the @table-chagne event. Needs to be an Array of objects | | hide-pagination | boolean | no | true | false | Will hide pagination footer | | page | object | no | { offset: 20, limit: 50, callLimit: 500} | { offset: 0, limit: 20, callLimit: 1000} | The offset and limit to provide if need to specify location of pagination. The callLimit provides when the next set of data should be called | | page-Sizes | Array | no | [100, 200] | [20, 50, 100] | Sets the page size option in footer | | call-limit | number | no | 500 | 1000 | Will hide pagination footer | | header-style | css Obj | no | { padding: '10px'} | {} | Will update style for header | | body-card | bollean | no | true | false | Will apply a card style around body |

The additional properties for header.

| Property | type | required | example | default | description | |:--------------- |:--------|:---------|:-------------- |:------- |:--------------------------------------------------------------------------------------------------- | | title | string | no | "Products" | "" | The title will appear in the top left of header in h2 | | message | string | no | "Info Here" | "" | If provided a pop up box with info button will appear with message below the title if present | | show-message | boolean | no | true | false | on load will show or hide the message box |

The additional properties for using Default Table. Note the default table will be used when a 'page-table' slot is not provided

| Property | type | required | example | default | description | |------------------|---------------|----------|------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | table-data | Array | Yes | [{key: value}] | [] | Must provide if you wish to use the default table. Needs to be an Array of objects | | table-max-height | Number/string | No | 1000 | 'auto' | You can apply a custom max-height to make the header stationary and table scrollable | | table-height | Number/string | No | 1000 | '100%' | You can apply a custom height | | empty-display | String | No | 'N/A' | '--' | Apply a custom default display when the value of cell is null | | headers | Array | Yes | [{label: 'Lable', value: 'key', minWidth: 10,sortable: true}] | [] | Must provide the headers for the table if using default table. The lable and value (keys from the 'table-data' items) must be provided. Other options are providing the minWidth, or width of column, and if column is sourtable | | remote-sort | Boolean | No | true | false | If provided the sorting will be disabled and instead an event called 'sort-change' will be emitted. | | show-summary | Boolean | No | true | false | whether to display a summary row; columns sum every number in that column up and display them | | summary-method | Function | No | ({ columns, data }) => { // return some array } | undefined | pass a method to summary-method, which returns an array, and each element of the returned array will be displayed in the columns of the summary row |

Table headers parameters option for the 'headers' prop

| parameter | type | required | example | description | |:--------------- |:-------------- |:--------- |:--------------------------------|:-------------------------------------------------------------------------------------- | | label | string | yes | "Product Name" | This is what will be shown in the column header | | value | string | yes | "product_name" | This will reference the unique key in the table options | | minWidth | string | no | "10px" | The column width will be dynamic. This is the minimum width the column will be. | | width | string | no | "10px" | This will set the column width. Without it the column width will be dynamic. | | type | string | no | "date", "currency" | This will format the value according to the local for either date or currency | | fixed | string/Boolean | no | "left", "right", "top", "bottom"| This will make the entire column fixed. | | format | Function | no | item=> !item ? 'n/a' : item | You can pass in a function that auto formats the cell content |

Event

The Pagination will retrun and object with the offSet and size (page limit). This should allow the use to calculate what data is in view of the table

| Event | type | example | default | description | |:------------ |:------- |:------------- |:--------|:-------------------------------------------------------------------------------------- | | @page-change | fuction | (pageObj)=>{} | n/a | Passes the offset and size in an object on pagination change { offset: 20, limit: 100, callNext: false}. The offset is the place the visable table begins. The limit is the number of item in visable table. the callNext is the | | @table-change| fuction | (pageObj)=>{} | n/a | When the full table is provided in 'table-data' prop, this event will provided the data for the visable data | | @height-change| number | 235 | n/a | This will emit the height the body is after calculating header changes. this allows for dynamic sizing |

License

MIT © jmy-kellogg