├── .browserslistrc
├── .circleci
    └── config.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── deploy.sh
├── docs
    ├── .vuepress
    │   ├── components
    │   │   ├── BasicFiltering.vue
    │   │   ├── CustomFiltering.vue
    │   │   ├── InputSpinner.vue
    │   │   ├── Pagination.vue
    │   │   ├── Selection.vue
    │   │   ├── SelectionApi.vue
    │   │   ├── Sorting.vue
    │   │   ├── SortingFA.vue
    │   │   ├── TheBasics.vue
    │   │   └── data.json
    │   └── config.js
    ├── README.md
    ├── filtering
    │   └── README.md
    ├── pagination
    │   └── README.md
    ├── selection
    │   └── README.md
    ├── sorting
    │   └── README.md
    └── the-basics
    │   └── README.md
├── package.json
├── postcss.config.js
├── src
    ├── SmartPagination.vue
    ├── VTable.vue
    ├── VTh.vue
    ├── VTr.vue
    ├── main.js
    ├── store.js
    └── table-utils.js
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── table-utils.spec.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2.1
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node
 6 |     steps:
 7 |       - checkout
 8 |       - run: yarn install
 9 |       - run: yarn test:unit
10 |       - store_test_results:
11 |           path: tests/results
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist
2 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | 
 5 | tests/results
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw*
24 | 
25 | docs/.vuepress/dist
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Hector Romero
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | :fire::fire::fire: Vue 3 support is comming :fire::fire::fire:
 2 | 
 3 | Vue 3 support is already in beta in the `next` branch, the next version also supports Vue 2, you can take a look in the [new documentation site](https://vue-smart-table.netlify.app/).
 4 | 
 5 | # VueJs Smart Table
 6 | 
 7 | Vue Smart Table was created out of the need for a simple highly customizable data table plugin 
 8 | that could take advantage of Vue's slots. It has no dependencies but Vue and because it 
 9 | renders as a standard HTML table it is compatible with CSS Frameworks such as Bootstrap and Foundation.
10 | 
11 | Out of the box you will get filtering, column sorting, client side pagination and row selection.
12 | 
13 | ## Full Documentation
14 | Please read the [documentation](https://tochoromero.github.io/vuejs-smart-table/) to learn how to use it.
15 | 
16 | ## Installation
17 | To install simply run
18 | ```
19 | npm add vuejs-smart-table
20 | ```
21 | or
22 | ```
23 | yarn add vuejs-smart-table
24 | ```
25 | 
26 | Then in your `main.js`
27 | ```js
28 | import SmartTable from 'vuejs-smart-table'
29 | 
30 | Vue.use(SmartTable)
31 | ```
32 | This will globally register four Components: `v-table`, `v-th`, `v-tr` and `smart-pagination`
33 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | set -e
 4 | 
 5 | npm run docs:build
 6 | cd docs/.vuepress/dist
 7 | 
 8 | git init
 9 | git add -A
10 | git commit -m 'deploy'
11 | 
12 | git push -f git@github.com:tochoromero/vuejs-smart-table.git master:gh-pages
13 | 
14 | cd -
15 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/BasicFiltering.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <label>Filter by Name:</label>
 5 |       <input class="form-control" v-model="filters.name.value"/>
 6 | 
 7 |       <v-table
 8 |         :data="users"
 9 |         :filters="filters"
10 |       >
11 |         <thead slot="head">
12 |         <th>Name</th>
13 |         <th>Age</th>
14 |         <th>Email</th>
15 |         <th>Address</th>
16 |         </thead>
17 |         <tbody slot="body" slot-scope="{displayData}">
18 |         <tr v-for="row in displayData" :key="row.guid">
19 |           <td>{{ row.name }}</td>
20 |           <td>{{ row.age }}</td>
21 |           <td>{{ row.email }}</td>
22 |           <td>{{ row.address.street }}, {{ row.address.city }} {{ row.address.state}}</td>
23 |         </tr>
24 |         </tbody>
25 |       </v-table>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import users from './data.json'
32 | import VTable from '../../../src/VTable.vue'
33 | 
34 | export default {
35 |   name: 'BasicFiltering',
36 |   components: { VTable },
37 |   data: () => ({
38 |     users: users.slice(0, 10),
39 |     filters: {
40 |       name: { value: '', keys: ['name'] }
41 |     }
42 |   })
43 | }
44 | </script>
45 | 
46 | <style lang="scss" scoped>
47 |   @import '~bootstrap/dist/css/bootstrap.min.css';
48 | </style>
49 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/CustomFiltering.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <label>Min Age:</label>
 5 | 
 6 |       <InputSpinner
 7 |         v-model="filters.age.value.min"
 8 |         :min="0"
 9 |         :max="filters.age.value.max"
10 |         inputWidth="100px"
11 |       />
12 | 
13 |       <label>Max Age:</label>
14 |       <InputSpinner
15 |         v-model="filters.age.value.max"
16 |         :min="filters.age.value.min"
17 |         :max="99"
18 |         inputWidth="100px"
19 |       />
20 | 
21 |       <v-table
22 |         :data="users"
23 |         :filters="filters"
24 |       >
25 |         <thead slot="head">
26 |         <th>Name</th>
27 |         <th>Age</th>
28 |         <th>Email</th>
29 |         <th>Address</th>
30 |         </thead>
31 |         <tbody slot="body" slot-scope="{displayData}">
32 |         <tr v-for="row in displayData" :key="row.guid">
33 |           <td>{{ row.name }}</td>
34 |           <td>{{ row.age }}</td>
35 |           <td>{{ row.email }}</td>
36 |           <td>
37 |             {{ row.address.street }},
38 |             {{ row.address.city }}
39 |             {{ row.address.state}}
40 |           </td>
41 |         </tr>
42 |         </tbody>
43 |       </v-table>
44 |     </div>
45 |   </div>
46 | </template>
47 | 
48 | <script>
49 | import users from './data.json'
50 | import VTable from '../../../src/VTable.vue'
51 | import InputSpinner from './InputSpinner'
52 | 
53 | export default {
54 |   name: 'CustomFiltering',
55 |   components: { InputSpinner, VTable },
56 |   data () {
57 |     return {
58 |       users,
59 |       filters: {
60 |         age: { value: { min: 21, max: 22 }, custom: this.ageFilter }
61 |       }
62 |     }
63 |   },
64 |   methods: {
65 |     ageFilter (filterValue, row) {
66 |       return row.age >= filterValue.min && row.age <= filterValue.max
67 |     }
68 |   }
69 | }
70 | </script>
71 | 
72 | <style lang="scss" scoped>
73 |   @import '~bootstrap/dist/css/bootstrap.min.css';
74 |   @import '~@fortawesome/fontawesome-free/css/all.css';
75 | </style>
76 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/InputSpinner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="input-group input-spinner"
  4 |          :style="{width: componentWidth, 'min-width': '9rem'}">
  5 |       <div class="input-group-prepend">
  6 |         <button class="btn btn-outline-secondary"
  7 |                 type="button"
  8 |                 :disabled="isSubtractDisabled || disabled"
  9 |                 @click="subtract">
 10 |           <i class="fas fa-minus"/>
 11 |         </button>
 12 |       </div>
 13 | 
 14 |       <input type="number"
 15 |              class="form-control inputSpinner"
 16 |              v-model.number.trim="numValue"
 17 |              :style="inputWidthStyle"
 18 |              :readonly="readonly || disabled"
 19 |              @input="onInput"/>
 20 | 
 21 |       <div class="input-group-append">
 22 |         <button class="btn btn-outline-secondary"
 23 |                 type="button"
 24 |                 :disabled="isAddDisabled || disabled"
 25 |                 @click="add">
 26 |           <i class="fas fa-plus"/>
 27 |         </button>
 28 |       </div>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | 
 35 | export default {
 36 |   name: 'InputSpinner',
 37 |   props: {
 38 |     min: {
 39 |       type: Number,
 40 |       required: false
 41 |     },
 42 |     max: {
 43 |       type: Number,
 44 |       required: false
 45 |     },
 46 |     value: {
 47 |       type: Number,
 48 |       required: false,
 49 |       default: 0
 50 |     },
 51 |     precision: {
 52 |       type: Number,
 53 |       required: false,
 54 |       default: 0
 55 |     },
 56 |     step: {
 57 |       type: Number,
 58 |       required: false,
 59 |       default: 1
 60 |     },
 61 |     inputWidth: {
 62 |       type: String,
 63 |       required: false,
 64 |       default: null
 65 |     },
 66 |     componentWidth: {
 67 |       type: String,
 68 |       required: false,
 69 |       default: '100%'
 70 |     },
 71 |     readonly: {
 72 |       type: Boolean,
 73 |       required: false,
 74 |       default: true
 75 |     },
 76 |     disabled: {
 77 |       type: Boolean,
 78 |       required: false,
 79 |       default: false
 80 |     }
 81 |   },
 82 |   data () {
 83 |     return {
 84 |       numValue: this.value
 85 |     }
 86 |   },
 87 |   computed: {
 88 |     isAddDisabled () {
 89 |       if (!Number.isFinite(this.max)) {
 90 |         return false
 91 |       }
 92 | 
 93 |       return this.numValue + this.step > this.max
 94 |     },
 95 |     isSubtractDisabled () {
 96 |       if (!Number.isFinite(this.min)) {
 97 |         return false
 98 |       }
 99 | 
100 |       return this.numValue - this.step < this.min
101 |     },
102 |     inputWidthStyle () {
103 |       if (this.inputWidth) {
104 |         return {
105 |           'max-width': this.inputWidth,
106 |           'width': this.inputWidth
107 |         }
108 |       }
109 |     }
110 |   },
111 |   watch: {
112 |     value (newValue, oldValue) {
113 |       if (newValue !== oldValue) {
114 |         this.numValue = newValue
115 |       }
116 |     }
117 |   },
118 |   methods: {
119 |     add () {
120 |       if (this.isAddDisabled) {
121 |         return
122 |       }
123 |       this.numValue = Number(this.numValue) + this.step
124 |       this.numValue = Number(this.numValue.toFixed(this.precision))
125 | 
126 |       this.$emit('input', this.numValue)
127 |     },
128 |     subtract () {
129 |       if (this.isSubtractDisabled) {
130 |         return
131 |       }
132 |       this.numValue = Number(this.numValue) - this.step
133 |       this.numValue = Number(this.numValue.toFixed(this.precision))
134 | 
135 |       this.$emit('input', this.numValue)
136 |     },
137 |     onInput (event) {
138 |       const inputValue = event.target.value
139 |       let parsed = Number(parseFloat(inputValue).toFixed(this.precision))
140 | 
141 |       if (isNaN(parsed)) {
142 |         if (typeof this.min === 'number') {
143 |           parsed = this.min
144 |         } else {
145 |           parsed = 0
146 |         }
147 |       }
148 | 
149 |       if (typeof this.min === 'number' && parsed < this.min) {
150 |         parsed = this.min
151 |       }
152 | 
153 |       if (typeof this.max === 'number' && parsed > this.max) {
154 |         parsed = this.max
155 |       }
156 | 
157 |       if (inputValue[0] === '0' && !inputValue.includes('.')) {
158 |         event.target.value = parsed
159 |       }
160 |       this.numValue = parsed
161 | 
162 |       this.$emit('input', this.numValue)
163 |     }
164 |   }
165 | }
166 | </script>
167 | 
168 | <style scoped>
169 |   .inputSpinner {
170 |     background-color: white !important;
171 |     text-align: center;
172 |   }
173 | </style>
174 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <v-table
 5 |         :data="users"
 6 |         :currentPage.sync="currentPage"
 7 |         :pageSize="5"
 8 |         @totalPagesChanged="totalPages = $event"
 9 |       >
10 |         <thead slot="head">
11 |           <th>Name</th>
12 |           <th>Age</th>
13 |           <th>State</th>
14 |           <th>Registered</th>
15 |         </thead>
16 |         <tbody slot="body" slot-scope="{displayData}">
17 |         <tr v-for="row in displayData" :key="row.guid">
18 |           <td>{{ row.name }}</td>
19 |           <td>{{ row.age }}</td>
20 |           <td>{{ row.address.state }}</td>
21 |           <td>{{ row.registered }}</td>
22 |         </tr>
23 |         </tbody>
24 |       </v-table>
25 | 
26 |       <smart-pagination
27 |         :currentPage.sync="currentPage"
28 |         :totalPages="totalPages"
29 |       />
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import users from './data.json'
36 | import VTable from '../../../src/VTable.vue'
37 | import SmartPagination from '../../../src/SmartPagination.vue'
38 | 
39 | export default {
40 |   name: 'Pagination',
41 |   components: { VTable, SmartPagination },
42 |   data: () => ({
43 |     users: users.slice(0, 30),
44 |     currentPage: 1,
45 |     totalPages: 0
46 |   })
47 | }
48 | </script>
49 | 
50 | <style>
51 |   @import "~bootstrap/dist/css/bootstrap.css";
52 | </style>
53 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/Selection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <v-table
 5 |         class="table-hover"
 6 |         ref="usersTable"
 7 |         :data="users"
 8 |         selectionMode="multiple"
 9 |         selectedClass="table-info"
10 |         @selectionChanged="selectedRows = $event"
11 |       >
12 |         <thead slot="head">
13 |         <th>Name</th>
14 |         <th>Age</th>
15 |         <th>State</th>
16 |         <th>Registered</th>
17 |         </thead>
18 |         <tbody slot="body" slot-scope="{displayData}">
19 |         <v-tr
20 |           v-for="row in displayData"
21 |           :key="row.guid"
22 |           :row="row"
23 |         >
24 |           <td>{{ row.name }}</td>
25 |           <td>{{ row.age }}</td>
26 |           <td>{{ row.address.state }}</td>
27 |           <td>{{ row.registered }}</td>
28 |         </v-tr>
29 |         </tbody>
30 |       </v-table>
31 | 
32 |       <strong>Selected:</strong>
33 |       <div v-if="selectedRows.length === 0" class="text-muted">No Rows Selected</div>
34 |       <ul>
35 |         <li v-for="selected in selectedRows">
36 |           {{ selected.name }}
37 |         </li>
38 |       </ul>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 |   import users from './data.json'
45 |   import VTable from '../../../src/VTable.vue'
46 |   import VTr from '../../../src/VTr.vue'
47 | 
48 |   export default {
49 |     name: 'Selection',
50 |     components: { VTable, VTr },
51 |     data: () => ({
52 |       users: users.slice(0, 10),
53 |       selectedRows: []
54 |     })
55 |   }
56 | </script>
57 | 
58 | <style>
59 |   @import "~bootstrap/dist/css/bootstrap.css";
60 | </style>
61 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/SelectionApi.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <button
 5 |         class="btn btn-outline-secondary"
 6 |         @click="selectAll"
 7 |       >
 8 |         Select All
 9 |       </button>
10 | 
11 |       <button
12 |         class="btn btn-outline-secondary"
13 |         @click="deselectAll"
14 |       >
15 |         Deselect All
16 |       </button>
17 |       <v-table
18 |         ref="usersTable"
19 |         :data="users"
20 |         selectionMode="multiple"
21 |         selectedClass="table-info"
22 |         @selectionChanged="selectedRows = $event"
23 |       >
24 |         <thead slot="head">
25 |         <th>Name</th>
26 |         <th>Age</th>
27 |         <th>State</th>
28 |         <th>Registered</th>
29 |         </thead>
30 |         <tbody slot="body" slot-scope="{displayData}">
31 |         <v-tr
32 |           v-for="row in displayData"
33 |           :key="row.guid"
34 |           :row="row"
35 |         >
36 |           <td>{{ row.name }}</td>
37 |           <td>{{ row.age }}</td>
38 |           <td>{{ row.address.state }}</td>
39 |           <td>{{ row.registered }}</td>
40 |         </v-tr>
41 |         </tbody>
42 |       </v-table>
43 | 
44 |       <strong>Selected:</strong>
45 |       <div v-if="selectedRows.length === 0" class="text-muted">No Rows Selected</div>
46 |       <ul>
47 |         <li v-for="selected in selectedRows">
48 |           {{ selected.name }}
49 |         </li>
50 |       </ul>
51 |     </div>
52 |   </div>
53 | </template>
54 | 
55 | <script>
56 |   import users from './data.json'
57 |   import VTable from '../../../src/VTable.vue'
58 |   import VTr from '../../../src/VTr.vue'
59 | 
60 |   export default {
61 |     name: 'Sorting',
62 |     components: { VTable, VTr },
63 |     data: () => ({
64 |       users: users.slice(0, 10),
65 |       selectedRows: []
66 |     }),
67 |     mounted () {
68 |       this.$refs.usersTable.selectRows(this.users.slice(1, 4))
69 |     },
70 |     methods: {
71 |       selectAll () {
72 |         this.$refs.usersTable.selectAll()
73 |       },
74 |       deselectAll () {
75 |         this.$refs.usersTable.deselectAll()
76 |       }
77 |     }
78 |   }
79 | </script>
80 | 
81 | <style>
82 |   @import "~bootstrap/dist/css/bootstrap.css";
83 | </style>
84 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/Sorting.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <v-table
 5 |         :data="users"
 6 |       >
 7 |         <thead slot="head">
 8 |           <v-th :sortKey="nameLength" defaultSort="desc">Name</v-th>
 9 |           <v-th sortKey="age">Age</v-th>
10 |           <v-th sortKey="address.state">State</v-th>
11 |           <v-th :customSort="dateSort">Registered</v-th>
12 |         </thead>
13 |         <tbody slot="body" slot-scope="{displayData}">
14 |           <tr v-for="row in displayData" :key="row.guid">
15 |             <td>{{ row.name }}</td>
16 |             <td>{{ row.age }}</td>
17 |             <td>{{ row.address.state }}</td>
18 |             <td>{{ row.registered }}</td>
19 |           </tr>
20 |         </tbody>
21 |       </v-table>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import users from './data.json'
28 | import VTable from '../../../src/VTable.vue'
29 | import VTh from '../../../src/VTh.vue'
30 | 
31 | export default {
32 |   name: 'Sorting',
33 |   components: { VTable, VTh },
34 |   data: () => ({
35 |     users: users.slice(0, 10)
36 |   }),
37 |   methods: {
38 |     nameLength (row) {
39 |       return row.name.length
40 |     },
41 |     dateSort(a, b) {
42 |       let date1 = new Date(a.registered).getTime();
43 |       let date2 = new Date(b.registered).getTime();
44 | 
45 |       return date1 - date2;
46 |     }
47 |   }
48 | }
49 | </script>
50 | 
51 | <style>
52 |   @import "~bootstrap/dist/css/bootstrap.css";
53 | </style>
54 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/SortingFA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mt-3">
 3 |     <div class="card-body">
 4 |       <v-table
 5 |         :data="users"
 6 |         :hideSortIcons="true"
 7 |       >
 8 |         <thead slot="head">
 9 |           <v-th sortKey="name" defaultSort="asc">Name</v-th>
10 |           <v-th sortKey="age">Age</v-th>
11 |           <v-th sortKey="address.state">State</v-th>
12 |         </thead>
13 |         <tbody slot="body" slot-scope="{displayData}">
14 |           <tr v-for="row in displayData" :key="row.guid">
15 |             <td>{{ row.name }}</td>
16 |             <td>{{ row.age }}</td>
17 |             <td>{{ row.address.state }}</td>
18 |           </tr>
19 |         </tbody>
20 |       </v-table>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import users from './data.json'
27 | import VTable from '../../../src/VTable.vue'
28 | import VTh from '../../../src/VTh.vue'
29 | 
30 | export default {
31 |   name: 'SortingFA',
32 |   components: { VTable, VTh },
33 |   data: () => ({
34 |     users: users.slice(20, 30)
35 |   })
36 | }
37 | </script>
38 | 
39 | <style>
40 |   @import "~@fortawesome/fontawesome-free/css/all.css";
41 |   @import "~bootstrap/dist/css/bootstrap.css";
42 | 
43 |   .vt-sort:before{
44 |     font-family: "Font Awesome 5 Free";
45 |     padding-right: 0.5em;
46 |     width: 1.28571429em;
47 |     display: inline-block;
48 |     text-align: center;
49 |   }
50 | 
51 |   .vt-sortable:before{
52 |     content: "\f338";
53 |   }
54 | 
55 |   .vt-asc:before{
56 |     content: "\f160";
57 |   }
58 | 
59 |   .vt-desc:before{
60 |     content: "\f161";
61 |   }
62 | </style>
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/TheBasics.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-table
 3 |     :data="data"
 4 |   >
 5 |     <thead slot="head">
 6 |     <th>Name</th>
 7 |     <th>Age</th>
 8 |     <th>Email</th>
 9 |     <th>Address</th>
10 |     </thead>
11 |     <tbody slot="body" slot-scope="{displayData}">
12 |     <tr v-for="row in displayData" :key="row.guid">
13 |       <td>{{ row.name }}</td>
14 |       <td>{{ row.age }}</td>
15 |       <td>{{ row.email }}</td>
16 |       <td>{{ row.address.street }}, {{ row.address.city }} {{ row.address.state}}</td>
17 |     </tr>
18 |     </tbody>
19 |   </v-table>
20 | </template>
21 | 
22 | <script>
23 | import data from './data.json'
24 | import VTable from '../../../src/VTable.vue'
25 | 
26 | export default {
27 |   name: 'TheBasics',
28 |   components: { VTable },
29 |   data: () => ({
30 |     data: data.slice(0, 5)
31 |   })
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/data.json:
--------------------------------------------------------------------------------
   1 | [
   2 |   {
   3 |     "_id": "57ef9cd8e22df324d77c4f07",
   4 |     "index": 0,
   5 |     "guid": "9bc8e89d-658c-47cf-acc3-b0e225ddb549",
   6 |     "isActive": false,
   7 |     "balance": "$1,029.59",
   8 |     "picture": "http://placehold.it/32x32",
   9 |     "age": 25,
  10 |     "eyeColor": "green",
  11 |     "name": "Deana Lindsay",
  12 |     "gender": "female",
  13 |     "company": "TERRAGO",
  14 |     "email": "deanalindsay@terrago.com",
  15 |     "phone": "+1 (858) 506-2166",
  16 |     "address": {
  17 |       "street": "268 Garnet Street",
  18 |       "city": "Chicopee",
  19 |       "state": "Pennsylvania"
  20 |     },
  21 |     "registered": "2015-10-30",
  22 |     "tags": [
  23 |       "reprehenderit",
  24 |       "duis",
  25 |       "mollit",
  26 |       "eiusmod",
  27 |       "incididunt",
  28 |       "nisi",
  29 |       "sunt"
  30 |     ]
  31 |   },
  32 |   {
  33 |     "_id": "57ef9cd8392af802937a0974",
  34 |     "index": 1,
  35 |     "guid": "1436aae5-4540-474a-8bad-4ca6b9c903ac",
  36 |     "isActive": true,
  37 |     "balance": "$1,302.22",
  38 |     "picture": "http://placehold.it/32x32",
  39 |     "age": 39,
  40 |     "eyeColor": "blue",
  41 |     "name": "Wyatt Kline",
  42 |     "gender": "male",
  43 |     "company": "MEDMEX",
  44 |     "email": "wyattkline@medmex.com",
  45 |     "phone": "+1 (827) 579-2502",
  46 |     "address": {
  47 |       "street": "234 Irwin Street",
  48 |       "city": "Irwin",
  49 |       "state": "Maine"
  50 |     },
  51 |     "registered": "2014-06-17",
  52 |     "tags": [
  53 |       "aute",
  54 |       "laboris",
  55 |       "sit",
  56 |       "voluptate",
  57 |       "magna",
  58 |       "voluptate",
  59 |       "occaecat"
  60 |     ]
  61 |   },
  62 |   {
  63 |     "_id": "57ef9cd865c7f5203dc5e126",
  64 |     "index": 2,
  65 |     "guid": "2bc5aad6-2172-4041-a949-b31729290f25",
  66 |     "isActive": true,
  67 |     "balance": "$3,066.01",
  68 |     "picture": "http://placehold.it/32x32",
  69 |     "age": 29,
  70 |     "eyeColor": "green",
  71 |     "name": "Harmon Huber",
  72 |     "gender": "male",
  73 |     "company": "SNIPS",
  74 |     "email": "harmonhuber@snips.com",
  75 |     "phone": "+1 (931) 482-3018",
  76 |     "address": {
  77 |       "street": "913 Gerritsen Avenue",
  78 |       "city": "Nash",
  79 |       "state": "American Samoa"
  80 |     },
  81 |     "registered": "2016-01-25",
  82 |     "tags": [
  83 |       "do",
  84 |       "voluptate",
  85 |       "id",
  86 |       "do",
  87 |       "occaecat",
  88 |       "minim",
  89 |       "tempor"
  90 |     ]
  91 |   },
  92 |   {
  93 |     "_id": "57ef9cd8594cc4bc18a121f7",
  94 |     "index": 3,
  95 |     "guid": "5d48aae2-9e3c-434e-a835-3abdab56e240",
  96 |     "isActive": false,
  97 |     "balance": "$3,574.33",
  98 |     "picture": "http://placehold.it/32x32",
  99 |     "age": 29,
 100 |     "eyeColor": "green",
 101 |     "name": "Penny Maddox",
 102 |     "gender": "female",
 103 |     "company": "BALUBA",
 104 |     "email": "pennymaddox@baluba.com",
 105 |     "phone": "+1 (873) 552-2338",
 106 |     "address": {
 107 |       "street": "218 Agate Court",
 108 |       "city": "Sandston",
 109 |       "state": "Oregon"
 110 |     },
 111 |     "registered": "2016-01-08",
 112 |     "tags": [
 113 |       "anim",
 114 |       "aliqua",
 115 |       "consequat",
 116 |       "tempor",
 117 |       "excepteur",
 118 |       "est",
 119 |       "enim"
 120 |     ]
 121 |   },
 122 |   {
 123 |     "_id": "57ef9cd846b7cd74053c10c9",
 124 |     "index": 4,
 125 |     "guid": "3c4a0399-68c9-4741-8c77-0e7e0dd9ed00",
 126 |     "isActive": true,
 127 |     "balance": "$1,363.39",
 128 |     "picture": "http://placehold.it/32x32",
 129 |     "age": 39,
 130 |     "eyeColor": "brown",
 131 |     "name": "Morgan Gomez",
 132 |     "gender": "male",
 133 |     "company": "AFFLUEX",
 134 |     "email": "morgangomez@affluex.com",
 135 |     "phone": "+1 (976) 466-3779",
 136 |     "address": {
 137 |       "street": "632 Highland Avenue",
 138 |       "city": "Tuttle",
 139 |       "state": "Connecticut"
 140 |     },
 141 |     "registered": "2014-04-10",
 142 |     "tags": [
 143 |       "duis",
 144 |       "deserunt",
 145 |       "id",
 146 |       "nostrud",
 147 |       "mollit",
 148 |       "consequat",
 149 |       "ea"
 150 |     ]
 151 |   },
 152 |   {
 153 |     "_id": "57ef9cd8d429bf34a0c2dc36",
 154 |     "index": 5,
 155 |     "guid": "d321b26f-f8ce-461e-9673-5b9497aacea7",
 156 |     "isActive": false,
 157 |     "balance": "$1,469.54",
 158 |     "picture": "http://placehold.it/32x32",
 159 |     "age": 35,
 160 |     "eyeColor": "green",
 161 |     "name": "Beck Mckay",
 162 |     "gender": "male",
 163 |     "company": "GEOLOGIX",
 164 |     "email": "beckmckay@geologix.com",
 165 |     "phone": "+1 (879) 477-3341",
 166 |     "address": {
 167 |       "street": "936 Woodpoint Road",
 168 |       "city": "Wakulla",
 169 |       "state": "Mississippi"
 170 |     },
 171 |     "registered": "2016-05-06",
 172 |     "tags": [
 173 |       "non",
 174 |       "cillum",
 175 |       "culpa",
 176 |       "irure",
 177 |       "nulla",
 178 |       "non",
 179 |       "occaecat"
 180 |     ]
 181 |   },
 182 |   {
 183 |     "_id": "57ef9cd86866468dc1c20447",
 184 |     "index": 6,
 185 |     "guid": "c097a185-98ee-4bdd-a6ec-a3e5e40801be",
 186 |     "isActive": true,
 187 |     "balance": "$3,125.22",
 188 |     "picture": "http://placehold.it/32x32",
 189 |     "age": 39,
 190 |     "eyeColor": "blue",
 191 |     "name": "Massey Carlson",
 192 |     "gender": "male",
 193 |     "company": "EARTHWAX",
 194 |     "email": "masseycarlson@earthwax.com",
 195 |     "phone": "+1 (871) 471-2647",
 196 |     "address": {
 197 |       "street": "278 Chapel Street",
 198 |       "city": "Taycheedah",
 199 |       "state": "Hawaii"
 200 |     },
 201 |     "registered": "2014-10-22",
 202 |     "tags": [
 203 |       "ullamco",
 204 |       "fugiat",
 205 |       "consequat",
 206 |       "nostrud",
 207 |       "aliqua",
 208 |       "consequat",
 209 |       "fugiat"
 210 |     ]
 211 |   },
 212 |   {
 213 |     "_id": "57ef9cd83f55c1d078fc6cfd",
 214 |     "index": 7,
 215 |     "guid": "29e53cbb-6353-44a3-a2c8-e7b3176d00af",
 216 |     "isActive": false,
 217 |     "balance": "$3,663.46",
 218 |     "picture": "http://placehold.it/32x32",
 219 |     "age": 33,
 220 |     "eyeColor": "blue",
 221 |     "name": "Hill Hale",
 222 |     "gender": "male",
 223 |     "company": "CALCU",
 224 |     "email": "hillhale@calcu.com",
 225 |     "phone": "+1 (877) 598-2610",
 226 |     "address": {
 227 |       "street": "618 Newport Street",
 228 |       "city": "Deercroft",
 229 |       "state": "Colorado"
 230 |     },
 231 |     "registered": "2016-04-18",
 232 |     "tags": [
 233 |       "nostrud",
 234 |       "duis",
 235 |       "Lorem",
 236 |       "ex",
 237 |       "elit",
 238 |       "labore",
 239 |       "in"
 240 |     ]
 241 |   },
 242 |   {
 243 |     "_id": "57ef9cd8f8863a277e1c2055",
 244 |     "index": 8,
 245 |     "guid": "955a6cd5-b73c-4a6c-9280-76cbc4e232b2",
 246 |     "isActive": false,
 247 |     "balance": "$2,451.20",
 248 |     "picture": "http://placehold.it/32x32",
 249 |     "age": 26,
 250 |     "eyeColor": "blue",
 251 |     "name": "Stokes Hurst",
 252 |     "gender": "male",
 253 |     "company": "DATAGEN",
 254 |     "email": "stokeshurst@datagen.com",
 255 |     "phone": "+1 (897) 537-2718",
 256 |     "address": {
 257 |       "street": "146 Conover Street",
 258 |       "city": "Dahlen",
 259 |       "state": "North Dakota"
 260 |     },
 261 |     "registered": "2016-01-30",
 262 |     "tags": [
 263 |       "est",
 264 |       "eu",
 265 |       "anim",
 266 |       "eiusmod",
 267 |       "exercitation",
 268 |       "commodo",
 269 |       "nulla"
 270 |     ]
 271 |   },
 272 |   {
 273 |     "_id": "57ef9cd86b62971bb96f7603",
 274 |     "index": 9,
 275 |     "guid": "239a3301-1dae-4ef8-ae30-7e92a84c78a2",
 276 |     "isActive": false,
 277 |     "balance": "$1,753.67",
 278 |     "picture": "http://placehold.it/32x32",
 279 |     "age": 20,
 280 |     "eyeColor": "green",
 281 |     "name": "Cain Knapp",
 282 |     "gender": "male",
 283 |     "company": "NAMEBOX",
 284 |     "email": "cainknapp@namebox.com",
 285 |     "phone": "+1 (873) 435-3377",
 286 |     "address": {
 287 |       "street": "460 Bridgewater Street",
 288 |       "city": "Manchester",
 289 |       "state": "Michigan"
 290 |     },
 291 |     "registered": "2016-01-04",
 292 |     "tags": [
 293 |       "fugiat",
 294 |       "non",
 295 |       "adipisicing",
 296 |       "id",
 297 |       "incididunt",
 298 |       "do",
 299 |       "enim"
 300 |     ]
 301 |   },
 302 |   {
 303 |     "_id": "57ef9cd8431bccda13eea218",
 304 |     "index": 10,
 305 |     "guid": "b5671cc8-2776-4180-9cab-2f26fd38c720",
 306 |     "isActive": false,
 307 |     "balance": "$1,619.16",
 308 |     "picture": "http://placehold.it/32x32",
 309 |     "age": 22,
 310 |     "eyeColor": "brown",
 311 |     "name": "Ramirez Valdez",
 312 |     "gender": "male",
 313 |     "company": "SOLAREN",
 314 |     "email": "ramirezvaldez@solaren.com",
 315 |     "phone": "+1 (820) 465-2360",
 316 |     "address": {
 317 |       "street": "932 Battery Avenue",
 318 |       "city": "Iola",
 319 |       "state": "Virginia"
 320 |     },
 321 |     "registered": "2014-01-27",
 322 |     "tags": [
 323 |       "minim",
 324 |       "aliqua",
 325 |       "culpa",
 326 |       "dolore",
 327 |       "excepteur",
 328 |       "minim",
 329 |       "sit"
 330 |     ]
 331 |   },
 332 |   {
 333 |     "_id": "57ef9cd8e7379045d04a0540",
 334 |     "index": 11,
 335 |     "guid": "19b39b01-74e1-495c-b7a6-a88d66420fba",
 336 |     "isActive": false,
 337 |     "balance": "$1,638.78",
 338 |     "picture": "http://placehold.it/32x32",
 339 |     "age": 39,
 340 |     "eyeColor": "brown",
 341 |     "name": "Alisha Michael",
 342 |     "gender": "female",
 343 |     "company": "STUCCO",
 344 |     "email": "alishamichael@stucco.com",
 345 |     "phone": "+1 (800) 497-2778",
 346 |     "address": {
 347 |       "street": "184 Coffey Street",
 348 |       "city": "Trucksville",
 349 |       "state": "New York"
 350 |     },
 351 |     "registered": "2015-03-31",
 352 |     "tags": [
 353 |       "irure",
 354 |       "dolore",
 355 |       "minim",
 356 |       "excepteur",
 357 |       "aliquip",
 358 |       "officia",
 359 |       "fugiat"
 360 |     ]
 361 |   },
 362 |   {
 363 |     "_id": "57ef9cd8059fd44b460b7c38",
 364 |     "index": 12,
 365 |     "guid": "2a3054d0-a2ea-4ee2-a2f5-f5d1d0573b11",
 366 |     "isActive": true,
 367 |     "balance": "$1,156.43",
 368 |     "picture": "http://placehold.it/32x32",
 369 |     "age": 21,
 370 |     "eyeColor": "brown",
 371 |     "name": "Shepard Russo",
 372 |     "gender": "male",
 373 |     "company": "MAXIMIND",
 374 |     "email": "shepardrusso@maximind.com",
 375 |     "phone": "+1 (810) 417-3060",
 376 |     "address": {
 377 |       "street": "450 Stryker Court",
 378 |       "city": "Eagleville",
 379 |       "state": "South Dakota"
 380 |     },
 381 |     "registered": "2014-12-17",
 382 |     "tags": [
 383 |       "qui",
 384 |       "irure",
 385 |       "pariatur",
 386 |       "eiusmod",
 387 |       "tempor",
 388 |       "ullamco",
 389 |       "aliquip"
 390 |     ]
 391 |   },
 392 |   {
 393 |     "_id": "57ef9cd8afc877c47ac02b6a",
 394 |     "index": 13,
 395 |     "guid": "7ad0c0a8-59ca-457f-9b41-fd1ae83b4f60",
 396 |     "isActive": false,
 397 |     "balance": "$2,376.34",
 398 |     "picture": "http://placehold.it/32x32",
 399 |     "age": 39,
 400 |     "eyeColor": "blue",
 401 |     "name": "Joyner Cohen",
 402 |     "gender": "male",
 403 |     "company": "LYRIA",
 404 |     "email": "joynercohen@lyria.com",
 405 |     "phone": "+1 (962) 595-2903",
 406 |     "address": {
 407 |       "street": "304 Calder Place",
 408 |       "city": "Choctaw",
 409 |       "state": "Louisiana"
 410 |     },
 411 |     "registered": "2016-04-30",
 412 |     "tags": [
 413 |       "in",
 414 |       "sunt",
 415 |       "cupidatat",
 416 |       "nostrud",
 417 |       "laboris",
 418 |       "culpa",
 419 |       "consequat"
 420 |     ]
 421 |   },
 422 |   {
 423 |     "_id": "57ef9cd8aa516857d091b670",
 424 |     "index": 14,
 425 |     "guid": "47be1205-5fde-4a1b-ba80-5ab56e659c32",
 426 |     "isActive": false,
 427 |     "balance": "$1,837.95",
 428 |     "picture": "http://placehold.it/32x32",
 429 |     "age": 32,
 430 |     "eyeColor": "blue",
 431 |     "name": "Doreen Vincent",
 432 |     "gender": "female",
 433 |     "company": "VANTAGE",
 434 |     "email": "doreenvincent@vantage.com",
 435 |     "phone": "+1 (972) 484-2153",
 436 |     "address": {
 437 |       "street": "520 Greenpoint Avenue",
 438 |       "city": "Chapin",
 439 |       "state": "Rhode Island"
 440 |     },
 441 |     "registered": "2015-12-11",
 442 |     "tags": [
 443 |       "cillum",
 444 |       "aute",
 445 |       "Lorem",
 446 |       "occaecat",
 447 |       "eu",
 448 |       "voluptate",
 449 |       "ea"
 450 |     ]
 451 |   },
 452 |   {
 453 |     "_id": "57ef9cd8778023bd5ebc71df",
 454 |     "index": 15,
 455 |     "guid": "3efedc36-6bcd-4f78-b64e-11f6c3374ff0",
 456 |     "isActive": true,
 457 |     "balance": "$3,412.92",
 458 |     "picture": "http://placehold.it/32x32",
 459 |     "age": 34,
 460 |     "eyeColor": "green",
 461 |     "name": "Felicia Osborne",
 462 |     "gender": "female",
 463 |     "company": "XELEGYL",
 464 |     "email": "feliciaosborne@xelegyl.com",
 465 |     "phone": "+1 (884) 448-3923",
 466 |     "address": {
 467 |       "street": "895 Luquer Street",
 468 |       "city": "Bluffview",
 469 |       "state": "Alabama"
 470 |     },
 471 |     "registered": "2015-04-11",
 472 |     "tags": [
 473 |       "elit",
 474 |       "veniam",
 475 |       "consectetur",
 476 |       "sunt",
 477 |       "ipsum",
 478 |       "incididunt",
 479 |       "adipisicing"
 480 |     ]
 481 |   },
 482 |   {
 483 |     "_id": "57ef9cd862a19b82a2b57c2a",
 484 |     "index": 16,
 485 |     "guid": "2a08992f-b1ca-4a75-9b4c-df4ba052f3b2",
 486 |     "isActive": false,
 487 |     "balance": "$2,053.01",
 488 |     "picture": "http://placehold.it/32x32",
 489 |     "age": 35,
 490 |     "eyeColor": "green",
 491 |     "name": "Dillon Schmidt",
 492 |     "gender": "male",
 493 |     "company": "KEEG",
 494 |     "email": "dillonschmidt@keeg.com",
 495 |     "phone": "+1 (869) 554-3796",
 496 |     "address": {
 497 |       "street": "344 Sullivan Place",
 498 |       "city": "Bawcomville",
 499 |       "state": "Palau"
 500 |     },
 501 |     "registered": "2016-07-04",
 502 |     "tags": [
 503 |       "mollit",
 504 |       "duis",
 505 |       "pariatur",
 506 |       "velit",
 507 |       "Lorem",
 508 |       "Lorem",
 509 |       "anim"
 510 |     ]
 511 |   },
 512 |   {
 513 |     "_id": "57ef9cd8b2b36698294cfb64",
 514 |     "index": 17,
 515 |     "guid": "9644a804-0216-49c7-8625-d15a3bfb31c5",
 516 |     "isActive": false,
 517 |     "balance": "$2,507.00",
 518 |     "picture": "http://placehold.it/32x32",
 519 |     "age": 40,
 520 |     "eyeColor": "blue",
 521 |     "name": "Melody Miranda",
 522 |     "gender": "female",
 523 |     "company": "ENTHAZE",
 524 |     "email": "melodymiranda@enthaze.com",
 525 |     "phone": "+1 (849) 464-3618",
 526 |     "address": {
 527 |       "street": "418 Whitney Avenue",
 528 |       "city": "Sanders",
 529 |       "state": "Indiana"
 530 |     },
 531 |     "registered": "2014-04-22",
 532 |     "tags": [
 533 |       "consequat",
 534 |       "commodo",
 535 |       "magna",
 536 |       "aute",
 537 |       "occaecat",
 538 |       "ea",
 539 |       "minim"
 540 |     ]
 541 |   },
 542 |   {
 543 |     "_id": "57ef9cd8410de3de4768210a",
 544 |     "index": 18,
 545 |     "guid": "3859f0d4-cc87-4d6b-b101-e867b8e5c0cc",
 546 |     "isActive": false,
 547 |     "balance": "$2,737.68",
 548 |     "picture": "http://placehold.it/32x32",
 549 |     "age": 36,
 550 |     "eyeColor": "green",
 551 |     "name": "Wilkerson Melendez",
 552 |     "gender": "male",
 553 |     "company": "TECHMANIA",
 554 |     "email": "wilkersonmelendez@techmania.com",
 555 |     "phone": "+1 (952) 481-3063",
 556 |     "address": {
 557 |       "street": "818 Ocean Parkway",
 558 |       "city": "Kerby",
 559 |       "state": "Iowa"
 560 |     },
 561 |     "registered": "2014-11-14",
 562 |     "tags": [
 563 |       "sit",
 564 |       "cupidatat",
 565 |       "aliqua",
 566 |       "in",
 567 |       "officia",
 568 |       "pariatur",
 569 |       "ex"
 570 |     ]
 571 |   },
 572 |   {
 573 |     "_id": "57ef9cd8bda3e38af810f58a",
 574 |     "index": 19,
 575 |     "guid": "90af70fd-1241-4d07-b3f0-727f7987a60c",
 576 |     "isActive": true,
 577 |     "balance": "$1,028.57",
 578 |     "picture": "http://placehold.it/32x32",
 579 |     "age": 37,
 580 |     "eyeColor": "blue",
 581 |     "name": "Rivera Velazquez",
 582 |     "gender": "male",
 583 |     "company": "GLEAMINK",
 584 |     "email": "riveravelazquez@gleamink.com",
 585 |     "phone": "+1 (973) 597-3283",
 586 |     "address": {
 587 |       "street": "330 Monaco Place",
 588 |       "city": "Grahamtown",
 589 |       "state": "Northern Mariana Islands"
 590 |     },
 591 |     "registered": "2016-01-10",
 592 |     "tags": [
 593 |       "excepteur",
 594 |       "est",
 595 |       "occaecat",
 596 |       "nulla",
 597 |       "nostrud",
 598 |       "eu",
 599 |       "ipsum"
 600 |     ]
 601 |   },
 602 |   {
 603 |     "_id": "57ef9cd8351d9509288c8469",
 604 |     "index": 20,
 605 |     "guid": "c9f0b7e4-f7ec-44b5-ba6b-d9991bb3404b",
 606 |     "isActive": true,
 607 |     "balance": "$2,456.41",
 608 |     "picture": "http://placehold.it/32x32",
 609 |     "age": 35,
 610 |     "eyeColor": "blue",
 611 |     "name": "Reese Velez",
 612 |     "gender": "male",
 613 |     "company": "POLARIA",
 614 |     "email": "reesevelez@polaria.com",
 615 |     "phone": "+1 (950) 549-3805",
 616 |     "address": {
 617 |       "street": "571 Wilson Avenue",
 618 |       "city": "Hannasville",
 619 |       "state": "Tennessee"
 620 |     },
 621 |     "registered": "2016-07-24",
 622 |     "tags": [
 623 |       "veniam",
 624 |       "occaecat",
 625 |       "irure",
 626 |       "consequat",
 627 |       "labore",
 628 |       "laboris",
 629 |       "Lorem"
 630 |     ]
 631 |   },
 632 |   {
 633 |     "_id": "57ef9cd8014e14851bee0084",
 634 |     "index": 21,
 635 |     "guid": "6691378e-7cb9-4bff-ac93-a79fadfa49d1",
 636 |     "isActive": false,
 637 |     "balance": "$3,892.36",
 638 |     "picture": "http://placehold.it/32x32",
 639 |     "age": 33,
 640 |     "eyeColor": "blue",
 641 |     "name": "Kayla Morgan",
 642 |     "gender": "female",
 643 |     "company": "VIDTO",
 644 |     "email": "kaylamorgan@vidto.com",
 645 |     "phone": "+1 (976) 499-2436",
 646 |     "address": {
 647 |       "street": "188 Lancaster Avenue",
 648 |       "city": "Bowden",
 649 |       "state": "District Of Columbia"
 650 |     },
 651 |     "registered": "2015-12-16",
 652 |     "tags": [
 653 |       "minim",
 654 |       "proident",
 655 |       "sunt",
 656 |       "nostrud",
 657 |       "adipisicing",
 658 |       "cupidatat",
 659 |       "veniam"
 660 |     ]
 661 |   },
 662 |   {
 663 |     "_id": "57ef9cd810b76a3d60fb0b9b",
 664 |     "index": 22,
 665 |     "guid": "26e927c7-63c5-4e82-bdc0-7832cb890156",
 666 |     "isActive": false,
 667 |     "balance": "$3,668.66",
 668 |     "picture": "http://placehold.it/32x32",
 669 |     "age": 20,
 670 |     "eyeColor": "brown",
 671 |     "name": "Benson Snyder",
 672 |     "gender": "male",
 673 |     "company": "ZOSIS",
 674 |     "email": "bensonsnyder@zosis.com",
 675 |     "phone": "+1 (923) 595-3264",
 676 |     "address": {
 677 |       "street": "294 Douglass Street",
 678 |       "city": "Hiseville",
 679 |       "state": "Marshall Islands"
 680 |     },
 681 |     "registered": "2016-07-02",
 682 |     "tags": [
 683 |       "sint",
 684 |       "amet",
 685 |       "cillum",
 686 |       "exercitation",
 687 |       "Lorem",
 688 |       "amet",
 689 |       "ad"
 690 |     ]
 691 |   },
 692 |   {
 693 |     "_id": "57ef9cd8d6e3b40316003054",
 694 |     "index": 23,
 695 |     "guid": "248e3d33-6827-461b-a92e-408a4927d5dc",
 696 |     "isActive": true,
 697 |     "balance": "$2,253.39",
 698 |     "picture": "http://placehold.it/32x32",
 699 |     "age": 32,
 700 |     "eyeColor": "green",
 701 |     "name": "Strickland Andrews",
 702 |     "gender": "male",
 703 |     "company": "COMBOT",
 704 |     "email": "stricklandandrews@combot.com",
 705 |     "phone": "+1 (969) 560-2376",
 706 |     "address": {
 707 |       "street": "677 Albemarle Road",
 708 |       "city": "Thornport",
 709 |       "state": "Florida"
 710 |     },
 711 |     "registered": "2015-06-15",
 712 |     "tags": [
 713 |       "culpa",
 714 |       "nulla",
 715 |       "excepteur",
 716 |       "incididunt",
 717 |       "nulla",
 718 |       "mollit",
 719 |       "occaecat"
 720 |     ]
 721 |   },
 722 |   {
 723 |     "_id": "57ef9cd8bbf66c3b7757b773",
 724 |     "index": 24,
 725 |     "guid": "303c36fd-14e0-49f7-b6de-01c6cf866313",
 726 |     "isActive": false,
 727 |     "balance": "$1,248.11",
 728 |     "picture": "http://placehold.it/32x32",
 729 |     "age": 21,
 730 |     "eyeColor": "blue",
 731 |     "name": "Castro Hanson",
 732 |     "gender": "male",
 733 |     "company": "FURNITECH",
 734 |     "email": "castrohanson@furnitech.com",
 735 |     "phone": "+1 (901) 512-2724",
 736 |     "address": {
 737 |       "street": "932 Herkimer Court",
 738 |       "city": "Cavalero",
 739 |       "state": "Texas"
 740 |     },
 741 |     "registered": "2014-12-07",
 742 |     "tags": [
 743 |       "est",
 744 |       "aliqua",
 745 |       "enim",
 746 |       "ex",
 747 |       "Lorem",
 748 |       "nostrud",
 749 |       "eiusmod"
 750 |     ]
 751 |   },
 752 |   {
 753 |     "_id": "57ef9cd8aa22d92e5c82b2f6",
 754 |     "index": 25,
 755 |     "guid": "fd997458-836f-4d24-bbab-a0aa26e68c2d",
 756 |     "isActive": false,
 757 |     "balance": "$1,264.43",
 758 |     "picture": "http://placehold.it/32x32",
 759 |     "age": 21,
 760 |     "eyeColor": "blue",
 761 |     "name": "Iris Nielsen",
 762 |     "gender": "female",
 763 |     "company": "ROUGHIES",
 764 |     "email": "irisnielsen@roughies.com",
 765 |     "phone": "+1 (916) 468-3250",
 766 |     "address": {
 767 |       "street": "824 Doscher Street",
 768 |       "city": "Goodville",
 769 |       "state": "South Carolina"
 770 |     },
 771 |     "registered": "2015-08-01",
 772 |     "tags": [
 773 |       "sint",
 774 |       "voluptate",
 775 |       "adipisicing",
 776 |       "id",
 777 |       "eiusmod",
 778 |       "veniam",
 779 |       "excepteur"
 780 |     ]
 781 |   },
 782 |   {
 783 |     "_id": "57ef9cd8e00712c4924d6413",
 784 |     "index": 26,
 785 |     "guid": "f6b3c048-e563-4fa6-a28f-d358c5b4f74c",
 786 |     "isActive": true,
 787 |     "balance": "$1,462.23",
 788 |     "picture": "http://placehold.it/32x32",
 789 |     "age": 23,
 790 |     "eyeColor": "blue",
 791 |     "name": "Dionne Boyer",
 792 |     "gender": "female",
 793 |     "company": "PETIGEMS",
 794 |     "email": "dionneboyer@petigems.com",
 795 |     "phone": "+1 (826) 510-3961",
 796 |     "address": {
 797 |       "street": "483 Prospect Avenue",
 798 |       "city": "Forestburg",
 799 |       "state": "Nevada"
 800 |     },
 801 |     "registered": "2016-09-09",
 802 |     "tags": [
 803 |       "ipsum",
 804 |       "id",
 805 |       "eiusmod",
 806 |       "laboris",
 807 |       "incididunt",
 808 |       "deserunt",
 809 |       "anim"
 810 |     ]
 811 |   },
 812 |   {
 813 |     "_id": "57ef9cd8a25729d7ccb55e01",
 814 |     "index": 27,
 815 |     "guid": "376807be-1fdc-4d6a-961c-84b313b81f70",
 816 |     "isActive": true,
 817 |     "balance": "$1,384.08",
 818 |     "picture": "http://placehold.it/32x32",
 819 |     "age": 33,
 820 |     "eyeColor": "green",
 821 |     "name": "Cooke Alford",
 822 |     "gender": "male",
 823 |     "company": "PROXSOFT",
 824 |     "email": "cookealford@proxsoft.com",
 825 |     "phone": "+1 (850) 486-2468",
 826 |     "address": {
 827 |       "street": "870 High Street",
 828 |       "city": "Reinerton",
 829 |       "state": "Delaware"
 830 |     },
 831 |     "registered": "2016-03-25",
 832 |     "tags": [
 833 |       "id",
 834 |       "amet",
 835 |       "irure",
 836 |       "eiusmod",
 837 |       "excepteur",
 838 |       "nostrud",
 839 |       "qui"
 840 |     ]
 841 |   },
 842 |   {
 843 |     "_id": "57ef9cd8998c6d6498836a72",
 844 |     "index": 28,
 845 |     "guid": "fe5ad1f3-c898-4635-bbd8-6c3185e9415f",
 846 |     "isActive": false,
 847 |     "balance": "$1,658.18",
 848 |     "picture": "http://placehold.it/32x32",
 849 |     "age": 24,
 850 |     "eyeColor": "brown",
 851 |     "name": "Goff Lamb",
 852 |     "gender": "male",
 853 |     "company": "GLOBOIL",
 854 |     "email": "gofflamb@globoil.com",
 855 |     "phone": "+1 (996) 400-2491",
 856 |     "address": {
 857 |       "street": "361 Interborough Parkway",
 858 |       "city": "Dodge",
 859 |       "state": "Kansas"
 860 |     },
 861 |     "registered": "2016-09-12",
 862 |     "tags": [
 863 |       "nisi",
 864 |       "cupidatat",
 865 |       "aliquip",
 866 |       "non",
 867 |       "et",
 868 |       "sint",
 869 |       "enim"
 870 |     ]
 871 |   },
 872 |   {
 873 |     "_id": "57ef9cd82e0778dff1ee3579",
 874 |     "index": 29,
 875 |     "guid": "ea213edd-47dd-4fd5-be36-27e34fa7fba1",
 876 |     "isActive": false,
 877 |     "balance": "$2,355.96",
 878 |     "picture": "http://placehold.it/32x32",
 879 |     "age": 21,
 880 |     "eyeColor": "brown",
 881 |     "name": "Barry Ramsey",
 882 |     "gender": "male",
 883 |     "company": "ACCUPHARM",
 884 |     "email": "barryramsey@accupharm.com",
 885 |     "phone": "+1 (841) 406-3771",
 886 |     "address": {
 887 |       "street": "220 Henderson Walk",
 888 |       "city": "Gerber",
 889 |       "state": "California"
 890 |     },
 891 |     "registered": "2014-11-15",
 892 |     "tags": [
 893 |       "cillum",
 894 |       "esse",
 895 |       "aliqua",
 896 |       "do",
 897 |       "irure",
 898 |       "eu",
 899 |       "eu"
 900 |     ]
 901 |   },
 902 |   {
 903 |     "_id": "57ef9cd8b7a3f7141cd6787a",
 904 |     "index": 30,
 905 |     "guid": "05148b5f-e9b2-4697-a25c-b9de7473f4bc",
 906 |     "isActive": true,
 907 |     "balance": "$1,262.77",
 908 |     "picture": "http://placehold.it/32x32",
 909 |     "age": 31,
 910 |     "eyeColor": "brown",
 911 |     "name": "Aguilar Koch",
 912 |     "gender": "male",
 913 |     "company": "EMERGENT",
 914 |     "email": "aguilarkoch@emergent.com",
 915 |     "phone": "+1 (829) 518-3177",
 916 |     "address": {
 917 |       "street": "929 Himrod Street",
 918 |       "city": "Leeper",
 919 |       "state": "New Jersey"
 920 |     },
 921 |     "registered": "2015-07-12",
 922 |     "tags": [
 923 |       "ipsum",
 924 |       "eu",
 925 |       "cillum",
 926 |       "aute",
 927 |       "labore",
 928 |       "ea",
 929 |       "eiusmod"
 930 |     ]
 931 |   },
 932 |   {
 933 |     "_id": "57ef9cd83f6b95641c5e3c75",
 934 |     "index": 31,
 935 |     "guid": "27304437-1b44-4ad8-81e8-710b4b8345ff",
 936 |     "isActive": false,
 937 |     "balance": "$3,601.82",
 938 |     "picture": "http://placehold.it/32x32",
 939 |     "age": 24,
 940 |     "eyeColor": "brown",
 941 |     "name": "Oconnor Hopper",
 942 |     "gender": "male",
 943 |     "company": "FUELWORKS",
 944 |     "email": "oconnorhopper@fuelworks.com",
 945 |     "phone": "+1 (891) 493-3016",
 946 |     "address": {
 947 |       "street": "426 Montieth Street",
 948 |       "city": "Hegins",
 949 |       "state": "Wyoming"
 950 |     },
 951 |     "registered": "2015-07-24",
 952 |     "tags": [
 953 |       "minim",
 954 |       "voluptate",
 955 |       "elit",
 956 |       "incididunt",
 957 |       "ut",
 958 |       "fugiat",
 959 |       "occaecat"
 960 |     ]
 961 |   },
 962 |   {
 963 |     "_id": "57ef9cd8369d6e4b835f3fcd",
 964 |     "index": 32,
 965 |     "guid": "721a77b7-b011-47f4-a810-e7f29e7006c9",
 966 |     "isActive": true,
 967 |     "balance": "$1,915.04",
 968 |     "picture": "http://placehold.it/32x32",
 969 |     "age": 20,
 970 |     "eyeColor": "green",
 971 |     "name": "Daugherty White",
 972 |     "gender": "male",
 973 |     "company": "BOLAX",
 974 |     "email": "daughertywhite@bolax.com",
 975 |     "phone": "+1 (826) 594-2129",
 976 |     "address": {
 977 |       "street": "449 Lester Court",
 978 |       "city": "Joes",
 979 |       "state": "Massachusetts"
 980 |     },
 981 |     "registered": "2014-10-13",
 982 |     "tags": [
 983 |       "Lorem",
 984 |       "enim",
 985 |       "nostrud",
 986 |       "nisi",
 987 |       "consequat",
 988 |       "ullamco",
 989 |       "laborum"
 990 |     ]
 991 |   },
 992 |   {
 993 |     "_id": "57ef9cd86305c595658af48b",
 994 |     "index": 33,
 995 |     "guid": "1cfc8de2-d36c-4ef1-9e40-f088cf75eb82",
 996 |     "isActive": true,
 997 |     "balance": "$2,866.63",
 998 |     "picture": "http://placehold.it/32x32",
 999 |     "age": 40,
1000 |     "eyeColor": "blue",
1001 |     "name": "Kane Mclaughlin",
1002 |     "gender": "male",
1003 |     "company": "BUZZNESS",
1004 |     "email": "kanemclaughlin@buzzness.com",
1005 |     "phone": "+1 (832) 531-3366",
1006 |     "address": {
1007 |       "street": "661 Apollo Street",
1008 |       "city": "Crayne",
1009 |       "state": "Kentucky"
1010 |     },
1011 |     "registered": "2014-07-08",
1012 |     "tags": [
1013 |       "laboris",
1014 |       "quis",
1015 |       "enim",
1016 |       "ea",
1017 |       "cupidatat",
1018 |       "nisi",
1019 |       "ipsum"
1020 |     ]
1021 |   },
1022 |   {
1023 |     "_id": "57ef9cd8306a49b3a4173669",
1024 |     "index": 34,
1025 |     "guid": "0bf330e0-c370-466d-9a5e-4506272fd132",
1026 |     "isActive": false,
1027 |     "balance": "$1,185.64",
1028 |     "picture": "http://placehold.it/32x32",
1029 |     "age": 40,
1030 |     "eyeColor": "brown",
1031 |     "name": "Berry Moore",
1032 |     "gender": "male",
1033 |     "company": "MOBILDATA",
1034 |     "email": "berrymoore@mobildata.com",
1035 |     "phone": "+1 (868) 455-2610",
1036 |     "address": {
1037 |       "street": "655 Eldert Street",
1038 |       "city": "Camino",
1039 |       "state": "Arizona"
1040 |     },
1041 |     "registered": "2015-10-08",
1042 |     "tags": [
1043 |       "labore",
1044 |       "dolore",
1045 |       "labore",
1046 |       "proident",
1047 |       "aute",
1048 |       "amet",
1049 |       "quis"
1050 |     ]
1051 |   },
1052 |   {
1053 |     "_id": "57ef9cd80ae90356bd04b760",
1054 |     "index": 35,
1055 |     "guid": "2be39caa-9fcc-4616-a7b5-f72e3d3cbdaf",
1056 |     "isActive": true,
1057 |     "balance": "$1,185.60",
1058 |     "picture": "http://placehold.it/32x32",
1059 |     "age": 26,
1060 |     "eyeColor": "blue",
1061 |     "name": "Gwendolyn Hunt",
1062 |     "gender": "female",
1063 |     "company": "DIGIAL",
1064 |     "email": "gwendolynhunt@digial.com",
1065 |     "phone": "+1 (853) 562-3237",
1066 |     "address": {
1067 |       "street": "597 Hart Street",
1068 |       "city": "Kenmar",
1069 |       "state": "Maryland"
1070 |     },
1071 |     "registered": "2015-10-27",
1072 |     "tags": [
1073 |       "Lorem",
1074 |       "officia",
1075 |       "adipisicing",
1076 |       "velit",
1077 |       "tempor",
1078 |       "eiusmod",
1079 |       "labore"
1080 |     ]
1081 |   },
1082 |   {
1083 |     "_id": "57ef9cd884359a9538967098",
1084 |     "index": 36,
1085 |     "guid": "63ab3d9c-8138-4f09-baf9-6d76c5ba573a",
1086 |     "isActive": true,
1087 |     "balance": "$2,469.48",
1088 |     "picture": "http://placehold.it/32x32",
1089 |     "age": 23,
1090 |     "eyeColor": "green",
1091 |     "name": "Willie Garrett",
1092 |     "gender": "female",
1093 |     "company": "BALOOBA",
1094 |     "email": "williegarrett@balooba.com",
1095 |     "phone": "+1 (843) 425-3145",
1096 |     "address": {
1097 |       "street": "456 Maple Avenue",
1098 |       "city": "Hackneyville",
1099 |       "state": "Illinois"
1100 |     },
1101 |     "registered": "2014-02-09",
1102 |     "tags": [
1103 |       "est",
1104 |       "aliqua",
1105 |       "in",
1106 |       "excepteur",
1107 |       "ut",
1108 |       "eu",
1109 |       "fugiat"
1110 |     ]
1111 |   },
1112 |   {
1113 |     "_id": "57ef9cd8db282c5f4f1448d4",
1114 |     "index": 37,
1115 |     "guid": "bc8ce4f1-6cc4-4925-9046-3a5e91f858bc",
1116 |     "isActive": true,
1117 |     "balance": "$1,067.32",
1118 |     "picture": "http://placehold.it/32x32",
1119 |     "age": 29,
1120 |     "eyeColor": "green",
1121 |     "name": "Christina Good",
1122 |     "gender": "female",
1123 |     "company": "APPLIDECK",
1124 |     "email": "christinagood@applideck.com",
1125 |     "phone": "+1 (851) 462-3278",
1126 |     "address": {
1127 |       "street": "650 Arlington Place",
1128 |       "city": "Wheaton",
1129 |       "state": "West Virginia"
1130 |     },
1131 |     "registered": "2015-01-28",
1132 |     "tags": [
1133 |       "cupidatat",
1134 |       "ad",
1135 |       "consequat",
1136 |       "proident",
1137 |       "ex",
1138 |       "officia",
1139 |       "adipisicing"
1140 |     ]
1141 |   },
1142 |   {
1143 |     "_id": "57ef9cd88452ab36aa70f054",
1144 |     "index": 38,
1145 |     "guid": "4db3de26-08ae-40a0-9dc6-cd9aad7bdc25",
1146 |     "isActive": false,
1147 |     "balance": "$3,016.01",
1148 |     "picture": "http://placehold.it/32x32",
1149 |     "age": 35,
1150 |     "eyeColor": "brown",
1151 |     "name": "Hooper Blair",
1152 |     "gender": "male",
1153 |     "company": "ANARCO",
1154 |     "email": "hooperblair@anarco.com",
1155 |     "phone": "+1 (877) 468-2384",
1156 |     "address": {
1157 |       "street": "535 Bancroft Place",
1158 |       "city": "National",
1159 |       "state": "Alaska"
1160 |     },
1161 |     "registered": "2015-02-24",
1162 |     "tags": [
1163 |       "non",
1164 |       "laboris",
1165 |       "aliqua",
1166 |       "velit",
1167 |       "officia",
1168 |       "aliqua",
1169 |       "in"
1170 |     ]
1171 |   },
1172 |   {
1173 |     "_id": "57ef9cd8fd30953315b376ce",
1174 |     "index": 39,
1175 |     "guid": "2537139a-70e6-438b-980f-a43ee251db50",
1176 |     "isActive": true,
1177 |     "balance": "$1,259.80",
1178 |     "picture": "http://placehold.it/32x32",
1179 |     "age": 26,
1180 |     "eyeColor": "brown",
1181 |     "name": "Wilson Whitley",
1182 |     "gender": "male",
1183 |     "company": "BUNGA",
1184 |     "email": "wilsonwhitley@bunga.com",
1185 |     "phone": "+1 (881) 545-2408",
1186 |     "address": {
1187 |       "street": "536 Delevan Street",
1188 |       "city": "Clara",
1189 |       "state": "Oklahoma"
1190 |     },
1191 |     "registered": "2015-05-15",
1192 |     "tags": [
1193 |       "sunt",
1194 |       "officia",
1195 |       "officia",
1196 |       "est",
1197 |       "Lorem",
1198 |       "elit",
1199 |       "exercitation"
1200 |     ]
1201 |   },
1202 |   {
1203 |     "_id": "57ef9cd88d9237233ce5a603",
1204 |     "index": 40,
1205 |     "guid": "407cc2cb-7eb0-4614-97d8-85a2b0ca2c55",
1206 |     "isActive": false,
1207 |     "balance": "$1,954.73",
1208 |     "picture": "http://placehold.it/32x32",
1209 |     "age": 28,
1210 |     "eyeColor": "blue",
1211 |     "name": "Hilda Osborn",
1212 |     "gender": "female",
1213 |     "company": "SLOGANAUT",
1214 |     "email": "hildaosborn@sloganaut.com",
1215 |     "phone": "+1 (975) 466-3813",
1216 |     "address": {
1217 |       "street": "412 Tudor Terrace",
1218 |       "city": "Brecon",
1219 |       "state": "Federated States Of Micronesia"
1220 |     },
1221 |     "registered": "2016-06-23",
1222 |     "tags": [
1223 |       "anim",
1224 |       "culpa",
1225 |       "fugiat",
1226 |       "minim",
1227 |       "occaecat",
1228 |       "sit",
1229 |       "excepteur"
1230 |     ]
1231 |   },
1232 |   {
1233 |     "_id": "57ef9cd839131d7d2e092514",
1234 |     "index": 41,
1235 |     "guid": "0eb0fb97-2de9-4815-a533-7ac084b94863",
1236 |     "isActive": false,
1237 |     "balance": "$2,347.37",
1238 |     "picture": "http://placehold.it/32x32",
1239 |     "age": 29,
1240 |     "eyeColor": "blue",
1241 |     "name": "Denise Griffin",
1242 |     "gender": "female",
1243 |     "company": "ATOMICA",
1244 |     "email": "denisegriffin@atomica.com",
1245 |     "phone": "+1 (858) 538-2320",
1246 |     "address": {
1247 |       "street": "415 Catherine Street",
1248 |       "city": "Onton",
1249 |       "state": "Vermont"
1250 |     },
1251 |     "registered": "2014-06-17",
1252 |     "tags": [
1253 |       "qui",
1254 |       "sunt",
1255 |       "commodo",
1256 |       "tempor",
1257 |       "exercitation",
1258 |       "nisi",
1259 |       "exercitation"
1260 |     ]
1261 |   },
1262 |   {
1263 |     "_id": "57ef9cd89974d5066113c5eb",
1264 |     "index": 42,
1265 |     "guid": "03ba8cb5-6ad5-47f9-a0f1-28939ade5983",
1266 |     "isActive": true,
1267 |     "balance": "$3,867.30",
1268 |     "picture": "http://placehold.it/32x32",
1269 |     "age": 26,
1270 |     "eyeColor": "green",
1271 |     "name": "Neal Castro",
1272 |     "gender": "male",
1273 |     "company": "OVATION",
1274 |     "email": "nealcastro@ovation.com",
1275 |     "phone": "+1 (967) 436-2454",
1276 |     "address": {
1277 |       "street": "119 Harrison Avenue",
1278 |       "city": "Volta",
1279 |       "state": "Idaho"
1280 |     },
1281 |     "registered": "2014-06-22",
1282 |     "tags": [
1283 |       "Lorem",
1284 |       "cupidatat",
1285 |       "et",
1286 |       "quis",
1287 |       "voluptate",
1288 |       "incididunt",
1289 |       "dolore"
1290 |     ]
1291 |   },
1292 |   {
1293 |     "_id": "57ef9cd88d860c6070fafef1",
1294 |     "index": 43,
1295 |     "guid": "e14b2f74-0aaa-4218-940d-5f7fb2551151",
1296 |     "isActive": true,
1297 |     "balance": "$3,011.45",
1298 |     "picture": "http://placehold.it/32x32",
1299 |     "age": 22,
1300 |     "eyeColor": "blue",
1301 |     "name": "Rich Montoya",
1302 |     "gender": "male",
1303 |     "company": "ORBAXTER",
1304 |     "email": "richmontoya@orbaxter.com",
1305 |     "phone": "+1 (866) 530-3039",
1306 |     "address": {
1307 |       "street": "134 Blake Court",
1308 |       "city": "Kaka",
1309 |       "state": "Arkansas"
1310 |     },
1311 |     "registered": "2016-06-21",
1312 |     "tags": [
1313 |       "sunt",
1314 |       "cillum",
1315 |       "enim",
1316 |       "occaecat",
1317 |       "minim",
1318 |       "reprehenderit",
1319 |       "nulla"
1320 |     ]
1321 |   },
1322 |   {
1323 |     "_id": "57ef9cd8e093c420b70f6787",
1324 |     "index": 44,
1325 |     "guid": "1cabe364-180d-4147-88c7-2154241c22f2",
1326 |     "isActive": false,
1327 |     "balance": "$2,413.74",
1328 |     "picture": "http://placehold.it/32x32",
1329 |     "age": 37,
1330 |     "eyeColor": "brown",
1331 |     "name": "Galloway Wilcox",
1332 |     "gender": "male",
1333 |     "company": "KENEGY",
1334 |     "email": "gallowaywilcox@kenegy.com",
1335 |     "phone": "+1 (806) 596-3339",
1336 |     "address": {
1337 |       "street": "131 Kay Court",
1338 |       "city": "Bannock",
1339 |       "state": "Ohio"
1340 |     },
1341 |     "registered": "2014-12-04",
1342 |     "tags": [
1343 |       "consequat",
1344 |       "elit",
1345 |       "in",
1346 |       "mollit",
1347 |       "nostrud",
1348 |       "amet",
1349 |       "irure"
1350 |     ]
1351 |   },
1352 |   {
1353 |     "_id": "57ef9cd8a07f64e3585adaa4",
1354 |     "index": 45,
1355 |     "guid": "9a0ba82c-3a59-4b8c-a735-16f57c4e5b7b",
1356 |     "isActive": true,
1357 |     "balance": "$1,419.98",
1358 |     "picture": "http://placehold.it/32x32",
1359 |     "age": 25,
1360 |     "eyeColor": "green",
1361 |     "name": "Estela Johnson",
1362 |     "gender": "female",
1363 |     "company": "LUNCHPOD",
1364 |     "email": "estelajohnson@lunchpod.com",
1365 |     "phone": "+1 (857) 457-3968",
1366 |     "address": {
1367 |       "street": "909 Cheever Place",
1368 |       "city": "Clarence",
1369 |       "state": "Missouri"
1370 |     },
1371 |     "registered": "2015-06-19",
1372 |     "tags": [
1373 |       "sint",
1374 |       "velit",
1375 |       "ut",
1376 |       "minim",
1377 |       "ad",
1378 |       "proident",
1379 |       "labore"
1380 |     ]
1381 |   },
1382 |   {
1383 |     "_id": "57ef9cd863d1b1a4acb74988",
1384 |     "index": 46,
1385 |     "guid": "8154d3fc-2b77-4107-ab34-42bb23f470e6",
1386 |     "isActive": false,
1387 |     "balance": "$2,049.10",
1388 |     "picture": "http://placehold.it/32x32",
1389 |     "age": 27,
1390 |     "eyeColor": "green",
1391 |     "name": "Lorrie Huffman",
1392 |     "gender": "female",
1393 |     "company": "SPHERIX",
1394 |     "email": "lorriehuffman@spherix.com",
1395 |     "phone": "+1 (855) 535-2317",
1396 |     "address": {
1397 |       "street": "221 Essex Street",
1398 |       "city": "Tedrow",
1399 |       "state": "Washington"
1400 |     },
1401 |     "registered": "2016-09-27",
1402 |     "tags": [
1403 |       "consequat",
1404 |       "excepteur",
1405 |       "ipsum",
1406 |       "ipsum",
1407 |       "esse",
1408 |       "cillum",
1409 |       "qui"
1410 |     ]
1411 |   },
1412 |   {
1413 |     "_id": "57ef9cd8e0a6bad7cf9ec1dc",
1414 |     "index": 47,
1415 |     "guid": "d44f213d-7164-4aba-b5e1-5e8646853e41",
1416 |     "isActive": true,
1417 |     "balance": "$1,958.21",
1418 |     "picture": "http://placehold.it/32x32",
1419 |     "age": 37,
1420 |     "eyeColor": "brown",
1421 |     "name": "Celia Burnett",
1422 |     "gender": "female",
1423 |     "company": "ENORMO",
1424 |     "email": "celiaburnett@enormo.com",
1425 |     "phone": "+1 (834) 438-2214",
1426 |     "address": {
1427 |       "street": "315 Louisiana Avenue",
1428 |       "city": "Wauhillau",
1429 |       "state": "New Hampshire"
1430 |     },
1431 |     "registered": "2014-02-21",
1432 |     "tags": [
1433 |       "officia",
1434 |       "cupidatat",
1435 |       "ullamco",
1436 |       "velit",
1437 |       "ad",
1438 |       "ea",
1439 |       "nostrud"
1440 |     ]
1441 |   },
1442 |   {
1443 |     "_id": "57ef9cd8e0617ebaf2a76998",
1444 |     "index": 48,
1445 |     "guid": "9d09a10a-6b16-44c5-bd72-20ee3188432c",
1446 |     "isActive": false,
1447 |     "balance": "$3,027.42",
1448 |     "picture": "http://placehold.it/32x32",
1449 |     "age": 31,
1450 |     "eyeColor": "brown",
1451 |     "name": "Delaney Hamilton",
1452 |     "gender": "male",
1453 |     "company": "ACCUSAGE",
1454 |     "email": "delaneyhamilton@accusage.com",
1455 |     "phone": "+1 (862) 425-3630",
1456 |     "address": {
1457 |       "street": "407 Oceanview Avenue",
1458 |       "city": "Waikele",
1459 |       "state": "New Mexico"
1460 |     },
1461 |     "registered": "2014-07-06",
1462 |     "tags": [
1463 |       "aliquip",
1464 |       "fugiat",
1465 |       "cillum",
1466 |       "id",
1467 |       "excepteur",
1468 |       "ad",
1469 |       "non"
1470 |     ]
1471 |   },
1472 |   {
1473 |     "_id": "57ef9cd831ecdff3ea6aba9e",
1474 |     "index": 49,
1475 |     "guid": "f5212db5-dfe2-426e-a4e0-83331831bbe8",
1476 |     "isActive": false,
1477 |     "balance": "$2,970.07",
1478 |     "picture": "http://placehold.it/32x32",
1479 |     "age": 39,
1480 |     "eyeColor": "green",
1481 |     "name": "Elma Baldwin",
1482 |     "gender": "female",
1483 |     "company": "XANIDE",
1484 |     "email": "elmabaldwin@xanide.com",
1485 |     "phone": "+1 (991) 445-3729",
1486 |     "address": {
1487 |       "street": "817 Loring Avenue",
1488 |       "city": "Jenkinsville",
1489 |       "state": "Virgin Islands"
1490 |     },
1491 |     "registered": "2015-03-13",
1492 |     "tags": [
1493 |       "aute",
1494 |       "nisi",
1495 |       "laborum",
1496 |       "incididunt",
1497 |       "non",
1498 |       "eiusmod",
1499 |       "ad"
1500 |     ]
1501 |   },
1502 |   {
1503 |     "_id": "57ef9cd86e789f3db59cc997",
1504 |     "index": 50,
1505 |     "guid": "c24777cb-e9c6-451a-b70b-9ffeefb35ee0",
1506 |     "isActive": false,
1507 |     "balance": "$1,072.96",
1508 |     "picture": "http://placehold.it/32x32",
1509 |     "age": 24,
1510 |     "eyeColor": "green",
1511 |     "name": "Roxie Butler",
1512 |     "gender": "female",
1513 |     "company": "ISOLOGICA",
1514 |     "email": "roxiebutler@isologica.com",
1515 |     "phone": "+1 (919) 442-2920",
1516 |     "address": {
1517 |       "street": "512 Dewey Place",
1518 |       "city": "Lacomb",
1519 |       "state": "Montana"
1520 |     },
1521 |     "registered": "2015-05-26",
1522 |     "tags": [
1523 |       "qui",
1524 |       "labore",
1525 |       "non",
1526 |       "quis",
1527 |       "id",
1528 |       "quis",
1529 |       "anim"
1530 |     ]
1531 |   },
1532 |   {
1533 |     "_id": "57ef9cd882f83000536be05a",
1534 |     "index": 51,
1535 |     "guid": "2798139e-b8ec-409e-aa87-613149059143",
1536 |     "isActive": false,
1537 |     "balance": "$3,771.00",
1538 |     "picture": "http://placehold.it/32x32",
1539 |     "age": 38,
1540 |     "eyeColor": "blue",
1541 |     "name": "Margie Davenport",
1542 |     "gender": "female",
1543 |     "company": "MALATHION",
1544 |     "email": "margiedavenport@malathion.com",
1545 |     "phone": "+1 (976) 567-3933",
1546 |     "address": {
1547 |       "street": "241 Lloyd Court",
1548 |       "city": "Stockwell",
1549 |       "state": "Puerto Rico"
1550 |     },
1551 |     "registered": "2016-04-05",
1552 |     "tags": [
1553 |       "et",
1554 |       "reprehenderit",
1555 |       "dolor",
1556 |       "consequat",
1557 |       "sit",
1558 |       "qui",
1559 |       "mollit"
1560 |     ]
1561 |   },
1562 |   {
1563 |     "_id": "57ef9cd8199466c0f80eaef0",
1564 |     "index": 52,
1565 |     "guid": "0d8ea36b-df98-4b07-952a-4cbac7c92c64",
1566 |     "isActive": false,
1567 |     "balance": "$2,047.61",
1568 |     "picture": "http://placehold.it/32x32",
1569 |     "age": 31,
1570 |     "eyeColor": "brown",
1571 |     "name": "Zelma Macias",
1572 |     "gender": "female",
1573 |     "company": "ECLIPSENT",
1574 |     "email": "zelmamacias@eclipsent.com",
1575 |     "phone": "+1 (893) 522-3991",
1576 |     "address": {
1577 |       "street": "812 Morgan Avenue",
1578 |       "city": "Moquino",
1579 |       "state": "Minnesota"
1580 |     },
1581 |     "registered": "2014-03-14",
1582 |     "tags": [
1583 |       "quis",
1584 |       "aliquip",
1585 |       "occaecat",
1586 |       "ut",
1587 |       "duis",
1588 |       "est",
1589 |       "Lorem"
1590 |     ]
1591 |   },
1592 |   {
1593 |     "_id": "57ef9cd8e332fa4683ed0ef2",
1594 |     "index": 53,
1595 |     "guid": "992c8935-6934-4b46-be34-bb81f596d0cc",
1596 |     "isActive": true,
1597 |     "balance": "$3,363.81",
1598 |     "picture": "http://placehold.it/32x32",
1599 |     "age": 32,
1600 |     "eyeColor": "blue",
1601 |     "name": "Dominique Best",
1602 |     "gender": "female",
1603 |     "company": "SNOWPOKE",
1604 |     "email": "dominiquebest@snowpoke.com",
1605 |     "phone": "+1 (941) 596-2718",
1606 |     "address": {
1607 |       "street": "851 Turnbull Avenue",
1608 |       "city": "Ruffin",
1609 |       "state": "Wisconsin"
1610 |     },
1611 |     "registered": "2016-03-04",
1612 |     "tags": [
1613 |       "magna",
1614 |       "velit",
1615 |       "Lorem",
1616 |       "culpa",
1617 |       "mollit",
1618 |       "adipisicing",
1619 |       "eu"
1620 |     ]
1621 |   },
1622 |   {
1623 |     "_id": "57ef9cd8b65cc853f277c21a",
1624 |     "index": 54,
1625 |     "guid": "8f690f7b-cdc8-4c84-b928-44fe3e7bc4b4",
1626 |     "isActive": false,
1627 |     "balance": "$3,463.40",
1628 |     "picture": "http://placehold.it/32x32",
1629 |     "age": 39,
1630 |     "eyeColor": "blue",
1631 |     "name": "Meyers Navarro",
1632 |     "gender": "male",
1633 |     "company": "VALREDA",
1634 |     "email": "meyersnavarro@valreda.com",
1635 |     "phone": "+1 (969) 596-2487",
1636 |     "address": {
1637 |       "street": "692 Lake Street",
1638 |       "city": "Marienthal",
1639 |       "state": "Guam"
1640 |     },
1641 |     "registered": "2015-06-22",
1642 |     "tags": [
1643 |       "mollit",
1644 |       "laboris",
1645 |       "deserunt",
1646 |       "sit",
1647 |       "excepteur",
1648 |       "ut",
1649 |       "ut"
1650 |     ]
1651 |   },
1652 |   {
1653 |     "_id": "57ef9cd88d03578a7c15a598",
1654 |     "index": 55,
1655 |     "guid": "46cd7eac-1353-4bd2-99cc-2a9b5264a966",
1656 |     "isActive": false,
1657 |     "balance": "$1,911.65",
1658 |     "picture": "http://placehold.it/32x32",
1659 |     "age": 24,
1660 |     "eyeColor": "green",
1661 |     "name": "Holland Hess",
1662 |     "gender": "male",
1663 |     "company": "IDEALIS",
1664 |     "email": "hollandhess@idealis.com",
1665 |     "phone": "+1 (867) 599-2608",
1666 |     "address": {
1667 |       "street": "934 Stoddard Place",
1668 |       "city": "Frizzleburg",
1669 |       "state": "Nebraska"
1670 |     },
1671 |     "registered": "2015-02-19",
1672 |     "tags": [
1673 |       "dolor",
1674 |       "sint",
1675 |       "ipsum",
1676 |       "ex",
1677 |       "et",
1678 |       "aute",
1679 |       "elit"
1680 |     ]
1681 |   },
1682 |   {
1683 |     "_id": "57ef9cd8a1f6180aec4821e5",
1684 |     "index": 56,
1685 |     "guid": "eb23120a-a47d-499d-a3a5-9a5cc0d40233",
1686 |     "isActive": true,
1687 |     "balance": "$3,547.64",
1688 |     "picture": "http://placehold.it/32x32",
1689 |     "age": 25,
1690 |     "eyeColor": "brown",
1691 |     "name": "Mckay Fields",
1692 |     "gender": "male",
1693 |     "company": "SLAX",
1694 |     "email": "mckayfields@slax.com",
1695 |     "phone": "+1 (802) 483-2694",
1696 |     "address": {
1697 |       "street": "595 Jerome Street",
1698 |       "city": "Oneida",
1699 |       "state": "Utah"
1700 |     },
1701 |     "registered": "2014-11-18",
1702 |     "tags": [
1703 |       "reprehenderit",
1704 |       "pariatur",
1705 |       "aliquip",
1706 |       "ullamco",
1707 |       "veniam",
1708 |       "labore",
1709 |       "velit"
1710 |     ]
1711 |   },
1712 |   {
1713 |     "_id": "57ef9cd8c473ecd605a3b6ca",
1714 |     "index": 57,
1715 |     "guid": "84c4fe9c-6917-49ce-a7a4-71ba9a7cba69",
1716 |     "isActive": true,
1717 |     "balance": "$1,731.31",
1718 |     "picture": "http://placehold.it/32x32",
1719 |     "age": 39,
1720 |     "eyeColor": "blue",
1721 |     "name": "Melanie Austin",
1722 |     "gender": "female",
1723 |     "company": "ANDRYX",
1724 |     "email": "melanieaustin@andryx.com",
1725 |     "phone": "+1 (994) 412-2994",
1726 |     "address": {
1727 |       "street": "533 Saratoga Avenue",
1728 |       "city": "Bangor",
1729 |       "state": "Georgia"
1730 |     },
1731 |     "registered": "2014-03-09",
1732 |     "tags": [
1733 |       "mollit",
1734 |       "minim",
1735 |       "in",
1736 |       "in",
1737 |       "Lorem",
1738 |       "magna",
1739 |       "non"
1740 |     ]
1741 |   },
1742 |   {
1743 |     "_id": "57ef9cd891a61ccfd176aeef",
1744 |     "index": 58,
1745 |     "guid": "80295d78-5ce6-4dfe-b945-50e2ce602b44",
1746 |     "isActive": true,
1747 |     "balance": "$2,992.55",
1748 |     "picture": "http://placehold.it/32x32",
1749 |     "age": 25,
1750 |     "eyeColor": "blue",
1751 |     "name": "Peck Schneider",
1752 |     "gender": "male",
1753 |     "company": "COFINE",
1754 |     "email": "peckschneider@cofine.com",
1755 |     "phone": "+1 (913) 428-3201",
1756 |     "address": {
1757 |       "street": "441 Harbor Lane",
1758 |       "city": "Tolu",
1759 |       "state": "Pennsylvania"
1760 |     },
1761 |     "registered": "2016-05-29",
1762 |     "tags": [
1763 |       "Lorem",
1764 |       "voluptate",
1765 |       "ipsum",
1766 |       "dolore",
1767 |       "aliquip",
1768 |       "ad",
1769 |       "consequat"
1770 |     ]
1771 |   },
1772 |   {
1773 |     "_id": "57ef9cd8e58b17c583b460a7",
1774 |     "index": 59,
1775 |     "guid": "0b18fc0c-f18f-46e3-845a-cd7b15c55865",
1776 |     "isActive": false,
1777 |     "balance": "$1,502.40",
1778 |     "picture": "http://placehold.it/32x32",
1779 |     "age": 23,
1780 |     "eyeColor": "green",
1781 |     "name": "Mcclain Rhodes",
1782 |     "gender": "male",
1783 |     "company": "RODEOCEAN",
1784 |     "email": "mcclainrhodes@rodeocean.com",
1785 |     "phone": "+1 (842) 446-2464",
1786 |     "address": {
1787 |       "street": "374 Amersfort Place",
1788 |       "city": "Romeville",
1789 |       "state": "Maine"
1790 |     },
1791 |     "registered": "2014-03-19",
1792 |     "tags": [
1793 |       "dolor",
1794 |       "eiusmod",
1795 |       "ad",
1796 |       "voluptate",
1797 |       "ea",
1798 |       "deserunt",
1799 |       "et"
1800 |     ]
1801 |   },
1802 |   {
1803 |     "_id": "57ef9cd8724c03c5ad8e4a8e",
1804 |     "index": 60,
1805 |     "guid": "326dce0c-4b47-499b-9489-36acd6dadff8",
1806 |     "isActive": true,
1807 |     "balance": "$1,747.38",
1808 |     "picture": "http://placehold.it/32x32",
1809 |     "age": 25,
1810 |     "eyeColor": "blue",
1811 |     "name": "Cervantes Bright",
1812 |     "gender": "male",
1813 |     "company": "VALPREAL",
1814 |     "email": "cervantesbright@valpreal.com",
1815 |     "phone": "+1 (873) 587-2025",
1816 |     "address": {
1817 |       "street": "132 Bliss Terrace",
1818 |       "city": "Winesburg",
1819 |       "state": "American Samoa"
1820 |     },
1821 |     "registered": "2016-03-18",
1822 |     "tags": [
1823 |       "magna",
1824 |       "dolore",
1825 |       "veniam",
1826 |       "veniam",
1827 |       "sint",
1828 |       "quis",
1829 |       "id"
1830 |     ]
1831 |   },
1832 |   {
1833 |     "_id": "57ef9cd8b398ed2934e4a722",
1834 |     "index": 61,
1835 |     "guid": "4b744dd7-3c86-4bce-a3c8-9eb4359ceed5",
1836 |     "isActive": false,
1837 |     "balance": "$3,697.92",
1838 |     "picture": "http://placehold.it/32x32",
1839 |     "age": 34,
1840 |     "eyeColor": "blue",
1841 |     "name": "Hardin Pittman",
1842 |     "gender": "male",
1843 |     "company": "SKINSERVE",
1844 |     "email": "hardinpittman@skinserve.com",
1845 |     "phone": "+1 (887) 454-3837",
1846 |     "address": {
1847 |       "street": "617 Robert Street",
1848 |       "city": "Stevens",
1849 |       "state": "Oregon"
1850 |     },
1851 |     "registered": "2015-04-25",
1852 |     "tags": [
1853 |       "sit",
1854 |       "anim",
1855 |       "proident",
1856 |       "minim",
1857 |       "adipisicing",
1858 |       "duis",
1859 |       "cillum"
1860 |     ]
1861 |   },
1862 |   {
1863 |     "_id": "57ef9cd89a9aa77a634b1a47",
1864 |     "index": 62,
1865 |     "guid": "971cfb58-9d8e-4a06-ab1c-c6bc120c1865",
1866 |     "isActive": false,
1867 |     "balance": "$1,121.41",
1868 |     "picture": "http://placehold.it/32x32",
1869 |     "age": 35,
1870 |     "eyeColor": "blue",
1871 |     "name": "Anna Ortega",
1872 |     "gender": "female",
1873 |     "company": "PHUEL",
1874 |     "email": "annaortega@phuel.com",
1875 |     "phone": "+1 (887) 422-3308",
1876 |     "address": {
1877 |       "street": "809 Vandervoort Place",
1878 |       "city": "Gibsonia",
1879 |       "state": "Connecticut"
1880 |     },
1881 |     "registered": "2016-06-11",
1882 |     "tags": [
1883 |       "veniam",
1884 |       "commodo",
1885 |       "incididunt",
1886 |       "commodo",
1887 |       "ut",
1888 |       "irure",
1889 |       "aliqua"
1890 |     ]
1891 |   },
1892 |   {
1893 |     "_id": "57ef9cd8d4ea52c7b0fce734",
1894 |     "index": 63,
1895 |     "guid": "3e62c184-2c7d-4620-be08-4a10ac9f1bce",
1896 |     "isActive": true,
1897 |     "balance": "$3,080.98",
1898 |     "picture": "http://placehold.it/32x32",
1899 |     "age": 37,
1900 |     "eyeColor": "brown",
1901 |     "name": "Juliana Rios",
1902 |     "gender": "female",
1903 |     "company": "FIREWAX",
1904 |     "email": "julianarios@firewax.com",
1905 |     "phone": "+1 (978) 409-2654",
1906 |     "address": {
1907 |       "street": "893 Heyward Street",
1908 |       "city": "Fedora",
1909 |       "state": "Mississippi"
1910 |     },
1911 |     "registered": "2015-07-21",
1912 |     "tags": [
1913 |       "sit",
1914 |       "sint",
1915 |       "eu",
1916 |       "quis",
1917 |       "do",
1918 |       "mollit",
1919 |       "magna"
1920 |     ]
1921 |   },
1922 |   {
1923 |     "_id": "57ef9cd8faa17dc8818830e9",
1924 |     "index": 64,
1925 |     "guid": "d3de53e8-6012-43ea-8c6b-1546739f9455",
1926 |     "isActive": true,
1927 |     "balance": "$3,162.09",
1928 |     "picture": "http://placehold.it/32x32",
1929 |     "age": 24,
1930 |     "eyeColor": "green",
1931 |     "name": "Allison Collier",
1932 |     "gender": "male",
1933 |     "company": "ISOLOGICS",
1934 |     "email": "allisoncollier@isologics.com",
1935 |     "phone": "+1 (961) 458-2654",
1936 |     "address": {
1937 |       "street": "987 Story Street",
1938 |       "city": "Fairview",
1939 |       "state": "Hawaii"
1940 |     },
1941 |     "registered": "2014-04-11",
1942 |     "tags": [
1943 |       "nulla",
1944 |       "labore",
1945 |       "anim",
1946 |       "tempor",
1947 |       "enim",
1948 |       "aliqua",
1949 |       "culpa"
1950 |     ]
1951 |   },
1952 |   {
1953 |     "_id": "57ef9cd8414f04a3dafce7ef",
1954 |     "index": 65,
1955 |     "guid": "d45fc8d9-2f09-42cf-918c-5d9c9b9049fb",
1956 |     "isActive": false,
1957 |     "balance": "$2,228.33",
1958 |     "picture": "http://placehold.it/32x32",
1959 |     "age": 33,
1960 |     "eyeColor": "brown",
1961 |     "name": "Laurel Raymond",
1962 |     "gender": "female",
1963 |     "company": "FREAKIN",
1964 |     "email": "laurelraymond@freakin.com",
1965 |     "phone": "+1 (845) 411-2269",
1966 |     "address": {
1967 |       "street": "270 Alice Court",
1968 |       "city": "Bynum",
1969 |       "state": "Colorado"
1970 |     },
1971 |     "registered": "2014-09-18",
1972 |     "tags": [
1973 |       "sit",
1974 |       "dolore",
1975 |       "eiusmod",
1976 |       "dolor",
1977 |       "aliquip",
1978 |       "est",
1979 |       "reprehenderit"
1980 |     ]
1981 |   },
1982 |   {
1983 |     "_id": "57ef9cd8e744f8d49ef6d406",
1984 |     "index": 66,
1985 |     "guid": "8fd91938-f5a5-409d-8a97-bf4e683d76a1",
1986 |     "isActive": true,
1987 |     "balance": "$3,892.91",
1988 |     "picture": "http://placehold.it/32x32",
1989 |     "age": 38,
1990 |     "eyeColor": "brown",
1991 |     "name": "Althea Horn",
1992 |     "gender": "female",
1993 |     "company": "FILODYNE",
1994 |     "email": "altheahorn@filodyne.com",
1995 |     "phone": "+1 (950) 526-2536",
1996 |     "address": {
1997 |       "street": "666 Taylor Street",
1998 |       "city": "Driftwood",
1999 |       "state": "North Dakota"
2000 |     },
2001 |     "registered": "2016-01-13",
2002 |     "tags": [
2003 |       "cillum",
2004 |       "fugiat",
2005 |       "incididunt",
2006 |       "sunt",
2007 |       "proident",
2008 |       "et",
2009 |       "amet"
2010 |     ]
2011 |   },
2012 |   {
2013 |     "_id": "57ef9cd80d3bd026a5b14c3d",
2014 |     "index": 67,
2015 |     "guid": "4a617fa7-dc5a-440a-ab0b-13f6e6ad34fe",
2016 |     "isActive": false,
2017 |     "balance": "$1,371.59",
2018 |     "picture": "http://placehold.it/32x32",
2019 |     "age": 22,
2020 |     "eyeColor": "blue",
2021 |     "name": "Potter Cannon",
2022 |     "gender": "male",
2023 |     "company": "MONDICIL",
2024 |     "email": "pottercannon@mondicil.com",
2025 |     "phone": "+1 (913) 431-3765",
2026 |     "address": {
2027 |       "street": "762 Drew Street",
2028 |       "city": "Riceville",
2029 |       "state": "Michigan"
2030 |     },
2031 |     "registered": "2015-08-31",
2032 |     "tags": [
2033 |       "velit",
2034 |       "velit",
2035 |       "ex",
2036 |       "aliqua",
2037 |       "consequat",
2038 |       "esse",
2039 |       "irure"
2040 |     ]
2041 |   },
2042 |   {
2043 |     "_id": "57ef9cd8218b984cbcc2fcee",
2044 |     "index": 68,
2045 |     "guid": "ebe26092-53b1-4fd9-b48f-37f68a7008b9",
2046 |     "isActive": true,
2047 |     "balance": "$2,799.55",
2048 |     "picture": "http://placehold.it/32x32",
2049 |     "age": 23,
2050 |     "eyeColor": "brown",
2051 |     "name": "Alyson Calhoun",
2052 |     "gender": "female",
2053 |     "company": "ZEPITOPE",
2054 |     "email": "alysoncalhoun@zepitope.com",
2055 |     "phone": "+1 (820) 510-3098",
2056 |     "address": {
2057 |       "street": "804 Rodney Street",
2058 |       "city": "Hatteras",
2059 |       "state": "Virginia"
2060 |     },
2061 |     "registered": "2014-09-25",
2062 |     "tags": [
2063 |       "occaecat",
2064 |       "officia",
2065 |       "enim",
2066 |       "eu",
2067 |       "ullamco",
2068 |       "eu",
2069 |       "pariatur"
2070 |     ]
2071 |   },
2072 |   {
2073 |     "_id": "57ef9cd88e11ec366ca17611",
2074 |     "index": 69,
2075 |     "guid": "2bb46e78-c42a-449c-93b2-204091ec8296",
2076 |     "isActive": false,
2077 |     "balance": "$3,754.62",
2078 |     "picture": "http://placehold.it/32x32",
2079 |     "age": 27,
2080 |     "eyeColor": "brown",
2081 |     "name": "Zimmerman Hudson",
2082 |     "gender": "male",
2083 |     "company": "OVERPLEX",
2084 |     "email": "zimmermanhudson@overplex.com",
2085 |     "phone": "+1 (810) 589-3217",
2086 |     "address": {
2087 |       "street": "710 Lombardy Street",
2088 |       "city": "Tampico",
2089 |       "state": "New York"
2090 |     },
2091 |     "registered": "2015-12-05",
2092 |     "tags": [
2093 |       "aute",
2094 |       "Lorem",
2095 |       "magna",
2096 |       "ut",
2097 |       "esse",
2098 |       "tempor",
2099 |       "voluptate"
2100 |     ]
2101 |   },
2102 |   {
2103 |     "_id": "57ef9cd8c663c704beb3ba0f",
2104 |     "index": 70,
2105 |     "guid": "3fe808f0-0757-4862-93e1-033724b2d61e",
2106 |     "isActive": false,
2107 |     "balance": "$3,403.56",
2108 |     "picture": "http://placehold.it/32x32",
2109 |     "age": 38,
2110 |     "eyeColor": "green",
2111 |     "name": "Sharon Vargas",
2112 |     "gender": "female",
2113 |     "company": "SYNKGEN",
2114 |     "email": "sharonvargas@synkgen.com",
2115 |     "phone": "+1 (837) 452-3719",
2116 |     "address": {
2117 |       "street": "451 Eckford Street",
2118 |       "city": "Wyano",
2119 |       "state": "South Dakota"
2120 |     },
2121 |     "registered": "2015-11-19",
2122 |     "tags": [
2123 |       "consectetur",
2124 |       "sint",
2125 |       "ad",
2126 |       "sunt",
2127 |       "ea",
2128 |       "velit",
2129 |       "officia"
2130 |     ]
2131 |   },
2132 |   {
2133 |     "_id": "57ef9cd8c23f68e4099957d1",
2134 |     "index": 71,
2135 |     "guid": "79f80e61-d92e-4b97-bea7-0016fb3fbcdc",
2136 |     "isActive": false,
2137 |     "balance": "$1,738.35",
2138 |     "picture": "http://placehold.it/32x32",
2139 |     "age": 22,
2140 |     "eyeColor": "blue",
2141 |     "name": "Herman House",
2142 |     "gender": "male",
2143 |     "company": "FRENEX",
2144 |     "email": "hermanhouse@frenex.com",
2145 |     "phone": "+1 (928) 579-3978",
2146 |     "address": {
2147 |       "street": "770 Wyckoff Avenue",
2148 |       "city": "Trail",
2149 |       "state": "Louisiana"
2150 |     },
2151 |     "registered": "2015-03-20",
2152 |     "tags": [
2153 |       "elit",
2154 |       "voluptate",
2155 |       "sint",
2156 |       "laboris",
2157 |       "et",
2158 |       "nisi",
2159 |       "ad"
2160 |     ]
2161 |   },
2162 |   {
2163 |     "_id": "57ef9cd8f684a162c8263ed1",
2164 |     "index": 72,
2165 |     "guid": "3a82a0ae-ffaa-4833-a4c1-1947eaf2a22a",
2166 |     "isActive": false,
2167 |     "balance": "$3,451.10",
2168 |     "picture": "http://placehold.it/32x32",
2169 |     "age": 30,
2170 |     "eyeColor": "green",
2171 |     "name": "Lenore Hahn",
2172 |     "gender": "female",
2173 |     "company": "EXOSIS",
2174 |     "email": "lenorehahn@exosis.com",
2175 |     "phone": "+1 (917) 524-3275",
2176 |     "address": {
2177 |       "street": "838 Gold Street",
2178 |       "city": "Watchtower",
2179 |       "state": "Rhode Island"
2180 |     },
2181 |     "registered": "2015-05-28",
2182 |     "tags": [
2183 |       "id",
2184 |       "proident",
2185 |       "velit",
2186 |       "consequat",
2187 |       "non",
2188 |       "duis",
2189 |       "consectetur"
2190 |     ]
2191 |   },
2192 |   {
2193 |     "_id": "57ef9cd8a220db71c82724b6",
2194 |     "index": 73,
2195 |     "guid": "3715858a-2b15-40b2-bd25-4c5f27f8a242",
2196 |     "isActive": false,
2197 |     "balance": "$2,007.02",
2198 |     "picture": "http://placehold.it/32x32",
2199 |     "age": 40,
2200 |     "eyeColor": "brown",
2201 |     "name": "Mcfadden Stark",
2202 |     "gender": "male",
2203 |     "company": "GEEKOLA",
2204 |     "email": "mcfaddenstark@geekola.com",
2205 |     "phone": "+1 (996) 480-2189",
2206 |     "address": {
2207 |       "street": "422 Livonia Avenue",
2208 |       "city": "Allendale",
2209 |       "state": "Alabama"
2210 |     },
2211 |     "registered": "2016-06-04",
2212 |     "tags": [
2213 |       "qui",
2214 |       "consequat",
2215 |       "mollit",
2216 |       "magna",
2217 |       "Lorem",
2218 |       "officia",
2219 |       "reprehenderit"
2220 |     ]
2221 |   },
2222 |   {
2223 |     "_id": "57ef9cd8ce39d98040920aca",
2224 |     "index": 74,
2225 |     "guid": "015bb1b1-90c7-47a7-8439-1382355e2198",
2226 |     "isActive": false,
2227 |     "balance": "$2,762.45",
2228 |     "picture": "http://placehold.it/32x32",
2229 |     "age": 39,
2230 |     "eyeColor": "brown",
2231 |     "name": "Haney Schwartz",
2232 |     "gender": "male",
2233 |     "company": "GEOSTELE",
2234 |     "email": "haneyschwartz@geostele.com",
2235 |     "phone": "+1 (845) 531-2525",
2236 |     "address": {
2237 |       "street": "308 Poplar Avenue",
2238 |       "city": "Wolcott",
2239 |       "state": "Palau"
2240 |     },
2241 |     "registered": "2016-05-11",
2242 |     "tags": [
2243 |       "proident",
2244 |       "enim",
2245 |       "sunt",
2246 |       "laborum",
2247 |       "exercitation",
2248 |       "dolore",
2249 |       "cillum"
2250 |     ]
2251 |   },
2252 |   {
2253 |     "_id": "57ef9cd890c774293d1b0fb4",
2254 |     "index": 75,
2255 |     "guid": "d073457d-da93-48aa-8c60-02d9d72ef8fb",
2256 |     "isActive": false,
2257 |     "balance": "$1,206.03",
2258 |     "picture": "http://placehold.it/32x32",
2259 |     "age": 34,
2260 |     "eyeColor": "brown",
2261 |     "name": "Bobbie Livingston",
2262 |     "gender": "female",
2263 |     "company": "CORPULSE",
2264 |     "email": "bobbielivingston@corpulse.com",
2265 |     "phone": "+1 (836) 495-2861",
2266 |     "address": {
2267 |       "street": "655 Laurel Avenue",
2268 |       "city": "Eastmont",
2269 |       "state": "Indiana"
2270 |     },
2271 |     "registered": "2015-09-02",
2272 |     "tags": [
2273 |       "proident",
2274 |       "laboris",
2275 |       "ut",
2276 |       "exercitation",
2277 |       "labore",
2278 |       "proident",
2279 |       "adipisicing"
2280 |     ]
2281 |   },
2282 |   {
2283 |     "_id": "57ef9cd8e27b869852bce881",
2284 |     "index": 76,
2285 |     "guid": "8f740d74-174c-4383-bf25-d97b57bae01d",
2286 |     "isActive": false,
2287 |     "balance": "$2,399.50",
2288 |     "picture": "http://placehold.it/32x32",
2289 |     "age": 35,
2290 |     "eyeColor": "brown",
2291 |     "name": "Ball Talley",
2292 |     "gender": "male",
2293 |     "company": "GOKO",
2294 |     "email": "balltalley@goko.com",
2295 |     "phone": "+1 (994) 551-2840",
2296 |     "address": {
2297 |       "street": "271 Hanover Place",
2298 |       "city": "Kipp",
2299 |       "state": "Iowa"
2300 |     },
2301 |     "registered": "2016-04-07",
2302 |     "tags": [
2303 |       "nisi",
2304 |       "consequat",
2305 |       "labore",
2306 |       "occaecat",
2307 |       "magna",
2308 |       "duis",
2309 |       "ullamco"
2310 |     ]
2311 |   },
2312 |   {
2313 |     "_id": "57ef9cd8971d5bf7c2ba6a2e",
2314 |     "index": 77,
2315 |     "guid": "df18fc2c-8480-4396-93ea-4db26c228f7e",
2316 |     "isActive": true,
2317 |     "balance": "$3,772.45",
2318 |     "picture": "http://placehold.it/32x32",
2319 |     "age": 20,
2320 |     "eyeColor": "brown",
2321 |     "name": "Tara Mcknight",
2322 |     "gender": "female",
2323 |     "company": "COMTENT",
2324 |     "email": "taramcknight@comtent.com",
2325 |     "phone": "+1 (932) 574-3393",
2326 |     "address": {
2327 |       "street": "619 Argyle Road",
2328 |       "city": "Roulette",
2329 |       "state": "Northern Mariana Islands"
2330 |     },
2331 |     "registered": "2015-11-21",
2332 |     "tags": [
2333 |       "reprehenderit",
2334 |       "occaecat",
2335 |       "culpa",
2336 |       "anim",
2337 |       "eiusmod",
2338 |       "labore",
2339 |       "fugiat"
2340 |     ]
2341 |   },
2342 |   {
2343 |     "_id": "57ef9cd890abec4d44010eea",
2344 |     "index": 78,
2345 |     "guid": "74ee47e9-0a58-4a57-80d9-98571e613ae0",
2346 |     "isActive": true,
2347 |     "balance": "$1,971.96",
2348 |     "picture": "http://placehold.it/32x32",
2349 |     "age": 21,
2350 |     "eyeColor": "brown",
2351 |     "name": "Ebony Miller",
2352 |     "gender": "female",
2353 |     "company": "TETRATREX",
2354 |     "email": "ebonymiller@tetratrex.com",
2355 |     "phone": "+1 (953) 596-3683",
2356 |     "address": {
2357 |       "street": "451 Landis Court",
2358 |       "city": "Elrama",
2359 |       "state": "Tennessee"
2360 |     },
2361 |     "registered": "2015-05-06",
2362 |     "tags": [
2363 |       "reprehenderit",
2364 |       "voluptate",
2365 |       "ipsum",
2366 |       "Lorem",
2367 |       "ea",
2368 |       "deserunt",
2369 |       "duis"
2370 |     ]
2371 |   },
2372 |   {
2373 |     "_id": "57ef9cd8e8a49916e0eef4a3",
2374 |     "index": 79,
2375 |     "guid": "1a5eb28e-ba61-4abf-95d1-cf69373ac673",
2376 |     "isActive": true,
2377 |     "balance": "$3,136.92",
2378 |     "picture": "http://placehold.it/32x32",
2379 |     "age": 35,
2380 |     "eyeColor": "green",
2381 |     "name": "Sexton James",
2382 |     "gender": "male",
2383 |     "company": "XLEEN",
2384 |     "email": "sextonjames@xleen.com",
2385 |     "phone": "+1 (886) 443-3743",
2386 |     "address": {
2387 |       "street": "565 Dobbin Street",
2388 |       "city": "Hessville",
2389 |       "state": "District Of Columbia"
2390 |     },
2391 |     "registered": "2016-03-23",
2392 |     "tags": [
2393 |       "ea",
2394 |       "veniam",
2395 |       "ut",
2396 |       "aute",
2397 |       "aliquip",
2398 |       "ea",
2399 |       "consectetur"
2400 |     ]
2401 |   },
2402 |   {
2403 |     "_id": "57ef9cd89c8e57302ca806f7",
2404 |     "index": 80,
2405 |     "guid": "ad19546d-5b93-4dd0-a19f-53e4eb4d79aa",
2406 |     "isActive": true,
2407 |     "balance": "$2,174.53",
2408 |     "picture": "http://placehold.it/32x32",
2409 |     "age": 40,
2410 |     "eyeColor": "brown",
2411 |     "name": "Barr Espinoza",
2412 |     "gender": "male",
2413 |     "company": "PETICULAR",
2414 |     "email": "barrespinoza@peticular.com",
2415 |     "phone": "+1 (863) 570-3563",
2416 |     "address": {
2417 |       "street": "492 Underhill Avenue",
2418 |       "city": "Gratton",
2419 |       "state": "Marshall Islands"
2420 |     },
2421 |     "registered": "2016-08-18",
2422 |     "tags": [
2423 |       "ullamco",
2424 |       "cillum",
2425 |       "ullamco",
2426 |       "exercitation",
2427 |       "irure",
2428 |       "esse",
2429 |       "aliquip"
2430 |     ]
2431 |   },
2432 |   {
2433 |     "_id": "57ef9cd84211c7823bf419cf",
2434 |     "index": 81,
2435 |     "guid": "9c75ad58-fbf9-49c3-a3cc-ec0e747cbc2c",
2436 |     "isActive": true,
2437 |     "balance": "$2,401.76",
2438 |     "picture": "http://placehold.it/32x32",
2439 |     "age": 29,
2440 |     "eyeColor": "green",
2441 |     "name": "Christa Lawson",
2442 |     "gender": "female",
2443 |     "company": "ENTALITY",
2444 |     "email": "christalawson@entality.com",
2445 |     "phone": "+1 (887) 449-2183",
2446 |     "address": {
2447 |       "street": "625 Grafton Street",
2448 |       "city": "Cresaptown",
2449 |       "state": "Florida"
2450 |     },
2451 |     "registered": "2014-03-09",
2452 |     "tags": [
2453 |       "in",
2454 |       "ea",
2455 |       "elit",
2456 |       "sit",
2457 |       "elit",
2458 |       "laboris",
2459 |       "labore"
2460 |     ]
2461 |   },
2462 |   {
2463 |     "_id": "57ef9cd8deb2a837eee99361",
2464 |     "index": 82,
2465 |     "guid": "439349b3-b4e5-4e22-b074-d3d8d053986c",
2466 |     "isActive": true,
2467 |     "balance": "$3,718.44",
2468 |     "picture": "http://placehold.it/32x32",
2469 |     "age": 38,
2470 |     "eyeColor": "blue",
2471 |     "name": "Carla Gray",
2472 |     "gender": "female",
2473 |     "company": "NETPLODE",
2474 |     "email": "carlagray@netplode.com",
2475 |     "phone": "+1 (831) 547-3290",
2476 |     "address": {
2477 |       "street": "129 Mill Street",
2478 |       "city": "Austinburg",
2479 |       "state": "Texas"
2480 |     },
2481 |     "registered": "2014-03-23",
2482 |     "tags": [
2483 |       "non",
2484 |       "tempor",
2485 |       "eu",
2486 |       "ipsum",
2487 |       "voluptate",
2488 |       "exercitation",
2489 |       "officia"
2490 |     ]
2491 |   },
2492 |   {
2493 |     "_id": "57ef9cd846d6320f8ee38cd6",
2494 |     "index": 83,
2495 |     "guid": "ff535f76-d5ed-4d07-9e5d-1426a6a649f1",
2496 |     "isActive": true,
2497 |     "balance": "$2,427.75",
2498 |     "picture": "http://placehold.it/32x32",
2499 |     "age": 23,
2500 |     "eyeColor": "blue",
2501 |     "name": "Aurora Banks",
2502 |     "gender": "female",
2503 |     "company": "BEDDER",
2504 |     "email": "aurorabanks@bedder.com",
2505 |     "phone": "+1 (936) 433-3077",
2506 |     "address": {
2507 |       "street": "498 Louis Place",
2508 |       "city": "Canby",
2509 |       "state": "South Carolina"
2510 |     },
2511 |     "registered": "2015-08-29",
2512 |     "tags": [
2513 |       "eu",
2514 |       "mollit",
2515 |       "et",
2516 |       "mollit",
2517 |       "laborum",
2518 |       "incididunt",
2519 |       "aute"
2520 |     ]
2521 |   },
2522 |   {
2523 |     "_id": "57ef9cd893f2a82424d8f6ee",
2524 |     "index": 84,
2525 |     "guid": "8b007ae2-3474-4eff-bdad-17cd7c378867",
2526 |     "isActive": true,
2527 |     "balance": "$2,206.37",
2528 |     "picture": "http://placehold.it/32x32",
2529 |     "age": 28,
2530 |     "eyeColor": "green",
2531 |     "name": "Ruth Maxwell",
2532 |     "gender": "female",
2533 |     "company": "ZEAM",
2534 |     "email": "ruthmaxwell@zeam.com",
2535 |     "phone": "+1 (831) 492-3070",
2536 |     "address": {
2537 |       "street": "106 Utica Avenue",
2538 |       "city": "Norfolk",
2539 |       "state": "Nevada"
2540 |     },
2541 |     "registered": "2015-11-12",
2542 |     "tags": [
2543 |       "consectetur",
2544 |       "aliqua",
2545 |       "sit",
2546 |       "magna",
2547 |       "voluptate",
2548 |       "esse",
2549 |       "non"
2550 |     ]
2551 |   },
2552 |   {
2553 |     "_id": "57ef9cd8f8c3e6032c08eab0",
2554 |     "index": 85,
2555 |     "guid": "b9872ffe-a6dc-4525-ac91-75b356a43ac2",
2556 |     "isActive": false,
2557 |     "balance": "$1,234.70",
2558 |     "picture": "http://placehold.it/32x32",
2559 |     "age": 20,
2560 |     "eyeColor": "brown",
2561 |     "name": "Mayer Edwards",
2562 |     "gender": "male",
2563 |     "company": "POWERNET",
2564 |     "email": "mayeredwards@powernet.com",
2565 |     "phone": "+1 (823) 411-3607",
2566 |     "address": {
2567 |       "street": "539 Jay Street",
2568 |       "city": "Sena",
2569 |       "state": "Delaware"
2570 |     },
2571 |     "registered": "2015-06-07",
2572 |     "tags": [
2573 |       "officia",
2574 |       "occaecat",
2575 |       "proident",
2576 |       "Lorem",
2577 |       "aute",
2578 |       "et",
2579 |       "sit"
2580 |     ]
2581 |   },
2582 |   {
2583 |     "_id": "57ef9cd886542a15d66dc2a6",
2584 |     "index": 86,
2585 |     "guid": "a959a4e6-7e0c-41a8-912c-c1280609f486",
2586 |     "isActive": true,
2587 |     "balance": "$1,686.52",
2588 |     "picture": "http://placehold.it/32x32",
2589 |     "age": 23,
2590 |     "eyeColor": "blue",
2591 |     "name": "Caroline Bass",
2592 |     "gender": "female",
2593 |     "company": "ARTWORLDS",
2594 |     "email": "carolinebass@artworlds.com",
2595 |     "phone": "+1 (932) 419-2973",
2596 |     "address": {
2597 |       "street": "858 Pershing Loop",
2598 |       "city": "Sidman",
2599 |       "state": "Kansas"
2600 |     },
2601 |     "registered": "2015-04-24",
2602 |     "tags": [
2603 |       "ea",
2604 |       "veniam",
2605 |       "nulla",
2606 |       "sint",
2607 |       "proident",
2608 |       "esse",
2609 |       "nisi"
2610 |     ]
2611 |   },
2612 |   {
2613 |     "_id": "57ef9cd8f1adf135eb8b5d4f",
2614 |     "index": 87,
2615 |     "guid": "1ae041da-fddc-4df5-8485-aff3eacbdcf4",
2616 |     "isActive": false,
2617 |     "balance": "$2,991.87",
2618 |     "picture": "http://placehold.it/32x32",
2619 |     "age": 27,
2620 |     "eyeColor": "green",
2621 |     "name": "Walsh Mccarthy",
2622 |     "gender": "male",
2623 |     "company": "FARMAGE",
2624 |     "email": "walshmccarthy@farmage.com",
2625 |     "phone": "+1 (921) 500-3805",
2626 |     "address": {
2627 |       "street": "930 Banker Street",
2628 |       "city": "Nicholson",
2629 |       "state": "California"
2630 |     },
2631 |     "registered": "2014-10-18",
2632 |     "tags": [
2633 |       "laboris",
2634 |       "ad",
2635 |       "adipisicing",
2636 |       "esse",
2637 |       "sit",
2638 |       "consequat",
2639 |       "magna"
2640 |     ]
2641 |   },
2642 |   {
2643 |     "_id": "57ef9cd8e292916e52e972ec",
2644 |     "index": 88,
2645 |     "guid": "9207f1d2-870c-466e-a1ad-ed2b9af4ad65",
2646 |     "isActive": true,
2647 |     "balance": "$1,310.82",
2648 |     "picture": "http://placehold.it/32x32",
2649 |     "age": 37,
2650 |     "eyeColor": "brown",
2651 |     "name": "Natalie Bond",
2652 |     "gender": "female",
2653 |     "company": "GYNKO",
2654 |     "email": "nataliebond@gynko.com",
2655 |     "phone": "+1 (908) 587-2856",
2656 |     "address": {
2657 |       "street": "698 Madoc Avenue",
2658 |       "city": "Outlook",
2659 |       "state": "New Jersey"
2660 |     },
2661 |     "registered": "2016-03-30",
2662 |     "tags": [
2663 |       "aute",
2664 |       "magna",
2665 |       "eiusmod",
2666 |       "est",
2667 |       "officia",
2668 |       "adipisicing",
2669 |       "amet"
2670 |     ]
2671 |   },
2672 |   {
2673 |     "_id": "57ef9cd8ff15e5092584605b",
2674 |     "index": 89,
2675 |     "guid": "1cf9890d-2d89-4a98-ac4c-488b47f33ec7",
2676 |     "isActive": false,
2677 |     "balance": "$1,664.41",
2678 |     "picture": "http://placehold.it/32x32",
2679 |     "age": 32,
2680 |     "eyeColor": "green",
2681 |     "name": "Watts Kramer",
2682 |     "gender": "male",
2683 |     "company": "MARKETOID",
2684 |     "email": "wattskramer@marketoid.com",
2685 |     "phone": "+1 (981) 572-3764",
2686 |     "address": {
2687 |       "street": "460 Caton Place",
2688 |       "city": "Southmont",
2689 |       "state": "Wyoming"
2690 |     },
2691 |     "registered": "2015-02-16",
2692 |     "tags": [
2693 |       "occaecat",
2694 |       "sit",
2695 |       "amet",
2696 |       "non",
2697 |       "sit",
2698 |       "enim",
2699 |       "ex"
2700 |     ]
2701 |   },
2702 |   {
2703 |     "_id": "57ef9cd85d843de02021c7a4",
2704 |     "index": 90,
2705 |     "guid": "095bf361-65f5-42ae-aa51-1973d6ad6a2c",
2706 |     "isActive": true,
2707 |     "balance": "$1,981.37",
2708 |     "picture": "http://placehold.it/32x32",
2709 |     "age": 20,
2710 |     "eyeColor": "green",
2711 |     "name": "Iva Brady",
2712 |     "gender": "female",
2713 |     "company": "COMDOM",
2714 |     "email": "ivabrady@comdom.com",
2715 |     "phone": "+1 (942) 514-2261",
2716 |     "address": {
2717 |       "street": "525 Hoyts Lane",
2718 |       "city": "Waterloo",
2719 |       "state": "Massachusetts"
2720 |     },
2721 |     "registered": "2015-12-22",
2722 |     "tags": [
2723 |       "nisi",
2724 |       "quis",
2725 |       "adipisicing",
2726 |       "et",
2727 |       "quis",
2728 |       "esse",
2729 |       "consequat"
2730 |     ]
2731 |   },
2732 |   {
2733 |     "_id": "57ef9cd8bf5b4c18438c890c",
2734 |     "index": 91,
2735 |     "guid": "bfb1f645-a63e-4fc0-9a94-a208396e32f7",
2736 |     "isActive": true,
2737 |     "balance": "$2,694.33",
2738 |     "picture": "http://placehold.it/32x32",
2739 |     "age": 39,
2740 |     "eyeColor": "blue",
2741 |     "name": "Estella Moses",
2742 |     "gender": "female",
2743 |     "company": "UNDERTAP",
2744 |     "email": "estellamoses@undertap.com",
2745 |     "phone": "+1 (999) 418-3031",
2746 |     "address": {
2747 |       "street": "127 Liberty Avenue",
2748 |       "city": "Roy",
2749 |       "state": "Kentucky"
2750 |     },
2751 |     "registered": "2014-08-10",
2752 |     "tags": [
2753 |       "ipsum",
2754 |       "ea",
2755 |       "eu",
2756 |       "duis",
2757 |       "enim",
2758 |       "consequat",
2759 |       "veniam"
2760 |     ]
2761 |   },
2762 |   {
2763 |     "_id": "57ef9cd895135c80288cf57e",
2764 |     "index": 92,
2765 |     "guid": "6470c22d-0086-4acf-9fdf-7d1762a17e08",
2766 |     "isActive": true,
2767 |     "balance": "$3,995.47",
2768 |     "picture": "http://placehold.it/32x32",
2769 |     "age": 40,
2770 |     "eyeColor": "brown",
2771 |     "name": "Anthony Knight",
2772 |     "gender": "male",
2773 |     "company": "EQUICOM",
2774 |     "email": "anthonyknight@equicom.com",
2775 |     "phone": "+1 (873) 569-3224",
2776 |     "address": {
2777 |       "street": "654 Greene Avenue",
2778 |       "city": "Chamizal",
2779 |       "state": "Arizona"
2780 |     },
2781 |     "registered": "2014-02-08",
2782 |     "tags": [
2783 |       "Lorem",
2784 |       "duis",
2785 |       "incididunt",
2786 |       "nulla",
2787 |       "Lorem",
2788 |       "dolor",
2789 |       "adipisicing"
2790 |     ]
2791 |   },
2792 |   {
2793 |     "_id": "57ef9cd8ca4056877bc2cb23",
2794 |     "index": 93,
2795 |     "guid": "fc8ea442-c629-42a1-87dd-c58609c0ebdb",
2796 |     "isActive": false,
2797 |     "balance": "$3,017.70",
2798 |     "picture": "http://placehold.it/32x32",
2799 |     "age": 40,
2800 |     "eyeColor": "blue",
2801 |     "name": "Russell Gilliam",
2802 |     "gender": "male",
2803 |     "company": "BLUEGRAIN",
2804 |     "email": "russellgilliam@bluegrain.com",
2805 |     "phone": "+1 (996) 465-2053",
2806 |     "address": {
2807 |       "street": "400 Columbia Place",
2808 |       "city": "Summerset",
2809 |       "state": "Maryland"
2810 |     },
2811 |     "registered": "2015-01-19",
2812 |     "tags": [
2813 |       "sit",
2814 |       "eu",
2815 |       "qui",
2816 |       "Lorem",
2817 |       "enim",
2818 |       "aliquip",
2819 |       "enim"
2820 |     ]
2821 |   },
2822 |   {
2823 |     "_id": "57ef9cd8723a1463115cbf16",
2824 |     "index": 94,
2825 |     "guid": "282ddfb3-7c52-4732-80a2-be8c436ee0c9",
2826 |     "isActive": true,
2827 |     "balance": "$1,448.23",
2828 |     "picture": "http://placehold.it/32x32",
2829 |     "age": 35,
2830 |     "eyeColor": "brown",
2831 |     "name": "Mcmahon Reynolds",
2832 |     "gender": "male",
2833 |     "company": "PANZENT",
2834 |     "email": "mcmahonreynolds@panzent.com",
2835 |     "phone": "+1 (877) 512-2213",
2836 |     "address": {
2837 |       "street": "452 Kathleen Court",
2838 |       "city": "Barronett",
2839 |       "state": "Illinois"
2840 |     },
2841 |     "registered": "2015-04-03",
2842 |     "tags": [
2843 |       "qui",
2844 |       "in",
2845 |       "qui",
2846 |       "laboris",
2847 |       "et",
2848 |       "nulla",
2849 |       "id"
2850 |     ]
2851 |   },
2852 |   {
2853 |     "_id": "57ef9cd8d99535859969e271",
2854 |     "index": 95,
2855 |     "guid": "ac088fe2-019a-4fd7-bd8c-5d21eeb5e731",
2856 |     "isActive": false,
2857 |     "balance": "$2,204.60",
2858 |     "picture": "http://placehold.it/32x32",
2859 |     "age": 20,
2860 |     "eyeColor": "green",
2861 |     "name": "Rosa Myers",
2862 |     "gender": "female",
2863 |     "company": "LUNCHPAD",
2864 |     "email": "rosamyers@lunchpad.com",
2865 |     "phone": "+1 (847) 423-3501",
2866 |     "address": {
2867 |       "street": "913 Trucklemans Lane",
2868 |       "city": "Lynn",
2869 |       "state": "West Virginia"
2870 |     },
2871 |     "registered": "2016-06-10",
2872 |     "tags": [
2873 |       "veniam",
2874 |       "consectetur",
2875 |       "dolor",
2876 |       "quis",
2877 |       "anim",
2878 |       "do",
2879 |       "sit"
2880 |     ]
2881 |   },
2882 |   {
2883 |     "_id": "57ef9cd802b0ae83a4ed2495",
2884 |     "index": 96,
2885 |     "guid": "0507ff39-d0be-4f4d-afc0-01458a66d7a9",
2886 |     "isActive": true,
2887 |     "balance": "$3,655.93",
2888 |     "picture": "http://placehold.it/32x32",
2889 |     "age": 28,
2890 |     "eyeColor": "brown",
2891 |     "name": "Angeline Schroeder",
2892 |     "gender": "female",
2893 |     "company": "ZORROMOP",
2894 |     "email": "angelineschroeder@zorromop.com",
2895 |     "phone": "+1 (852) 421-2895",
2896 |     "address": {
2897 |       "street": "195 Sumpter Street",
2898 |       "city": "Washington",
2899 |       "state": "Alaska"
2900 |     },
2901 |     "registered": "2015-05-21",
2902 |     "tags": [
2903 |       "dolor",
2904 |       "dolor",
2905 |       "nulla",
2906 |       "id",
2907 |       "mollit",
2908 |       "eiusmod",
2909 |       "ut"
2910 |     ]
2911 |   },
2912 |   {
2913 |     "_id": "57ef9cd82e8295c9e6edee99",
2914 |     "index": 97,
2915 |     "guid": "322617dc-ac2f-4076-bec9-7539ec959ad2",
2916 |     "isActive": true,
2917 |     "balance": "$1,675.25",
2918 |     "picture": "http://placehold.it/32x32",
2919 |     "age": 24,
2920 |     "eyeColor": "brown",
2921 |     "name": "Hall Atkinson",
2922 |     "gender": "male",
2923 |     "company": "UNIA",
2924 |     "email": "hallatkinson@unia.com",
2925 |     "phone": "+1 (847) 412-2997",
2926 |     "address": {
2927 |       "street": "864 Pierrepont Street",
2928 |       "city": "Caroleen",
2929 |       "state": "Oklahoma"
2930 |     },
2931 |     "registered": "2016-01-02",
2932 |     "tags": [
2933 |       "quis",
2934 |       "id",
2935 |       "quis",
2936 |       "consequat",
2937 |       "enim",
2938 |       "esse",
2939 |       "elit"
2940 |     ]
2941 |   },
2942 |   {
2943 |     "_id": "57ef9cd8864bcc1330fa009c",
2944 |     "index": 98,
2945 |     "guid": "3c336f09-140a-423b-963d-e49a0864b214",
2946 |     "isActive": false,
2947 |     "balance": "$2,141.56",
2948 |     "picture": "http://placehold.it/32x32",
2949 |     "age": 28,
2950 |     "eyeColor": "brown",
2951 |     "name": "Paulette Sellers",
2952 |     "gender": "female",
2953 |     "company": "ARCTIQ",
2954 |     "email": "paulettesellers@arctiq.com",
2955 |     "phone": "+1 (937) 462-3359",
2956 |     "address": {
2957 |       "street": "130 Ovington Court",
2958 |       "city": "Diaperville",
2959 |       "state": "Federated States Of Micronesia"
2960 |     },
2961 |     "registered": "2014-10-28",
2962 |     "tags": [
2963 |       "aliqua",
2964 |       "occaecat",
2965 |       "ut",
2966 |       "dolor",
2967 |       "dolor",
2968 |       "irure",
2969 |       "pariatur"
2970 |     ]
2971 |   },
2972 |   {
2973 |     "_id": "57ef9cd88bbbbcdd7e59618f",
2974 |     "index": 99,
2975 |     "guid": "6854d791-09f7-46c2-b66c-bcc0ba82d654",
2976 |     "isActive": true,
2977 |     "balance": "$1,683.05",
2978 |     "picture": "http://placehold.it/32x32",
2979 |     "age": 31,
2980 |     "eyeColor": "brown",
2981 |     "name": "Key Black",
2982 |     "gender": "male",
2983 |     "company": "MAINELAND",
2984 |     "email": "keyblack@maineland.com",
2985 |     "phone": "+1 (920) 536-2044",
2986 |     "address": {
2987 |       "street": "326 Melrose Street",
2988 |       "city": "Denio",
2989 |       "state": "Vermont"
2990 |     },
2991 |     "registered": "2016-08-06",
2992 |     "tags": [
2993 |       "tempor",
2994 |       "enim",
2995 |       "elit",
2996 |       "cupidatat",
2997 |       "ipsum",
2998 |       "ipsum",
2999 |       "in"
3000 |     ]
3001 |   }
3002 | ]
3003 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'VueJs Smart Table',
 3 |   base: '/vuejs-smart-table/',
 4 |   description: 'Simple yet powerful Data Table for Vue',
 5 |   configurewebpack: {
 6 |     resolve: {
 7 |       alias: {
 8 |         'vue-smart-table': '../../src'
 9 |       }
10 |     }
11 |   },
12 |   themeConfig: {
13 |     repo: 'tochoromero/vuejs-smart-table',
14 |     docsDir: 'docs',
15 |     editLinks: true,
16 |     sidebarDepth: 1,
17 |     sidebar: [
18 |       '/',
19 |       'the-basics/',
20 |       'filtering/',
21 |       'sorting/',
22 |       'pagination/',
23 |       'selection/'
24 |     ]
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | Vue Smart Table was created out of the need for a simple highly customizable data table plugin 
 4 | that could take advantage of Vue's slots. It has no dependencies but Vue and because it 
 5 | renders as a standard HTML table it is compatible with CSS Frameworks such as Bootstrap and Foundation.
 6 | 
 7 | Out of the box you will get filtering, column sorting, client side pagination and row selection.
 8 | 
 9 | ## Installation
10 | To install simply run
11 | ```
12 | npm add vuejs-smart-table
13 | ```
14 | or
15 | ```
16 | yarn add vuejs-smart-table
17 | ```
18 | 
19 | Then in your `main.js`
20 | ```js
21 | import SmartTable from 'vuejs-smart-table'
22 | 
23 | Vue.use(SmartTable)
24 | ```
25 | This will globally register four Components: `v-table`, `v-th`, `v-tr` and `smart-pagination`
26 | 


--------------------------------------------------------------------------------
/docs/filtering/README.md:
--------------------------------------------------------------------------------
  1 | # Filtering
  2 | Smart Table is only on charge of the actual row filtering based on the provided configuration. 
  3 | The visual aspect of it are in your control, allowing you to use any UI Elements to interact while it frees you
  4 | from the actual filtering computation.
  5 | 
  6 | ## Filters <Badge text="Property"/> <Badge text="filters: Object"/>
  7 | To enable filtering you need to provide the `filters` property on the `v-table` component.
  8 | 
  9 | The `filters` configuration object has the following form:
 10 | 
 11 | ```js
 12 | {
 13 |   name: {value: '', keys: ['name']}
 14 | }
 15 | ```
 16 | 
 17 | The entry Key is just for you, so you can reference any of the filters by its name. 
 18 | It is the entry Value Object what Smart Table will use to perform the filtering.
 19 | 
 20 | ### value <Badge text="String" type="success"/>
 21 | This String is the value of the filter, you would normally bind it to the `v-model` of an input element. As you type,
 22 | the rows will be filtered.
 23 | 
 24 | Keep in mind that an empty `value` means there is no filter.
 25 | 
 26 | ### keys <Badge text="Array" type="success"/>
 27 | This is an Array of Strings indicating what fields of each row the filter `value` will apply to.
 28 | 
 29 | You must provide at least one key. If more than one key is provided as long as one of the row fields matches the filter,
 30 | the row will be displayed.
 31 | 
 32 | #### Example
 33 | ```js
 34 | import users from './users.json'
 35 | 
 36 | export default {
 37 |   name: 'BasicFiltering',
 38 |   data: () => ({
 39 |     users,
 40 |     filters: {
 41 |       name: { value: '', keys: ['name'] }
 42 |     }
 43 |   })
 44 | }
 45 | ```
 46 | 
 47 | ```html
 48 | <template>
 49 |     <div>
 50 |       <label>Filter by Name:</label>
 51 |       <input class="form-control" v-model="filters.name.value"/>
 52 |     
 53 |       <v-table
 54 |         :data="users"
 55 |         :filters="filters"
 56 |       >
 57 |         <thead slot="head">
 58 |         <th>Name</th>
 59 |         <th>Age</th>
 60 |         <th>Email</th>
 61 |         <th>Address</th>
 62 |         </thead>
 63 |         <tbody slot="body" slot-scope="{displayData}">
 64 |         <tr v-for="row in displayData" :key="row.guid">
 65 |           <td>{{ row.name }}</td>
 66 |           <td>{{ row.age }}</td>
 67 |           <td>{{ row.email }}</td>
 68 |           <td>
 69 |               {{ row.address.street }}, 
 70 |               {{ row.address.city }} 
 71 |               {{ row.address.state}}
 72 |           </td>
 73 |         </tr>
 74 |         </tbody>
 75 |       </v-table>
 76 |     </div>
 77 | </template>
 78 | ```
 79 | 
 80 | <BasicFiltering/>
 81 | 
 82 | ## Custom Filters
 83 | You also have the option to provide a custom filter for more complex situations. 
 84 | A Custom Filter is a function with two arguments: `filterValue` and `row`.
 85 | It should return `true` if the row should be displayed and `false` otherwise.
 86 | 
 87 | ### custom <Badge text="Function" type="success"/>
 88 | To use a custom filter provide the filtering function on the `custom` property on the filter configuration object:
 89 | 
 90 | ### value <Badge text="Any" type="success"/>
 91 | With custom filtering the `value` property is not limited to Strings, you can provide anything as the `value`, 
 92 | it will just get passed along to your custom function.
 93 | 
 94 | #### Example
 95 | ```js
 96 | <script>
 97 | import users from './users.json'
 98 | 
 99 | export default {
100 |   name: 'CustomFiltering',
101 |   data () {
102 |     return {
103 |       users,
104 |       filters: {
105 |         age: { value: { min: 21, max: 22 }, custom: this.ageFilter }
106 |       }
107 |     }
108 |   },
109 |   methods: {
110 |     ageFilter (filterValue, row) {
111 |       return row.age >= filterValue.min && row.age <= filterValue.max
112 |     }
113 |   }
114 | }
115 | </script>
116 | ```
117 | 
118 | ```html
119 | <template>
120 |     <div>
121 |       <label>Min Age:</label>
122 |     
123 |       <InputSpinner
124 |         v-model="filters.age.value.min"
125 |         :min="0"
126 |         :max="filters.age.value.max"
127 |       />
128 |     
129 |       <label>Max Age:</label>
130 |       <InputSpinner
131 |         v-model="filters.age.value.max"
132 |         :min="filters.age.value.min"
133 |         :max="99"
134 |       />
135 |     
136 |       <v-table
137 |         :data="users"
138 |         :filters="filters"
139 |       >
140 |         <thead slot="head">
141 |         <th>Name</th>
142 |         <th>Age</th>
143 |         <th>Email</th>
144 |         <th>Address</th>
145 |         </thead>
146 |         <tbody slot="body" slot-scope="{displayData}">
147 |         <tr v-for="row in displayData" :key="row.guid">
148 |           <td>{{ row.name }}</td>
149 |           <td>{{ row.age }}</td>
150 |           <td>{{ row.email }}</td>
151 |           <td>
152 |             {{ row.address.street }},
153 |             {{ row.address.city }}
154 |             {{ row.address.state}}
155 |           </td>
156 |         </tr>
157 |         </tbody>
158 |       </v-table>
159 |     </div>
160 | </template>
161 | ```
162 | ::: tip
163 | Please think of the `InputSpinner` as a fancy `Input` with validation. The important bit is its `v-model`.
164 | :::
165 | 
166 | <CustomFiltering/>
167 | 


--------------------------------------------------------------------------------
/docs/pagination/README.md:
--------------------------------------------------------------------------------
  1 | # Pagination
  2 | 
  3 | Vue Smart Table supports client side pagination. 
  4 | To enable it, you need to provide the `pageSize` and `currentPage` properties on the `v-table` Component.
  5 | 
  6 | ## Page Size  <Badge text="Property"/> <Badge text="pageSize: Number"/>
  7 | The `pageSize` property specify the amount of items each page should contain. 
  8 | If this property is present, client side pagination will be enabled.
  9 | 
 10 | ## Current Page <Badge text="Property"/> <Badge text="currentPage: Number"/>  <Badge text="Sync"/>
 11 | The `currentPage` property indicates the current active page. 
 12 | This property should be bound with a `sync` modifier, since the `v-table` itself 
 13 | may update its value, e.g. if a new filter is applied and the amount of available items decreases 
 14 | so the current active page is no longer valid.
 15 | ::: tip
 16 | The `currentPage` property index starts at `1`, 
 17 | this is to avoid confusion since visually the page links start at `1` not `0`.
 18 | :::
 19 | 
 20 | ## Total pages  <Badge text="Event"/> <Badge text="totalPagesChanged: Number"/>
 21 | The total amount of pages is calculated using the Total Items and the Page Size. 
 22 | As the Total Items changes the Total Pages will also change and a `totalPagesChanged` event 
 23 | will be emitted with the new amount as its payload.
 24 | 
 25 | ## Total Items  <Badge text="Event"/> <Badge text="totalItemsChanged: Number"/>
 26 | The total amount of items changes as the Filters change. When it changes `v-table` will emit a `totalItemsChanged` Event.
 27 | This event will also be emitted when the `v-table` mounts so it will have the right amount from the start.
 28 | 
 29 | ## Pagination Controls
 30 | The pagination controls are handled outside of `v-table`, you can use whatever you want to control it, but we provide
 31 | a `SmartPagination` component so you can have it working out of the box.
 32 | 
 33 | The component requires the following properties:
 34 | 
 35 | ### Current Page <Badge text="Property"/> <Badge text="currentPage: Number"/>  <Badge text="Sync"/>
 36 | This should be the same `currentPage` property used for the `v-table` component 
 37 | and it should also use the `sync` modifier, that way whenever either of them changes it the other one will be notified.
 38 | 
 39 | ### Total Pages <Badge text="Property"/> <Badge text="totalPages: Number"/>
 40 | The `v-table` component emits a `totalPagesChanged` event, when the event happens we should save the event payload and
 41 | use it for the `totalPages` property on the `SmartPagination` component.
 42 | 
 43 | ## Example
 44 | ```html
 45 | <template>
 46 |     <div>
 47 |       <v-table
 48 |         :data="users"
 49 |         :currentPage.sync="currentPage"
 50 |         :pageSize="5"
 51 |         @totalPagesChanged="totalPages = $event"
 52 |       >
 53 |         <thead slot="head">
 54 |           <th>Name</th>
 55 |           <th>Age</th>
 56 |           <th>State</th>
 57 |           <th>Registered</th>
 58 |         </thead>
 59 |         <tbody slot="body" slot-scope="{displayData}">
 60 |         <tr v-for="row in displayData" :key="row.guid">
 61 |           <td>{{ row.name }}</td>
 62 |           <td>{{ row.age }}</td>
 63 |           <td>{{ row.address.state }}</td>
 64 |           <td>{{ row.registered }}</td>
 65 |         </tr>
 66 |         </tbody>
 67 |       </v-table>
 68 |     
 69 |       <smart-pagination
 70 |         :currentPage.sync="currentPage"
 71 |         :totalPages="totalPages"
 72 |       />
 73 |     </div>
 74 | </template>
 75 | ```
 76 | 
 77 | ```js
 78 | <script>
 79 | import users from './users.json'
 80 | 
 81 | export default {
 82 |   name: 'Pagination',
 83 |   data: () => ({
 84 |     users,
 85 |     currentPage: 1,
 86 |     totalPages: 0
 87 |   })
 88 | }
 89 | </script>
 90 | ```
 91 | <Pagination/>
 92 | 
 93 | ## Customizing Smart Pagination
 94 | Besides the `currentPage` and `totalPages` properties, there are many others used to configure the behaviour and look
 95 | and feel of the pagination controls.
 96 | 
 97 | ### Hide Single Page <Badge text="Property"/> <Badge text="hideSinglePage: Boolean"/> <Badge text="default: true"/>
 98 | Determines whether or not we show the pagination controls when there is only a single page.
 99 | 
100 | ### Max Page Links <Badge text="Property"/> <Badge text="maxPageLinks: Number"/>
101 | By default we will show every single page link, but you can use the `maxPageLinks` property to limit the amount of visible links.
102 | 
103 | ### Boundary Links <Badge text="Property"/> <Badge text="boundaryLinks: Boolean"/> <Badge text="default: false"/>
104 | Determines whether or not we should show two links to navigate to the First and Last page.
105 | 
106 | ### First Text <Badge text="Property"/> <Badge text="firstText: String"/> <Badge text="default: First"/>
107 | Specify the text for the First Page link.
108 | 
109 | ### Last Text <Badge text="Property"/> <Badge text="lastText: String"/> <Badge text="default: Last"/>
110 | Specify the text for the Last Page link.
111 | 
112 | ### Direction Links <Badge text="Property"/> <Badge text="hideSinglePage: Boolean"/> <Badge text="default: true"/>
113 | Determines whether or not we should have direction links to navigate back and forth between pages.
114 | 
115 | ### CSS Customization
116 | The HTML structure for the Smart Pagination component is as follows:
117 | ```html
118 | <nav class="smart-pagination">
119 |     <ul class="pagination">
120 |        <li class="page-item">
121 |          <a class="page-link">1</a>
122 |          <a class="page-link">2</a>
123 |          <a class="page-link">3</a>
124 |        </li>
125 |     </ul>
126 | </nav>
127 | ```
128 | This structure is compatible with Bootstrap's Pagination. But you can easily customize it with your own Styles.
129 | 


--------------------------------------------------------------------------------
/docs/selection/README.md:
--------------------------------------------------------------------------------
 1 | # Row Selection
 2 | 
 3 | ## Table Row <Badge text="Component"/> <Badge text="v-tr"/>
 4 | To enable row selection you need to use the `v-tr` component. It only has one property: `row`
 5 | 
 6 | ### Row <Badge text="Property"/> <Badge text="row: Object"/> <Badge text="Required"/>
 7 | You must provide the `row` property with the current Object for the row.
 8 | 
 9 | ## Selection Options
10 | You can configure the Selection Mode and the Selected Class in the `v-table` component.
11 | 
12 | ### Selection Mode <Badge text="Property"/> <Badge text="selectionMode: String"/> <Badge text="default: single"/>
13 | By default the selection mode is `single`, meaning only one row at a time can be selected.
14 | You can use the `selectionMode` property in the `v-table` component to set it to `multiple`, so multiple rows
15 | can be selected.
16 | 
17 | ### Selected Class <Badge text="Property"/> <Badge text="selectedClass: String"/> <Badge text="default: vt-selected"/>
18 | When a row is selected a class is added to the `tr` element, by default it is `vt-selected` byt you can change it to
19 | something else with the `selectedClass` property in the `v-table` component.
20 | 
21 | ## Selection Changed <Badge text="Event"/> <Badge text="selectionChanged: Array"/>
22 | When the selected items changes the `v-table` component will emit a `selectionChanged` event with the
23 | list of selected items as its payload.
24 | 
25 | ## Example
26 | 
27 | ```html
28 | <template>
29 |     <div>
30 |       <v-table
31 |         class="table-hover"
32 |         :data="users"
33 |         selectionMode="multiple"
34 |         selectedClass="table-info"
35 |         @selectionChanged="selectedRows = $event"
36 |       >
37 |         <thead slot="head">
38 |         <th>Name</th>
39 |         <th>Age</th>
40 |         <th>State</th>
41 |         <th>Registered</th>
42 |         </thead>
43 |         <tbody slot="body" slot-scope="{displayData}">
44 |         <v-tr
45 |           v-for="row in displayData"
46 |           :key="row.guid"
47 |           :row="row"
48 |         >
49 |           <td>{{ row.name }}</td>
50 |           <td>{{ row.age }}</td>
51 |           <td>{{ row.address.state }}</td>
52 |           <td>{{ row.registered }}</td>
53 |         </v-tr>
54 |         </tbody>
55 |       </v-table>
56 |     
57 |       <strong>Selected:</strong>
58 |       <div v-if="selectedRows.length === 0" class="text-muted">No Rows Selected</div>
59 |       <ul>
60 |         <li v-for="selected in selectedRows">
61 |           {{ selected.name }}
62 |         </li>
63 |       </ul>
64 |     </div>
65 | </template>
66 | ```
67 | 
68 | ```js
69 | <script>
70 |   import users from './users.json'
71 | 
72 |   export default {
73 |     name: 'Selection',
74 |     data: () => ({
75 |       users,
76 |       selectedRows: []
77 |     })
78 |   }
79 | </script>
80 | ```
81 | <Selection/>
82 | 


--------------------------------------------------------------------------------
/docs/sorting/README.md:
--------------------------------------------------------------------------------
  1 | # Sorting
  2 | 
  3 | To enable column sorting, instead of using vanilla `th` elements we will use `v-th` Components for the columns
  4 | that will allow sorting.
  5 | 
  6 | ## Table Header <Badge text="Component"/> <Badge text="v-th"/>
  7 | The `v-th` component renders to a regular `th` element but it allows you to sort the table, it has three properties:
  8 | `sortKey`, `customSort` and `defaultSort`.
  9 | 
 10 | ### Sort Key <Badge text="Propery"/> <Badge text="sortKey: String | Function"/>
 11 | The `sortKey` property is used to get the Row value we will sort by it can either be a `String` or a `Function`.
 12 | 
 13 | #### String
 14 | As a `String`, it represents the path to the property in the Row we want to sort. You can even use nested paths.
 15 | ```html
 16 | <thead slot="head">
 17 |     <v-th sortKey="name">Name</v-th>
 18 |     <v-th sortKey="address.state">State</v-th>
 19 | </thead>
 20 | ```
 21 | 
 22 | #### Function
 23 | If you instead pass a `Function`, we will call it with the current `row` as a parameter and expect to get back
 24 | the value used for sorting.
 25 | ```html
 26 | <thead slot="head">
 27 |     <v-th :sortKey="nameLength">Name</v-th>
 28 | </thead>
 29 | ```
 30 | 
 31 | ```js
 32 | methods: {
 33 |   nameLength (row) {
 34 |     return `row.name.length`
 35 |   }
 36 | }
 37 | ```
 38 | 
 39 | Once we have used the `key` property to get the column values, we will compare them. 
 40 | If the values are number we will just compare them by subtraction.
 41 | Otherwise we will call `toString()` on them and compare them with `localCompare`.
 42 | 
 43 | ### Custom Sort <Badge text="Property"/> <Badge text="customSort: Function"/>
 44 | In some cases you need more control over sorting, 
 45 | for instance if you have a complex object or your sorting depends in two or more values. 
 46 | For those instances instead of providing a `key` property you can use the `custom` property to provide a sorting function.
 47 | 
 48 | The function will receive the 2 rows being compared and a third parameter with the sort order 
 49 | where `1` represents ascending and `-1` represents descending.
 50 | The function needs to return `1` if the first row is greater, `-1` if the second row is greater 
 51 | or `0` if they are the same.
 52 | 
 53 | ```html
 54 | <thead slot="head">
 55 |     <v-th :customSort="dateSort">Registered</v-th>
 56 | </thead>
 57 | ```
 58 | 
 59 | ```js
 60 | methods: {
 61 |   dateSort(a, b) {
 62 |     let date1 = new Date(a.registered).getTime();
 63 |     let date2 = new Date(b.registered).getTime();
 64 |     
 65 |     return date1 - date2;
 66 |   }
 67 | }
 68 | ```
 69 | 
 70 | ### Default Sort <Badge text="Property"/> <Badge text="defaultSort: String"/>
 71 | You should provide this for the one column you want the table to be sorted by default. 
 72 | The possible values are: `asc` for ascending ordering and `desc` for descending order.
 73 | 
 74 | ```html
 75 | <thead slot="head">
 76 |     <v-th sortKey="name" defaultSort="desc">Name</v-th>
 77 | </thead>
 78 | ```
 79 | 
 80 | ### Example
 81 | ```html
 82 | <template>
 83 |   <v-table
 84 |     :data="users"
 85 |   >
 86 |     <thead slot="head">
 87 |       <v-th :sortKey="nameLength" defaultSort="desc">Name</v-th>
 88 |       <v-th sortKey="age">Age</v-th>
 89 |       <v-th sortKey="address.state">State</v-th>
 90 |       <v-th :customSort="dateSort">Registered</v-th>
 91 |     </thead>
 92 |     <tbody slot="body" slot-scope="{displayData}">
 93 |       <tr v-for="row in displayData" :key="row.guid">
 94 |         <td>{{ row.name }}</td>
 95 |         <td>{{ row.age }}</td>
 96 |         <td>{{ row.address.state }}</td>
 97 |         <td>{{ row.registered }}</td>
 98 |       </tr>
 99 |     </tbody>
100 |   </v-table>
101 | </template>
102 | ```
103 | 
104 | ```js
105 | <script>
106 | import users from './users.json'
107 | 
108 | export default {
109 |   name: 'Sorting',
110 |   data: () => ({
111 |     users
112 |   }),
113 |   methods: {
114 |     nameLength (row) {
115 |       return row.name.length
116 |     },
117 |     dateSort(a, b) {
118 |       let date1 = new Date(a.registered).getTime();
119 |       let date2 = new Date(b.registered).getTime();
120 |       
121 |       return date1 - date2;
122 |     }
123 |   }
124 | }
125 | </script>
126 | ```
127 | 
128 | <Sorting/>
129 | 
130 | ## CSS icons
131 | By default we include three SVG icons to indicate the sorting state of a column. 
132 | But you can use CSS Styles to change the sort icons.
133 | 
134 | The first thing you need to do is to disable the default sort icons with the `hideSortIcons` property on the `v-table` component:
135 | 
136 | ```html
137 | <v-table
138 |     :data="users"
139 |     :hideSortIcons="true"
140 | >
141 | ...
142 | </v-table>
143 | ```
144 | 
145 | Then you will get 4 CSS classes for `th` elements with sorting enabled:
146 | 
147 | * `vt-sort`: This class is always present, its purpose is to provide a constant CSS class for the columns with sorting.
148 | * `vt-sortable`: This class indicates the column can be sorted and it is present when the column is not currently sorted.
149 | * `vt-asc`: This class indicates the column is being sorted by an ascending order.
150 | * `vt-desc`: This class indicates the column is being sorted by a descending order.
151 | 
152 | For this example we will use FontAwesome icons:
153 | 
154 | ```css
155 | .vt-sort:before{
156 |     font-family: FontAwesome;
157 |     padding-right: 0.5em;
158 |     width: 1.28571429em;
159 |     display: inline-block;
160 |     text-align: center;
161 | }
162 | 
163 | .vt-sortable:before{
164 |     content: "\f0dc";
165 | }
166 | 
167 | .vt-asc:before{
168 |     content: "\f160";
169 | }
170 | 
171 | .vt-desc:before{
172 |     content: "\f161";
173 | }
174 | ```
175 | 
176 | <SortingFA/>
177 | 


--------------------------------------------------------------------------------
/docs/the-basics/README.md:
--------------------------------------------------------------------------------
 1 | # The Basics
 2 | 
 3 | The main goal for Vue Smart Table is to be intuitive to use while offering powerful features out of the box.
 4 |  
 5 | To achieve this we mix Vue Components and vanilla HTML Elements with the output being the same as a traditional HTML Table.
 6 | This will allow you to easily customize your tables with CSS or with a framework such as Bootstrap or Foundation.
 7 | 
 8 | For our examples we decided to use Bootstrap and Font Awesome, but you can use whatever your heart desires.
 9 | 
10 | Here is the code for the simplest table you can create:
11 | 
12 | ```js
13 | <script>
14 | import users from './users.json'
15 | 
16 | export default {
17 |   name: 'TheBasics',
18 |   data: () => ({
19 |     users
20 |   })
21 | }
22 | </script>
23 | 
24 | ```
25 | 
26 | ```html
27 | <template>
28 |   <v-table :data="users">
29 |     <thead slot="head">
30 |         <th>Name</th>
31 |         <th>Age</th>
32 |         <th>Email</th>
33 |         <th>Address</th>
34 |     </thead>
35 |     <tbody slot="body" slot-scope="{displayData}">
36 |         <tr v-for="row in displayData" :key="row.id">
37 |           <td>{{ row.name }}</td>
38 |           <td>{{ row.age }}</td>
39 |           <td>{{ row.email }}</td>
40 |           <td>
41 |               {{ row.address.street }}, 
42 |               {{ row.address.city }} 
43 |               {{ row.address.state}}
44 |           </td>
45 |         </tr>
46 |     </tbody>
47 |   </v-table>
48 | </template>
49 | ```
50 | 
51 | <TheBasics/>
52 | 
53 | ## Table <Badge text="Component" type="success"/> <Badge text="v-table"/>
54 | 
55 | The `v-table` component is the main element of Smart Table, here you will provide most of the configuration and listen for events. 
56 | But for now we will just focus on the `data` attribute.
57 | 
58 | ### Data <Badge text="Property" type="success"/> <Badge text="data: Array"/>
59 | Each `v-table` requires a `data` property, it must be an `array` even if it is initially empty.
60 | Each entry in the array represents a row in the table.
61 | 
62 | It is important to note the array will not be mutated by Smart Table, internally it will create a shallow copy of it to perform
63 | the operations.
64 | 
65 | ## Head <Badge text="Slot" type="success"/> <Badge text="head"/>
66 | The `head` slot is for the table `thead`, other than specifying the slot name with `slot="head"` there is nothing special about this.
67 | You just need to provide vanilla `th` elements for each of your columns.
68 | ```html
69 | <thead slot="head">
70 |     <th>Name</th>
71 |     <th>Age</th>
72 |     ...
73 | </thead>
74 | ```
75 | 
76 | ## Body <Badge text="Scoped Slot" type="success"/> <Badge text="body"/>
77 | The `body` slot is for the table `tbody`. This is a scoped slot which provides a `displayData` property.
78 | 
79 | ### Display Data <Badge text="Slot Scope"/> <Badge text="displayData: array" type="success"/>
80 | The `display-data` property provided by the `body` scoped slot is a shallow copy of the `data` array provided to the `v-table` component.
81 | 
82 | This array has all the plugins applied to it, for example, if filtering is enabled, this array will only contain the rows that pass the filters.
83 | 
84 | You will want to use a `v-for` directive to render the `tr` elements, remember, each entry in the `display-data` array represents a row.
85 | 
86 | ```html
87 | <tbody slot="body" slot-scope="{displayData}">
88 |     <tr v-for="row in displayData" :key="row.id">
89 |       <td>{{ row.name }}</td>
90 |       <td>{{ row.age }}</td>
91 |       ...
92 |     </tr>
93 | </tbody>
94 | ```
95 | 
96 | All right, this is the simplest table you can create, but right now Smart Table is effectively doing nothing you might as well just use a vanilla Html Table. 
97 | 
98 | Keep browsing to discover how powerful Smart Table is out of the box.
99 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuejs-smart-table",
 3 |   "keywords": [
 4 |     "vue",
 5 |     "table",
 6 |     "grid",
 7 |     "datagrid"
 8 |   ],
 9 |   "version": "0.0.8",
10 |   "private": false,
11 |   "main": "src/main.js",
12 |   "author": "Hector Romero Granillo",
13 |   "repository": "https://github.com/tochoromero/vuejs-smart-table",
14 |   "license": "MIT",
15 |   "scripts": {
16 |     "build": "vue-cli-service build --target lib --name smart-table src/main.js",
17 |     "lint": "vue-cli-service lint",
18 |     "test:unit": "vue-cli-service test:unit --reporter mocha-junit-reporter --reporter-options mochaFile=./tests/results/test_results.xml",
19 |     "docs:dev": "vuepress dev docs",
20 |     "docs:build": "vuepress build docs"
21 |   },
22 |   "dependencies": {
23 |     "vue": "^2.5.17"
24 |   },
25 |   "devDependencies": {
26 |     "@fortawesome/fontawesome-free": "^5.6.3",
27 |     "@vue/cli-plugin-babel": "^3.1.1",
28 |     "@vue/cli-plugin-eslint": "^3.1.5",
29 |     "@vue/cli-plugin-unit-mocha": "^3.1.1",
30 |     "@vue/cli-service": "^3.1.4",
31 |     "@vue/eslint-config-standard": "^4.0.0",
32 |     "@vue/test-utils": "^1.0.0-beta.20",
33 |     "babel-eslint": "^10.0.1",
34 |     "bootstrap": "^4.2.1",
35 |     "chai": "^4.1.2",
36 |     "eslint": "^5.8.0",
37 |     "eslint-plugin-vue": "^5.0.0-0",
38 |     "lint-staged": "^7.2.2",
39 |     "mocha-junit-reporter": "^1.18.0",
40 |     "sass": "^1.30.0",
41 |     "sass-loader": "^10.1.0",
42 |     "vue-template-compiler": "^2.5.17",
43 |     "vuepress": "^0.14.8"
44 |   },
45 |   "gitHooks": {
46 |     "pre-commit": "lint-staged"
47 |   },
48 |   "lint-staged": {
49 |     "*.js": [
50 |       "vue-cli-service lint",
51 |       "git add"
52 |     ],
53 |     "*.vue": [
54 |       "vue-cli-service lint",
55 |       "git add"
56 |     ]
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/SmartPagination.vue:
--------------------------------------------------------------------------------
  1 | <template replaceable part="pagination">
  2 |   <nav v-show="!(hideSinglePage && totalPages === 1)" class="smart-pagination">
  3 |     <ul class="pagination">
  4 |       <li :class="{'disabled': currentPage === 1}" v-if="boundaryLinks" class="page-item">
  5 |         <a href="javascript:void(0)" aria-label="Previous" @click="firstPage" class="page-link">
  6 |           <span aria-hidden="true" v-html="firstText"></span>
  7 |         </a>
  8 |       </li>
  9 | 
 10 |       <li :class="{'disabled': currentPage === 1}" v-if="directionLinks" class="page-item">
 11 |         <a href="javascript:void(0)" aria-label="Previous" @click="previousPage()" class="page-link">
 12 |           <slot name="previousIcon" :disabled="currentPage === 1">
 13 |             <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
 14 |               <path fill="currentColor"
 15 |                     d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
 16 |             </svg>
 17 |           </slot>
 18 |         </a>
 19 |       </li>
 20 | 
 21 |       <li
 22 |         v-for="page in displayPages"
 23 |         :key="page.value"
 24 |         class="page-item"
 25 |         :class="{'active': currentPage === page.value}"
 26 |       >
 27 |         <a href="javascript:void(0)" @click="selectPage(page.value)" class="page-link">{{page.title}}</a>
 28 |       </li>
 29 | 
 30 |       <li :class="{'disabled': currentPage === totalPages}" v-if="directionLinks"
 31 |           class="page-item">
 32 |         <a href="javascript:void(0)" aria-label="Next" @click="nextPage()" class="page-link">
 33 |           <slot name="nextIcon" :disabled="currentPage === totalPages">
 34 |             <svg width="16" height="16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
 35 |               <path fill="currentColor"
 36 |                     d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
 37 |             </svg>
 38 |           </slot>
 39 |         </a>
 40 |       </li>
 41 | 
 42 |       <li :class="{'disabled': currentPage === totalPages}" v-if="boundaryLinks"
 43 |           class="page-item">
 44 |         <a href="javascript:void(0)" aria-label="Previous" @click="lastPage()" class="page-link">
 45 |           <span aria-hidden="true" v-html="lastText"></span>
 46 |         </a>
 47 |       </li>
 48 |     </ul>
 49 |   </nav>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |   name: 'SmartPagination',
 55 |   props: {
 56 |     currentPage: {
 57 |       required: true,
 58 |       type: Number
 59 |     },
 60 |     totalPages: {
 61 |       required: true,
 62 |       type: Number
 63 |     },
 64 |     hideSinglePage: {
 65 |       required: false,
 66 |       type: Boolean,
 67 |       default: true
 68 |     },
 69 |     maxPageLinks: {
 70 |       required: false,
 71 |       type: Number
 72 |     },
 73 |     boundaryLinks: {
 74 |       required: false,
 75 |       type: Boolean,
 76 |       default: false
 77 |     },
 78 |     firstText: {
 79 |       required: false,
 80 |       type: String,
 81 |       default: 'First'
 82 |     },
 83 |     lastText: {
 84 |       required: false,
 85 |       type: String,
 86 |       default: 'Last'
 87 |     },
 88 |     directionLinks: {
 89 |       required: false,
 90 |       type: Boolean,
 91 |       default: true
 92 |     }
 93 |   },
 94 |   computed: {
 95 |     displayPages () {
 96 |       if (isNaN(this.maxPageLinks) || this.maxPageLinks <= 0) {
 97 |         return this.displayAllPages()
 98 |       } else {
 99 |         return this.limitVisiblePages()
100 |       }
101 |     }
102 |   },
103 |   methods: {
104 |     displayAllPages () {
105 |       const displayPages = []
106 | 
107 |       for (let i = 1; i <= this.totalPages; i++) {
108 |         displayPages.push({
109 |           title: i.toString(),
110 |           value: i
111 |         })
112 |       }
113 |       return displayPages
114 |     },
115 |     limitVisiblePages () {
116 |       const displayPages = []
117 | 
118 |       const totalTiers = Math.ceil(this.totalPages / this.maxPageLinks)
119 | 
120 |       const activeTier = Math.ceil(this.currentPage / this.maxPageLinks)
121 | 
122 |       const start = ((activeTier - 1) * this.maxPageLinks) + 1
123 |       const end = start + this.maxPageLinks
124 | 
125 |       if (activeTier > 1) {
126 |         displayPages.push({
127 |           title: '...',
128 |           value: start - 1
129 |         })
130 |       }
131 | 
132 |       for (let i = start; i < end; i++) {
133 |         if (i > this.totalPages) {
134 |           break
135 |         }
136 | 
137 |         displayPages.push({
138 |           title: i.toString(),
139 |           value: i
140 |         })
141 |       }
142 | 
143 |       if (activeTier < totalTiers) {
144 |         displayPages.push({
145 |           title: '...',
146 |           value: end
147 |         })
148 |       }
149 | 
150 |       return displayPages
151 |     },
152 |     selectPage (page) {
153 |       if (page < 1 || page > this.totalPages || page === this.currentPage) {
154 |         return
155 |       }
156 | 
157 |       this.$emit('update:currentPage', page)
158 |     },
159 |     nextPage () {
160 |       if (this.currentPage < this.totalPages) {
161 |         this.$emit('update:currentPage', this.currentPage + 1)
162 |       }
163 |     },
164 |     previousPage () {
165 |       if (this.currentPage > 1) {
166 |         this.$emit('update:currentPage', this.currentPage - 1)
167 |       }
168 |     },
169 |     firstPage () {
170 |       this.$emit('update:currentPage', 1)
171 |     },
172 |     lastPage () {
173 |       this.$emit('update:currentPage', this.totalPages)
174 |     }
175 |   }
176 | }
177 | </script>
178 | 
179 | <style>
180 |   .disabled svg {
181 |     color: grey;
182 |   }
183 | 
184 |   .disabled a {
185 |     cursor: not-allowed
186 |   }
187 | </style>
188 | 


--------------------------------------------------------------------------------
/src/VTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <table>
  3 |     <slot name="head"/>
  4 |     <slot name="body" :displayData="displayData"/>
  5 |   </table>
  6 | </template>
  7 | 
  8 | <script>
  9 | import { doFilter, doSort, calculateTotalPages, doPaginate } from './table-utils'
 10 | import store from './store'
 11 | import Vue from 'vue'
 12 | 
 13 | export default {
 14 |   name: 'SmartTable',
 15 |   props: {
 16 |     data: {
 17 |       required: true,
 18 |       type: Array
 19 |     },
 20 |     filters: {
 21 |       required: false,
 22 |       type: Object
 23 |     },
 24 |     currentPage: {
 25 |       required: false,
 26 |       type: Number
 27 |     },
 28 |     pageSize: {
 29 |       required: false,
 30 |       type: Number
 31 |     },
 32 |     allowSelection: {
 33 |       required: false,
 34 |       type: Boolean,
 35 |       default: false
 36 |     },
 37 |     selectionMode: {
 38 |       required: false,
 39 |       type: String,
 40 |       default: 'single'
 41 |     },
 42 |     selectedClass: {
 43 |       required: false,
 44 |       type: String,
 45 |       default: 'vt-selected'
 46 |     },
 47 |     customSelection: {
 48 |       required: false,
 49 |       type: Boolean
 50 |     },
 51 |     hideSortIcons: {
 52 |       required: false,
 53 |       type: Boolean
 54 |     }
 55 |   },
 56 |   beforeCreate () {
 57 |     this.store = new Vue(store)
 58 |   },
 59 |   provide () {
 60 |     return {
 61 |       store: this.store
 62 |     }
 63 |   },
 64 |   data () {
 65 |     return {
 66 |       state: this.store._data,
 67 |       initialLoad: false
 68 |     }
 69 |   },
 70 |   computed: {
 71 |     needsPaginationReset () {
 72 |       return this.currentPage > this.totalPages
 73 |     },
 74 |     filteredData () {
 75 |       if (this.data.length === 0) {
 76 |         return []
 77 |       }
 78 | 
 79 |       if (typeof this.filters !== 'object') {
 80 |         return this.data
 81 |       }
 82 | 
 83 |       return doFilter(this.data, this.filters)
 84 |     },
 85 |     totalItems () {
 86 |       return this.filteredData.length
 87 |     },
 88 |     sortedData () {
 89 |       if ((this.state.sortKey || this.state.customSort) && this.state.sortOrder !== 0) {
 90 |         return doSort(this.filteredData, this.state.sortKey, this.state.customSort, this.state.sortOrder)
 91 |       }
 92 | 
 93 |       return this.filteredData
 94 |     },
 95 |     totalPages () {
 96 |       if (!this.pageSize) return 0
 97 | 
 98 |       return calculateTotalPages(this.totalItems, this.pageSize)
 99 |     },
100 |     displayData () {
101 |       if (this.pageSize) {
102 |         return doPaginate(this.sortedData, this.pageSize, this.currentPage)
103 |       }
104 | 
105 |       return this.sortedData
106 |     },
107 |     selectedRows () {
108 |       return this.state.selectedRows
109 |     }
110 |   },
111 |   watch: {
112 |     displayData: {
113 |       handler () {
114 |         if (!this.initialLoad) {
115 |           this.initialLoad = true
116 |           this.$emit('loaded', this)
117 |         }
118 |       },
119 |       immediate: true
120 |     },
121 |     selectionMode: {
122 |       handler (mode) {
123 |         this.state.selectionMode = mode
124 |       },
125 |       immediate: true
126 |     },
127 |     selectedClass: {
128 |       handler (selectedClass) {
129 |         this.state.selectedClass = selectedClass
130 |       },
131 |       immediate: true
132 |     },
133 |     customSelection: {
134 |       handler (customSelection) {
135 |         this.state.customSelection = customSelection
136 |       },
137 |       immediate: true
138 |     },
139 |     hideSortIcons: {
140 |       handler (hideSortIcons) {
141 |         this.state.hideSortIcons = hideSortIcons
142 |       },
143 |       immediate: true
144 |     },
145 |     needsPaginationReset: {
146 |       handler (needsReset) {
147 |         if (needsReset) {
148 |           this.$emit('update:currentPage', 1)
149 |         }
150 |       },
151 |       immediate: true
152 |     },
153 |     totalPages: {
154 |       handler (totalPages) {
155 |         this.$emit('totalPagesChanged', totalPages)
156 |       },
157 |       immediate: true
158 |     },
159 |     totalItems: {
160 |       handler (totalItems) {
161 |         this.$emit('totalItemsChanged', totalItems)
162 |       },
163 |       immediate: true
164 |     },
165 |     selectedRows: {
166 |       handler (selected) {
167 |         this.$emit('selectionChanged', selected)
168 |       },
169 |       immediate: true
170 |     }
171 |   },
172 |   methods: {
173 |     revealItem (item) {
174 |       if (!this.pageSize) {
175 |         return true
176 |       }
177 | 
178 |       let index
179 |       if (typeof item === 'function') {
180 |         index = this.sortedData.findIndex(item)
181 |       } else {
182 |         index = this.sortedData.indexOf(item)
183 |       }
184 | 
185 |       if (index === -1) {
186 |         return false
187 |       }
188 | 
189 |       const currentPage = Math.ceil((index + 1) / this.pageSize)
190 |       this.$emit('update:currentPage', currentPage)
191 | 
192 |       return true
193 |     },
194 |     revealPage (page) {
195 |       if (!this.pageSize || Number.isNaN(page) || page < 1) {
196 |         return
197 |       }
198 | 
199 |       this.$emit('update:currentPage', page)
200 |     },
201 |     selectRow (row) {
202 |       this.store.selectRow(row)
203 |     },
204 |     selectRows (rows) {
205 |       this.store.selectRows(rows)
206 |     },
207 |     deselectRow (row) {
208 |       this.store.deselectRow(row)
209 |     },
210 |     deselectRows (rows) {
211 |       this.store.deselectRows(rows)
212 |     },
213 |     selectAll () {
214 |       if (this.selectionMode === 'single') return
215 | 
216 |       this.store.selectAll([...this.data])
217 |     },
218 |     deselectAll () {
219 |       this.store.deselectAll()
220 |     }
221 |   }
222 | }
223 | </script>
224 | 


--------------------------------------------------------------------------------
/src/VTh.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <th @click="sort" :class="sortClass" :aria-sort="ariaSortLabel">
  3 |     <template v-if="!state.hideSortIcons">
  4 |       <slot name="descIcon" v-if="order === -1">
  5 |         <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
  6 |           <path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"/>
  7 |         </svg>
  8 |       </slot>
  9 |       <slot name="sortIcon" v-else-if="order === 0">
 10 |         <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
 11 |           <path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"/></svg>
 12 |       </slot>
 13 |       <slot name="ascIcon" v-else-if="order === 1">
 14 |         <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
 15 |           <path fill="currentColor" d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"/>
 16 |         </svg>
 17 |       </slot>
 18 |     </template>
 19 |     <slot/>
 20 |   </th>
 21 | </template>
 22 | 
 23 | <script>
 24 | import { uuid } from './table-utils'
 25 | 
 26 | export default {
 27 |   name: 'v-th',
 28 |   props: {
 29 |     sortKey: {
 30 |       required: false,
 31 |       type: [String, Function]
 32 |     },
 33 |     customSort: {
 34 |       required: false,
 35 |       type: Function
 36 |     },
 37 |     defaultSort: {
 38 |       required: false,
 39 |       type: String,
 40 |       validator: value => ['asc', 'desc'].includes(value)
 41 |     }
 42 |   },
 43 |   inject: ['store'],
 44 |   data () {
 45 |     return {
 46 |       id: uuid(),
 47 |       order: 0,
 48 |       orderClasses: ['vt-desc', 'vt-sortable', 'vt-asc'],
 49 |       ariaLabels: ['descending', 'none', 'ascending'],
 50 |       state: this.store._data
 51 |     }
 52 |   },
 53 |   computed: {
 54 |     sortEnabled () {
 55 |       return this.sortKey || typeof this.customSort === 'function'
 56 |     },
 57 |     sortId () {
 58 |       return this.state.sortId
 59 |     },
 60 |     sortClass () {
 61 |       return this.state.hideSortIcons ? [this.orderClasses[this.order + 1], 'vt-sort'] : []
 62 |     },
 63 |     ariaSortLabel () {
 64 |       return this.ariaLabels[this.order + 1]
 65 |     }
 66 |   },
 67 |   watch: {
 68 |     sortId (sortId) {
 69 |       if (sortId !== this.id && this.order !== 0) {
 70 |         this.order = 0
 71 |       }
 72 |     }
 73 |   },
 74 |   mounted () {
 75 |     if (!this.sortKey && !this.customSort) {
 76 |       throw new Error('Must provide the Sort Key value or a Custom Sort function.')
 77 |     }
 78 | 
 79 |     if (this.defaultSort) {
 80 |       this.order = this.defaultSort === 'desc' ? -1 : 1
 81 |       this.store.setSort({
 82 |         sortOrder: this.order,
 83 |         sortKey: this.sortKey,
 84 |         customSort: this.customSort,
 85 |         sortId: this.id
 86 |       })
 87 |       this.$nextTick(() => {
 88 |         this.$emit('defaultSort')
 89 |       })
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     sort: function () {
 94 |       if (this.sortEnabled) {
 95 |         this.order = this.order === 0 || this.order === -1 ? this.order + 1 : -1
 96 |         this.store.setSort({
 97 |           sortOrder: this.order,
 98 |           sortKey: this.sortKey,
 99 |           customSort: this.customSort,
100 |           sortId: this.id
101 |         })
102 |       }
103 |     }
104 |   }
105 | }
106 | </script>
107 | 
108 | <style scoped>
109 |   .vt-sort {
110 |     cursor: pointer;
111 |   }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/VTr.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <tr
 3 |     :class="[rowClass]"
 4 |     :style="style"
 5 |     @click="handleRowSelected"
 6 | 
 7 |   >
 8 |     <slot></slot>
 9 |   </tr>
10 | </template>
11 | 
12 | <script>
13 | 
14 | export default {
15 |   name: 'v-tr',
16 |   props: {
17 |     row: {
18 |       required: true
19 |     }
20 |   },
21 |   inject: ['store'],
22 |   data () {
23 |     return {
24 |       state: this.store._data
25 |     }
26 |   },
27 |   mounted () {
28 |     if (!this.state.customSelection) {
29 |       this.$el.style.cursor = 'pointer'
30 |     }
31 |   },
32 |   beforeDestroy () {
33 |     if (!this.state.customSelection) {
34 |       this.$el.removeEventListener('click', this.handleRowSelected)
35 |     }
36 |   },
37 |   computed: {
38 |     isSelected () {
39 |       return this.state.selectedRows.find(it => it === this.row)
40 |     },
41 |     rowClass: function () {
42 |       return this.isSelected ? this.state.selectedClass : ''
43 |     },
44 |     style () {
45 |       return {
46 |         ...(!this.state.customSelection ? { cursor: 'pointer' } : {})
47 |       }
48 |     }
49 |   },
50 |   methods: {
51 |     handleRowSelected (event) {
52 |       if (this.state.customSelection) return
53 | 
54 |       let source = event.target || event.srcElement
55 |       if (source.tagName.toLowerCase() === 'td') {
56 |         if (this.isSelected) {
57 |           this.store.deselectRow(this.row)
58 |         } else {
59 |           this.store.selectRow(this.row)
60 |         }
61 |       }
62 |     }
63 |   }
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import VTable from './VTable.vue'
 2 | import VTh from './VTh.vue'
 3 | import VTr from './VTr.vue'
 4 | import SmartPagination from './SmartPagination.vue'
 5 | 
 6 | export {
 7 |   VTable,
 8 |   VTh,
 9 |   VTr,
10 |   SmartPagination
11 | }
12 | /**/
13 | export default {
14 |   install (Vue) {
15 |     Vue.component('v-table', VTable)
16 |     Vue.component('v-th', VTh)
17 |     Vue.component('v-tr', VTr)
18 |     Vue.component('smart-pagination', SmartPagination)
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data: () => ({
 3 |     selectedRows: [],
 4 |     selectionMode: 'single',
 5 |     customSelection: null,
 6 |     selectedClass: null,
 7 |     hideSortIcons: null,
 8 |     sortId: null,
 9 |     sortKey: null,
10 |     customSort: null,
11 |     sortOrder: null
12 |   }),
13 |   methods: {
14 |     selectRow (row) {
15 |       if (this.selectionMode === 'single') {
16 |         this.selectedRows = [row]
17 |         return
18 |       }
19 | 
20 |       const index = this.selectedRows.indexOf(row)
21 |       if (index === -1) {
22 |         this.selectedRows.push(row)
23 |       }
24 |     },
25 |     selectRows (rows) {
26 |       for (let row of rows) {
27 |         this.selectRow(row)
28 |       }
29 |     },
30 |     deselectRow (row) {
31 |       const index = this.selectedRows.indexOf(row)
32 | 
33 |       if (index > -1) {
34 |         this.selectedRows.splice(index, 1)
35 |       }
36 |     },
37 |     deselectRows (rows) {
38 |       for (let row of rows) {
39 |         this.deselectRow(row)
40 |       }
41 |     },
42 |     selectAll (all) {
43 |       this.selectedRows = all
44 |     },
45 |     deselectAll () {
46 |       this.selectedRows = []
47 |     },
48 |     setSort ({ sortKey, customSort, sortOrder, sortId }) {
49 |       this.sortKey = sortKey
50 |       this.customSort = customSort
51 |       this.sortOrder = sortOrder
52 |       this.sortId = sortId
53 |     }
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/table-utils.js:
--------------------------------------------------------------------------------
  1 | export function doSort (toSort, sortKey, customSort, sortOrder) {
  2 |   let local = [...toSort]
  3 | 
  4 |   return local.sort((a, b) => {
  5 |     if (typeof customSort === 'function') {
  6 |       return customSort(a, b) * sortOrder
  7 |     }
  8 | 
  9 |     let val1
 10 |     let val2
 11 | 
 12 |     if (typeof sortKey === 'function') {
 13 |       val1 = sortKey(a, sortOrder)
 14 |       val2 = sortKey(b, sortOrder)
 15 |     } else {
 16 |       val1 = getPropertyValue(a, sortKey)
 17 |       val2 = getPropertyValue(b, sortKey)
 18 |     }
 19 | 
 20 |     if (val1 === null || val1 === undefined) val1 = ''
 21 |     if (val2 === null || val2 === undefined) val2 = ''
 22 | 
 23 |     if (isNumeric(val1) && isNumeric(val2)) {
 24 |       return (val1 - val2) * sortOrder
 25 |     }
 26 | 
 27 |     const str1 = val1.toString()
 28 |     const str2 = val2.toString()
 29 | 
 30 |     return str1.localeCompare(str2) * sortOrder
 31 |   })
 32 | }
 33 | 
 34 | export function doFilter (toFilter, filters) {
 35 |   let filteredData = []
 36 | 
 37 |   for (let item of toFilter) {
 38 |     let passed = true
 39 | 
 40 |     for (let filterName in filters) {
 41 |       if (!filters.hasOwnProperty(filterName)) {
 42 |         continue
 43 |       }
 44 | 
 45 |       let filter = filters[filterName]
 46 | 
 47 |       if (!passFilter(item, filter)) {
 48 |         passed = false
 49 |         break
 50 |       }
 51 |     }
 52 | 
 53 |     if (passed) {
 54 |       filteredData.push(item)
 55 |     }
 56 |   }
 57 | 
 58 |   return filteredData
 59 | }
 60 | 
 61 | export function doPaginate (toPaginate, pageSize, currentPage) {
 62 |   if (toPaginate.length <= pageSize || pageSize <= 0 || currentPage <= 0) {
 63 |     return toPaginate
 64 |   }
 65 | 
 66 |   const start = (currentPage - 1) * pageSize
 67 |   const end = start + pageSize
 68 | 
 69 |   return [...toPaginate].slice(start, end)
 70 | }
 71 | 
 72 | export function calculateTotalPages (totalItems, pageSize) {
 73 |   return totalItems <= pageSize ? 1 : Math.ceil(totalItems / pageSize)
 74 | }
 75 | 
 76 | export function passFilter (item, filter) {
 77 |   if (typeof filter.custom === 'function' && !filter.custom(filter.value, item)) {
 78 |     return false
 79 |   }
 80 | 
 81 |   if (filter.value === null || filter.value === undefined || filter.value.length === 0 || !Array.isArray(filter.keys)) {
 82 |     return true
 83 |   }
 84 | 
 85 |   for (let key of filter.keys) {
 86 |     const value = getPropertyValue(item, key)
 87 | 
 88 |     if (value !== null && value !== undefined) {
 89 |       const filterStrings = Array.isArray(filter.value) ? filter.value : [filter.value]
 90 | 
 91 |       for (const filterString of filterStrings) {
 92 |         if (filter.exact) {
 93 |           if (value.toString() === filterString.toString()) {
 94 |             return true
 95 |           }
 96 |         } else {
 97 |           if (value.toString().toLowerCase().includes(filterString.toString().toLowerCase())) {
 98 |             return true
 99 |           }
100 |         }
101 |       }
102 |     }
103 |   }
104 |   return false
105 | }
106 | 
107 | export function getPropertyValue (object, keyPath) {
108 |   keyPath = keyPath.replace(/\[(\w+)\]/g, '.$1')
109 |   keyPath = keyPath.replace(/^\./, '')
110 |   const a = keyPath.split('.')
111 |   for (let i = 0, n = a.length; i < n; ++i) {
112 |     let k = a[i]
113 |     if (k in object) {
114 |       object = object[k]
115 |     } else {
116 |       return
117 |     }
118 |   }
119 |   return object
120 | }
121 | 
122 | export function isNumeric (toCheck) {
123 |   return !Array.isArray(toCheck) && !isNaN(parseFloat(toCheck)) && isFinite(toCheck)
124 | }
125 | 
126 | export function uuid () {
127 |   return '_' + Math.random().toString(36).substr(2, 9)
128 | }
129 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     mocha: true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/unit/table-utils.spec.js:
--------------------------------------------------------------------------------
 1 | import { expect } from 'chai'
 2 | import { calculateTotalPages, isNumeric, getPropertyValue, doPaginate } from '../../src/table-utils.js'
 3 | 
 4 | let scenario = [
 5 |   { totalItems: 10, pageSize: 5, result: 2 },
 6 |   { totalItems: 1, pageSize: 10, result: 1 },
 7 |   { totalItems: 11, pageSize: 10, result: 2 },
 8 |   { totalItems: 200, pageSize: 200, result: 1 },
 9 |   { totalItems: 200, pageSize: 1, result: 200 }
10 | ]
11 | 
12 | scenario.forEach(({ totalItems, pageSize, result }) => {
13 |   describe('calculateTotalPages', () => {
14 |     it(`Should be ${result} pages when totalItems is ${totalItems} and pageSize: is ${pageSize}`, () => {
15 |       expect(calculateTotalPages(totalItems, pageSize))
16 |         .to.equal(result)
17 |     })
18 |   })
19 | })
20 | 
21 | scenario = [
22 |   { toCheck: 5, result: true },
23 |   { toCheck: 1.0, result: true },
24 |   { toCheck: -1.0, result: true },
25 |   // eslint-disable-next-line no-floating-decimal
26 |   { toCheck: .5, result: true },
27 |   { toCheck: 0.8, result: true },
28 |   { toCheck: '0.5', result: true },
29 |   { toCheck: '-0.5', result: true },
30 |   { toCheck: 'asd', result: false },
31 |   { toCheck: '5,2', result: false },
32 |   { toCheck: [1], result: false },
33 |   { toCheck: [], result: false },
34 |   { toCheck: { value: 1 }, result: false }
35 | ]
36 | 
37 | scenario.forEach(({ toCheck, result }) => {
38 |   describe('isNumeric', () => {
39 |     it(`${toCheck} should ${result ? '' : 'not'} be numeric`, () => {
40 |       expect(isNumeric(toCheck))
41 |         .to.equal(result)
42 |     })
43 |   })
44 | })
45 | 
46 | scenario = [
47 |   { object: { value: 'asd', values: 123 }, path: 'value', result: 'asd' },
48 |   { object: { value: 'asd', values: 123 }, path: '[value]', result: 'asd' },
49 |   { object: { a: { b: { c: 13 } } }, path: 'a.b.c', result: 13 },
50 |   { object: { a: { b: { c: 13 } } }, path: 'a[b].c', result: 13 },
51 |   { object: { value: 'asd' }, path: 'none', result: undefined },
52 |   { object: {}, path: 'empty', result: undefined }
53 | ]
54 | 
55 | scenario.forEach(({ object, path, result }) => {
56 |   describe('getPropertyValue', () => {
57 |     it(`path '${path}' should be ${result}`, () => {
58 |       expect(getPropertyValue(object, path))
59 |         .to.equal(result)
60 |     })
61 |   })
62 | })
63 | 
64 | let toPaginate = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
65 | scenario = [
66 |   { pageSize: 3, currentPage: 1, result: [1, 2, 3] },
67 |   { pageSize: 5, currentPage: 2, result: [6, 7, 8, 9, 10] },
68 |   { pageSize: 2, currentPage: 3, result: [5, 6] },
69 |   { pageSize: 5, currentPage: 3, result: [] },
70 |   { pageSize: 50, currentPage: 1, result: toPaginate },
71 |   { pageSize: 0, currentPage: 1, result: toPaginate },
72 |   { pageSize: 5, currentPage: 0, result: toPaginate }
73 | ]
74 | 
75 | scenario.forEach(({ pageSize, currentPage, result }) => {
76 |   describe('doPaginate', () => {
77 |     it(`With size: ${pageSize} and currentPage: ${currentPage} it should return ${result}`, () => {
78 |       expect(doPaginate(toPaginate, pageSize, currentPage))
79 |         .to.eql(result)
80 |     })
81 |   })
82 | })
83 | 


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