├── .npmignore
├── docs
    ├── CNAME
    ├── app.js
    ├── webpack.config.js
    ├── table-component.css
    └── index.html
├── .eslintrc
├── .travis.yml
├── .gitignore
├── tests
    ├── .eslintrc
    ├── html-serializer.js
    ├── createVm.js
    ├── mocks
    │   └── LocalStorageMock.js
    ├── bootstrap.js
    ├── concerns
    │   ├── settings.test.js
    │   ├── expiringStorage.test.js
    │   ├── __snapshots__
    │   │   └── filtering.test.js.snap
    │   ├── caching.test.js
    │   ├── sorting.test.js
    │   └── filtering.test.js
    └── components
    │   ├── Pagination.test.js
    │   ├── __snapshots__
    │       ├── Pagination.test.js.snap
    │       └── TableComponent.test.js.snap
    │   └── TableComponent.test.js
├── .babelrc
├── .editorconfig
├── src
    ├── settings.js
    ├── index.js
    ├── components
    │   ├── TableCell.js
    │   ├── TableRow.vue
    │   ├── TableColumn.vue
    │   ├── TableColumnHeader.vue
    │   ├── Pagination.vue
    │   └── TableComponent.vue
    ├── helpers.js
    ├── expiring-storage.js
    └── classes
    │   ├── Row.js
    │   └── Column.js
├── webpack.base.js
├── webpack.config.js
├── LICENSE.md
├── CONTRIBUTING.md
├── package.json
├── CHANGELOG.md
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | __tests__
3 | 


--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | vue-table-component.spatie.be


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "spatie"
3 | }
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |     - 'stable'
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | node_modules
3 | npm-debug.log*
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |     "env": {
3 |         "jest": true
4 |     }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/html-serializer.js:
--------------------------------------------------------------------------------
1 | const toDiffableHtml = require('diffable-html');
2 | 
3 | module.exports = {
4 |     test: object => typeof object === 'string' && object.trim()[0] === '<',
5 |     print: toDiffableHtml,
6 | };
7 | 


--------------------------------------------------------------------------------
/docs/app.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import { TableColumn, TableComponent } from '../src';
 3 | 
 4 | new Vue({
 5 |     el: '#app',
 6 | 
 7 |     components: {
 8 |         TableColumn,
 9 |         TableComponent,
10 |     },
11 | });
12 | 


--------------------------------------------------------------------------------
/tests/createVm.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue/dist/vue.js';
 2 | 
 3 | export default async function createVm(callback = null) {
 4 |     const vm = new Vue({ el: '#app' });
 5 | 
 6 |     await Vue.nextTick();
 7 | 
 8 |     const table = vm.$children[0];
 9 | 
10 |     if (callback) {
11 |         callback(table);
12 | 
13 |         await Vue.nextTick();
14 |     }
15 | 
16 |     return table;
17 | }
18 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "targets": {
 5 |         "browsers": ["last 2 versions", "safari >= 7"],
 6 |         "uglify": true
 7 |       },
 8 |       "modules": "umd"
 9 |     }]
10 |   ],
11 |   "plugins": [
12 |     "transform-object-rest-spread",
13 |     ["transform-runtime", {
14 |       "polyfill": true,
15 |       "regenerator": true
16 |     }]
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | ; This file is for unifying the coding style for different editors and IDEs.
 2 | ; More information at http://editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | charset = utf-8
 8 | indent_size = 4
 9 | indent_style = space
10 | end_of_line = lf
11 | insert_final_newline = true
12 | trim_trailing_whitespace = true
13 | 
14 | [{package.json,*.scss,*.css}]
15 | indent_size = 2
16 | 
17 | [*.md]
18 | trim_trailing_whitespace = false
19 | 


--------------------------------------------------------------------------------
/src/settings.js:
--------------------------------------------------------------------------------
 1 | const settings = {
 2 |     tableClass: '',
 3 |     theadClass: '',
 4 |     tbodyClass: '',
 5 |     headerClass: '',
 6 |     cellClass: '',
 7 |     filterInputClass: '',
 8 |     filterPlaceholder: 'Filter table…',
 9 |     filterNoResults: 'There are no matching rows',
10 | };
11 | 
12 | export function mergeSettings(newSettings) {
13 |     for(const setting in newSettings) {
14 |         settings[setting] = newSettings[setting];
15 |     }
16 | }
17 | 
18 | export default settings;
19 | 


--------------------------------------------------------------------------------
/webpack.base.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     module: {
 3 |         rules: [
 4 |             {
 5 |                 test: /\.js/,
 6 |                 loaders: ['babel-loader'],
 7 |                 exclude: /node_modules/,
 8 |             },
 9 |             {
10 |                 test: /\.vue$/,
11 |                 loaders: ['vue-loader'],
12 |                 exclude: /node_modules/,
13 |             },
14 |         ],
15 |     },
16 | 
17 |     resolve: {
18 |         extensions: ['.js', '.vue'],
19 |     },
20 | };
21 | 


