Vue Client Table
Vue component for rendering a client side table with pagination, grouping, sorting, filtering, details row. Entire table data should be given to the table and will be paginated client side. Data can come from a Vuex store.
Dependencies
- Vue 2
- Bootstrap 3
- FontAwesome 4
Demo
https://vueclienttable.firebaseapp.com/#/
Install
npm i vue-client-table
OR
npm i ssh://git@github.com:myENA/vue-client-table.git
Usage:
(Total in group: {{data.total}}) Custom heading of column1 {{row.column1}} Div for child (expanded) row
As plugin (or in Browser)
// this will add create the global (window) object "VueClientTable";// or include as script in html : <script type="text/javascript" src="node_modules/vue-client-table/dist/vue-client-table.min.js"></script> // registers the component globallyVue; // in the view that contains the tableconst MyView = { // Define properties return /** * List of objects to present in the table * * @member * @type */ data: Array /** * List of keys to use from each object (table columns) * * @type */ columns: Array /** * The search query string. If updated will filter the results by the value * @type */ searchQuery: String /** * Loading indicator. If true, will display the `loadingMsg` instead of the body * @type */ loading: type: Boolean default: false /** * Options for the table * * @inner * @type */ options: /** * Key-value pairs with the headings to overwrite (label to display) * can also be overwritten with slot: "heading_colname" * * @inner * @type */ headings: {} /** * Key-value pairs with templates (components) for the column value * * @type */ templates: {} /** * Key-value pairs with custom search function per column, or false to disable search for that column * * @type */ search: {} /** * Field to group by - key name * * @default * @type */ groupBy: false /** * Expand/collapse groups * * @default * @type */ toggleGroups: false /** * Object of data to use for each group "header" (key is the group value) * * @type */ groupMeta: {} /** * Required, unique identifier * * @default * @type */ uniqueKey: 'id' /** * show extra row for each row with details * * @default * @type */ childRow: false /** * Text to show when row can be expanded * @type */ expandText: 'Show details' /** * Text to show when row can be collapsed * @type */ collapseText: 'Hide details' /** * empty object to disable sorting for all, or define what columns are sortable; defaults to all sortable * * @default * @type */ sortable: true /** * false, to disable pagination - show all; defaults to true * * @default * @type */ pagination: true /** * number of items per page * * @default * @type */ perPage: 10 /** * How many pages to show in the paginator. Odd number * * @default * @type */ pageInterval: 9 /** * values to show in the selector of items per page * * @default * @type */ perPageValues: 1 2 5 10 20 50 /** * Is the table editable (eg: can select value) * @type */ editable: false /** * Message to show when there is no data * @type */ noDataMsg: 'No data to show' /** * Message to show when no results are found for the search * @type */ emptyResultsMsg: 'No results for this filter' /** * Message to show when no results are found for the search * @type */ loadingMsg: 'Loading ...' /** * Key to the table by on first load (on created) * @type */ sortBy: null /** * The collator used for sorting * @type */ sortCollator: 'en' numeric: true sensitivity: 'base' ; } // OR use computed properties instead computed: { return this$storestatemyListData; // or any other source that has all data } methods: { thissearchQuery = filterkeyword; } watch: { // set the group metas when data changes // groupColumn is the same as the one used for 'groupBy' option thisoptionsgroupMeta = data; } ;
As module/local component
; // in the view that contains the tableconst MyView = components: ClientTable { return columns: 'column1' 'column2' options: ; } computed: { return this$storestatemyListData; // or any other source that has all data } ;
Thanks
To https://github.com/matfish2/vue-tables-2 for inspiration