--------------------------------------------------------------------------------
/tests/mocks/LocalStorageMock.js:
--------------------------------------------------------------------------------
 1 | export default class LocalStorageMock {
 2 |     constructor() {
 3 |         this.store = {};
 4 |     }
 5 | 
 6 |     getAll() {
 7 |         return this.store;
 8 |     }
 9 | 
10 |     getItem(key) {
11 |         return this.store[key] || null;
12 |     }
13 | 
14 |     setItem(key, value) {
15 |         this.store[key] = value.toString();
16 |     }
17 | 
18 |     clear() {
19 |         this.store = {};
20 |     }
21 | 
22 |     removeItem(key) {
23 |         delete this.store[key];
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/docs/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const merge = require('webpack-merge');
 3 | 
 4 | module.exports = merge(require('../webpack.base'), {
 5 |     context: __dirname,
 6 | 
 7 |     entry: './app.js',
 8 | 
 9 |     output: {
10 |         path: path.resolve(__dirname, 'build'),
11 |         filename: 'app.js',
12 |         publicPath: '/build/',
13 |     },
14 | 
15 |     resolve: {
16 |         alias: {
17 |             vue: 'vue/dist/vue.js',
18 |         },
19 |     },
20 | 
21 |     devServer: {
22 |         contentBase: __dirname,
23 |         port: 2000,
24 |     },
25 | });
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import TableComponent from './components/TableComponent';
 2 | import TableColumn from './components/TableColumn';
 3 | import Pagination from './components/Pagination';
 4 | import { mergeSettings } from './settings';
 5 | 
 6 | export default {
 7 |     install(Vue, options = {}) {
 8 |         mergeSettings(options);
 9 | 
10 |         Vue.component('table-component', TableComponent);
11 |         Vue.component('table-column', TableColumn);
12 |         Vue.component('pagination', Pagination);
13 |     },
14 | 
15 |     settings(settings) {
16 |         mergeSettings(settings);
17 |     },
18 | };
19 | 
20 | export { TableComponent, TableColumn };
21 | 


--------------------------------------------------------------------------------
/src/components/TableCell.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     functional: true,
 3 | 
 4 |     props: ['column', 'row'],
 5 | 
 6 |     render(createElement, { props }) {
 7 |         const data = {};
 8 | 
 9 |         if (props.column.cellClass) {
10 |             data.class = props.column.cellClass;
11 |         }
12 | 
13 |         if (props.column.template) {
14 |             return createElement('td', data, props.column.template(props.row.data));
15 |         }
16 | 
17 |         data.domProps = {};
18 |         data.domProps.innerHTML = props.column.formatter(props.row.getValue(props.column.show), props.row.data);
19 | 
20 |         return createElement('td', data);
21 |     },
22 | };
23 | 


--------------------------------------------------------------------------------
/tests/bootstrap.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue/dist/vue.js';
 2 | import TableComponent from '../src';
 3 | import LocalStorageMock from './mocks/LocalStorageMock';
 4 | 
 5 | /*
 6 |  * Set up a localStorage mock implementation, and bind it to the window. Don't
 7 |  * forget to clear the storage before every one, since this is only executed
 8 |  * once per test run.
 9 |  */
10 | 
11 | const localStorage = new LocalStorageMock();
12 | 
13 | window.localStorage = localStorage;
14 | 
15 | /*
16 |  * We'll globally install the table component as a Vue plugin so we don't need
17 |  * to worry about importing the components for every test.
18 |  */
19 | 
20 | Vue.use(TableComponent);
21 | 
22 | Vue.config.productionTip = false;
23 | 


--------------------------------------------------------------------------------
/src/components/TableRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <tr @click="$emit('rowClick', row)">
 3 |         <table-cell
 4 |             v-for="column in visibleColumns"
 5 |             :row="row"
 6 |             :column="column"
 7 |             :key="column.id"
 8 |         ></table-cell>
 9 |     </tr>
10 | </template>
11 | 
12 | <script>
13 |     import TableCell from './TableCell';
14 | 
15 |     export default {
16 |         props: ['columns', 'row'],
17 | 
18 |         components: {
19 |             TableCell,
20 |         },
21 | 
22 |         computed: {
23 |             visibleColumns() {
24 |                 return this.columns.filter(column => ! column.hidden);
25 |             },
26 |         },
27 |     };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/tests/concerns/settings.test.js:
--------------------------------------------------------------------------------
 1 | import TableComponent from '../../src/';
 2 | import settings from '../../src/settings';
 3 | 
 4 | describe('settings', () => {
 5 |     it('can update settings', () => {
 6 |         TableComponent.settings({
 7 |             tableClass: 'table',
 8 |             theadClass: 'table-head',
 9 |             tbodyClass: 'table-body',
10 |         });
11 | 
12 |         expect(settings.tableClass).toBe('table');
13 |         expect(settings.theadClass).toBe('table-head');
14 |         expect(settings.tbodyClass).toBe('table-body');
15 |         expect(settings.filterPlaceholder).toBe('Filter table…');
16 |         expect(settings.filterNoResults).toBe('There are no matching rows');
17 |     });
18 | });
19 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const merge = require('webpack-merge');
 4 | 
 5 | module.exports = merge(require('./webpack.base'), {
 6 |     context: __dirname,
 7 | 
 8 |     entry: {
 9 |         'index': './src/index.js',
10 |         'index.min': './src/index.js',
11 |     },
12 | 
13 |     output: {
14 |         path: path.resolve(__dirname, 'dist'),
15 |         filename: '[name].js',
16 |         library: 'vue-table-component',
17 |         libraryTarget: 'umd',
18 |     },
19 | 
20 |     externals: [
21 |         'moment', 'vue',
22 |     ],
23 | 
24 |     plugins: [
25 |         new webpack.optimize.UglifyJsPlugin({
26 |             include: /\.min\.js$/,
27 |             minimize: true,
28 |         }),
29 |     ],
30 | });
31 | 


--------------------------------------------------------------------------------
/src/helpers.js:
--------------------------------------------------------------------------------
 1 | export function classList(...classes) {
 2 |     return classes
 3 |         .map(c => Array.isArray(c) ? c : [c])
 4 |         .reduce((classes, c) => classes.concat(c), []);
 5 | }
 6 | 
 7 | export function get(object, path) {
 8 |     if (! path) {
 9 |         return object;
10 |     }
11 | 
12 |     if (object === null || typeof object !== 'object') {
13 |         return object;
14 |     }
15 | 
16 |     const [pathHead, pathTail] = path.split(/\.(.+)/);
17 | 
18 |     return get(object[pathHead], pathTail);
19 | }
20 | 
21 | export function pick(object, properties) {
22 |     return properties.reduce((pickedObject, property) => {
23 |         pickedObject[property] = object[property];
24 |         return pickedObject;
25 |     }, {});
26 | }
27 | 
28 | export function range(from, to) {
29 |     return [...Array(to - from)].map((_, i) => i + from);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/expiring-storage.js:
--------------------------------------------------------------------------------
 1 | class ExpiringStorage {
 2 |     get(key) {
 3 |         const cached = JSON.parse(
 4 |             localStorage.getItem(key)
 5 |         );
 6 | 
 7 |         if (! cached) {
 8 |             return null;
 9 |         }
10 | 
11 |         const expires = new Date(cached.expires);
12 | 
13 |         if (expires < new Date()) {
14 |             localStorage.removeItem(key);
15 |             return null;
16 |         }
17 | 
18 |         return cached.value;
19 |     }
20 | 
21 |     has(key) {
22 |         return this.get(key) !== null;
23 |     }
24 | 
25 |     set(key, value, lifeTimeInMinutes) {
26 |         const currentTime = new Date().getTime();
27 | 
28 |         const expires = new Date(currentTime + lifeTimeInMinutes * 60000);
29 | 
30 |         localStorage.setItem(key, JSON.stringify({ value, expires }));
31 |     }
32 | }
33 | 
34 | export default new ExpiringStorage();
35 | 


--------------------------------------------------------------------------------
/src/components/TableColumn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Never render the contents -->
 3 |     <!-- The scoped slot won't have the required data -->
 4 |     <div v-if="false">
 5 |         <slot></slot>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script>
10 |     import settings from '../settings';
11 | 
12 |     export default {
13 |         props: {
14 |             show: { required: false, type: String },
15 |             label: { default: null, type: String },
16 |             dataType: { default: 'string', type: String },
17 | 
18 |             sortable: { default: true, type: Boolean },
19 |             sortBy: { default: null },
20 | 
21 |             filterable: { default: true, type: Boolean },
22 |             filterOn: { default: null },
23 | 
24 |             formatter: { default: v => v, type: Function },
25 | 
26 |             hidden: { default: false, type: Boolean },
27 | 
28 |             cellClass: { default: settings.cellClass },
29 |             headerClass: { default: settings.headerClass },
30 |         },
31 |     };
32 | </script>
33 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Spatie bvba <info@spatie.be>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Contributions are **welcome** and will be fully **credited**.
 4 | 
 5 | We accept contributions via Pull Requests on [Github](https://github.com/spatie/vue-table-component).
 6 | 
 7 | ## Pull Requests
 8 | 
 9 | - Use the ES6 syntax.
10 | - Your patch won't be accepted if it doesn't pass the tests and lints (`npm run test`).
11 | - If there's a `/demo` section, try to add an example.
12 | - **Document any change in behaviour:** Make sure the `README.md`, `CHANGELOG.md` and any other relevant documentation are kept up-to-date.
13 | - **Consider our release cycle:** We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
14 | - **Create feature branches:** Don't ask us to pull from your master branch.
15 | - **One pull request per feature:** If you want to do more than one thing, send multiple pull requests.
16 | - **Send coherent history:** Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
17 | 
18 | ## Running Tests
19 | 
20 | ```bash
21 | jest
22 | ```
23 | 
24 | **Happy coding**!
25 | 


--------------------------------------------------------------------------------
/src/classes/Row.js:
--------------------------------------------------------------------------------
 1 | import moment from 'moment';
 2 | import { get } from '../helpers';
 3 | 
 4 | export default class Row {
 5 |     constructor(data, columns) {
 6 |         this.data = data;
 7 |         this.columns = columns;
 8 |     }
 9 | 
10 |     getValue(columnName) {
11 |         return get(this.data, columnName);
12 |     }
13 | 
14 |     getColumn(columnName) {
15 |         return this.columns.find(column => column.show === columnName);
16 |     }
17 | 
18 |     getFilterableValue(columnName) {
19 |         const value = this.getValue(columnName);
20 | 
21 |         if (! value) {
22 |             return '';
23 |         }
24 | 
25 |         return value.toString().toLowerCase();
26 |     }
27 | 
28 |     getSortableValue(columnName) {
29 |         const dataType = this.getColumn(columnName).dataType;
30 | 
31 |         let value = this.getValue(columnName);
32 | 
33 |         if (value === undefined || value === null) {
34 |             return '';
35 |         }
36 | 
37 |         if (value instanceof String) {
38 |             value = value.toLowerCase();
39 |         }
40 | 
41 |         if (dataType.startsWith('date')) {
42 |             const format  = dataType.replace('date:', '');
43 | 
44 |             return moment(value, format).format('YYYYMMDDHHmmss');
45 |         }
46 | 
47 |         if (dataType === 'numeric') {
48 |             return value;
49 |         }
50 | 
51 |         return value.toString();
52 |     }
53 | 
54 |     passesFilter(filter) {
55 |         return this.columns
56 |             .filter(column => column.isFilterable())
57 |             .map(column => this.getFilterableValue(column.getFilterFieldName()))
58 |             .filter(filterableValue => filterableValue.indexOf(filter.toLowerCase()) >= 0)
59 |             .length;
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/classes/Column.js:
--------------------------------------------------------------------------------
 1 | import { pick } from '../helpers';
 2 | 
 3 | export default class Column {
 4 |     constructor(columnComponent) {
 5 |         const properties = pick(columnComponent, [
 6 |             'show', 'label', 'dataType', 'sortable', 'sortBy', 'filterable',
 7 |             'filterOn', 'hidden', 'formatter', 'cellClass', 'headerClass',
 8 |         ]);
 9 | 
10 |         for (const property in properties) {
11 |             this[property] = columnComponent[property];
12 |         }
13 | 
14 |         this.template = columnComponent.$scopedSlots.default;
15 |     }
16 | 
17 | 
18 |     isFilterable() {
19 |         return this.filterable;
20 |     }
21 | 
22 |     getFilterFieldName() {
23 |         return this.filterOn || this.show;
24 |     }
25 | 
26 |     isSortable() {
27 |         return this.sortable;
28 |     }
29 | 
30 |     getSortPredicate(sortOrder, allColumns) {
31 |         const sortFieldName = this.getSortFieldName();
32 | 
33 |         const sortColumn = allColumns.find(column => column.show === sortFieldName);
34 | 
35 |         const dataType = sortColumn.dataType;
36 | 
37 |         if (dataType.startsWith('date') || dataType === 'numeric') {
38 | 
39 |             return (row1, row2) => {
40 |                 const value1 = row1.getSortableValue(sortFieldName);
41 |                 const value2 = row2.getSortableValue(sortFieldName);
42 | 
43 |                 if (sortOrder === 'desc') {
44 |                     return value2 < value1 ? -1 : 1;
45 |                 }
46 | 
47 |                 return value1 < value2 ? -1 : 1;
48 |             };
49 |         }
50 | 
51 |         return (row1, row2) => {
52 |             const value1 = row1.getSortableValue(sortFieldName);
53 |             const value2 = row2.getSortableValue(sortFieldName);
54 | 
55 |             if (sortOrder === 'desc') {
56 |                 return value2.localeCompare(value1);
57 |             }
58 | 
59 |             return value1.localeCompare(value2);
60 |         };
61 |     }
62 | 
63 |     getSortFieldName() {
64 |         return this.sortBy || this.show;
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/tests/concerns/expiringStorage.test.js:
--------------------------------------------------------------------------------
 1 | import expiringStorage from '../../src/expiring-storage';
 2 | 
 3 | describe('expiringStorage', () => {
 4 |     beforeEach(() => {
 5 |         localStorage.clear();
 6 | 
 7 |         const dateClass = Date;
 8 | 
 9 |         // eslint-disable-next-line no-global-assign
10 |         Date = function (dateString) {
11 |             return new dateClass(dateString || '2017-01-01T00:00:00.000Z');
12 |         };
13 |     });
14 | 
15 |     it('sets keys in the local storage', () => {
16 |         expiringStorage.set('my-key', 'my-value', 5);
17 | 
18 |         const localStorageContents = JSON.parse(localStorage.getItem('my-key'));
19 | 
20 |         expect(localStorageContents.value).toBe('my-value');
21 |         expect(localStorageContents.expires).toBe('2017-01-01T00:05:00.000Z');
22 |     });
23 | 
24 |     it('remembers values by key', () => {
25 |         expiringStorage.set('my-key', 'my-value', 5);
26 | 
27 |         expect(expiringStorage.get('my-key')).toEqual('my-value');
28 |     });
29 | 
30 |     it('returns null if the value has expired ', () => {
31 |         expiringStorage.set('my-key', 'my-value', 5);
32 | 
33 |         progressTime(5);
34 | 
35 |         expect(expiringStorage.get('my-key')).toEqual('my-value');
36 | 
37 |         progressTime(1);
38 | 
39 |         expect(expiringStorage.get('my-key')).toBeNull();
40 |     });
41 | 
42 |     it('returns null for unknown keys', () => {
43 |         expect(expiringStorage.get('unknown-key')).toBeNull();
44 |     });
45 | 
46 |     it('can determine it contains a value with the given key', () => {
47 |         expect(expiringStorage.has('my-key')).toEqual(false);
48 | 
49 |         expiringStorage.set('my-key', 'my-value', 5);
50 | 
51 |         expect(expiringStorage.has('my-key')).toEqual(true);
52 |     });
53 | });
54 | 
55 | function progressTime(minutes) {
56 |     const currentTime = (new Date()).getTime();
57 | 
58 |     const newTime = new Date(currentTime + (minutes * 60000));
59 | 
60 |     const originalDateClass = Date;
61 | 
62 |     // eslint-disable-next-line no-global-assign
63 |     Date = function (dateString) {
64 |         return new originalDateClass(dateString || newTime.toISOString());
65 |     };
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/TableColumnHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <th
 3 |         @click="clicked"
 4 |         :class="headerClass"
 5 |         role="columnheader"
 6 |         slot-scope="col"
 7 |         :aria-sort="ariaSort"
 8 |         :aria-disabled="ariaDisabled"
 9 |         v-if="this.isVisible"
10 |     >
11 |         {{ label }}
12 |     </th>
13 | </template>
14 | 
15 | <script>
16 |     import { classList } from '../helpers';
17 | 
18 |     export default {
19 |         props: ['column', 'sort'],
20 | 
21 |         computed: {
22 |             ariaDisabled() {
23 |                 if (! this.column.isSortable()) {
24 |                     return 'true';
25 |                 }
26 | 
27 |                 return false;
28 |             },
29 | 
30 |             ariaSort() {
31 |                 if (! this.column.isSortable()) {
32 |                     return false;
33 |                 }
34 | 
35 |                 if (this.column.show !== this.sort.fieldName) {
36 |                     return 'none';
37 |                 }
38 | 
39 |                 return this.sort.order === 'asc' ? 'ascending' : 'descending';
40 |             },
41 | 
42 |             headerClass() {
43 |                 if (! this.column.isSortable()) {
44 |                     return classList('table-component__th', this.column.headerClass);
45 |                 }
46 | 
47 |                 if (this.column.show !== this.sort.fieldName) {
48 |                     return classList('table-component__th table-component__th--sort', this.column.headerClass);
49 |                 }
50 | 
51 |                 return classList(`table-component__th table-component__th--sort-${this.sort.order}`, this.column.headerClass);
52 |             },
53 | 
54 |             isVisible() {
55 |                 return ! this.column.hidden;
56 |             },
57 | 
58 |             label() {
59 |                 if (this.column.label === null) {
60 |                     return this.column.show;
61 |                 }
62 | 
63 |                 return this.column.label;
64 |             },
65 |         },
66 | 
67 |         methods: {
68 |             clicked() {
69 |                 if (this.column.isSortable()) {
70 |                     this.$emit('click', this.column);
71 |                 }
72 |             },
73 |         },
74 |     };
75 | </script>
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-table-component",
 3 |   "version": "1.9.2",
 4 |   "description": "A straightforward Vue component to filter and sort tables",
 5 |   "main": "dist/index.js",
 6 |   "jsnext:main": "src/index.js",
 7 |   "scripts": {
 8 |     "start": "webpack-dev-server --config docs/webpack.config.js",
 9 |     "demo": "NODE_ENV=production webpack --config docs/webpack.config.js",
10 |     "build": "rm -rf dist && NODE_ENV=production webpack",
11 |     "lint": "eslint src __tests__ --ext .js,.vue --fix; exit 0",
12 |     "prepublish": "npm run test; npm run build",
13 |     "test": "jest"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/spatie/vue-table-component.git"
18 |   },
19 |   "keywords": [
20 |     "spatie"
21 |   ],
22 |   "author": "Freek Van der Herten",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/spatie/vue-table-component/issues"
26 |   },
27 |   "homepage": "https://github.com/spatie/vue-table-component",
28 |   "peerDependencies": {
29 |     "moment": "^2.18.1",
30 |     "vue": "^2.5.0"
31 |   },
32 |   "devDependencies": {
33 |     "babel-core": "^6.24.1",
34 |     "babel-loader": "^7.0.0",
35 |     "babel-plugin-transform-object-rest-spread": "^6.16.0",
36 |     "babel-plugin-transform-runtime": "^6.23.0",
37 |     "babel-preset-env": "^1.4.0",
38 |     "css-loader": "^0.28.1",
39 |     "diffable-html": "^2.1.0",
40 |     "eslint": "^4.0.0",
41 |     "eslint-config-spatie": "^2.0.0",
42 |     "jest": "^19.0.0",
43 |     "jest-serializer-html": "^4.0.0",
44 |     "jest-vue-preprocessor": "^0.2.0",
45 |     "moment": "^2.18.1",
46 |     "simulant": "^0.2.2",
47 |     "vue": "^2.5.0",
48 |     "vue-loader": "^12.0.3",
49 |     "vue-template-compiler": "^2.3.0",
50 |     "webpack": "^2.3.3",
51 |     "webpack-dev-server": "^2.4.2",
52 |     "webpack-merge": "^4.1.0"
53 |   },
54 |   "jest": {
55 |     "testRegex": "test.js$",
56 |     "moduleFileExtensions": [
57 |       "js",
58 |       "vue"
59 |     ],
60 |     "setupFiles": [
61 |       "<rootDir>/tests/bootstrap"
62 |     ],
63 |     "snapshotSerializers": [
64 |       "<rootDir>/tests/html-serializer"
65 |     ],
66 |     "transform": {
67 |       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
68 |       ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to `vue-table-component` will be documented in this file.
 4 | 
 5 | ## 1.9.2 - 2018-03-14
 6 | - added `row-click` event
 7 | 
 8 | ## 1.9.1 - 2018-02-26
 9 | - Better IE support
10 | 
11 | ## 1.9.0 - 2018-02-08
12 | - Better pagination component
13 | - Fixed global settings that weren't always applies
14 | - Fixed sorting with null values
15 | 
16 | ## 1.8.1 - 2018-01-02
17 | - Fixed column contents with properties retrieved with dot notation
18 | 
19 | ## 1.8.0 - 2017-11-15
20 | - Added a per-row click listener `<table-component @rowClick="handle">`
21 | - Removed lodash dependency for a leaner build size
22 | - Republished package due to build issues
23 | 
24 | ## 1.7.0 - 2017-11-02
25 | - Added named slot `tfoot` to display table footer information, receives row data as scoped properties
26 | 
27 | ## 1.6.1 - 2017-09-25
28 | - Fixed a bug that didn't rerender the table when a column was changed
29 | 
30 | ## 1.6.0 - 2017-09-24
31 | - Added `tbody-class` prop
32 | 
33 | ## 1.5.0 - 2017-09-21
34 | - Added `thead-class` prop
35 | 
36 | ## 1.4.3 - 2017-08-30
37 | - Fixed a bug that didn't rerender the table when a column was changed
38 | 
39 | ## 1.4.2 - 2017-08-29
40 | - Added `cache-key` prop to manually set a cache key for local storage state
41 | - The filter input is now hidden when there are no filterable rows
42 | 
43 | ## 1.4.1 - 2017-08-29
44 | - Fixed `regeneratorRuntime` issues
45 | 
46 | ## 1.4.0 - 2017-08-16
47 | - Fixed cell rendering: HTML is now escaped by default. If you want raw html, use the new scoped slots feature
48 | - Added scoped slot support to `table-columns` for custom column contents
49 | - Added the `filter-input-class` prop to the `table-component` component (`filterInputClass` in settings)
50 | - Added the `header-class` and `cell-class` props to the `table-column` component (`headerClass` and `cellClass` in settings)
51 | - Added a minified build: `vue-table-component/dist/index.min.js`
52 | - Fixed the parsing of the a date format that contains `:`
53 | 
54 | ## 1.3.0 - 2017-08-07
55 | - Added `formatter` property
56 | 
57 | ## 1.2.2 - 2017-08-04
58 | - Fix for displaying nested properties
59 | 
60 | ## 1.2.1 - 2017-08-04
61 | - Fix async data retrieval and pagination
62 | 
63 | ## 1.2.0 - 2017-08-02
64 | - Add async data retrieval and pagination
65 | 
66 | ## 1.1.3 - 2017-06-29
67 | - Fixed a filter bug caused by null values
68 | 
69 | ## 1.1.2 - 2017-06-28
70 | - Added optional `hidden` prop to table column component
71 | 
72 | ## 1.1.1 - 2017-06-28
73 | - Fixed `filterNoResults` label
74 | 
75 | ## 1.1.0 - 2017-06-23
76 | - Added `show-caption` prop
77 | 
78 | ## 1.0.1- 2017-06-13
79 | - Fix default sort order
80 | - Fix ordering of numeric and date columns in Safari
81 | 
82 | ## 1.0.0 - 2017-06-13
83 | - Initial release
84 | 


--------------------------------------------------------------------------------
/docs/table-component.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *:after,
  3 | *:before {
  4 |   position: relative;
  5 |   box-sizing: border-box;
  6 |   margin: 0;
  7 |   padding: 0;
  8 | }
  9 | 
 10 | .table-component {
 11 |   display: flex;
 12 |   flex-direction: column;
 13 |   margin: 4em 0;
 14 | }
 15 | 
 16 | .table-component__filter {
 17 |   align-self: flex-end;
 18 | }
 19 | 
 20 | .table-component__filter__field {
 21 |   padding: 0 1.25em 0 .75em;
 22 |   height: 2.5em;
 23 |   border: solid 2px #e0e0e0;
 24 |   border-radius: 2em;
 25 |   font-size: inherit;
 26 | }
 27 | 
 28 | .table-component__filter__clear {
 29 |   position: absolute;
 30 |   top: 0;
 31 |   right: 0;
 32 |   bottom: 0;
 33 |   display: flex;
 34 |   align-items: center;
 35 |   justify-content: center;
 36 |   width: 2em;
 37 |   color: #007593;
 38 |   font-weight: bold;
 39 |   cursor: pointer;
 40 | }
 41 | 
 42 | .table-component__filter__field:focus {
 43 |   outline: 0;
 44 |   border-color: #007593;
 45 | }
 46 | 
 47 | .table-component__table-wrapper {
 48 |   overflow-x: auto;
 49 |   margin: 1em 0;
 50 |   width: 100%;
 51 |   border: solid 1px #ddd;
 52 |   border-bottom: none;
 53 | }
 54 | 
 55 | .table-component__table {
 56 |   min-width: 100%;
 57 |   border-collapse: collapse;
 58 |   border-bottom: solid 1px #ddd;
 59 |   table-layout: fixed;
 60 | }
 61 | 
 62 | .table-component__table__caption {
 63 |   position: absolute;
 64 |   top: auto;
 65 |   left: -10000px;
 66 |   overflow: hidden;
 67 |   width: 1px;
 68 |   height: 1px;
 69 | }
 70 | 
 71 | .table-component__table th,
 72 | .table-component__table td {
 73 |   padding: .75em 1.25em;
 74 |   vertical-align: top;
 75 |   text-align: left;
 76 | }
 77 | 
 78 | .table-component__table th {
 79 |   background-color: #e0e0e0;
 80 |   color: #999;
 81 |   text-transform: uppercase;
 82 |   white-space: nowrap;
 83 |   font-size: .85em;
 84 | }
 85 | 
 86 | .table-component__table tbody tr:nth-child(even) {
 87 |   background-color: #f0f0f0;
 88 | }
 89 | 
 90 | .table-component__table a {
 91 |   color: #007593;
 92 | }
 93 | 
 94 | .table-component__message {
 95 |   color: #999;
 96 |   font-style: italic;
 97 | }
 98 | 
 99 | .table-component__th--sort,
100 | .table-component__th--sort-asc,
101 | .table-component__th--sort-desc {
102 |   text-decoration: underline;
103 |   cursor: pointer;
104 |   -webkit-user-select: none;
105 |   -moz-user-select: none;
106 |   -ms-user-select: none;
107 |   user-select: none;
108 | }
109 | 
110 | .table-component__th--sort-asc:after,
111 | .table-component__th--sort-desc:after {
112 |   position: absolute;
113 |   left: .25em;
114 |   display: inline-block;
115 |   color: #bbb;
116 | }
117 | 
118 | .table-component__th--sort-asc:after {
119 |   content: '↑';
120 | }
121 | 
122 | .table-component__th--sort-desc:after {
123 |   content: '↓';
124 | }
125 | 


--------------------------------------------------------------------------------
/tests/components/Pagination.test.js:
--------------------------------------------------------------------------------
  1 | import Pagination from '../../src';
  2 | import Vue from 'vue/dist/vue.js';
  3 | 
  4 | describe('Pagination', () => {
  5 |     Vue.use(Pagination);
  6 | 
  7 |     it('can mount without pagination data', async () => {
  8 |         document.body.innerHTML = `
  9 |             <div id="app">
 10 |                 <pagination></pagination>
 11 |             </div>
 12 |         `;
 13 | 
 14 |         await createVm();
 15 | 
 16 |         expect(document.body.innerHTML).toMatchSnapshot();
 17 |     });
 18 | 
 19 |     it('will not display when there is only one page', async () => {
 20 | 
 21 |         document.body.innerHTML = `
 22 |             <div id="app">
 23 |                 <pagination
 24 |                 :pagination="{
 25 |                     currentPage: 1,
 26 |                     totalPages: 1,
 27 |                 }">
 28 | 
 29 |                 </pagination>
 30 |             </div>
 31 |         `;
 32 | 
 33 |         await createVm();
 34 | 
 35 |         expect(document.body.innerHTML).toMatchSnapshot();
 36 |     });
 37 | 
 38 |     it('will render links when there is more than one page', async () => {
 39 | 
 40 |         document.body.innerHTML = `
 41 |             <div id="app">
 42 |                 <pagination
 43 |                 :pagination="{
 44 |                     currentPage: 1,
 45 |                     totalPages: 3,
 46 |                 }">
 47 | 
 48 |                 </pagination>
 49 |             </div>
 50 |         `;
 51 | 
 52 |         await createVm();
 53 | 
 54 |         expect(document.body.innerHTML).toMatchSnapshot();
 55 |     });
 56 | 
 57 |     it('can set the active page', async () => {
 58 | 
 59 |         document.body.innerHTML = `
 60 |             <div id="app">
 61 |                 <pagination
 62 |                 :pagination="{
 63 |                     currentPage: 2,
 64 |                     totalPages: 3,
 65 |                 }">
 66 | 
 67 |                 </pagination>
 68 |             </div>
 69 |         `;
 70 | 
 71 |         await createVm();
 72 | 
 73 |         expect(document.body.innerHTML).toMatchSnapshot();
 74 |     });
 75 | 
 76 |     it('can render large pagination', async () => {
 77 | 
 78 |         document.body.innerHTML = `
 79 |             <div id="app">
 80 |                 <pagination
 81 |                 :pagination="{
 82 |                     currentPage: 2,
 83 |                     totalPages: 100,
 84 |                 }">
 85 | 
 86 |                 </pagination>
 87 |             </div>
 88 |             `;
 89 | 
 90 |     await createVm();
 91 | 
 92 |     expect(document.body.innerHTML).toMatchSnapshot();
 93 |     });
 94 | });
 95 | 
 96 | async function createVm() {
 97 |     const vm = new Vue({
 98 |         el: '#app',
 99 |     });
100 | 
101 |     await Vue.nextTick(() => {
102 |     });
103 | 
104 |     const table = vm.$children[0];
105 | 
106 |     return table;
107 | }
108 | 


--------------------------------------------------------------------------------
/tests/concerns/__snapshots__/filtering.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Filtering can add a custom html class on the filter input 1`] = `
  4 | 
  5 | <div id="app">
  6 |   <div class="table-component">
  7 |     <div class="table-component__filter">
  8 |       <input type="text"
  9 |              placeholder="Filter table…"
 10 |              class="table-component__filter__field my-filter-class"
 11 |       >
 12 |       <!---->
 13 |     </div>
 14 |     <div class="table-component__table-wrapper">
 15 |       <table class="table-component__table">
 16 |         <caption role="alert"
 17 |                  aria-live="polite"
 18 |                  class="table-component__table__caption"
 19 |         >
 20 |           Table sorted by lastName (descending)
 21 |         </caption>
 22 |         <thead class="table-component__table__head">
 23 |           <tr>
 24 |             <th role="columnheader"
 25 |                 aria-sort="none"
 26 |                 class="table-component__th table-component__th--sort"
 27 |             >
 28 |               First name
 29 |             </th>
 30 |           </tr>
 31 |         </thead>
 32 |         <tbody class="table-component__table__body">
 33 |           <tr>
 34 |             <td>
 35 |               John
 36 |             </td>
 37 |           </tr>
 38 |           <tr>
 39 |             <td>
 40 |               Paul
 41 |             </td>
 42 |           </tr>
 43 |           <tr>
 44 |             <td>
 45 |               George
 46 |             </td>
 47 |           </tr>
 48 |           <tr>
 49 |             <td>
 50 |               Ringo
 51 |             </td>
 52 |           </tr>
 53 |         </tbody>
 54 |         <tfoot>
 55 |         </tfoot>
 56 |       </table>
 57 |     </div>
 58 |     <!---->
 59 |     <div style="display: none;">
 60 |       <!---->
 61 |     </div>
 62 |     <!---->
 63 |   </div>
 64 | </div>
 65 | 
 66 | `;
 67 | 
 68 | exports[`Filtering hides the filter when no columns are filterable 1`] = `
 69 | 
 70 | <div id="app">
 71 |   <div class="table-component">
 72 |     <!---->
 73 |     <div class="table-component__table-wrapper">
 74 |       <table class="table-component__table">
 75 |         <caption role="alert"
 76 |                  aria-live="polite"
 77 |                  class="table-component__table__caption"
 78 |         >
 79 |           Table sorted by lastName (descending)
 80 |         </caption>
 81 |         <thead class="table-component__table__head">
 82 |           <tr>
 83 |             <th role="columnheader"
 84 |                 aria-sort="none"
 85 |                 class="table-component__th table-component__th--sort"
 86 |             >
 87 |               First name
 88 |             </th>
 89 |           </tr>
 90 |         </thead>
 91 |         <tbody class="table-component__table__body">
 92 |           <tr>
 93 |             <td>
 94 |               John
 95 |             </td>
 96 |           </tr>
 97 |           <tr>
 98 |             <td>
 99 |               Paul
100 |             </td>
101 |           </tr>
102 |           <tr>
103 |             <td>
104 |               George
105 |             </td>
106 |           </tr>
107 |           <tr>
108 |             <td>
109 |               Ringo
110 |             </td>
111 |           </tr>
112 |         </tbody>
113 |         <tfoot>
114 |         </tfoot>
115 |       </table>
116 |     </div>
117 |     <!---->
118 |     <div style="display: none;">
119 |       <!---->
120 |     </div>
121 |     <!---->
122 |   </div>
123 | </div>
124 | 
125 | `;
126 | 


--------------------------------------------------------------------------------
/tests/components/__snapshots__/Pagination.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Pagination can mount without pagination data 1`] = `
  4 | 
  5 | <div id="app">
  6 |   <!---->
  7 | </div>
  8 | 
  9 | `;
 10 | 
 11 | exports[`Pagination can render large pagination 1`] = `
 12 | 
 13 | <div id="app">
 14 |   <nav>
 15 |     <ul class="pagination justify-content-center">
 16 |       <li class>
 17 |         <a class>
 18 |           <i class="left chevron icon">
 19 |             «
 20 |           </i>
 21 |         </a>
 22 |       </li>
 23 |       <!---->
 24 |       <!---->
 25 |       <li class="page-item">
 26 |         <a class="page-link">
 27 |           1
 28 |         </a>
 29 |       </li>
 30 |       <li class="page-item active">
 31 |         <a class="page-link">
 32 |           2
 33 |         </a>
 34 |       </li>
 35 |       <li class="page-item">
 36 |         <a class="page-link">
 37 |           3
 38 |         </a>
 39 |       </li>
 40 |       <li class="page-item">
 41 |         <a class="page-link">
 42 |           4
 43 |         </a>
 44 |       </li>
 45 |       <li>
 46 |         <span class="pagination-ellipsis">
 47 |           …
 48 |         </span>
 49 |       </li>
 50 |       <li class="page-item">
 51 |         <a class="page-link">
 52 |           100
 53 |         </a>
 54 |       </li>
 55 |       <li>
 56 |         <a class>
 57 |           <i class="right chevron icon">
 58 |             »
 59 |           </i>
 60 |         </a>
 61 |       </li>
 62 |     </ul>
 63 |   </nav>
 64 | </div>
 65 | 
 66 | `;
 67 | 
 68 | exports[`Pagination can set the active page 1`] = `
 69 | 
 70 | <div id="app">
 71 |   <nav>
 72 |     <ul class="pagination justify-content-center">
 73 |       <li class>
 74 |         <a class>
 75 |           <i class="left chevron icon">
 76 |             «
 77 |           </i>
 78 |         </a>
 79 |       </li>
 80 |       <li class="page-item">
 81 |         <a class="page-link">
 82 |           1
 83 |         </a>
 84 |       </li>
 85 |       <!---->
 86 |       <li class="page-item active">
 87 |         <a class="page-link">
 88 |           2
 89 |         </a>
 90 |       </li>
 91 |       <!---->
 92 |       <li class="page-item">
 93 |         <a class="page-link">
 94 |           3
 95 |         </a>
 96 |       </li>
 97 |       <li>
 98 |         <a class>
 99 |           <i class="right chevron icon">
100 |             »
101 |           </i>
102 |         </a>
103 |       </li>
104 |     </ul>
105 |   </nav>
106 | </div>
107 | 
108 | `;
109 | 
110 | exports[`Pagination will not display when there is only one page 1`] = `
111 | 
112 | <div id="app">
113 |   <!---->
114 | </div>
115 | 
116 | `;
117 | 
118 | exports[`Pagination will render links when there is more than one page 1`] = `
119 | 
120 | <div id="app">
121 |   <nav>
122 |     <ul class="pagination justify-content-center">
123 |       <li class="disabled">
124 |         <a class="disabled">
125 |           <i class="left chevron icon">
126 |             «
127 |           </i>
128 |         </a>
129 |       </li>
130 |       <li class="page-item active">
131 |         <a class="page-link">
132 |           1
133 |         </a>
134 |       </li>
135 |       <!---->
136 |       <li class="page-item">
137 |         <a class="page-link">
138 |           2
139 |         </a>
140 |       </li>
141 |       <!---->
142 |       <li class="page-item">
143 |         <a class="page-link">
144 |           3
145 |         </a>
146 |       </li>
147 |       <li>
148 |         <a class>
149 |           <i class="right chevron icon">
150 |             »
151 |           </i>
152 |         </a>
153 |       </li>
154 |     </ul>
155 |   </nav>
156 | </div>
157 | 
158 | `;
159 | 


--------------------------------------------------------------------------------
/tests/concerns/caching.test.js:
--------------------------------------------------------------------------------
  1 | import expiringStorage from '../../src/expiring-storage';
  2 | import simulant from 'simulant';
  3 | import createVm from '../createVm';
  4 | 
  5 | describe('Caching', () => {
  6 |     beforeEach(() => {
  7 |         localStorage.clear();
  8 | 
  9 |         document.body.innerHTML = `
 10 |             <div id="app">
 11 |                 <div>
 12 |                     <table-component
 13 |                         cache-key="test"
 14 |                         :data="[{ firstName: 'John', lastName: 'Lennon', songs: 30 },
 15 |                                 { firstName: 'Paul', lastName: 'McCartney', songs: 20 },
 16 |                                 { firstName: 'George', lastName: 'Harrison', songs: 420 },
 17 |                                 { firstName: 'Ringo', lastName: 'Starr', songs: 210 }]"
 18 |                     >
 19 |                         <table-column show="firstName" label="First name"></table-column>
 20 |                         <table-column show="lastName" label="Last name"></table-column>
 21 |                         <table-column show="songs" data-type="numeric" label="Songs" sort-by="songs"></table-column>
 22 |                     </table-component>
 23 |                 </div>
 24 |             </div>
 25 |         `;
 26 | 
 27 |         const dateClass = Date;
 28 | 
 29 |         // eslint-disable-next-line no-global-assign
 30 |         Date = function (dateString) {
 31 |             return new dateClass(dateString || '2017-01-01T00:00:00.000Z');
 32 |         };
 33 |     });
 34 | 
 35 |     it('will cache the used filter and sorting', async () => {
 36 |         const cacheContent = {
 37 |             filter: 'Paul',
 38 |             sort:{
 39 |                 fieldName: 'firstName',
 40 |                 order:'asc',
 41 |             },
 42 |         };
 43 | 
 44 |         expiringStorage.set('vue-table-component.test', cacheContent, 5);
 45 | 
 46 |         progressTime(4);
 47 | 
 48 |         const table = await createVm();
 49 | 
 50 |         expect(table.filter).toEqual('Paul');
 51 |         expect(table.sort.fieldName).toEqual('firstName');
 52 |         expect(table.sort.order).toEqual('asc');
 53 |     });
 54 | 
 55 |     it('will not use the cache when it has expired', async () => {
 56 |         const cacheContent = {
 57 |             filter: 'Paul',
 58 |             sort:{
 59 |                 fieldName: 'firstName',
 60 |                 order:'asc',
 61 |             },
 62 |         };
 63 | 
 64 |         expiringStorage.set('vue-table-component.test', cacheContent, 5);
 65 | 
 66 |         progressTime(6);
 67 | 
 68 |         const table = await createVm();
 69 | 
 70 |         expect(table.filter).toEqual('');
 71 |         expect(table.sort.fieldName).toEqual('');
 72 |         expect(table.sort.order).toEqual('');
 73 |     });
 74 | 
 75 |     it('will cache the filter', async () => {
 76 |         await createVm(table => {
 77 |             table.filter = 'cache this';
 78 |         });
 79 | 
 80 |         const localStorageContents = JSON.parse(localStorage.getItem('vue-table-component.test'));
 81 | 
 82 |         expect(localStorageContents.value.filter).toBe('cache this');
 83 |     });
 84 | 
 85 |     it('will cache a the sort column', async () => {
 86 |         await createVm();
 87 | 
 88 |         const songsColumnHeader = document.getElementsByTagName('th')[2];
 89 |         await simulant.fire(songsColumnHeader, 'click');
 90 | 
 91 |         const localStorageContents = JSON.parse(localStorage.getItem('vue-table-component.test'));
 92 | 
 93 |         expect(localStorageContents.value.sort.fieldName).toBe('songs');
 94 |     });
 95 | });
 96 | 
 97 | function progressTime(minutes) {
 98 |     const currentTime = (new Date()).getTime();
 99 | 
100 |     const newTime = new Date(currentTime + (minutes * 60000));
101 | 
102 |     const originalDateClass = Date;
103 | 
104 |     // eslint-disable-next-line no-global-assign
105 |     Date = function (dateString) {
106 |         return new originalDateClass(dateString || newTime.toISOString());
107 |     };
108 | }
109 | 


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <nav v-if="shouldShowPagination">
  3 |         <ul class="pagination justify-content-center">
  4 |             <li :class="{ disabled: pagination.currentPage === 1 }">
  5 |                 <a :class="{ disabled: pagination.currentPage === 1 }"
  6 |                    @click="pageClicked( pagination.currentPage - 1 )">
  7 |                     <i class="left chevron icon">«</i>
  8 |                 </a>
  9 |             </li>
 10 |             <li v-if="hasFirst" class="page-item" :class="{ active: isActive(1) }">
 11 |                 <a class="page-link" @click="pageClicked(1)">1</a>
 12 |             </li>
 13 |             <li v-if="hasFirstEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
 14 |             <li class="page-item" :class="{ active: isActive(page), disabled: page === '...' }" v-for="page in pages" :key="page">
 15 |                 <a class="page-link" @click="pageClicked(page)">{{ page }}</a>
 16 |             </li>
 17 |             <li v-if="hasLastEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
 18 |             <li v-if="hasLast" class="page-item"
 19 |                 :class="{ active: isActive(this.pagination.totalPages) }">
 20 |                 <a class="page-link" @click="pageClicked(pagination.totalPages)">{{pagination.totalPages}}</a>
 21 |             </li>
 22 |             <li>
 23 |                 <a :class="{ disabled: pagination.currentPage === pagination.totalPages }"
 24 |                    @click="pageClicked( pagination.currentPage + 1 )">
 25 |                     <i class="right chevron icon">»</i>
 26 |                 </a>
 27 |             </li>
 28 |         </ul>
 29 |     </nav>
 30 | </template>
 31 | 
 32 | <script>
 33 | 
 34 |     export default {
 35 |         props: {
 36 |             pagination: {
 37 |                 type: Object,
 38 |                 default: () => ({}),
 39 |             },
 40 |         },
 41 | 
 42 |         computed: {
 43 |             pages() {
 44 |                 return this.pagination.totalPages === undefined
 45 |                     ? []
 46 |                     : this.pageLinks();
 47 |             },
 48 | 
 49 |             hasFirst() {
 50 |                 return this.pagination.currentPage >= 4 || this.pagination.totalPages < 10
 51 |             },
 52 | 
 53 |             hasLast() {
 54 |                 return this.pagination.currentPage <= this.pagination.totalPages - 3 || this.pagination.totalPages < 10
 55 |             },
 56 | 
 57 |             hasFirstEllipsis() {
 58 |                 return this.pagination.currentPage >= 4 && this.pagination.totalPages >= 10
 59 |             },
 60 | 
 61 |             hasLastEllipsis() {
 62 |                 return this.pagination.currentPage <= this.pagination.totalPages - 3 && this.pagination.totalPages >= 10
 63 |             },
 64 | 
 65 |             shouldShowPagination() {
 66 |                 if (this.pagination.totalPages === undefined) {
 67 |                     return false;
 68 |                 }
 69 | 
 70 |                 if (this.pagination.count === 0) {
 71 |                     return false;
 72 |                 }
 73 | 
 74 |                 return this.pagination.totalPages > 1;
 75 |             },
 76 | 
 77 |         },
 78 | 
 79 |         methods: {
 80 |             isActive(page) {
 81 |                 const currentPage = this.pagination.currentPage || 1;
 82 | 
 83 |                 return currentPage === page;
 84 |             },
 85 | 
 86 |             pageClicked(page) {
 87 |                 if (page === '...' ||
 88 |                     page === this.pagination.currentPage ||
 89 |                     page > this.pagination.totalPages ||
 90 |                     page < 1) {
 91 |                     return;
 92 |                 }
 93 | 
 94 |                 this.$emit('pageChange', page);
 95 |             },
 96 | 
 97 |             pageLinks() {
 98 |                 const pages = [];
 99 | 
100 |                 let left = 2;
101 |                 let right = this.pagination.totalPages - 1;
102 | 
103 |                 if (this.pagination.totalPages >= 10) {
104 |                     left = Math.max(1, this.pagination.currentPage - 2);
105 |                     right = Math.min(this.pagination.currentPage + 2, this.pagination.totalPages);
106 |                 }
107 | 
108 |                 for (let i = left; i <= right; i++) {
109 |                     pages.push(i);
110 |                 }
111 | 
112 |                 return pages;
113 |             },
114 |         },
115 |     };
116 | </script>
117 | 


--------------------------------------------------------------------------------
/tests/concerns/sorting.test.js:
--------------------------------------------------------------------------------
  1 | import simulant from 'simulant';
  2 | import createVm from '../createVm';
  3 | 
  4 | function setDocumentInnerHtml({ sortBy, sortOrder }) {
  5 |     document.body.innerHTML = `
  6 |         <div id="app">
  7 |             <table-component
  8 |                 :data="[{ firstName: 'John', lastName: 'Lennon', songs: 72 },
  9 |                         { firstName: 'Paul', lastName: 'McCartney', songs: 70 },
 10 |                         { firstName: 'George', lastName: 'Harrison', songs: 22 },
 11 |                         { firstName: 'Ringo', lastName: 'Starr', songs: 2 }]"
 12 |                 sort-by="${sortBy}"
 13 |                 sort-order="${sortOrder}"
 14 |             >
 15 |                 <table-column show="firstName" label="First name"></table-column>
 16 |                 <table-column show="lastName" label="Last name"></table-column>
 17 |                 <table-column show="songs" label="Songs" :sortable="false"></table-column>
 18 |             </table-component>
 19 |         </div>
 20 |     `;
 21 | }
 22 | 
 23 | describe('Sorting', () => {
 24 |     beforeEach(() => {
 25 |         window.localStorage.clear();
 26 |     });
 27 | 
 28 |     it('can sort the data by a column', async () => {
 29 |         setDocumentInnerHtml({ sortBy: 'firstName', sortOrder: 'asc' });
 30 | 
 31 |         const table = await createVm();
 32 | 
 33 |         expect(table.displayedRows[0].data.firstName).toBe('George');
 34 |         expect(table.displayedRows[1].data.firstName).toBe('John');
 35 |         expect(table.displayedRows[2].data.firstName).toBe('Paul');
 36 |         expect(table.displayedRows[3].data.firstName).toBe('Ringo');
 37 |     });
 38 | 
 39 |     it('can sort the data with by a column in a different order', async () => {
 40 |         setDocumentInnerHtml({ sortBy: 'songs', sortOrder: 'desc' });
 41 | 
 42 |         const table = await createVm();
 43 | 
 44 |         expect(table.displayedRows[0].data.firstName).toBe('John');
 45 |         expect(table.displayedRows[1].data.firstName).toBe('Paul');
 46 |         expect(table.displayedRows[2].data.firstName).toBe('George');
 47 |         expect(table.displayedRows[3].data.firstName).toBe('Ringo');
 48 |     });
 49 | 
 50 |     it('it will change the sort order when clicking the header of the column with the active sort', async () => {
 51 |         setDocumentInnerHtml({ sortBy: 'firstName', sortOrder: 'asc' });
 52 | 
 53 |         const table = await createVm();
 54 | 
 55 |         const firstNameColumnHeader = document.getElementsByTagName('th')[0];
 56 |         await simulant.fire(firstNameColumnHeader, 'click');
 57 | 
 58 |         expect(table.sort.order).toBe('desc');
 59 |     });
 60 | 
 61 |     it('will sort the data ascending if the header of of column without the active sort is clicked', async () => {
 62 |         setDocumentInnerHtml({ sortBy: 'firstName', sortOrder: 'desc' });
 63 | 
 64 |         const table = await createVm();
 65 | 
 66 |         const lastNameColumnHeader = document.getElementsByTagName('th')[1];
 67 |         await simulant.fire(lastNameColumnHeader, 'click');
 68 | 
 69 |         expect(table.sort.fieldName).toBe('lastName');
 70 |         expect(table.sort.order).toBe('asc');
 71 |     });
 72 | 
 73 |     it('will not sort data when clicking a non-sortable column header', async () => {
 74 |         setDocumentInnerHtml({ sortBy: 'firstName', order: 'asc' });
 75 | 
 76 |         const table = await createVm();
 77 | 
 78 |         const songsColumnHeader = document.getElementsByTagName('th')[2];
 79 |         await simulant.fire(songsColumnHeader, 'click');
 80 | 
 81 |         expect(table.sort.fieldName).toBe('firstName');
 82 |     });
 83 | 
 84 |     it('wont break if a sortable column has no data', async () => {
 85 |         document.body.innerHTML = `
 86 |             <div id="app">
 87 |                 <table-component
 88 |                     :data="[{ firstName: 'John', songs: 30 },
 89 |                             { firstName: 'Paul', songs: 20 },
 90 |                             { firstName: 'George', songs: 420 },
 91 |                             { firstName: 'Ringo', songs: 210 }]"
 92 |                 >
 93 |                     <table-column show="firstName" label="First name" sort-by="songs"></table-column>
 94 |                     <table-column show="lastName" label="Last name"></table-column>
 95 |                     <table-column show="songs" data-type="numeric" label="Songs" sort-by="songs"></table-column>
 96 |                 </table-component>
 97 |             </div>
 98 |         `;
 99 | 
100 |         const table = await createVm();
101 | 
102 |         const lastNameColumnHeader = document.getElementsByTagName('th')[1];
103 |         await simulant.fire(lastNameColumnHeader, 'click');
104 | 
105 |         expect(table.sort.fieldName).toBe('lastName');
106 |     });
107 | });
108 | 


--------------------------------------------------------------------------------
/tests/concerns/filtering.test.js:
--------------------------------------------------------------------------------
  1 | import createVm from '../createVm';
  2 | 
  3 | describe('Filtering', () => {
  4 |     beforeEach(() => {
  5 |         window.localStorage.clear();
  6 | 
  7 |         document.body.innerHTML = `
  8 |             <div id="app">
  9 |                 <table-component
 10 |                     :data="[{ firstName: 'John', lastName: 'Lennon' },
 11 |                             { firstName: 'Paul', lastName: 'McCartney' },
 12 |                             { firstName: 'George', lastName: 'Harrison' },
 13 |                             { firstName: 'Ringo', lastName: 'Starr' }]"
 14 |                     sort-by="lastName"
 15 |                     sort-order="desc"
 16 |                 >
 17 |                     <table-column show="firstName" label="First name"></table-column>
 18 |                     <table-column show="lastName" label="Last name" :filterable="false"></table-column>
 19 |                 </table-component>
 20 |             </div>
 21 |         `;
 22 |     });
 23 | 
 24 |     it('can filter data', async () => {
 25 |         const table = await createVm(table => {
 26 |             table.filter = 'Paul';
 27 |         });
 28 | 
 29 |         expect(table.displayedRows).toHaveLength(1);
 30 |         expect(table.displayedRows[0].data.firstName).toBe('Paul');
 31 |     });
 32 | 
 33 |     it('can filter data in a case-insensitive way', async () => {
 34 |         const table = await createVm(table => {
 35 |             table.filter = 'paul';
 36 |         });
 37 | 
 38 |         expect(table.displayedRows).toHaveLength(1);
 39 |         expect(table.displayedRows[0].data.firstName).toBe('Paul');
 40 |     });
 41 | 
 42 |     it('will display a message if there are no matching rows', async () => {
 43 |         const table = await createVm(table => {
 44 |             table.filter = 'there are no rows that will match this';
 45 |         });
 46 | 
 47 |         expect(table.displayedRows).toHaveLength(0);
 48 |     });
 49 | 
 50 |     it('will not use columns that are not filterable', async () => {
 51 |         // Note: Only the firstName field is filterable
 52 |         // <table-column show="lastName" label="Last name" :filterable="false"></table-column>
 53 | 
 54 |         const table = await createVm(table => {
 55 |             table.filter = 'Lennon';
 56 |         });
 57 | 
 58 |         expect(table.displayedRows).toHaveLength(0);
 59 |     });
 60 | 
 61 |     it('can filter on another property', async () => {
 62 |         document.body.innerHTML = `
 63 |             <div id="app">
 64 |                 <table-component
 65 |                     :data="[{ firstName: 'John', songs: 72 },
 66 |                             { firstName: 'Paul', songs: 70 },
 67 |                             { firstName: 'George', songs: 22 },
 68 |                             { firstName: 'Ringo', songs: 2 }]"
 69 |                     sort-by="lastName"
 70 |                     sort-order="desc"
 71 |                 >
 72 |                     <table-column show="firstName" label="First name" filter-on="songs"></table-column>
 73 |                 </table-component>
 74 |             </div>
 75 |         `;
 76 | 
 77 |         const table = await createVm(table => {
 78 |             table.filter = '70';
 79 |         });
 80 | 
 81 |         expect(table.displayedRows).toHaveLength(1);
 82 |         expect(table.displayedRows[0].data.firstName).toBe('Paul');
 83 |     });
 84 | 
 85 |     it('can add a custom html class on the filter input', async () => {
 86 |         document.body.innerHTML = `
 87 |             <div id="app">
 88 |                 <table-component
 89 |                     :data="[{ firstName: 'John', songs: 72 },
 90 |                             { firstName: 'Paul', songs: 70 },
 91 |                             { firstName: 'George', songs: 22 },
 92 |                             { firstName: 'Ringo', songs: 2 }]"
 93 |                     sort-by="lastName"
 94 |                     sort-order="desc"
 95 |                     filter-input-class="my-filter-class"
 96 |                 >
 97 |                     <table-column show="firstName" label="First name" filter-on="songs"></table-column>
 98 |                 </table-component>
 99 |             </div>
100 |         `;
101 | 
102 |         await createVm();
103 | 
104 |         expect(document.body.innerHTML).toMatchSnapshot();
105 |     });
106 | 
107 |     it('hides the filter when no columns are filterable', async () => {
108 |         document.body.innerHTML = `
109 |             <div id="app">
110 |                 <table-component
111 |                     :data="[{ firstName: 'John', songs: 72 },
112 |                             { firstName: 'Paul', songs: 70 },
113 |                             { firstName: 'George', songs: 22 },
114 |                             { firstName: 'Ringo', songs: 2 }]"
115 |                     sort-by="lastName"
116 |                     sort-order="desc"
117 |                 >
118 |                     <table-column show="firstName" label="First name" :filterable="false"></table-column>
119 |                 </table-component>
120 |             </div>
121 |         `;
122 | 
123 |         await createVm();
124 | 
125 |         expect(document.body.innerHTML).toMatchSnapshot();
126 |     });
127 | });
128 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |     <title>vue-table-component</title>
  4 |     <link href="table-component.css" rel="stylesheet">
  5 |     <style>
  6 |         body {
  7 |             background-color: #efefef;
  8 |             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  9 |             font-size: 16px;
 10 |             padding: 1em;
 11 |         }
 12 | 
 13 |         .page {
 14 |             background-color: #fff;
 15 |             border-radius: 3px;
 16 |             box-shadow: 0 2px 20px rgba(0, 0, 0, .025);
 17 |             margin: 0 auto;
 18 |             max-width: 66em;
 19 |             padding: 4em 2em;
 20 |         }
 21 | 
 22 |         @media (min-width: 700px) {
 23 |             .page {
 24 |                 padding: 4em;
 25 |             }
 26 |         }
 27 | 
 28 |         .page-title {
 29 |             font-size: 2.4rem;
 30 |             margin-bottom: 1em;
 31 |         }
 32 | 
 33 |         .page-title a {
 34 |             color: inherit;
 35 |             text-decoration: none;
 36 |         }
 37 | 
 38 |         .page-title a:hover {
 39 |             color: #007593;
 40 |         }
 41 | 
 42 |         .page-subtitle {
 43 |             font-size: 1.25rem;
 44 |             margin-bottom: 1em;
 45 |             padding-top: .25em;
 46 |         }
 47 | 
 48 |         .page-about {
 49 |             background-color: #d1e8eb;
 50 |             margin: 0 -2em;
 51 |             padding: 2em 1em;
 52 |         }
 53 | 
 54 |         @media (min-width: 700px) {
 55 |             .page-about {
 56 |                 border-radius: 3px;
 57 |                 margin: 0;
 58 |                 padding: 2em;
 59 |             }
 60 |         }
 61 | 
 62 |         .page-about h2 {
 63 |             color: #003345;
 64 |         }
 65 | 
 66 |         .page-about p {
 67 |             color: #003345;
 68 |             line-height: 1.45;
 69 |             margin-bottom: 1em;
 70 |         }
 71 | 
 72 |         .page-about a {
 73 |             color: #007593;
 74 |         }
 75 | 
 76 |         .page-about code {
 77 |             background-color: rgba(255, 255, 255, .75);
 78 |             border-radius: 3px;
 79 |             padding: 0 .25em;
 80 |         }
 81 | 
 82 |         .page-outro {
 83 |             color: #999;
 84 |             display: block;
 85 |             margin-top: 4em;
 86 |             text-align: center;
 87 |         }
 88 | 
 89 |         .page-outro a {
 90 |             color: #999;
 91 |         }
 92 | 
 93 |         .prefix,
 94 |         .suffix {
 95 |             align-items: center;
 96 |             border-radius: 1.25rem;
 97 |             display: flex;
 98 |             font-size: .75rem;
 99 |             flex-shrink: 0;
100 |             height: 1.25rem;
101 |             justify-content: center;
102 |             line-height: 1.25rem;
103 |             min-width: 1.25rem;
104 |             padding: 0 .1em;
105 |         }
106 | 
107 |         .prefix {
108 |             background-color: #d1e8eb;
109 |             color: #0c5174;
110 |             margin-right: .35em;
111 |         }
112 | 
113 |         .suffix {
114 |             background-color: #c03;
115 |             color: #fff;
116 |             margin-left: .35em;
117 | 
118 |         }
119 | 
120 |         @media (min-width: 700px) {
121 |             .suffix {
122 |                 position: absolute;
123 |                 right: -.725em;
124 |                 top: -.725em;
125 |             }
126 |         }
127 |     </style>
128 | </head>
129 | <body>
130 |     <article id="app" class="page">
131 |         <h1 class="page-title">
132 |             <a href="https://github.com/spatie/vue-table-component">Vue-table-component</a>
133 |         </h1>
134 |         <table-component
135 |             :data="[
136 |             { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
137 |             { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
138 |             { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
139 |             { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
140 |             ]"
141 |             sort-by="songs"
142 |             sort-order="asc"
143 |             >
144 |             <table-column show="firstName" label="First name"></table-column>
145 |             <table-column show="lastName" label="Last name"></table-column>
146 |             <table-column show="instrument" label="Instrument"></table-column>
147 |             <table-column show="songs" label="Songs" data-type="numeric"></table-column>
148 |             <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
149 |             <table-column :sortable="false" :filterable="false">
150 |                 <template slot-scope="artist">
151 |                     <a :href="'#' + artist.firstName.toLowerCase()">
152 |                         Edit
153 |                     </a>
154 |                 </template>
155 |             </table-column>
156 |             <template slot="tfoot" slot-scope="{ rows }">
157 |                 <tr>
158 |                     <th>&nbsp;</th>
159 |                     <th>&nbsp;</th>
160 |                     <th>Total Songs:</th>
161 |                     <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
162 |                     <th>&nbsp;</th>
163 |                     <th>&nbsp;</th>
164 |                 </tr>
165 |             </template>
166 |         </table-component>
167 | 
168 |     <section class="page-about">
169 |         <h2 class="page-subtitle">About</h2>
170 |         <p>
171 |             The table component above is powered by <a href="https://github.com/spatie/vue-table-component">spatie/vue-table-component</a>.
172 |             <br>
173 |             The component allows for straightforward and lightweight <strong>sorting</strong> and <strong>filtering</strong> of table data.</p>
174 | 
175 |             <p>The component will also remember the state when you reload or return to the same page within 15 min.
176 |             </p>
177 |         </section>
178 | 
179 |         <small class="page-outro">
180 |             <a href="https://github.com/spatie/vue-table-component">Code on GitHub</a> |
181 |             Proudly presented by <a href="https://spatie.be">spatie.be</a>
182 |         </small>
183 |     </article>
184 | 
185 |     <script src="build/app.js"></script>
186 | </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------
/src/components/TableComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="table-component">
  3 |         <div v-if="showFilter && filterableColumnExists" class="table-component__filter">
  4 |             <input
  5 |                     :class="fullFilterInputClass"
  6 |                     type="text"
  7 |                     v-model="filter"
  8 |                     :placeholder="filterPlaceholder"
  9 |             >
 10 |             <a
 11 |                     v-if="filter"
 12 |                     @click="filter = ''"
 13 |                     class="table-component__filter__clear"
 14 |             >×</a>
 15 |         </div>
 16 | 
 17 |         <div class="table-component__table-wrapper">
 18 |             <table :class="fullTableClass">
 19 |                 <caption v-if="showCaption" class="table-component__table__caption" role="alert" aria-live="polite">
 20 |                     {{ ariaCaption }}
 21 |                 </caption>
 22 |                 <thead :class="fullTableHeadClass">
 23 |                 <tr>
 24 |                     <table-column-header
 25 |                             @click="changeSorting"
 26 |                             v-for="column in columns"
 27 |                             :key="column.show"
 28 |                             :sort="sort"
 29 |                             :column="column"
 30 |                     ></table-column-header>
 31 |                 </tr>
 32 |                 </thead>
 33 |                 <tbody :class="fullTableBodyClass">
 34 |                 <table-row
 35 |                         v-for="row in displayedRows"
 36 |                         :key="row.vueTableComponentInternalRowId"
 37 |                         :row="row"
 38 |                         :columns="columns"
 39 | 						@rowClick="emitRowClick"
 40 |                 ></table-row>
 41 |                 </tbody>
 42 |                 <tfoot>
 43 |                     <slot name="tfoot" :rows="rows"></slot>
 44 |                 </tfoot>
 45 |             </table>
 46 |         </div>
 47 | 
 48 |         <div v-if="displayedRows.length === 0" class="table-component__message">
 49 |             {{ filterNoResults }}
 50 |         </div>
 51 | 
 52 | 
 53 |         <div style="display:none;">
 54 |             <slot></slot>
 55 |         </div>
 56 | 
 57 |         <pagination v-if="pagination" :pagination="pagination" @pageChange="pageChange"></pagination>
 58 |     </div>
 59 | </template>
 60 | 
 61 | <script>
 62 |     import Column from '../classes/Column';
 63 |     import expiringStorage from '../expiring-storage';
 64 |     import Row from '../classes/Row';
 65 |     import TableColumnHeader from './TableColumnHeader';
 66 |     import TableRow from './TableRow';
 67 |     import settings from '../settings';
 68 |     import Pagination from './Pagination';
 69 |     import { classList, pick } from '../helpers';
 70 | 
 71 |     export default {
 72 |         components: {
 73 |             TableColumnHeader,
 74 |             TableRow,
 75 |             Pagination,
 76 |         },
 77 | 
 78 |         props: {
 79 |             data: { default: () => [], type: [Array, Function] },
 80 | 
 81 |             showFilter: { default: true },
 82 |             showCaption: { default: true },
 83 | 
 84 |             sortBy: { default: '', type: String },
 85 |             sortOrder: { default: '', type: String },
 86 | 
 87 |             cacheKey: { default: null },
 88 |             cacheLifetime: { default: 5 },
 89 | 
 90 |             tableClass: { default: () => settings.tableClass },
 91 |             theadClass: { default: () => settings.theadClass },
 92 |             tbodyClass: { default: () => settings.tbodyClass },
 93 |             filterInputClass: { default: () => settings.filterInputClass },
 94 |             filterPlaceholder: { default: () => settings.filterPlaceholder },
 95 |             filterNoResults: { default: () => settings.filterNoResults },
 96 |         },
 97 | 
 98 |         data: () => ({
 99 |             columns: [],
100 |             rows: [],
101 |             filter: '',
102 |             sort: {
103 |                 fieldName: '',
104 |                 order: '',
105 |             },
106 |             pagination: null,
107 | 
108 |             localSettings: {},
109 |         }),
110 | 
111 |         created() {
112 |             this.sort.fieldName = this.sortBy;
113 |             this.sort.order = this.sortOrder;
114 | 
115 |             this.restoreState();
116 |         },
117 | 
118 |         async mounted() {
119 |             const columnComponents = this.$slots.default
120 |                 .filter(column => column.componentInstance)
121 |                 .map(column => column.componentInstance);
122 | 
123 |             this.columns = columnComponents.map(
124 |                 column => new Column(column)
125 |             );
126 | 
127 |             columnComponents.forEach(columnCom => {
128 |                 Object.keys(columnCom.$options.props).forEach(
129 |                     prop => columnCom.$watch(prop, () => {
130 |                         this.columns = columnComponents.map(
131 |                             column => new Column(column)
132 |                         );
133 |                     })
134 |                 );
135 |             });
136 | 
137 |             await this.mapDataToRows();
138 |         },
139 | 
140 |         watch: {
141 |             filter() {
142 |                 if (!this.usesLocalData) {
143 |                     this.mapDataToRows();
144 |                 }
145 | 
146 |                 this.saveState();
147 |             },
148 | 
149 |             data() {
150 |                 if (this.usesLocalData) {
151 |                     this.mapDataToRows();
152 |                 }
153 |             },
154 |         },
155 | 
156 |         computed: {
157 |             fullTableClass() {
158 |                 return classList('table-component__table', this.tableClass);
159 |             },
160 | 
161 |             fullTableHeadClass() {
162 |                 return classList('table-component__table__head', this.theadClass);
163 |             },
164 | 
165 |             fullTableBodyClass() {
166 |                 return classList('table-component__table__body', this.tbodyClass);
167 |             },
168 | 
169 |             fullFilterInputClass() {
170 |                 return classList('table-component__filter__field', this.filterInputClass);
171 |             },
172 | 
173 |             ariaCaption() {
174 |                 if (this.sort.fieldName === '') {
175 |                     return 'Table not sorted';
176 |                 }
177 | 
178 |                 return `Table sorted by ${this.sort.fieldName} ` +
179 |                     (this.sort.order === 'asc' ? '(ascending)' : '(descending)');
180 |             },
181 | 
182 |             usesLocalData() {
183 |                 return Array.isArray(this.data);
184 |             },
185 | 
186 |             displayedRows() {
187 |                 if (!this.usesLocalData) {
188 |                     return this.sortedRows;
189 |                 }
190 | 
191 |                 if (!this.showFilter) {
192 |                     return this.sortedRows;
193 |                 }
194 | 
195 |                 if (!this.columns.filter(column => column.isFilterable()).length) {
196 |                     return this.sortedRows;
197 |                 }
198 | 
199 |                 return this.sortedRows.filter(row => row.passesFilter(this.filter));
200 |             },
201 | 
202 |             sortedRows() {
203 |                 if (!this.usesLocalData) {
204 |                     return this.rows;
205 |                 }
206 | 
207 |                 if (this.sort.fieldName === '') {
208 |                     return this.rows;
209 |                 }
210 | 
211 |                 if (this.columns.length === 0) {
212 |                     return this.rows;
213 |                 }
214 | 
215 |                 const sortColumn = this.getColumn(this.sort.fieldName);
216 | 
217 |                 if (!sortColumn) {
218 |                     return this.rows;
219 |                 }
220 | 
221 |                 return this.rows.sort(sortColumn.getSortPredicate(this.sort.order, this.columns));
222 |             },
223 | 
224 |             filterableColumnExists() {
225 |                 return this.columns.filter(c => c.isFilterable()).length > 0;
226 |             },
227 | 
228 |             storageKey() {
229 |                 return this.cacheKey
230 |                     ? `vue-table-component.${this.cacheKey}`
231 |                     : `vue-table-component.${window.location.host}${window.location.pathname}${this.cacheKey}`;
232 |             },
233 |         },
234 | 
235 |         methods: {
236 |             async pageChange(page) {
237 |                 this.pagination.currentPage = page;
238 | 
239 |                 await this.mapDataToRows();
240 |             },
241 | 
242 |             async mapDataToRows() {
243 |                 const data = this.usesLocalData
244 |                     ? this.prepareLocalData()
245 |                     : await this.fetchServerData();
246 | 
247 |                 let rowId = 0;
248 | 
249 |                 this.rows = data
250 |                     .map(rowData => {
251 |                         rowData.vueTableComponentInternalRowId = rowId++;
252 |                         return rowData;
253 |                     })
254 |                     .map(rowData => new Row(rowData, this.columns));
255 |             },
256 | 
257 |             prepareLocalData() {
258 |                 this.pagination = null;
259 | 
260 |                 return this.data;
261 |             },
262 | 
263 |             async fetchServerData() {
264 |                 const page = this.pagination && this.pagination.currentPage || 1;
265 | 
266 |                 const response = await this.data({
267 |                     filter: this.filter,
268 |                     sort: this.sort,
269 |                     page: page,
270 |                 });
271 | 
272 |                 this.pagination = response.pagination;
273 | 
274 |                 return response.data;
275 |             },
276 | 
277 |             async refresh() {
278 |                 await this.mapDataToRows();
279 |             },
280 | 
281 |             changeSorting(column) {
282 |                 if (this.sort.fieldName !== column.show) {
283 |                     this.sort.fieldName = column.show;
284 |                     this.sort.order = 'asc';
285 |                 } else {
286 |                     this.sort.order = (this.sort.order === 'asc' ? 'desc' : 'asc');
287 |                 }
288 | 
289 |                 if (!this.usesLocalData) {
290 |                     this.mapDataToRows();
291 |                 }
292 | 
293 |                 this.saveState();
294 |             },
295 | 
296 |             getColumn(columnName) {
297 |                 return this.columns.find(column => column.show === columnName);
298 |             },
299 | 
300 |             saveState() {
301 |                 expiringStorage.set(this.storageKey, pick(this.$data, ['filter', 'sort']), this.cacheLifetime);
302 |             },
303 | 
304 |             restoreState() {
305 |                 const previousState = expiringStorage.get(this.storageKey);
306 | 
307 |                 if (previousState === null) {
308 |                     return;
309 |                 }
310 | 
311 |                 this.sort = previousState.sort;
312 |                 this.filter = previousState.filter;
313 | 
314 |                 this.saveState();
315 |             },
316 | 
317 | 			emitRowClick(row) {
318 | 				this.$emit('rowClick', row);
319 | 				this.$emit('row-click', row);
320 | 			}
321 |         },
322 |     };
323 | </script>
324 | 


--------------------------------------------------------------------------------
/tests/components/TableComponent.test.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue/dist/vue.js';
  2 | import simulant from 'simulant';
  3 | import TableComponent from '../../src/';
  4 | 
  5 | describe('TableComponent', () => {
  6 |     beforeEach(() => {
  7 |         localStorage.clear();
  8 |     });
  9 | 
 10 |     afterEach(() => {
 11 |         TableComponent.settings({
 12 |             filterNoResults: 'There are no matching rows',
 13 |         });
 14 |     });
 15 | 
 16 |     it('can mount', async () => {
 17 |         document.body.innerHTML = `
 18 |             <div id="app">
 19 |                 <table-component
 20 |                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
 21 |                     <table-column show="firstName" label="First name"></table-column>
 22 |                 </table-component>
 23 |             </div>
 24 |         `;
 25 | 
 26 |         await createVm();
 27 | 
 28 |         expect(document.body.innerHTML).toMatchSnapshot();
 29 |     });
 30 | 
 31 |     it('can display nested properties', async () => {
 32 |         document.body.innerHTML = `
 33 |             <div id="app">
 34 |                 <table-component
 35 |                     :data="[{nested: { firstName: 'John' } }, { nested: { firstName: 'Paul' }}]">
 36 |                     <table-column show="nested.firstName" label="First name"></table-column>
 37 |                 </table-component>
 38 |             </div>
 39 |         `;
 40 | 
 41 |         await createVm();
 42 | 
 43 |         expect(document.body.innerHTML).toMatchSnapshot();
 44 |     });
 45 | 
 46 |     it('accepts a function to format values', async () => {
 47 |         document.body.innerHTML = `
 48 |             <div id="app">
 49 |                 <table-component
 50 |                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
 51 |                     <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
 52 |                 </table-component>
 53 |             </div>
 54 |         `;
 55 | 
 56 |         await createVm({
 57 |             methods: {
 58 |                 formatter(value, properties) {
 59 |                     return `Formatted: <strong>${value}</strong>`;
 60 |                 },
 61 |             },
 62 |         });
 63 | 
 64 |         expect(document.body.innerHTML).toMatchSnapshot();
 65 |     });
 66 | 
 67 |     it('supports a scoped slot inside the table column', async () => {
 68 |         document.body.innerHTML = `
 69 |             <div id="app">
 70 |                 <table-component
 71 |                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
 72 |                     <table-column label="First name">
 73 |                         <template slot-scope="row">
 74 |                            {{ row.firstName }} slot
 75 |                         </template>
 76 |                     </table-column>
 77 |                 </table-component>
 78 |             </div>
 79 |         `;
 80 | 
 81 |         await createVm();
 82 | 
 83 |         expect(document.body.innerHTML).toMatchSnapshot();
 84 |     });
 85 | 
 86 |     it('supports a named slot to display a tfoot section', async () => {
 87 |         document.body.innerHTML = `
 88 |             <div id="app">
 89 |                 <table-component
 90 |                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
 91 |                     <table-column show="firstName" label="First name"></table-column>
 92 |                     <template slot="tfoot" slot-scope="{ rows }">
 93 |                         <tr>
 94 |                             <td>Name count:</td>
 95 |                             <td>{{ rows.length }}</td>
 96 |                         </tr>
 97 |                     </template>
 98 |                 </table-component>
 99 |             </div>
100 |         `;
101 | 
102 |         await createVm();
103 | 
104 |         expect(document.body.innerHTML).toMatchSnapshot();
105 |     });
106 | 
107 |     it('has an prop to disable the filter', async () => {
108 |         document.body.innerHTML = `
109 |             <div id="app">
110 |                 <table-component :show-filter="false"
111 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
112 |                     <table-column show="firstName" label="First name"></table-column>
113 |                 </table-component>
114 |             </div>
115 |         `;
116 | 
117 |         await createVm();
118 | 
119 |         expect(document.body.innerHTML).toMatchSnapshot();
120 |     });
121 | 
122 |     it('has an prop to disable the caption', async () => {
123 |         document.body.innerHTML = `
124 |             <div id="app">
125 |                 <table-component :show-caption="false"
126 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
127 |                     <table-column show="firstName" label="First name"></table-column>
128 |                 </table-component>
129 |             </div>
130 |         `;
131 | 
132 |         await createVm();
133 | 
134 |         expect(document.body.innerHTML).toMatchSnapshot();
135 |     });
136 | 
137 |     it('will use the property name as a column heading if label is not set', async () => {
138 |         document.body.innerHTML = `
139 |             <div id="app">
140 |                 <table-component :show-filter="false"
141 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
142 |                     <table-column show="firstName"></table-column>
143 |                 </table-component>
144 |             </div>
145 |         `;
146 | 
147 |         await createVm();
148 | 
149 |         expect(document.body.innerHTML).toMatchSnapshot();
150 |     });
151 | 
152 |     it('won\'t use the property name as a column heading if label is an empty string', async () => {
153 |         document.body.innerHTML = `
154 |             <div id="app">
155 |                 <table-component :show-filter="false"
156 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
157 |                     <table-column show="firstName" label=""></table-column>
158 |                 </table-component>
159 |             </div>
160 |         `;
161 | 
162 |         await createVm();
163 | 
164 |         expect(document.body.innerHTML).toMatchSnapshot();
165 |     });
166 | 
167 |     it('can display a custom message when filtering results in no results', async () => {
168 |         document.body.innerHTML = `
169 |             <div id="app">
170 |                 <table-component
171 |                     :extra-settings="{ labels: { filterResultEmpty: 'game over man, game over' } }"
172 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
173 |                     <table-column show="firstName" label="First name"></table-column>
174 |                 </table-component>
175 |             </div>
176 |         `;
177 | 
178 |         const table = await createVm();
179 | 
180 |         table.filter = 'this returns nothing';
181 | 
182 |         await Vue.nextTick();
183 | 
184 |         expect(document.body.innerHTML).toMatchSnapshot();
185 |     });
186 | 
187 |     it('can display a custom message from global settings for no matching results', async () => {
188 |         TableComponent.settings({
189 |             filterNoResults: 'There are no matching results',
190 |         });
191 | 
192 |         document.body.innerHTML = `
193 |             <div id="app">
194 |                 <table-component :data="[]">
195 |                     <table-column show="firstName" label="First name"></table-column>
196 |                 </table-component>
197 |             </div>
198 |         `;
199 | 
200 |         await createVm();
201 | 
202 |         expect(document.body.innerHTML).toMatchSnapshot();
203 |     });
204 | 
205 |     it('can display a custom placeholder in the filter field', async () => {
206 |         document.body.innerHTML = `
207 |             <div id="app">
208 |                 <table-component
209 |                     :extra-settings="{ labels: { filterPlaceholder: 'custom placeholder' } }"
210 |                     :data="[{ firstName: 'John' },{ id: 2, firstName: 'Paul' }]">
211 |                     <table-column show="firstName" label="First name"></table-column>
212 |                 </table-component>
213 |             </div>
214 |         `;
215 | 
216 |         const table = await createVm();
217 | 
218 |         table.filter = 'this returns nothing';
219 | 
220 |         await Vue.nextTick();
221 | 
222 |         expect(document.body.innerHTML).toMatchSnapshot();
223 |     });
224 | 
225 |     it('can accept a function to fetch the data', async () => {
226 |         const serverResponse = () => {
227 |             return {
228 |                 data: [{ firstName: 'John' }, { id: 2, firstName: 'Paul' }],
229 |             };
230 |         };
231 | 
232 |         document.body.innerHTML = `
233 |             <div id="app">
234 |                 <table-component
235 |                     :data="${serverResponse}">
236 |                     <table-column show="firstName" label="First name"></table-column>
237 |                 </table-component>
238 |             </div>
239 |         `;
240 | 
241 |         await createVm();
242 | 
243 |         await Vue.nextTick();
244 | 
245 |         expect(document.body.innerHTML).toMatchSnapshot();
246 |     });
247 | 
248 |     it('can render pagination when the server responds with pagination data', async () => {
249 |         const serverResponse = () => {
250 |             return {
251 |                 data: [{ firstName: 'John' }, { id: 2, firstName: 'Paul' }],
252 | 
253 |                 pagination: {
254 |                     totalPages: 4,
255 |                     currentPage: 2,
256 |                 },
257 |             };
258 |         };
259 | 
260 |         document.body.innerHTML = `
261 |             <div id="app">
262 |                 <table-component
263 |                     :data="${serverResponse}">
264 |                     <table-column show="firstName" label="First name"></table-column>
265 |                 </table-component>
266 |             </div>
267 |         `;
268 | 
269 |         await createVm();
270 | 
271 |         await Vue.nextTick();
272 | 
273 |         expect(document.body.innerHTML).toMatchSnapshot();
274 |     });
275 | 
276 |     it('clicking a link in the pagination will rerender the table', async () => {
277 |         const serverResponse = ({ page }) => {
278 |             return {
279 |                 data: [{ firstName: `John ${page}` }, { id: 2, firstName: `Paul ${page}` }],
280 | 
281 |                 pagination: {
282 |                     totalPages: 4,
283 |                     currentPage: page,
284 |                 },
285 |             };
286 |         };
287 | 
288 |         document.body.innerHTML = `
289 |             <div id="app">
290 |                 <table-component
291 |                     :data="${serverResponse}">
292 |                     <table-column show="firstName" label="First name"></table-column>
293 |                 </table-component>
294 |             </div>
295 |         `;
296 | 
297 |         await createVm();
298 | 
299 |         await Vue.nextTick();
300 | 
301 |         expect(document.body.innerHTML).toMatchSnapshot();
302 | 
303 |         const thirdPageLink = document.getElementsByClassName('page-link')[2];
304 | 
305 |         await simulant.fire(thirdPageLink, 'click');
306 | 
307 |         await Vue.nextTick();
308 |         await Vue.nextTick();
309 | 
310 |         expect(document.body.innerHTML).toMatchSnapshot();
311 |     });
312 | 
313 |     it('can add extra classes to the table, the cells and the headers', async () => {
314 |         document.body.innerHTML = `
315 |             <div id="app">
316 |                 <table-component
317 |                     :data="[{ firstName: 'John' },{ firstName: 'Paul' }]"
318 |                     table-class="my-table"
319 |                     thead-class="my-thead"
320 |                     tbody-class="my-tbody"
321 |                 >
322 |                     <table-column
323 |                         show="firstName"
324 |                         label="First name"
325 |                         header-class="my-header"
326 |                         cell-class="my-cell"
327 |                     ></table-column>
328 |                 </table-component>
329 |             </div>
330 |         `;
331 | 
332 |         await createVm();
333 | 
334 |         expect(document.body.innerHTML).toMatchSnapshot();
335 |     });
336 | 
337 |     it('can update columns', async () => {
338 |         document.body.innerHTML = `
339 |             <div id="app">
340 |                 <table-component :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
341 |                     <table-column show="firstName" :label="label"></table-column>
342 |                 </table-component>
343 |             </div>
344 |         `;
345 | 
346 |         const vm = new Vue({
347 |             el: '#app',
348 |             data: {
349 |                 label: 'First name',
350 |             },
351 |         });
352 | 
353 |         await Vue.nextTick();
354 | 
355 |         expect(document.body.innerHTML).toMatchSnapshot();
356 | 
357 |         vm.label = 'Something else';
358 | 
359 |         await Vue.nextTick();
360 | 
361 |         expect(document.body.innerHTML).toMatchSnapshot();
362 |     });
363 | });
364 | 
365 | async function createVm(options = {}) {
366 |     const vm = new Vue({
367 |         el: '#app',
368 |         ...options,
369 |     });
370 | 
371 |     await Vue.nextTick(() => {
372 |     });
373 | 
374 |     const table = vm.$children[0];
375 | 
376 |     return table;
377 | }
378 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 🚨 **THIS PACKAGE HAS BEEN ABANDONED** 🚨
  2 | 
  3 | We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore. That's why we have chosen to abandon it. Feel free to fork our code and maintain your own copy or use one of the many alternatives.
  4 | 
  5 | # A straightforward Vue component to filter and sort tables
  6 | 
  7 | [![Latest Version on NPM](https://img.shields.io/npm/v/vue-table-component.svg?style=flat-square)](https://npmjs.com/package/vue-table-component)
  8 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
  9 | [![Build Status](https://img.shields.io/travis/spatie/vue-table-component/master.svg?style=flat-square)](https://travis-ci.org/spatie/vue-table-component)
 10 | [![npm](https://img.shields.io/npm/dt/vue-table-component.svg?style=flat-square)](https://www.npmjs.com/package/vue-table-component)
 11 | 
 12 | ---
 13 | 
 14 | 🚨 **WARNING: FEATURE FREEZE** 🚨
 15 | 
 16 | Version 1 of this package has become very hard to maintain due to the way it's built up. We also have too many feature requests, which we can't all cater too. We're working on v2 of this package, and won't be adding any new features or accepting feature PR's for v1.
 17 | 
 18 | ---
 19 | 
 20 | This repo contains a Vue component that can render a filterable and sortable table. It aims to be very lightweight and easy to use. It has support for [retrieving data asynchronously and pagination](#retrieving-data-asynchronously).
 21 | 
 22 | Here's an example of how you can use it:
 23 | 
 24 | ```html
 25 | <table-component
 26 |      :data="[
 27 |           { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', birthday: '04/10/1940', songs: 72 },
 28 |           { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', birthday: '18/06/1942', songs: 70 },
 29 |           { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', birthday: '25/02/1943', songs: 22 },
 30 |           { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', birthday: '07/07/1940', songs: 2 },
 31 |      ]"
 32 |      sort-by="songs"
 33 |      sort-order="asc"
 34 | >
 35 |      <table-column show="firstName" label="First name"></table-column>
 36 |      <table-column show="lastName" label="Last name"></table-column>
 37 |      <table-column show="instrument" label="Instrument"></table-column>
 38 |      <table-column show="songs" label="Songs" data-type="numeric"></table-column>
 39 |      <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
 40 |      <table-column label="" :sortable="false" :filterable="false">
 41 |          <template slot-scope="row">
 42 |             <a :href="`#${row.firstName}`">Edit</a>
 43 |          </template>
 44 |      </table-column>
 45 |  </table-component>
 46 | ```
 47 | 
 48 | A cool feature is that the table caches the used filter and sorting for 15 minutes. So if you refresh the page, the filter and sorting will still be used.
 49 | 
 50 | ## Demo
 51 | 
 52 | Want to see the component in action? No problem. [Here's a demo](http://vue-table-component.spatie.be).
 53 | 
 54 | ## Installation
 55 | 
 56 | You can install the package via yarn:
 57 | 
 58 | ```bash
 59 | yarn add vue-table-component
 60 | ```
 61 | 
 62 | or npm:
 63 | 
 64 | ```bash
 65 | npm install vue-table-component --save
 66 | ```
 67 | 
 68 | Next, you must register the component. The most common use case is to do that globally.
 69 | 
 70 | ```js
 71 | //in your app.js or similar file
 72 | import Vue from 'vue';
 73 | import { TableComponent, TableColumn } from 'vue-table-component';
 74 | 
 75 | Vue.component('table-component', TableComponent);
 76 | Vue.component('table-column', TableColumn);
 77 | ```
 78 | 
 79 | Alternatively you can do this to register the components:
 80 | 
 81 | ```js
 82 | import TableComponent from 'vue-table-component';
 83 | 
 84 | Vue.use(TableComponent);
 85 | ```
 86 | 
 87 | ## Browser Support
 88 | 
 89 | `vue-table-component` has the same browser support as Vue (see https://github.com/vuejs/vue). However, you might need to polyfill the [`Array.prototype.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill) method for IE support.
 90 | 
 91 | ## Usage
 92 | 
 93 | Here's a simple example on how to use the component.
 94 | 
 95 | ```html
 96 | <table-component
 97 |      :data="[
 98 |      { firstName: 'John', birthday: '04/10/1940', songs: 72 },
 99 |      { firstName: 'Paul', birthday: '18/06/1942', songs: 70 },
100 |      { firstName: 'George', birthday: '25/02/1943', songs: 22 },
101 |      { firstName: 'Ringo', birthday: '07/07/1940', songs: 2 },
102 |      ]"
103 |      sort-by="songs"
104 |      sort-order="asc"
105 |      >
106 |      <table-column show="firstName" label="First name"></table-column>
107 |      <table-column show="songs" label="Songs" data-type="numeric"></table-column>
108 |      <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
109 |  </table-component>
110 | ```
111 | 
112 | This will render a table that is both filterable and sortable. A filter field will be displayed right above the table. If your data contains any html we will filter that out when filtering. You can sort the table by clicking on the column headers. By default it will remember the used filter and sorting for the next 15 minutes.
113 | 
114 | ### Props
115 | 
116 | You can pass these props to `table-component`:
117 | 
118 | - `data`: (required) the data the component will operate on. This can either be an array or [a function](#retrieving-data-asynchronously)
119 | - `show-filter`: set this to `false` to not display the `filter` field.
120 | - `show-caption`: set this to `false` to not display the `caption` field which shows the current active filter.
121 | - `sort-by`: the property in data on which to initially sort.
122 | - `sort-order`: the initial sort order.
123 | - `cache-lifetime`: the lifetime in minutes the component will cache the filter and sorting.
124 | - `cache-key`: if you use multiple instances of `table-component` on the same page you must set this to a unique value per instance.
125 | - `table-class`: the passed value will be added to the `class` attribute of the rendered table
126 | - `thead-class`: the passed value will be added to the `class` attribute of the rendered table head.
127 | - `tbody-class`: the passed value will be added to the `class` attribute of the rendered table body.
128 | - `filter-placeholder`: the text used as a placeholder in the filter field
129 | - `filter-input-class`: additional classes that you will be applied to the filter text input
130 | - `filter-no-results`: the text displayed when the filtering returns no results
131 | 
132 | For each `table-column` a column will be rendered. It can have these props:
133 | 
134 | - `show`: (required) the property name in the data that needs to be shown in this column.
135 | - `formatter`: a function the will receive the value that will be displayed and all column properties. The return value of this function will be displayed. Here's [an example](#formatting-values)
136 | - `label`: the label that will be shown on top of the column. Set this to an empty string to display nothing. If this property is not present, the string passed to `show` will be used.
137 | - `data-type`: if your column should be sorted numerically set this to `numeric`. If your column contains dates set it to `date:` followed by the format of your date
138 | - `sortable`: if you set this to `false` then the column won't be sorted when clicking the column header
139 | - `sort-by`: you can set this to any property present in `data`. When sorting the column that property will be used to sort on instead of the property in `show`.
140 | - `filterable`: if this is set to `false` than this column won't be used when filtering
141 | - `filter-on`: you can set this to any property present in `data`. When filtering the column that property will be used to filter on instead of the property in `show`.
142 | - `hidden`: if you set this to `true` then the column will be hidden. This is useful when you want to sort by a field but don't want it to be visible.
143 | - `header-class`: the passed value will be added to the `class` attribute of the columns `th` element.
144 | - `cell-class`: the passed value will be added to the `class` attribute of the columns `td` element.
145 | 
146 | ## Listeners
147 | 
148 | The `table-component` currently emits one custom event:
149 | 
150 | - `@rowClick`: is fired when a row is clicked. Receives the row data as it's event payload.
151 | 
152 | ### Modifying the used texts and CSS classes
153 | 
154 | If you want to modify the built in text or classes you can pass settings globally.
155 | You can use the [CSS](docs/table-component.css) from the docs as a starting point for your own styling.
156 | 
157 | ```js
158 | import TableComponent from 'vue-table-component';
159 | 
160 | TableComponent.settings({
161 |     tableClass: '',
162 |     theadClass: '',
163 |     tbodyClass: '',
164 |     filterPlaceholder: 'Filter table…',
165 |     filterNoResults: 'There are no matching rows',
166 | });
167 | ```
168 | 
169 | You can also provide the custom settings on Vue plugin install hook:
170 | 
171 | ```js
172 | import Vue from 'vue';
173 | import TableComponent from 'vue-table-component';
174 | 
175 | Vue.use(TableComponent, {
176 |     tableClass: '',
177 |     theadClass: '',
178 |     tbodyClass: '',
179 |     filterPlaceholder: 'Filter table…',
180 |     filterNoResults: 'There are no matching rows',
181 | });
182 | ```
183 | 
184 | ## Retrieving data asynchronously
185 | 
186 | The component can fetch data in an asynchronous manner. The most common use case for this is fetching data from a server.
187 | 
188 | To use the feature you should pass a function to the `data` prop. The function will receive an object with `filter`, `sort` and `page`. You can use these parameters to fetch the right data. The function should return an object with the following properties:
189 | 
190 | - `data`: (required) the data that should be displayed in the table.
191 | - `pagination`: (optional) this should be an object with keys `currentPage` and `totalPages`. If `totalPages` is higher than 1 pagination links will be displayed.
192 | 
193 | Here's an example:
194 | 
195 | ```html
196 | <template>
197 |    <div id="app">
198 |        <table-component :data="fetchData">
199 |            <table-column show="firstName" label="First name"></table-column>
200 |        </table-component>
201 |    </div>
202 | </template>
203 | 
204 | <script>
205 |     import axios from 'axios';
206 | 
207 |     export default {
208 |         methods: {
209 |             async fetchData({ page, filter, sort }) {
210 |                 const response = await axios.get('/my-endpoint', { page });
211 | 
212 |                 // An object that has a `data` and an optional `pagination` property
213 |                 return response;
214 |             }
215 |         }
216 |     }
217 | </script>
218 | ```
219 | 
220 | If you for some reason need to manually refresh the table data, you can call the `refresh` method on the component.
221 | 
222 | ```html
223 | <table-component :data="fetchData" ref="table">
224 |     <!-- Columns... -->
225 | </table-component>
226 | ```
227 | 
228 | ```js
229 | this.$refs.table.refresh();
230 | ```
231 | 
232 | ## Formatting values
233 | 
234 | You can format values before they get displayed by using scoped slots. Here's a quick example:
235 | 
236 | ```html
237 | <table-component
238 |      :data="[
239 |           { firstName: 'John', songs: 72 },
240 |           { firstName: 'Paul', songs: 70 },
241 |           { firstName: 'George', songs: 22 },
242 |           { firstName: 'Ringo', songs: 2 },
243 |      ]"
244 | >
245 | 
246 |      <table-column label="My custom column" :sortable="false" :filterable="false">
247 |          <template slot-scope="row">
248 |             {{ row.firstName }} wrote {{ row.songs }} songs.
249 |          </template>
250 |      </table-column>
251 |  </table-component>
252 | ```
253 | 
254 | Alternatively you can pass a function to the `formatter` prop. Here's an example Vue component that uses the feature.
255 | 
256 | ```vue
257 | <template>
258 |     <table-component
259 |         :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
260 |         <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
261 |     </table-component>
262 | </template>
263 | 
264 | <script>
265 | export default {
266 |     methods: {
267 |         formatter(value, rowProperties) {
268 |             return `Hi, I am ${value}`;
269 |         },
270 |     },
271 | }
272 | </script>
273 | ```
274 | 
275 | This will display values `Hi, I am John` and `Hi, I am Paul`.
276 | 
277 | ## Adding table footer `<tfoot>` information
278 | 
279 | Sometimes it can be useful to add information to the bottom of the table like summary data.
280 | A slot named `tfoot` is available and it receives all of the `rows` data to do calculations on the fly or you can show data directly from whatever is available in the parent scope.
281 | 
282 | ```html
283 | <table-component
284 |     :data="[{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]">
285 |     <table-column show="firstName" label="First name"></table-column>
286 |     <table-column show="songs" label="Songs" data-type="numeric"></table-column>
287 |     <template slot="tfoot" slot-scope="{ rows }">
288 |         <tr>
289 |             <th>Total Songs:</th>
290 |             <th>{{ rows.reduce((sum, value) => { return sum + value.data.songs; }, 0) }}</th>
291 |             <th>&nbsp;</th>
292 |             <th>&nbsp;</th>
293 |         </tr>
294 |     </template>
295 | </table-component>
296 | ```
297 | 
298 | OR
299 | 
300 | ```vue
301 | <template>
302 |     <table-component
303 |         :data="tableData">
304 |         <table-column show="firstName" label="First name"></table-column>
305 |         <table-column show="songs" label="Songs" data-type="numeric"></table-column>
306 |         <template slot="tfoot">
307 |             <tr>
308 |                 <th>Total Songs:</th>
309 |                 <th>{{ totalSongs }}</th>
310 |             </tr>
311 |         </template>
312 |     </table-component>
313 | </template>
314 | <script>
315 | export default {
316 |     computed: {
317 |         totalSongs () {
318 |             return this.tableData.reduce(sum, value => {
319 |                 return sum + value.songs;
320 |             }, 0);
321 |         }
322 |     },
323 |     data () {
324 |         return {
325 |             tableData: [{ firstName: 'John', songs: 72 },{ firstName: 'Paul', songs: 70 }]
326 |         }
327 |     }
328 | }
329 | </script>
330 | ```
331 | 
332 | Note: `rows` slot scope data includes more information gathered by the Table Component (e.g. `columns`) and `rows.data` is where the original `data` information is located.
333 | 
334 | ## Changelog
335 | 
336 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
337 | 
338 | ## Testing
339 | 
340 | ```bash
341 | yarn test
342 | ```
343 | 
344 | ## Contributing
345 | 
346 | Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
347 | 
348 | ## Postcardware
349 | 
350 | You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
351 | 
352 | Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
353 | 
354 | We publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).
355 | 
356 | ## Security
357 | 
358 | If you discover any security related issues, please contact freek@spatie.be instead of using the issue tracker.
359 | 
360 | ## Credits
361 | 
362 | - [Freek Van der Herten](https://github.com/freekmurze)
363 | - [Sebastian De Deyne](https://github.com/sebdedeyne)
364 | - [All Contributors](../../contributors)
365 | 
366 | The Pagination component was inspired by [this lesson on Laracasts.com](https://laracasts.com/series/lets-build-a-forum-with-laravel/episodes/16).
367 | 
368 | ## Support us
369 | 
370 | Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
371 | 
372 | Does your business depend on our contributions? Reach out and support us on [Patreon](https://www.patreon.com/spatie).
373 | All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.
374 | 
375 | ## License
376 | 
377 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
378 | 


--------------------------------------------------------------------------------
/tests/components/__snapshots__/TableComponent.test.js.snap:
--------------------------------------------------------------------------------
   1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
   2 | 
   3 | exports[`TableComponent accepts a function to format values 1`] = `
   4 | 
   5 | <div id="app">
   6 |   <div class="table-component">
   7 |     <div class="table-component__filter">
   8 |       <input type="text"
   9 |              placeholder="Filter table…"
  10 |              class="table-component__filter__field"
  11 |       >
  12 |       <!---->
  13 |     </div>
  14 |     <div class="table-component__table-wrapper">
  15 |       <table class="table-component__table">
  16 |         <caption role="alert"
  17 |                  aria-live="polite"
  18 |                  class="table-component__table__caption"
  19 |         >
  20 |           Table not sorted
  21 |         </caption>
  22 |         <thead class="table-component__table__head">
  23 |           <tr>
  24 |             <th role="columnheader"
  25 |                 aria-sort="none"
  26 |                 class="table-component__th table-component__th--sort"
  27 |             >
  28 |               First name
  29 |             </th>
  30 |           </tr>
  31 |         </thead>
  32 |         <tbody class="table-component__table__body">
  33 |           <tr>
  34 |             <td>
  35 |               Formatted:
  36 |               <strong>
  37 |                 John
  38 |               </strong>
  39 |             </td>
  40 |           </tr>
  41 |           <tr>
  42 |             <td>
  43 |               Formatted:
  44 |               <strong>
  45 |                 Paul
  46 |               </strong>
  47 |             </td>
  48 |           </tr>
  49 |         </tbody>
  50 |         <tfoot>
  51 |         </tfoot>
  52 |       </table>
  53 |     </div>
  54 |     <!---->
  55 |     <div style="display: none;">
  56 |       <!---->
  57 |     </div>
  58 |     <!---->
  59 |   </div>
  60 | </div>
  61 | 
  62 | `;
  63 | 
  64 | exports[`TableComponent can accept a function to fetch the data 1`] = `
  65 | 
  66 | <div id="app">
  67 |   <div class="table-component">
  68 |     <div class="table-component__filter">
  69 |       <input type="text"
  70 |              placeholder="Filter table…"
  71 |              class="table-component__filter__field"
  72 |       >
  73 |       <!---->
  74 |     </div>
  75 |     <div class="table-component__table-wrapper">
  76 |       <table class="table-component__table">
  77 |         <caption role="alert"
  78 |                  aria-live="polite"
  79 |                  class="table-component__table__caption"
  80 |         >
  81 |           Table not sorted
  82 |         </caption>
  83 |         <thead class="table-component__table__head">
  84 |           <tr>
  85 |             <th role="columnheader"
  86 |                 aria-sort="none"
  87 |                 class="table-component__th table-component__th--sort"
  88 |             >
  89 |               First name
  90 |             </th>
  91 |           </tr>
  92 |         </thead>
  93 |         <tbody class="table-component__table__body">
  94 |           <tr>
  95 |             <td>
  96 |               John
  97 |             </td>
  98 |           </tr>
  99 |           <tr>
 100 |             <td>
 101 |               Paul
 102 |             </td>
 103 |           </tr>
 104 |         </tbody>
 105 |         <tfoot>
 106 |         </tfoot>
 107 |       </table>
 108 |     </div>
 109 |     <!---->
 110 |     <div style="display: none;">
 111 |       <!---->
 112 |     </div>
 113 |     <!---->
 114 |   </div>
 115 | </div>
 116 | 
 117 | `;
 118 | 
 119 | exports[`TableComponent can add extra classes to the table, the cells and the headers 1`] = `
 120 | 
 121 | <div id="app">
 122 |   <div class="table-component">
 123 |     <div class="table-component__filter">
 124 |       <input type="text"
 125 |              placeholder="Filter table…"
 126 |              class="table-component__filter__field"
 127 |       >
 128 |       <!---->
 129 |     </div>
 130 |     <div class="table-component__table-wrapper">
 131 |       <table class="table-component__table my-table">
 132 |         <caption role="alert"
 133 |                  aria-live="polite"
 134 |                  class="table-component__table__caption"
 135 |         >
 136 |           Table not sorted
 137 |         </caption>
 138 |         <thead class="table-component__table__head my-thead">
 139 |           <tr>
 140 |             <th role="columnheader"
 141 |                 aria-sort="none"
 142 |                 class="table-component__th table-component__th--sort my-header"
 143 |             >
 144 |               First name
 145 |             </th>
 146 |           </tr>
 147 |         </thead>
 148 |         <tbody class="table-component__table__body my-tbody">
 149 |           <tr>
 150 |             <td class="my-cell">
 151 |               John
 152 |             </td>
 153 |           </tr>
 154 |           <tr>
 155 |             <td class="my-cell">
 156 |               Paul
 157 |             </td>
 158 |           </tr>
 159 |         </tbody>
 160 |         <tfoot>
 161 |         </tfoot>
 162 |       </table>
 163 |     </div>
 164 |     <!---->
 165 |     <div style="display: none;">
 166 |       <!---->
 167 |     </div>
 168 |     <!---->
 169 |   </div>
 170 | </div>
 171 | 
 172 | `;
 173 | 
 174 | exports[`TableComponent can display a custom message from global settings for no matching results 1`] = `
 175 | 
 176 | <div id="app">
 177 |   <div class="table-component">
 178 |     <div class="table-component__filter">
 179 |       <input type="text"
 180 |              placeholder="Filter table…"
 181 |              class="table-component__filter__field"
 182 |       >
 183 |       <!---->
 184 |     </div>
 185 |     <div class="table-component__table-wrapper">
 186 |       <table class="table-component__table">
 187 |         <caption role="alert"
 188 |                  aria-live="polite"
 189 |                  class="table-component__table__caption"
 190 |         >
 191 |           Table not sorted
 192 |         </caption>
 193 |         <thead class="table-component__table__head">
 194 |           <tr>
 195 |             <th role="columnheader"
 196 |                 aria-sort="none"
 197 |                 class="table-component__th table-component__th--sort"
 198 |             >
 199 |               First name
 200 |             </th>
 201 |           </tr>
 202 |         </thead>
 203 |         <tbody class="table-component__table__body">
 204 |         </tbody>
 205 |         <tfoot>
 206 |         </tfoot>
 207 |       </table>
 208 |     </div>
 209 |     <div class="table-component__message">
 210 |       There are no matching results
 211 |     </div>
 212 |     <div style="display: none;">
 213 |       <!---->
 214 |     </div>
 215 |     <!---->
 216 |   </div>
 217 | </div>
 218 | 
 219 | `;
 220 | 
 221 | exports[`TableComponent can display a custom message when filtering results in no results 1`] = `
 222 | 
 223 | <div id="app">
 224 |   <div class="table-component"
 225 |        extra-settings="[object Object]"
 226 |   >
 227 |     <div class="table-component__filter">
 228 |       <input type="text"
 229 |              placeholder="Filter table…"
 230 |              class="table-component__filter__field"
 231 |       >
 232 |       <a class="table-component__filter__clear">
 233 |         ×
 234 |       </a>
 235 |     </div>
 236 |     <div class="table-component__table-wrapper">
 237 |       <table class="table-component__table">
 238 |         <caption role="alert"
 239 |                  aria-live="polite"
 240 |                  class="table-component__table__caption"
 241 |         >
 242 |           Table not sorted
 243 |         </caption>
 244 |         <thead class="table-component__table__head">
 245 |           <tr>
 246 |             <th role="columnheader"
 247 |                 aria-sort="none"
 248 |                 class="table-component__th table-component__th--sort"
 249 |             >
 250 |               First name
 251 |             </th>
 252 |           </tr>
 253 |         </thead>
 254 |         <tbody class="table-component__table__body">
 255 |         </tbody>
 256 |         <tfoot>
 257 |         </tfoot>
 258 |       </table>
 259 |     </div>
 260 |     <div class="table-component__message">
 261 |       There are no matching rows
 262 |     </div>
 263 |     <div style="display: none;">
 264 |       <!---->
 265 |     </div>
 266 |     <!---->
 267 |   </div>
 268 | </div>
 269 | 
 270 | `;
 271 | 
 272 | exports[`TableComponent can display a custom placeholder in the filter field 1`] = `
 273 | 
 274 | <div id="app">
 275 |   <div class="table-component"
 276 |        extra-settings="[object Object]"
 277 |   >
 278 |     <div class="table-component__filter">
 279 |       <input type="text"
 280 |              placeholder="Filter table…"
 281 |              class="table-component__filter__field"
 282 |       >
 283 |       <a class="table-component__filter__clear">
 284 |         ×
 285 |       </a>
 286 |     </div>
 287 |     <div class="table-component__table-wrapper">
 288 |       <table class="table-component__table">
 289 |         <caption role="alert"
 290 |                  aria-live="polite"
 291 |                  class="table-component__table__caption"
 292 |         >
 293 |           Table not sorted
 294 |         </caption>
 295 |         <thead class="table-component__table__head">
 296 |           <tr>
 297 |             <th role="columnheader"
 298 |                 aria-sort="none"
 299 |                 class="table-component__th table-component__th--sort"
 300 |             >
 301 |               First name
 302 |             </th>
 303 |           </tr>
 304 |         </thead>
 305 |         <tbody class="table-component__table__body">
 306 |         </tbody>
 307 |         <tfoot>
 308 |         </tfoot>
 309 |       </table>
 310 |     </div>
 311 |     <div class="table-component__message">
 312 |       There are no matching rows
 313 |     </div>
 314 |     <div style="display: none;">
 315 |       <!---->
 316 |     </div>
 317 |     <!---->
 318 |   </div>
 319 | </div>
 320 | 
 321 | `;
 322 | 
 323 | exports[`TableComponent can display nested properties 1`] = `
 324 | 
 325 | <div id="app">
 326 |   <div class="table-component">
 327 |     <div class="table-component__filter">
 328 |       <input type="text"
 329 |              placeholder="Filter table…"
 330 |              class="table-component__filter__field"
 331 |       >
 332 |       <!---->
 333 |     </div>
 334 |     <div class="table-component__table-wrapper">
 335 |       <table class="table-component__table">
 336 |         <caption role="alert"
 337 |                  aria-live="polite"
 338 |                  class="table-component__table__caption"
 339 |         >
 340 |           Table not sorted
 341 |         </caption>
 342 |         <thead class="table-component__table__head">
 343 |           <tr>
 344 |             <th role="columnheader"
 345 |                 aria-sort="none"
 346 |                 class="table-component__th table-component__th--sort"
 347 |             >
 348 |               First name
 349 |             </th>
 350 |           </tr>
 351 |         </thead>
 352 |         <tbody class="table-component__table__body">
 353 |           <tr>
 354 |             <td>
 355 |               John
 356 |             </td>
 357 |           </tr>
 358 |           <tr>
 359 |             <td>
 360 |               Paul
 361 |             </td>
 362 |           </tr>
 363 |         </tbody>
 364 |         <tfoot>
 365 |         </tfoot>
 366 |       </table>
 367 |     </div>
 368 |     <!---->
 369 |     <div style="display: none;">
 370 |       <!---->
 371 |     </div>
 372 |     <!---->
 373 |   </div>
 374 | </div>
 375 | 
 376 | `;
 377 | 
 378 | exports[`TableComponent can mount 1`] = `
 379 | 
 380 | <div id="app">
 381 |   <div class="table-component">
 382 |     <div class="table-component__filter">
 383 |       <input type="text"
 384 |              placeholder="Filter table…"
 385 |              class="table-component__filter__field"
 386 |       >
 387 |       <!---->
 388 |     </div>
 389 |     <div class="table-component__table-wrapper">
 390 |       <table class="table-component__table">
 391 |         <caption role="alert"
 392 |                  aria-live="polite"
 393 |                  class="table-component__table__caption"
 394 |         >
 395 |           Table not sorted
 396 |         </caption>
 397 |         <thead class="table-component__table__head">
 398 |           <tr>
 399 |             <th role="columnheader"
 400 |                 aria-sort="none"
 401 |                 class="table-component__th table-component__th--sort"
 402 |             >
 403 |               First name
 404 |             </th>
 405 |           </tr>
 406 |         </thead>
 407 |         <tbody class="table-component__table__body">
 408 |           <tr>
 409 |             <td>
 410 |               John
 411 |             </td>
 412 |           </tr>
 413 |           <tr>
 414 |             <td>
 415 |               Paul
 416 |             </td>
 417 |           </tr>
 418 |         </tbody>
 419 |         <tfoot>
 420 |         </tfoot>
 421 |       </table>
 422 |     </div>
 423 |     <!---->
 424 |     <div style="display: none;">
 425 |       <!---->
 426 |     </div>
 427 |     <!---->
 428 |   </div>
 429 | </div>
 430 | 
 431 | `;
 432 | 
 433 | exports[`TableComponent can render pagination when the server responds with pagination data 1`] = `
 434 | 
 435 | <div id="app">
 436 |   <div class="table-component">
 437 |     <div class="table-component__filter">
 438 |       <input type="text"
 439 |              placeholder="Filter table…"
 440 |              class="table-component__filter__field"
 441 |       >
 442 |       <!---->
 443 |     </div>
 444 |     <div class="table-component__table-wrapper">
 445 |       <table class="table-component__table">
 446 |         <caption role="alert"
 447 |                  aria-live="polite"
 448 |                  class="table-component__table__caption"
 449 |         >
 450 |           Table not sorted
 451 |         </caption>
 452 |         <thead class="table-component__table__head">
 453 |           <tr>
 454 |             <th role="columnheader"
 455 |                 aria-sort="none"
 456 |                 class="table-component__th table-component__th--sort"
 457 |             >
 458 |               First name
 459 |             </th>
 460 |           </tr>
 461 |         </thead>
 462 |         <tbody class="table-component__table__body">
 463 |           <tr>
 464 |             <td>
 465 |               John
 466 |             </td>
 467 |           </tr>
 468 |           <tr>
 469 |             <td>
 470 |               Paul
 471 |             </td>
 472 |           </tr>
 473 |         </tbody>
 474 |         <tfoot>
 475 |         </tfoot>
 476 |       </table>
 477 |     </div>
 478 |     <!---->
 479 |     <div style="display: none;">
 480 |       <!---->
 481 |     </div>
 482 |     <nav>
 483 |       <ul class="pagination justify-content-center">
 484 |         <li class>
 485 |           <a class>
 486 |             <i class="left chevron icon">
 487 |               «
 488 |             </i>
 489 |           </a>
 490 |         </li>
 491 |         <li class="page-item">
 492 |           <a class="page-link">
 493 |             1
 494 |           </a>
 495 |         </li>
 496 |         <!---->
 497 |         <li class="page-item active">
 498 |           <a class="page-link">
 499 |             2
 500 |           </a>
 501 |         </li>
 502 |         <li class="page-item">
 503 |           <a class="page-link">
 504 |             3
 505 |           </a>
 506 |         </li>
 507 |         <!---->
 508 |         <li class="page-item">
 509 |           <a class="page-link">
 510 |             4
 511 |           </a>
 512 |         </li>
 513 |         <li>
 514 |           <a class>
 515 |             <i class="right chevron icon">
 516 |               »
 517 |             </i>
 518 |           </a>
 519 |         </li>
 520 |       </ul>
 521 |     </nav>
 522 |   </div>
 523 | </div>
 524 | 
 525 | `;
 526 | 
 527 | exports[`TableComponent can update columns 1`] = `
 528 | 
 529 | <div id="app">
 530 |   <div class="table-component">
 531 |     <div class="table-component__filter">
 532 |       <input type="text"
 533 |              placeholder="Filter table…"
 534 |              class="table-component__filter__field"
 535 |       >
 536 |       <!---->
 537 |     </div>
 538 |     <div class="table-component__table-wrapper">
 539 |       <table class="table-component__table">
 540 |         <caption role="alert"
 541 |                  aria-live="polite"
 542 |                  class="table-component__table__caption"
 543 |         >
 544 |           Table not sorted
 545 |         </caption>
 546 |         <thead class="table-component__table__head">
 547 |           <tr>
 548 |             <th role="columnheader"
 549 |                 aria-sort="none"
 550 |                 class="table-component__th table-component__th--sort"
 551 |             >
 552 |               First name
 553 |             </th>
 554 |           </tr>
 555 |         </thead>
 556 |         <tbody class="table-component__table__body">
 557 |           <tr>
 558 |             <td>
 559 |               John
 560 |             </td>
 561 |           </tr>
 562 |           <tr>
 563 |             <td>
 564 |               Paul
 565 |             </td>
 566 |           </tr>
 567 |         </tbody>
 568 |         <tfoot>
 569 |         </tfoot>
 570 |       </table>
 571 |     </div>
 572 |     <!---->
 573 |     <div style="display: none;">
 574 |       <!---->
 575 |     </div>
 576 |     <!---->
 577 |   </div>
 578 | </div>
 579 | 
 580 | `;
 581 | 
 582 | exports[`TableComponent can update columns 2`] = `
 583 | 
 584 | <div id="app">
 585 |   <div class="table-component">
 586 |     <div class="table-component__filter">
 587 |       <input type="text"
 588 |              placeholder="Filter table…"
 589 |              class="table-component__filter__field"
 590 |       >
 591 |       <!---->
 592 |     </div>
 593 |     <div class="table-component__table-wrapper">
 594 |       <table class="table-component__table">
 595 |         <caption role="alert"
 596 |                  aria-live="polite"
 597 |                  class="table-component__table__caption"
 598 |         >
 599 |           Table not sorted
 600 |         </caption>
 601 |         <thead class="table-component__table__head">
 602 |           <tr>
 603 |             <th role="columnheader"
 604 |                 aria-sort="none"
 605 |                 class="table-component__th table-component__th--sort"
 606 |             >
 607 |               Something else
 608 |             </th>
 609 |           </tr>
 610 |         </thead>
 611 |         <tbody class="table-component__table__body">
 612 |           <tr>
 613 |             <td>
 614 |               John
 615 |             </td>
 616 |           </tr>
 617 |           <tr>
 618 |             <td>
 619 |               Paul
 620 |             </td>
 621 |           </tr>
 622 |         </tbody>
 623 |         <tfoot>
 624 |         </tfoot>
 625 |       </table>
 626 |     </div>
 627 |     <!---->
 628 |     <div style="display: none;">
 629 |       <!---->
 630 |     </div>
 631 |     <!---->
 632 |   </div>
 633 | </div>
 634 | 
 635 | `;
 636 | 
 637 | exports[`TableComponent clicking a link in the pagination will rerender the table 1`] = `
 638 | 
 639 | <div id="app">
 640 |   <div class="table-component">
 641 |     <div class="table-component__filter">
 642 |       <input type="text"
 643 |              placeholder="Filter table…"
 644 |              class="table-component__filter__field"
 645 |       >
 646 |       <!---->
 647 |     </div>
 648 |     <div class="table-component__table-wrapper">
 649 |       <table class="table-component__table">
 650 |         <caption role="alert"
 651 |                  aria-live="polite"
 652 |                  class="table-component__table__caption"
 653 |         >
 654 |           Table not sorted
 655 |         </caption>
 656 |         <thead class="table-component__table__head">
 657 |           <tr>
 658 |             <th role="columnheader"
 659 |                 aria-sort="none"
 660 |                 class="table-component__th table-component__th--sort"
 661 |             >
 662 |               First name
 663 |             </th>
 664 |           </tr>
 665 |         </thead>
 666 |         <tbody class="table-component__table__body">
 667 |           <tr>
 668 |             <td>
 669 |               John 1
 670 |             </td>
 671 |           </tr>
 672 |           <tr>
 673 |             <td>
 674 |               Paul 1
 675 |             </td>
 676 |           </tr>
 677 |         </tbody>
 678 |         <tfoot>
 679 |         </tfoot>
 680 |       </table>
 681 |     </div>
 682 |     <!---->
 683 |     <div style="display: none;">
 684 |       <!---->
 685 |     </div>
 686 |     <nav>
 687 |       <ul class="pagination justify-content-center">
 688 |         <li class="disabled">
 689 |           <a class="disabled">
 690 |             <i class="left chevron icon">
 691 |               «
 692 |             </i>
 693 |           </a>
 694 |         </li>
 695 |         <li class="page-item active">
 696 |           <a class="page-link">
 697 |             1
 698 |           </a>
 699 |         </li>
 700 |         <!---->
 701 |         <li class="page-item">
 702 |           <a class="page-link">
 703 |             2
 704 |           </a>
 705 |         </li>
 706 |         <li class="page-item">
 707 |           <a class="page-link">
 708 |             3
 709 |           </a>
 710 |         </li>
 711 |         <!---->
 712 |         <li class="page-item">
 713 |           <a class="page-link">
 714 |             4
 715 |           </a>
 716 |         </li>
 717 |         <li>
 718 |           <a class>
 719 |             <i class="right chevron icon">
 720 |               »
 721 |             </i>
 722 |           </a>
 723 |         </li>
 724 |       </ul>
 725 |     </nav>
 726 |   </div>
 727 | </div>
 728 | 
 729 | `;
 730 | 
 731 | exports[`TableComponent clicking a link in the pagination will rerender the table 2`] = `
 732 | 
 733 | <div id="app">
 734 |   <div class="table-component">
 735 |     <div class="table-component__filter">
 736 |       <input type="text"
 737 |              placeholder="Filter table…"
 738 |              class="table-component__filter__field"
 739 |       >
 740 |       <!---->
 741 |     </div>
 742 |     <div class="table-component__table-wrapper">
 743 |       <table class="table-component__table">
 744 |         <caption role="alert"
 745 |                  aria-live="polite"
 746 |                  class="table-component__table__caption"
 747 |         >
 748 |           Table not sorted
 749 |         </caption>
 750 |         <thead class="table-component__table__head">
 751 |           <tr>
 752 |             <th role="columnheader"
 753 |                 aria-sort="none"
 754 |                 class="table-component__th table-component__th--sort"
 755 |             >
 756 |               First name
 757 |             </th>
 758 |           </tr>
 759 |         </thead>
 760 |         <tbody class="table-component__table__body">
 761 |           <tr>
 762 |             <td>
 763 |               John 3
 764 |             </td>
 765 |           </tr>
 766 |           <tr>
 767 |             <td>
 768 |               Paul 3
 769 |             </td>
 770 |           </tr>
 771 |         </tbody>
 772 |         <tfoot>
 773 |         </tfoot>
 774 |       </table>
 775 |     </div>
 776 |     <!---->
 777 |     <div style="display: none;">
 778 |       <!---->
 779 |     </div>
 780 |     <nav>
 781 |       <ul class="pagination justify-content-center">
 782 |         <li class>
 783 |           <a class>
 784 |             <i class="left chevron icon">
 785 |               «
 786 |             </i>
 787 |           </a>
 788 |         </li>
 789 |         <li class="page-item">
 790 |           <a class="page-link">
 791 |             1
 792 |           </a>
 793 |         </li>
 794 |         <!---->
 795 |         <li class="page-item">
 796 |           <a class="page-link">
 797 |             2
 798 |           </a>
 799 |         </li>
 800 |         <li class="page-item active">
 801 |           <a class="page-link">
 802 |             3
 803 |           </a>
 804 |         </li>
 805 |         <!---->
 806 |         <li class="page-item">
 807 |           <a class="page-link">
 808 |             4
 809 |           </a>
 810 |         </li>
 811 |         <li>
 812 |           <a class>
 813 |             <i class="right chevron icon">
 814 |               »
 815 |             </i>
 816 |           </a>
 817 |         </li>
 818 |       </ul>
 819 |     </nav>
 820 |   </div>
 821 | </div>
 822 | 
 823 | `;
 824 | 
 825 | exports[`TableComponent has an prop to disable the caption 1`] = `
 826 | 
 827 | <div id="app">
 828 |   <div class="table-component">
 829 |     <div class="table-component__filter">
 830 |       <input type="text"
 831 |              placeholder="Filter table…"
 832 |              class="table-component__filter__field"
 833 |       >
 834 |       <!---->
 835 |     </div>
 836 |     <div class="table-component__table-wrapper">
 837 |       <table class="table-component__table">
 838 |         <!---->
 839 |         <thead class="table-component__table__head">
 840 |           <tr>
 841 |             <th role="columnheader"
 842 |                 aria-sort="none"
 843 |                 class="table-component__th table-component__th--sort"
 844 |             >
 845 |               First name
 846 |             </th>
 847 |           </tr>
 848 |         </thead>
 849 |         <tbody class="table-component__table__body">
 850 |           <tr>
 851 |             <td>
 852 |               John
 853 |             </td>
 854 |           </tr>
 855 |           <tr>
 856 |             <td>
 857 |               Paul
 858 |             </td>
 859 |           </tr>
 860 |         </tbody>
 861 |         <tfoot>
 862 |         </tfoot>
 863 |       </table>
 864 |     </div>
 865 |     <!---->
 866 |     <div style="display: none;">
 867 |       <!---->
 868 |     </div>
 869 |     <!---->
 870 |   </div>
 871 | </div>
 872 | 
 873 | `;
 874 | 
 875 | exports[`TableComponent has an prop to disable the filter 1`] = `
 876 | 
 877 | <div id="app">
 878 |   <div class="table-component">
 879 |     <!---->
 880 |     <div class="table-component__table-wrapper">
 881 |       <table class="table-component__table">
 882 |         <caption role="alert"
 883 |                  aria-live="polite"
 884 |                  class="table-component__table__caption"
 885 |         >
 886 |           Table not sorted
 887 |         </caption>
 888 |         <thead class="table-component__table__head">
 889 |           <tr>
 890 |             <th role="columnheader"
 891 |                 aria-sort="none"
 892 |                 class="table-component__th table-component__th--sort"
 893 |             >
 894 |               First name
 895 |             </th>
 896 |           </tr>
 897 |         </thead>
 898 |         <tbody class="table-component__table__body">
 899 |           <tr>
 900 |             <td>
 901 |               John
 902 |             </td>
 903 |           </tr>
 904 |           <tr>
 905 |             <td>
 906 |               Paul
 907 |             </td>
 908 |           </tr>
 909 |         </tbody>
 910 |         <tfoot>
 911 |         </tfoot>
 912 |       </table>
 913 |     </div>
 914 |     <!---->
 915 |     <div style="display: none;">
 916 |       <!---->
 917 |     </div>
 918 |     <!---->
 919 |   </div>
 920 | </div>
 921 | 
 922 | `;
 923 | 
 924 | exports[`TableComponent supports a named slot to display a tfoot section 1`] = `
 925 | 
 926 | <div id="app">
 927 |   <div class="table-component">
 928 |     <div class="table-component__filter">
 929 |       <input type="text"
 930 |              placeholder="Filter table…"
 931 |              class="table-component__filter__field"
 932 |       >
 933 |       <!---->
 934 |     </div>
 935 |     <div class="table-component__table-wrapper">
 936 |       <table class="table-component__table">
 937 |         <caption role="alert"
 938 |                  aria-live="polite"
 939 |                  class="table-component__table__caption"
 940 |         >
 941 |           Table not sorted
 942 |         </caption>
 943 |         <thead class="table-component__table__head">
 944 |           <tr>
 945 |             <th role="columnheader"
 946 |                 aria-sort="none"
 947 |                 class="table-component__th table-component__th--sort"
 948 |             >
 949 |               First name
 950 |             </th>
 951 |           </tr>
 952 |         </thead>
 953 |         <tbody class="table-component__table__body">
 954 |           <tr>
 955 |             <td>
 956 |               John
 957 |             </td>
 958 |           </tr>
 959 |           <tr>
 960 |             <td>
 961 |               Paul
 962 |             </td>
 963 |           </tr>
 964 |         </tbody>
 965 |         <tfoot>
 966 |           <tr>
 967 |             <td>
 968 |               Name count:
 969 |             </td>
 970 |             <td>
 971 |               2
 972 |             </td>
 973 |           </tr>
 974 |         </tfoot>
 975 |       </table>
 976 |     </div>
 977 |     <!---->
 978 |     <div style="display: none;">
 979 |       <!---->
 980 |     </div>
 981 |     <!---->
 982 |   </div>
 983 | </div>
 984 | 
 985 | `;
 986 | 
 987 | exports[`TableComponent supports a scoped slot inside the table column 1`] = `
 988 | 
 989 | <div id="app">
 990 |   <div class="table-component">
 991 |     <div class="table-component__filter">
 992 |       <input type="text"
 993 |              placeholder="Filter table…"
 994 |              class="table-component__filter__field"
 995 |       >
 996 |       <!---->
 997 |     </div>
 998 |     <div class="table-component__table-wrapper">
 999 |       <table class="table-component__table">
1000 |         <caption role="alert"
1001 |                  aria-live="polite"
1002 |                  class="table-component__table__caption"
1003 |         >
1004 |           Table not sorted
1005 |         </caption>
1006 |         <thead class="table-component__table__head">
1007 |           <tr>
1008 |             <th role="columnheader"
1009 |                 aria-sort="none"
1010 |                 class="table-component__th table-component__th--sort"
1011 |             >
1012 |               First name
1013 |             </th>
1014 |           </tr>
1015 |         </thead>
1016 |         <tbody class="table-component__table__body">
1017 |           <tr>
1018 |             <td>
1019 |               John slot
1020 |             </td>
1021 |           </tr>
1022 |           <tr>
1023 |             <td>
1024 |               Paul slot
1025 |             </td>
1026 |           </tr>
1027 |         </tbody>
1028 |         <tfoot>
1029 |         </tfoot>
1030 |       </table>
1031 |     </div>
1032 |     <!---->
1033 |     <div style="display: none;">
1034 |       <!---->
1035 |     </div>
1036 |     <!---->
1037 |   </div>
1038 | </div>
1039 | 
1040 | `;
1041 | 
1042 | exports[`TableComponent will use the property name as a column heading if label is not set 1`] = `
1043 | 
1044 | <div id="app">
1045 |   <div class="table-component">
1046 |     <!---->
1047 |     <div class="table-component__table-wrapper">
1048 |       <table class="table-component__table">
1049 |         <caption role="alert"
1050 |                  aria-live="polite"
1051 |                  class="table-component__table__caption"
1052 |         >
1053 |           Table not sorted
1054 |         </caption>
1055 |         <thead class="table-component__table__head">
1056 |           <tr>
1057 |             <th role="columnheader"
1058 |                 aria-sort="none"
1059 |                 class="table-component__th table-component__th--sort"
1060 |             >
1061 |               firstName
1062 |             </th>
1063 |           </tr>
1064 |         </thead>
1065 |         <tbody class="table-component__table__body">
1066 |           <tr>
1067 |             <td>
1068 |               John
1069 |             </td>
1070 |           </tr>
1071 |           <tr>
1072 |             <td>
1073 |               Paul
1074 |             </td>
1075 |           </tr>
1076 |         </tbody>
1077 |         <tfoot>
1078 |         </tfoot>
1079 |       </table>
1080 |     </div>
1081 |     <!---->
1082 |     <div style="display: none;">
1083 |       <!---->
1084 |     </div>
1085 |     <!---->
1086 |   </div>
1087 | </div>
1088 | 
1089 | `;
1090 | 
1091 | exports[`TableComponent won't use the property name as a column heading if label is an empty string 1`] = `
1092 | 
1093 | <div id="app">
1094 |   <div class="table-component">
1095 |     <!---->
1096 |     <div class="table-component__table-wrapper">
1097 |       <table class="table-component__table">
1098 |         <caption role="alert"
1099 |                  aria-live="polite"
1100 |                  class="table-component__table__caption"
1101 |         >
1102 |           Table not sorted
1103 |         </caption>
1104 |         <thead class="table-component__table__head">
1105 |           <tr>
1106 |             <th role="columnheader"
1107 |                 aria-sort="none"
1108 |                 class="table-component__th table-component__th--sort"
1109 |             >
1110 |             </th>
1111 |           </tr>
1112 |         </thead>
1113 |         <tbody class="table-component__table__body">
1114 |           <tr>
1115 |             <td>
1116 |               John
1117 |             </td>
1118 |           </tr>
1119 |           <tr>
1120 |             <td>
1121 |               Paul
1122 |             </td>
1123 |           </tr>
1124 |         </tbody>
1125 |         <tfoot>
1126 |         </tfoot>
1127 |       </table>
1128 |     </div>
1129 |     <!---->
1130 |     <div style="display: none;">
1131 |       <!---->
1132 |     </div>
1133 |     <!---->
1134 |   </div>
1135 | </div>
1136 | 
1137 | `;
1138 | 


--------------------------------------------------------------------------------