404
How did we get here?Take me home.
10 |
23 |
24 |
25 |
11 |
14 | Get Started Quickly
12 |Get features like sorting / column filtering / paging with minimal setup.
13 |
15 |
18 | Customizable
16 |Easily customize anything from table cells to column headers.
17 |
19 |
22 | Advanced Features
20 |Leverage checkbox table, grouped rows and remote workflow for your table.
21 |
3 |
9 |
10 |
11 |
29 |
30 |
49 |
--------------------------------------------------------------------------------
/docs/assets/js/16.b0065a94.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{441:function(e,n,t){},485:function(e,n,t){"use strict";t(441)},523:function(e,n,t){"use strict";t.r(n);var o={name:"grouped-table",props:["options"],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Diet",field:"diet",type:"text"},{label:"Count",field:"count",type:"number"}],rows:[{mode:"span",label:"Mammal",children:[{name:"Elephant",diet:"herbivore",count:5},{name:"Cat",diet:"carnivore",count:28}]},{mode:"span",label:"Reptiles",children:[{name:"Snake",diet:"carnivore",count:40},{name:"lizard",diet:"insectivore",count:34}]},{mode:"span",label:"Fish",children:[{name:"Shark",diet:"carnivore",count:2},{name:"koi",diet:"omnivore",count:14}]}]}},computed:{},methods:{},mounted:function(){},components:{}},i=(t(485),t(4)),a=Object(i.a)(o,(function(){var e=this.$createElement,n=this._self._c||e;return n("div",[n("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"group-options":this.options,"search-options":{enabled:!0}}})],1)}),[],!1,null,null,null);n.default=a.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/16.9e087e7c.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{177:function(e,t,a){},183:function(e,t,a){"use strict";var n=a(177);a.n(n).a},204:function(e,t,a){"use strict";a.r(t);var n={name:"theme-table",props:["theme","styleClasses"],data:function(){return{columns:[{label:"Name",field:"name",filterOptions:{enabled:!0}},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"YYYY-MM-DD",dateOutputFormat:"MMM Do YY"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"201-10-31:9: 35 am",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},s=(a(183),a(0)),l=Object(s.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,styleClass:this.styleClasses,theme:this.theme}})],1)},[],!1,null,null,null);t.default=l.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/17.0ee802cb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[17],{178:function(e,n,t){},184:function(e,n,t){"use strict";var o=t(178);t.n(o).a},205:function(e,n,t){"use strict";t.r(n);var o={name:"grouped-table",props:["options"],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Diet",field:"diet",type:"text"},{label:"Count",field:"count",type:"number"}],rows:[{mode:"span",label:"Mammal",children:[{name:"Elephant",diet:"herbivore",count:5},{name:"Cat",diet:"carnivore",count:28}]},{mode:"span",label:"Reptiles",children:[{name:"Snake",diet:"carnivore",count:40},{name:"lizard",diet:"insectivore",count:34}]},{mode:"span",label:"Fish",children:[{name:"Shark",diet:"carnivore",count:2},{name:"koi",diet:"omnivore",count:14}]}]}},computed:{},methods:{},mounted:function(){},components:{}},i=(t(184),t(0)),a=Object(i.a)(o,function(){var e=this.$createElement,n=this._self._c||e;return n("div",[n("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"group-options":this.options,"search-options":{enabled:!0}}})],1)},[],!1,null,null,null);n.default=a.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/8.f51d7e4e.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{433:function(e,t,a){},477:function(e,t,a){"use strict";a(433)},515:function(e,t,a){"use strict";a.r(t);var n={name:"basic-table",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343},{id:4,name:"Chris",age:55,createdAt:"2011-10-11",score:.03343},{id:5,name:"Dan",age:40,createdAt:"2011-10-21",score:.03343},{id:6,name:"John",age:20,createdAt:"2011-10-31",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(a(477),a(4)),r=Object(o.a)(n,(function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows}})],1)}),[],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017
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 |
--------------------------------------------------------------------------------
/docs/assets/js/7.3f6cd7fb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{434:function(t,e,n){},478:function(t,e,n){"use strict";n(434)},516:function(t,e,n){"use strict";n.r(e);var a={name:"action-slot-table",data:function(){return{columns:[{label:"Name",field:"name",filterOptions:{enabled:!1}},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(n(478),n(4)),s=Object(o.a)(a,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("vue-good-table",{attrs:{columns:this.columns,rows:this.rows}},[e("div",{attrs:{slot:"table-actions"},slot:"table-actions"},[e("button",{staticClass:"button"},[this._v("Button 1")]),this._v(" "),e("button",{staticClass:"button"},[this._v("Button 2")])])])],1)}),[],!1,null,null,null);e.default=s.exports}}]);
--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
1 | // This is a karma config file. For more details see
2 | // http://karma-runner.github.io/0.13/config/configuration-file.html
3 | // we are also using it with karma-webpack
4 | // https://github.com/webpack/karma-webpack
5 |
6 | var webpackConfig = require('../../build/webpack.test.conf')
7 |
8 | module.exports = function (config) {
9 | config.set({
10 | // to run in additional browsers:
11 | // 1. install corresponding karma launcher
12 | // http://karma-runner.github.io/0.13/config/browsers.html
13 | // 2. add it to the `browsers` array below.
14 | browsers: ['PhantomJS'],
15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
16 | reporters: ['spec', 'coverage'],
17 | files: ['./index.js'],
18 | preprocessors: {
19 | './index.js': ['webpack', 'sourcemap']
20 | },
21 | webpack: webpackConfig,
22 | webpackMiddleware: {
23 | noInfo: true
24 | },
25 | coverageReporter: {
26 | dir: './coverage',
27 | reporters: [
28 | { type: 'lcov', subdir: '.' },
29 | { type: 'text-summary' }
30 | ]
31 | }
32 | })
33 | }
34 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/21.6ce211a6.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[21],{182:function(e,t,a){},188:function(e,t,a){"use strict";var n=a(182);a.n(n).a},208:function(e,t,a){"use strict";a.r(t);var n={name:"basic-table",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"YYYY-MM-DD",dateOutputFormat:"MMM Do YY"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"201-10-31:9: 35 am",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343},{id:4,name:"Chris",age:55,createdAt:"2011-10-11",score:.03343},{id:5,name:"Dan",age:40,createdAt:"2011-10-21",score:.03343},{id:6,name:"John",age:20,createdAt:"2011-10-31",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},r=(a(188),a(0)),o=Object(r.a)(n,function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows}})],1)},[],!1,null,null,null);t.default=o.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/13.941a2941.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{439:function(e,t,a){},483:function(e,t,a){"use strict";a(439)},521:function(e,t,a){"use strict";a.r(t);var n={name:"fixed-header",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343},{id:4,name:"Chris",age:55,createdAt:"2011-10-11",score:.03343},{id:5,name:"Dan",age:40,createdAt:"2011-10-21",score:.03343},{id:6,name:"John",age:20,createdAt:"2011-10-31",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},r=(a(483),a(4)),d=Object(r.a)(n,(function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"max-height":"200px","fixed-header":!0}})],1)}),[],!1,null,null,null);t.default=d.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/19.d6dddf3d.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[19],{445:function(e,t,a){},489:function(e,t,a){"use strict";a(445)},527:function(e,t,a){"use strict";a.r(t);var n={name:"pagination-table",props:["options"],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343},{id:4,name:"Chris",age:55,createdAt:"2011-10-11",score:.03343},{id:5,name:"Dan",age:40,createdAt:"2011-10-21",score:.03343},{id:6,name:"John",age:20,createdAt:"2011-10-31",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(a(489),a(4)),r=Object(o.a)(n,(function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"pagination-options":this.options}})],1)}),[],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/11.c8a5abb4.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{437:function(e,t,n){},481:function(e,t,n){"use strict";n(437)},519:function(e,t,n){"use strict";n.r(t);var o={name:"custom-row",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},a=(n(481),n(4)),r=Object(a.a)(o,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("vue-good-table",{attrs:{columns:e.columns,rows:e.rows},scopedSlots:e._u([{key:"table-row",fn:function(t){return["age"==t.column.field?n("span",[n("span",{staticStyle:{"font-weight":"bold",color:"blue"}},[e._v(e._s(t.row.age))])]):n("span",[e._v("\n "+e._s(t.formattedRow[t.column.field])+"\n ")])]}}])})],1)}),[],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/19.5eb669bb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[19],{180:function(e,t,n){},186:function(e,t,n){"use strict";var o=n(180);n.n(o).a},207:function(e,t,n){"use strict";n.r(t);var o={name:"checkbox-table",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"YYYY-MM-DD",dateOutputFormat:"MMM Do YY"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"201-10-31:9: 35 am",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{selectAll:function(e){console.log(e)},toggleSelectRow:function(e){console.log(e)}},mounted:function(){},components:{}},l=(n(186),n(0)),a=Object(l.a)(o,function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"select-options":{enabled:!0},"search-options":{enabled:!0}},on:{"on-select-all":this.selectAll,"on-row-click":this.toggleSelectRow}})],1)},[],!1,null,null,null);t.default=a.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/14.00a22c84.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{440:function(e,n,t){},484:function(e,n,t){"use strict";t(440)},522:function(e,n,t){"use strict";t.r(n);var o={name:"grouped-custom-span",props:["options"],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Diet",field:"diet",type:"text"},{label:"Count",field:"count",type:"number"}],rows:[{mode:"span",label:"Mammal",children:[{name:"Elephant",diet:"herbivore",count:5},{name:"Cat",diet:"carnivore",count:28}]},{mode:"span",label:"Reptiles",children:[{name:"Snake",diet:"carnivore",count:40},{name:"lizard",diet:"insectivore",count:34}]},{mode:"span",label:"Fish",children:[{name:"Shark",diet:"carnivore",count:2},{name:"koi",diet:"omnivore",count:14}]}]}},computed:{},methods:{},mounted:function(){},components:{}},a=(t(484),t(4)),i=Object(a.a)(o,(function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("vue-good-table",{attrs:{columns:e.columns,rows:e.rows,"group-options":e.options,"search-options":{enabled:!0}},scopedSlots:e._u([{key:"table-header-row",fn:function(n){return[t("span",{staticClass:"my-fancy-class"},[e._v("\n "+e._s(n.row.label)+"\n ")])]}}])})],1)}),[],!1,null,null,null);n.default=i.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/18.57facccb.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{179:function(e,t,n){},185:function(e,t,n){"use strict";var a=n(179);n.n(a).a},206:function(e,t,n){"use strict";n.r(t);var a={name:"custom-row",props:[],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"YYYY-MM-DD",dateOutputFormat:"MMM Do YY"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"201-10-31:9: 35 am",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(n(185),n(0)),r=Object(o.a)(a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("vue-good-table",{attrs:{columns:e.columns,rows:e.rows},scopedSlots:e._u([{key:"table-row",fn:function(t){return["age"==t.column.field?n("span",[n("span",{staticStyle:{"font-weight":"bold",color:"blue"}},[e._v(e._s(t.row.age))])]):n("span",[e._v("\n "+e._s(t.formattedRow[t.column.field])+"\n ")])]}}])})],1)},[],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/test/unit/specs/types/number.spec.js:
--------------------------------------------------------------------------------
1 | import numberType from '@/components/types/number'
2 |
3 | describe('number type', () => {
4 | describe('compare', () => {
5 | it('should return 1 if x > y for integers', () => {
6 | expect(numberType.compare('2', '1')).to.equal(1)
7 | })
8 |
9 | it('should return 1 if x > y for float', () => {
10 | expect(numberType.compare('1.2', '1.1')).to.equal(1)
11 | })
12 |
13 | it('should return 1 if x > y for float', () => {
14 | expect(numberType.compare('1.2', '1.1')).to.equal(1)
15 | })
16 |
17 | it('should return 1 if x > y for float', () => {
18 | expect(numberType.compare(1.2, 1.1)).to.equal(1)
19 | })
20 | })
21 | describe('filterPredicate', () => {
22 | it('should return true only in case of exact equality', () => {
23 | expect(numberType.filterPredicate('1.2', '1.2')).to.equal(true)
24 | })
25 |
26 | it('should return true only in case of numeric equality', () => {
27 | expect(numberType.filterPredicate('1.2', '1.20')).to.equal(true)
28 | })
29 |
30 | it('should return false else', () => {
31 | expect(numberType.filterPredicate('1.2', '12')).to.equal(false)
32 | })
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/other-projects.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
8 |
5 | Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit
6 |
7 |
3 |
19 |
20 |
21 |
39 |
40 |
48 |
--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
1 | // 1. start the dev server using production config
2 | process.env.NODE_ENV = 'testing'
3 | var server = require('../../build/dev-server.js')
4 |
5 | server.ready.then(() => {
6 | // 2. run the nightwatch test suite against it
7 | // to run in additional browsers:
8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
9 | // 2. add it to the --env flag below
10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
11 | // For more information on Nightwatch's config file, see
12 | // http://nightwatchjs.org/guide#settings-file
13 | var opts = process.argv.slice(2)
14 | if (opts.indexOf('--config') === -1) {
15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
16 | }
17 | if (opts.indexOf('--env') === -1) {
18 | opts = opts.concat(['--env', 'chrome'])
19 | }
20 |
21 | var spawn = require('cross-spawn')
22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
23 |
24 | runner.on('exit', function (code) {
25 | server.close()
26 | process.exit(code)
27 | })
28 |
29 | runner.on('error', function (err) {
30 | server.close()
31 | throw err
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/docs/assets/js/18.23bc9f91.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{443:function(t,e,s){},487:function(t,e,s){"use strict";s(443)},525:function(t,e,s){"use strict";s.r(e);var a={name:"other-projects",props:[],data:function(){return{}},computed:{},methods:{},mounted:function(){},components:{}},i=(s(487),s(4)),o=Object(i.a)(a,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",[s("h4",[t._v("You might also like")]),t._v(" "),s("div",{staticClass:"features"},[s("div",{staticClass:"feature"},[s("h2",[s("a",{attrs:{href:"https://github.com/xaksis/vue-good-wizard"}},[t._v("vue-good-wizard")])]),t._v(" "),s("p",[t._v("An easy to use and clean VueJS step wizard plugin.")])]),t._v(" "),s("div",{staticClass:"feature"},[s("h2",[s("a",{attrs:{href:"https://github.com/xaksis/vue-good-links"}},[t._v("vue-good-links")])]),t._v(" "),s("p",[t._v("A light, expandable link and text hover effect library for VueJS.")])]),t._v(" "),s("div",{staticClass:"feature"},[s("h2",[s("a",{attrs:{href:"https://userbitapp.com"}},[t._v("UserBit")])]),t._v(" "),s("p",[t._v("Cloud-based platform for UX and Product teams.")])])])])}],!1,null,"e0df4b64",null);e.default=o.exports}}]);
--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 | var config = require('../../config')
3 |
4 | // http://nightwatchjs.org/gettingstarted#settings-file
5 | module.exports = {
6 | src_folders: ['test/e2e/specs'],
7 | output_folder: 'test/e2e/reports',
8 | custom_assertions_path: ['test/e2e/custom-assertions'],
9 |
10 | selenium: {
11 | start_process: true,
12 | server_path: require('selenium-server').path,
13 | host: '127.0.0.1',
14 | port: 4444,
15 | cli_args: {
16 | 'webdriver.chrome.driver': require('chromedriver').path
17 | }
18 | },
19 |
20 | test_settings: {
21 | default: {
22 | selenium_port: 4444,
23 | selenium_host: 'localhost',
24 | silent: true,
25 | globals: {
26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 | }
28 | },
29 |
30 | chrome: {
31 | desiredCapabilities: {
32 | browserName: 'chrome',
33 | javascriptEnabled: true,
34 | acceptSslCerts: true
35 | }
36 | },
37 |
38 | firefox: {
39 | desiredCapabilities: {
40 | browserName: 'firefox',
41 | javascriptEnabled: true,
42 | acceptSslCerts: true
43 | }
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/types/default.js:
--------------------------------------------------------------------------------
1 | import { diacriticless } from '../utils/diacritics';
2 |
3 | const escapeRegExp = str => str.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
4 |
5 | export default {
6 | format(x) {
7 | return x;
8 | },
9 | filterPredicate(rowval, filter, skipDiacritics = false, fromDropdown = false) {
10 | // take care of nulls
11 | if (typeof rowval === 'undefined' || rowval === null) {
12 | return false;
13 | }
14 |
15 | // row value
16 | const rowValue = skipDiacritics
17 | ? String(rowval).toLowerCase()
18 | : diacriticless(escapeRegExp(String(rowval)).toLowerCase());
19 |
20 | // search term
21 | const searchTerm = skipDiacritics
22 | ? filter.toLowerCase()
23 | : diacriticless(escapeRegExp(filter).toLowerCase());
24 |
25 | // comparison
26 | return fromDropdown ? rowValue === searchTerm : (rowValue.indexOf(searchTerm) > -1);
27 | },
28 |
29 | compare(x, y) {
30 | function cook(d) {
31 | if (typeof d === 'undefined' || d === null) return '';
32 | return diacriticless(String(d).toLowerCase());
33 | }
34 | x = cook(x);
35 | y = cook(y);
36 | if (x < y) return -1;
37 | if (x > y) return 1;
38 | return 0;
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/test/unit/specs/types/date.spec.js:
--------------------------------------------------------------------------------
1 | import dateType from '@/components/types/date'
2 |
3 | describe('date type', () => {
4 | describe('compare', () => {
5 | it('should compare dates correctly', () => {
6 | expect(dateType.compare('20001211', '20001112')).to.equal(1)
7 | })
8 |
9 | it('should compare dates correctly with custom format', () => {
10 | expect(dateType.compare('20001211', '20001112', {inputFormat: 'YYYYDDMM'})).to.equal(-1)
11 | })
12 |
13 | it('should compare null date as epoch', () => {
14 | expect(dateType.compare('20001211', undefined, {inputFormat: 'YYYYDDMM'})).to.equal(1)
15 | })
16 |
17 | it('should compare null date as epoch', () => {
18 | expect(dateType.compare(undefined, '20001211', {inputFormat: 'YYYYDDMM'})).to.equal(-1)
19 | })
20 | })
21 |
22 | describe('format', () => {
23 | it('should format dates correctly', () => {
24 | expect(dateType.format('20001012', {inputFormat: 'YYYYDDMM', outputFormat: 'Do MMM YYYY'})).to.equal('10th Dec 2000')
25 | })
26 |
27 | it('should format dates correctly', () => {
28 | expect(dateType.format('20001012', {inputFormat: 'YYYYMMDD', outputFormat: 'Do MMM YYYY'})).to.equal('12th Oct 2000')
29 | })
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/docs/assets/js/10.54b5e228.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{436:function(e,t,o){},480:function(e,t,o){"use strict";o(436)},518:function(e,t,o){"use strict";o.r(t);var n={name:"checkbox-table",props:["showSlot"],data:function(){return{columns:[{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{selectAll:function(e){console.log(e)},toggleSelectRow:function(e){console.log(e)}},mounted:function(){},components:{}},s=(o(480),o(4)),l=Object(s.a)(n,(function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("vue-good-table",{attrs:{columns:this.columns,rows:this.rows,"select-options":{enabled:!0},"search-options":{enabled:!0}},on:{"on-selected-rows-change":this.toggleSelectRow}},[this.showSlot?t("div",{attrs:{slot:"selected-row-actions"},slot:"selected-row-actions"},[t("button",[this._v("Action 1")])]):this._e()])],1)}),[],!1,null,null,null);t.default=l.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/9.e00df4e4.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{435:function(e,t,n){},479:function(e,t,n){"use strict";n(435)},517:function(e,t,n){"use strict";n.r(t);var a={name:"before-after-columns",props:[],data:function(){return{columns:[{label:"Before",field:"before"},{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"},{label:"After",field:"after"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(n(479),n(4)),r=Object(o.a)(a,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("vue-good-table",{attrs:{columns:e.columns,rows:e.rows},scopedSlots:e._u([{key:"table-row",fn:function(t){return["before"==t.column.field?n("span",[e._v("\n before\n ")]):"after"==t.column.field?n("span",[e._v("\n after\n ")]):n("span",[e._v("\n "+e._s(t.formattedRow[t.column.field])+"\n ")])]}}])})],1)}),[],!1,null,null,null);t.default=r.exports}}]);
--------------------------------------------------------------------------------
/docs/assets/js/12.36cf977b.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{438:function(e,t,n){},482:function(e,t,n){"use strict";n(438)},520:function(e,t,n){"use strict";n.r(t);var a={name:"external-query",props:[],data:function(){return{externalQuery:"",columns:[{label:"Name",field:"name",filterOptions:{enabled:!1}},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"yyyy-MM-dd",dateOutputFormat:"MMM do yy"},{label:"Percent",field:"score",type:"percentage"}],rows:[{id:1,name:"John",age:20,createdAt:"2011-07-02",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},r=(n(482),n(4)),o=Object(r.a)(a,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._v("\n External Query "),n("input",{directives:[{name:"model",rawName:"v-model",value:e.externalQuery,expression:"externalQuery"}],attrs:{type:"text"},domProps:{value:e.externalQuery},on:{input:function(t){t.target.composing||(e.externalQuery=t.target.value)}}}),e._v(" "),n("vue-good-table",{attrs:{"search-options":{enabled:!0,externalQuery:e.externalQuery},columns:e.columns,rows:e.rows}})],1)}),[],!1,null,null,null);t.default=o.exports}}]);
--------------------------------------------------------------------------------
/test/unit/specs/types/default.spec.js:
--------------------------------------------------------------------------------
1 | import defaultType from '@/components/types/default'
2 |
3 | describe('default type', () => {
4 | describe('compare', () => {
5 | it('should return -1 if x is before y', () => {
6 | expect(defaultType.compare('abc', 'abd')).to.equal(-1)
7 | })
8 |
9 | it('should return 1 if y is before x', () => {
10 | expect(defaultType.compare('aba', 'aaa')).to.equal(1)
11 | })
12 |
13 | it('should return 0 if y == x', () => {
14 | expect(defaultType.compare('aba', 'aba')).to.equal(0)
15 | })
16 | })
17 | describe('format', () => {
18 | it('should return itself', () => {
19 | var x = 'You might also like
4 |
5 |
18 |
6 |
9 | vue-good-wizard
7 |An easy to use and clean VueJS step wizard plugin.
8 |
10 |
13 | vue-good-links
11 |A light, expandable link and text hover effect library for VueJS.
12 |
14 |
17 | UserBit
15 |Cloud-based platform for UX and Product teams.
16 |lorem ipsum
'
20 | expect(defaultType.format(x)).to.equal(x)
21 | })
22 | })
23 | describe('filterPredicate', () => {
24 | it('should return false if values don\'t match', () => {
25 | expect(defaultType.filterPredicate('aBc', 'aBcD')).to.equal(false)
26 | })
27 |
28 | it('should return true if values match', () => {
29 | expect(defaultType.filterPredicate('aBc', 'aBc')).to.equal(true)
30 | })
31 |
32 | it('should return true if values match, even if they are mismatch on case', () => {
33 | expect(defaultType.filterPredicate('aBc', 'AbC')).to.equal(true)
34 | })
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/assets/js/20.6c61e0f6.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[20],{181:function(e,n,t){},187:function(e,n,t){"use strict";var a=t(181);t.n(a).a},209:function(e,n,t){"use strict";t.r(n);var a={name:"before-after-columns",props:[],data:function(){return{columns:[{label:"Before",field:"before"},{label:"Name",field:"name"},{label:"Age",field:"age",type:"number"},{label:"Created On",field:"createdAt",type:"date",dateInputFormat:"YYYY-MM-DD",dateOutputFormat:"MMM Do YY"},{label:"Percent",field:"score",type:"percentage"},{label:"After",field:"after"}],rows:[{id:1,name:"John",age:20,createdAt:"201-10-31:9: 35 am",score:.03343},{id:2,name:"Jane",age:24,createdAt:"2011-10-31",score:.03343},{id:3,name:"Susan",age:16,createdAt:"2011-10-30",score:.03343}]}},computed:{},methods:{},mounted:function(){},components:{}},o=(t(187),t(0)),r=Object(o.a)(a,function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("vue-good-table",{attrs:{columns:e.columns,rows:e.rows},scopedSlots:e._u([{key:"table-row",fn:function(n){return["before"==n.column.field?t("span",[e._v("\n before\n ")]):"after"==n.column.field?t("span",[e._v("\n after\n ")]):t("span",[e._v("\n "+e._s(n.formattedRow[n.column.field])+"\n ")])]}}])})],1)},[],!1,null,null,null);n.default=r.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/guide/style-configuration/style-classes.md:
--------------------------------------------------------------------------------
1 | # Style Classes
2 |
3 | Vue-good-table allows providing your own css classes for the table via **styleClass** option but it also has in-built classes that you can make use of.
4 |
5 | ::: tip NOTE
6 | by default, tables have 'vgt-table striped bordered'
7 | :::
8 |
9 | ## .vgt-table
10 | Base class that initializes all the core styles for the table.
11 | ```vue{4}
12 |
3 |
4 |
5 |
6 |
42 |
43 |
78 |
--------------------------------------------------------------------------------
/docs/assets/js/6.9355beb5.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{451:function(e,t,o){},495:function(e,t,o){"use strict";o(451)},532:function(e,t,o){"use strict";o.r(t);o(27),o(63),o(89),o(64);var a={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.codeTabs.forEach((function(e){e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm.classList.add("theme-code-block__active")}},mounted:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,o){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=o),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0)},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e}}},c=(o(495),o(4)),n=Object(c.a)(a,(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"theme-code-group"},[o("div",{staticClass:"theme-code-group__nav"},[o("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,a){return o("li",{key:t.title,staticClass:"theme-code-group__li"},[o("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":a===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(a)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?o("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)}),[],!1,null,"32c2d7ed",null);t.default=n.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/guide/configuration/sort-options.md:
--------------------------------------------------------------------------------
1 | # Sort Options
2 |
3 | Set of options related to table sorting
4 |
5 | ```html
6 |
3 |
6 |
7 |
8 |
9 |
10 |
59 |
60 |
66 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/rtl-table.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
10 |
11 |
59 |
60 |
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-good-table",
3 | "version": "2.21.11",
4 | "sideEffects": [
5 | "*.vue",
6 | "*.css"
7 | ],
8 | "description": "A simple, clean data table for VueJS (2.x) with essential features like sorting, column filtering, pagination etc",
9 | "main": "dist/vue-good-table.cjs.js",
10 | "module": "dist/vue-good-table.esm.js",
11 | "files": [
12 | "dist",
13 | "src"
14 | ],
15 | "scripts": {
16 | "bundle": "bili",
17 | "dev": "poi --serve",
18 | "docs:dev": "vuepress dev vp-docs",
19 | "docs:build": "vuepress build vp-docs",
20 | "test": "echo \"No test specified\""
21 | },
22 | "repository": "github:xaksis/vue-good-table",
23 | "keywords": [
24 | "vue",
25 | "vuejs",
26 | "table",
27 | "datatable"
28 | ],
29 | "author": {
30 | "name": "xaksis",
31 | "email": "shay@crayonbits.com"
32 | },
33 | "license": "MIT",
34 | "poi": {
35 | "entry": "dev/main.js",
36 | "output": {
37 | "dir": "dev/dist",
38 | "publicUrl": "./",
39 | "html": {
40 | "template": "dev/index.html"
41 | }
42 | }
43 | },
44 | "dependencies": {
45 | "date-fns": "^2.17.0",
46 | "lodash.isequal": "^4.5.0"
47 | },
48 | "devDependencies": {
49 | "@vuepress/plugin-google-analytics": "^1.0.0-rc.1",
50 | "bili": "^4.8.0",
51 | "eslint-config-airbnb": "^18.2.0",
52 | "node-sass": "^4.12.0",
53 | "poi": "^12.7.0",
54 | "rollup-plugin-commonjs": "^10.1.0",
55 | "rollup-plugin-vue": "^5.1.9",
56 | "sass-loader": "^7.1.0",
57 | "vue": "^2.6.10",
58 | "vue-template-compiler": "^2.6.10",
59 | "vuepress": "^1.0.0-rc.1"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/test/unit/specs/Pagination.spec.js:
--------------------------------------------------------------------------------
1 | import sinon from 'sinon'
2 | import VueGoodPagination from '@/components/Pagination'
3 | import { mount } from 'vue-test-utils'
4 |
5 | describe('VueGoodPagination', () => {
6 | let wrapper, vm
7 | beforeEach(() => {
8 | wrapper = mount(VueGoodPagination, {propsData: {
9 | perPage: 10,
10 | total: 30}
11 | })
12 | vm = wrapper.vm
13 | })
14 | it('should render 2 page buttons', async () => {
15 | await vm.$nextTick()
16 | wrapper.findAll('.page-btn').length.should.equal(2)
17 | wrapper.contains('select').should.be.true
18 | })
19 |
20 | it('should call previousPage when the first button is clicked', async () => {
21 | await vm.$nextTick()
22 | let previousPageStub = sinon.stub(vm, 'previousPage')
23 | wrapper.find('.page-btn:first-child').trigger('click')
24 | previousPageStub.called.should.be.true
25 | })
26 |
27 | it('should call nextPage when the last button is clicked', async () => {
28 | await vm.$nextTick()
29 | let nextPageStub = sinon.stub(vm, 'nextPage')
30 | wrapper.find('.page-btn:last-child').trigger('click')
31 | nextPageStub.called.should.be.true
32 | })
33 |
34 | it('should call pageChanged during nextPage', async () => {
35 | await vm.$nextTick()
36 | let pageChangedStub = sinon.stub(vm, 'pageChanged')
37 | vm.nextPage()
38 | pageChangedStub.called.should.be.true
39 | })
40 |
41 | it('should call pageChanged during previousPage', async () => {
42 | await vm.$nextTick()
43 | vm.nextPage()
44 | let pageChangedStub = sinon.stub(vm, 'pageChanged')
45 | vm.previousPage()
46 | pageChangedStub.called.should.be.true
47 | })
48 | })
49 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/line-numbers-table.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
10 |
11 |
59 |
60 |
76 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/fixed-header.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
61 |
62 |
67 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/custom-row.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 | {{props.row.age}}
9 |
10 |
11 | {{props.formattedRow[props.column.field]}}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
64 |
65 |
70 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/theme-example.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
61 |
62 |
78 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/search-demo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
14 |
65 |
66 |
82 |
--------------------------------------------------------------------------------
/src/components/VgtGlobalSearch.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
28 |
29 |
64 |
65 |
68 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/external-query.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
3 | External Query
4 |
11 |
12 |
13 |
14 |
15 |
66 |
67 |
83 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/checkbox-table.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
13 |
14 |
15 |
16 |
70 |
71 |
77 |
--------------------------------------------------------------------------------
/src/styles/_control-bar.scss:
--------------------------------------------------------------------------------
1 | .vgt-global-search{
2 | padding: 5px 0px;
3 | display: flex;
4 | flex-wrap: nowrap;
5 | align-items: stretch;
6 | border: 1px solid $border-color;
7 | border-bottom: 0px;
8 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
9 | form {
10 | display: flex;
11 | label {
12 | margin-top: 3px;
13 | }
14 | }
15 | }
16 | .vgt-global-search__input{
17 | position: relative;
18 | padding-left: 40px;
19 | flex-grow: 1;
20 | .input__icon{
21 | position: absolute;
22 | left: 0px;
23 | max-width: 32px;
24 | .magnifying-glass{
25 | margin-top: 3px;
26 | margin-left: 8px;
27 | display: block;
28 | width: 16px;
29 | height: 16px;
30 | border: 2px solid #494949;
31 | position: relative;
32 | border-radius: 50%;
33 | &:before{
34 | content: "";
35 | display: block;
36 | position: absolute;
37 | right: -7px;
38 | bottom: -5px;
39 | background: #494949;
40 | width: 8px;
41 | height: 4px;
42 | border-radius: 2px;
43 | transform: rotate(45deg);
44 | -webkit-transform: rotate(45deg);
45 | -moz-transform: rotate(45deg);
46 | -ms-transform: rotate(45deg);
47 | -o-transform: rotate(45deg);
48 | }
49 | }
50 | }
51 | .vgt-input{
52 | }
53 | }
54 | .vgt-global-search__actions{
55 | margin-left: 10px;
56 | }
57 |
58 | .vgt-selection-info-row{
59 | background: $notify-bg-color;
60 | padding: 5px 16px;
61 | font-size: 13px;
62 | border-top: 1px solid $border-color;
63 | border-left: 1px solid $border-color;
64 | border-right: 1px solid $border-color;
65 | color: lighten($notify-fg-color, 10%);
66 | font-weight: bold;
67 | a{
68 | font-weight: bold;
69 | display: inline-block;
70 | margin-left: 10px;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/pagination-table.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
3 |
7 |
8 |
9 |
10 |
11 |
60 |
61 |
77 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | title: 'vue-good-table',
3 | description: 'A powerful data table plugin for VueJS',
4 | base: '/vue-good-table/',
5 | dest: 'docs',
6 | ga: 'UA-120929110-1',
7 | head: [
8 | ['link', { rel: 'icon', href: '/favicon.png' }]
9 | ],
10 | theme: '@vuepress/vue',
11 | themeConfig: {
12 | repo: 'xaksis/vue-good-table',
13 | logo: '/vgt-logo.png',
14 | lastUpdated: true,
15 | nav: [
16 | { text: 'Home', link: '/' },
17 | { text: 'Guide', link: '/guide/' },
18 | ],
19 | sidebar: {
20 | '/guide/': [
21 | {
22 | title: 'Introduction',
23 | collapsable: false,
24 | children: [
25 | '',
26 | ]
27 | },
28 | {
29 | title: 'Configuration',
30 | collapsable: false,
31 | children: [
32 | '/guide/configuration/',
33 | '/guide/configuration/table-events',
34 | '/guide/configuration/search-options',
35 | '/guide/configuration/sort-options',
36 | '/guide/configuration/pagination-options',
37 | '/guide/configuration/column-options',
38 | '/guide/configuration/column-filter-options',
39 | ]
40 | },
41 | {
42 | title: 'Advanced Configuration',
43 | collapsable: false,
44 | children: [
45 | '/guide/advanced/',
46 | '/guide/advanced/checkbox-table',
47 | '/guide/advanced/grouped-table',
48 | '/guide/advanced/remote-workflow',
49 | ]
50 | },
51 | {
52 | title: 'Style Configuration',
53 | collapsable: false,
54 | children: [
55 | '/guide/style-configuration/',
56 | '/guide/style-configuration/style-classes',
57 | '/guide/style-configuration/sass',
58 | ]
59 | },
60 | ],
61 | },
62 | }
63 | }
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/before-after-columns.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 | before
9 |
10 |
11 | after
12 |
13 |
14 | {{props.formattedRow[props.column.field]}}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
75 |
76 |
82 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/grouped-table.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
14 |
74 |
75 |
91 |
--------------------------------------------------------------------------------
/src/components/utils/sort.js:
--------------------------------------------------------------------------------
1 | import {
2 | DEFAULT_SORT_TYPE,
3 | SORT_TYPES,
4 | } from './constants';
5 |
6 | function getColumnFirstSortType(column) {
7 | return column.firstSortType || DEFAULT_SORT_TYPE;
8 | }
9 |
10 | function getCurrentPrimarySort(sortArray, column) {
11 | return ( sortArray.length === 1 && sortArray[0].field === column.field )
12 | ? sortArray[0].type
13 | : undefined;
14 | }
15 |
16 | function getNextSort(currentSort, column) {
17 | if (SORT_TYPES.Descending === getColumnFirstSortType(column)
18 | && currentSort === SORT_TYPES.Ascending) {
19 | return SORT_TYPES.None
20 | } else if (currentSort === SORT_TYPES.Ascending) {
21 | return SORT_TYPES.Descending;
22 | }
23 | if (SORT_TYPES.Descending === getColumnFirstSortType(column)
24 | && currentSort === SORT_TYPES.Descending) {
25 | return SORT_TYPES.Ascending;
26 | } else if (currentSort === SORT_TYPES.Descending) {
27 | return SORT_TYPES.None;
28 | }
29 |
30 | if (SORT_TYPES.Descending === getColumnFirstSortType(column)
31 | && currentSort === SORT_TYPES.None) {
32 | return SORT_TYPES.Descending;
33 | } else {
34 | return SORT_TYPES.Ascending;
35 | }
36 |
37 | }
38 |
39 | function getIndex(sortArray, column) {
40 | for (let i = 0; i < sortArray.length; i++) {
41 | if (column.field === sortArray[i].field) return i;
42 | }
43 | return -1;
44 | }
45 |
46 | const primarySort = (sortArray, column) => {
47 | const currentPrimarySort = getCurrentPrimarySort(sortArray, column);
48 | const nextPrimarySort = getNextSort(currentPrimarySort, column);
49 | return [{
50 | field: column.field,
51 | type: currentPrimarySort ? nextPrimarySort : getColumnFirstSortType(column),
52 | }];
53 | };
54 |
55 | const secondarySort = (sortArray, column) => {
56 | const index = getIndex(sortArray, column);
57 | if (index === -1) {
58 | sortArray.push({
59 | field: column.field,
60 | type: getColumnFirstSortType(column),
61 | });
62 | } else {
63 | sortArray[index].type = getNextSort(sortArray[index].type, column);
64 | }
65 | return sortArray;
66 | };
67 |
68 | export {
69 | primarySort,
70 | secondarySort,
71 | }
--------------------------------------------------------------------------------
/vp-docs/.vuepress/theme/components/Banner.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
Buy me a coffee
5 |
6 |
7 |
8 |
26 |
27 |
--------------------------------------------------------------------------------
/vp-docs/guide/advanced/checkbox-table.md:
--------------------------------------------------------------------------------
1 | # Checkbox Table
2 |
3 | One of the most common customizations in datatables is selectable rows. Creating a checkbox table with **vue-good-table** is easier than ever.
4 |
5 |
6 | ## Configuration
7 |
8 | type: `Object`
9 |
10 | Object containing select options
11 | ```html
12 | Buy me a coffee
5 |
62 |
63 |
64 |
3 |
6 |
11 |
12 |
13 |
14 |
62 |
63 |
96 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/dist/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | function(data, filterString), should return true if data matches the filterString, otherwise false
75 |
76 | ```javascript
77 | filterFn: function(data, filterString) {
78 | var x = parseInt(filterString)
79 | return data >= x - 5 && data <= x + 5;
80 | }
81 | // would create a filter matching numbers within 5 of the provided value
82 | ```
83 |
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/grouped-custom-span.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 | {{ props.row.label }}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
79 |
80 |
100 |
--------------------------------------------------------------------------------
/docs/assets/js/3.e88f9927.js:
--------------------------------------------------------------------------------
1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{429:function(t,e,n){},430:function(t,e,n){},431:function(t,e,n){},473:function(t,e,n){"use strict";n(429)},474:function(t,e,n){"use strict";n(430)},475:function(t,e,n){"use strict";n(431)},513:function(t,e,n){"use strict";n.r(e);var s=n(496),a={name:"CarbonAds",props:[],data:function(){return{}},watch:{$route:function(t,e){t.path!==e.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},computed:{},methods:{load:function(){var t=document.createElement("script");t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CK7DC53W&placement=xaksisgithubio",this.$el.appendChild(t)}},mounted:function(){this.load()},components:{}},o=(n(473),n(4)),r=Object(o.a)(a,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"carbon-ads"})}),[],!1,null,null,null).exports,i={name:"Banner",props:[],data:function(){return{}},computed:{},methods:{},mounted:function(){},components:{}},c=(n(474),Object(o.a)(i,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"banner-holder"},[e("p",{staticClass:"banner-label"},[this._v("Did "),e("strong",[this._v("vue-good-table")]),this._v(" save you time? Share the Joy!")]),this._v(" "),e("a",{staticClass:"bmc-button",attrs:{target:"_blank",href:"https://www.buymeacoffee.com/68BUXR1d9"}},[e("img",{attrs:{src:"https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg",alt:"Buy me a coffee"}}),e("span",{staticStyle:{"margin-left":"5px"}},[this._v("Buy me a coffee")])])])}],!1,null,"67e317d2",null).exports),u={name:"UserBitAd",props:[],data:function(){return{}},computed:{},methods:{},mounted:function(){},components:{}},l=(n(475),Object(o.a)(u,(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"box"},[e("div",{staticClass:"ad-box"},[this._v("\n Do you have a UX team? I Would really appreciate their feedback on my new product - "),e("a",{attrs:{target:"_blank",rel:"noopener noreferrer",href:"https://userbitapp.com"}},[this._v("UserBit")])])])])}],!1,null,"4fb0bc70",null).exports),d={components:{ParentLayout:s.a,CarbonAds:r,Banner:c,UserBitAd:l}},h=Object(o.a)(d,(function(){var t=this.$createElement,e=this._self._c||t;return e("ParentLayout",[e("carbon-ads",{attrs:{slot:"sidebar-top"},slot:"sidebar-top"}),this._v(" "),e("user-bit-ad",{attrs:{slot:"page-top"},slot:"page-top"})],1)}),[],!1,null,null,null);e.default=h.exports}}]);
--------------------------------------------------------------------------------
/vp-docs/guide/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Getting Started
3 |
4 | ## Installation
5 |
6 | Install with npm:
7 |
8 | ```bash
9 | npm install --save vue-good-table
10 | ```
11 |
12 | Import globally in app:
13 |
14 | ```javascript
15 | import VueGoodTablePlugin from 'vue-good-table';
16 |
17 | // import the styles
18 | import 'vue-good-table/dist/vue-good-table.css'
19 |
20 | Vue.use(VueGoodTablePlugin);
21 | ```
22 |
23 | **or** you can import into your component:
24 | ```js
25 | // import the styles
26 | import 'vue-good-table/dist/vue-good-table.css'
27 | import { VueGoodTable } from 'vue-good-table';
28 |
29 | // add to component
30 | components: {
31 | VueGoodTable,
32 | }
33 | ```
34 |
35 |
36 | ## Basic Example
37 |
38 |
43 |
47 |
48 |
49 |
89 | ```
90 |
91 | ## Usage with Nuxt.js
92 |
93 | Create your own plugin by creating a file called `vue-good-table.js` inside your Nuxt `plugins` folder. Shoud look something like this:
94 |
95 | ```
96 | import Vue from 'vue'
97 | import VueGoodTablePlugin from 'vue-good-table';
98 |
99 | // import the styles
100 | import 'vue-good-table/dist/vue-good-table.css'
101 |
102 | Vue.use(VueGoodTablePlugin);
103 | ```
104 |
105 | As you can see, the only difference from the normal installation is that we need to reference Vue using `import Vue from 'vue'`.
106 |
107 | Next we need to declare the plugin inside your `nuxt.config.js` like so:
108 |
109 | ```
110 | plugins: [
111 | { src: '~/plugins/vue-good-table', ssr: false }
112 | ],
113 | ```
114 |
115 | This should now work as expected.
--------------------------------------------------------------------------------
/vp-docs/.vuepress/components/grouped-custom.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
14 |
15 | {{props.formattedRow[props.column.field]}}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
94 |
95 |
125 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at anand.cooper@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/src/styles/_table-th.scss:
--------------------------------------------------------------------------------
1 | $sort-chevron-width: 5px;
2 |
3 | .vgt-table{
4 | & th{
5 | padding: .75em 1.5em .75em .75em;
6 | vertical-align: middle;
7 | position: relative;
8 | &.sortable{
9 | button {
10 | -webkit-appearance: none;
11 | -moz-appearance: none;
12 | appearance: none;
13 | background: transparent;
14 | border: none;
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 | width: 100%;
19 | height: 100%;
20 | &:focus{
21 | outline: none;
22 | }
23 | &:after{
24 | content: '';
25 | position: absolute;
26 | height: 0px;
27 | width: 0px;
28 | right: 6px;
29 | top: 50%;
30 | margin-top: -7px;
31 | border-left: $sort-chevron-width solid transparent;
32 | border-right: $sort-chevron-width solid transparent;
33 | border-bottom: $sort-chevron-width solid $chevron-color;
34 | }
35 | &:before{
36 | content: '';
37 | position: absolute;
38 | height: 0px;
39 | width: 0px;
40 | right: 6px;
41 | top: 50%;
42 | margin-bottom: -7px;
43 | border-left: $sort-chevron-width solid transparent;
44 | border-right: $sort-chevron-width solid transparent;
45 | border-top: $sort-chevron-width solid $chevron-color;
46 | }
47 | }
48 | }
49 | }
50 | & th.line-numbers, & th.vgt-checkbox-col {
51 | padding: 0 .75em 0 .75em;
52 | color: $text-color;
53 | border-right: 1px solid $border-color;
54 | word-wrap: break-word;
55 | width: 25px;
56 | text-align: center;
57 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
58 | }
59 | & th.filter-th {
60 | padding: .75em .75em .75em .75em;
61 | }
62 |
63 | th.vgt-row-header{
64 | border-bottom: 2px solid $border-color;
65 | border-top: 2px solid $border-color;
66 | background-color: lighten($border-color, 10%);
67 | .triangle {
68 | width: 24px;
69 | height: 24px;
70 | border-radius: 15%;
71 | position: relative;
72 | margin: 0px 8px;
73 | &:after {
74 | content: '';
75 | position: absolute;
76 | display: block;
77 | left: 50%;
78 | top: 50%;
79 | margin-top: -6px;
80 | border-top: 6px solid transparent;
81 | border-bottom: 6px solid transparent;
82 | border-left: 6px solid $text-color;
83 | margin-left: -3px;
84 | transition: 0.3s ease transform;
85 | }
86 | &.expand:after {
87 | transform: rotate(90deg);
88 | }
89 | }
90 | }
91 |
92 | thead th{
93 | color: $text-color;
94 | vertical-align: bottom;
95 | border-bottom: 1px solid $border-color;
96 | padding-right: 1.5em;
97 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
98 | &.vgt-checkbox-col{
99 | vertical-align: middle;
100 | }
101 | &.sorting-asc button {
102 | &:after{
103 | border-bottom: $sort-chevron-width solid $link-color;
104 | }
105 | }
106 | &.sorting-desc button {
107 | &:before{
108 | border-top: $sort-chevron-width solid $link-color;
109 | }
110 | }
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/vp-docs/guide/configuration/search-options.md:
--------------------------------------------------------------------------------
1 | # Search Options
2 |
3 | Vue-good-table supports two ways of filtering the table.
4 | 1. A global search that searches through all records in the table
5 | 1. [Column filters](/guide/configuration/column-filter-options.md) that filter based on a given column
6 |
7 | This section talks about how to configure global search options.
8 |
9 | ```html
10 |
3 |
4 |
5 |
32 |
40 |
41 |
42 |
43 |
44 |
141 |
142 |
147 |
--------------------------------------------------------------------------------
/src/styles/nocturnal/nocturnal.scss:
--------------------------------------------------------------------------------
1 | @import './overrides';
2 | // suggested by wifey
3 | .vgt-table.nocturnal{
4 | border: 1px solid $border-color;
5 | background-color: $table-bg;
6 |
7 | & tr.clickable {
8 | &:hover{
9 | background-color: $highlight-color;
10 | }
11 | }
12 |
13 | // td
14 | & td {
15 | border-bottom: 1px solid $border-color;
16 | color: $text-color;
17 | }
18 |
19 | //th
20 | & th.line-numbers, & th.vgt-checkbox-col {
21 | color: $text-color;
22 | border-right: 1px solid $border-color;
23 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
24 | }
25 | thead th{
26 | color: $text-color;
27 | border-bottom: 1px solid $border-color;
28 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
29 | &.sortable {
30 | // color: lighten($text-color, 15%);
31 | &:before{
32 | border-top-color: $chevron-color;
33 | }
34 | &:after{
35 | border-bottom-color: $chevron-color;
36 | }
37 | &.sorting-asc{
38 | color: white;
39 | &:after{
40 | border-bottom-color: $link-color;
41 | }
42 | }
43 | &.sorting-desc {
44 | color: white;
45 | &:before{
46 | border-top-color: $link-color;
47 | }
48 | }
49 | }
50 | }
51 |
52 | //bordered
53 | &.bordered td, &.bordered th {
54 | border: 1px solid $border-color;
55 | }
56 |
57 | //input
58 | .vgt-input, .vgt-select{
59 | color: $text-color;
60 | background-color: darken($thead-bg-color-2, 5%);
61 | border: 1px solid $input-border-color;
62 | &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
63 | color: $text-color;
64 | opacity: 0.3; /* Firefox */
65 | }
66 | }
67 | }
68 |
69 | .vgt-wrap.nocturnal{
70 | .vgt-wrap__footer{
71 | color: $text-color;
72 | border: 1px solid $border-color;
73 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
74 | .footer__row-count{
75 | position: relative;
76 | &__label{
77 | color: $secondary-text-color;
78 | }
79 | &__select{
80 | color: $text-color;
81 | background: darken($thead-bg-color-2, 5%);
82 | border: none;
83 | -webkit-appearance: none;
84 | -moz-appearance: none;
85 | appearance: none;
86 | padding-right: 15px;
87 | padding-left: 10px;
88 | border-radius: 3px;
89 | text-align: center;
90 | &:focus{
91 | border-color: $link-color;
92 | }
93 | }
94 | &::after{
95 | content: '';
96 | display: block;
97 | position: absolute;
98 | height: 0px;
99 | width: 0px;
100 | right: 6px;
101 | top: 50%;
102 | margin-top: -1px;
103 | border-top: 6px solid $text-color;
104 | border-left: 6px solid transparent;
105 | border-right: 6px solid transparent;
106 | border-bottom: none;
107 | pointer-events: none
108 | }
109 | }
110 | .footer__navigation{
111 | &__page-btn{
112 | color: $text-color;
113 | &.disabled,
114 | &.disabled:hover {
115 | .chevron.left:after{
116 | border-right-color: $text-color;
117 | }
118 | .chevron.right:after{
119 | border-left-color: $text-color;
120 | }
121 | }
122 | }
123 | &__info, &__page-info{
124 | color: $secondary-text-color;
125 | }
126 | }
127 | }
128 |
129 | // control bar
130 | .vgt-global-search{
131 | border: 1px solid $border-color;
132 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
133 | }
134 | .vgt-global-search__input{
135 | .input__icon{
136 | .magnifying-glass{
137 | border: 2px solid darken($border-color, 2%);
138 | &:before{
139 | background: darken($border-color, 2%);
140 | }
141 | }
142 | }
143 | .vgt-input, .vgt-select{
144 | color: $text-color;
145 | background-color: darken($thead-bg-color-2, 5%);
146 | border: 1px solid $input-border-color;
147 | &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
148 | color: $text-color;
149 | opacity: 0.3; /* Firefox */
150 | }
151 | }
152 | }
153 | }
--------------------------------------------------------------------------------
/src/styles/black-rhino/black-rhino.scss:
--------------------------------------------------------------------------------
1 | @import './overrides';
2 | // suggested by wifey
3 | .vgt-table.black-rhino{
4 | border: 1px solid $border-color;
5 | background-color: $table-bg;
6 |
7 | & tr.clickable {
8 | &:hover{
9 | background-color: $highlight-color;
10 | }
11 | }
12 |
13 | // td
14 | & td {
15 | border-bottom: 1px solid $border-color-td;
16 | color: $text-color-td;
17 | }
18 |
19 | //th
20 | & th.line-numbers, & th.vgt-checkbox-col {
21 | color: $text-color;
22 | border-right: 1px solid $border-color;
23 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
24 | }
25 | thead th{
26 | color: $text-color;
27 | text-shadow: 1px 1px $text-shadow-color;
28 | border-bottom: 1px solid $border-color;
29 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
30 | &.sortable {
31 | // color: lighten($text-color, 15%);
32 | &:before{
33 | border-top-color: $chevron-color;
34 | }
35 | &:after{
36 | border-bottom-color: $chevron-color;
37 | }
38 | &.sorting-asc{
39 | color: white;
40 | &:after{
41 | border-bottom-color: $link-color;
42 | }
43 | }
44 | &.sorting-desc {
45 | &:before{
46 | border-top-color: $link-color;
47 | }
48 | }
49 | }
50 | }
51 |
52 | //bordered
53 | &.bordered td {
54 | border: 1px solid $border-color-td;
55 | }
56 |
57 | &.bordered th {
58 | border: 1px solid $border-color;
59 | }
60 |
61 | //input
62 | .vgt-input, .vgt-select{
63 | color: $text-color;
64 | background-color: $input-bg;
65 | border: 1px solid $input-border-color;
66 | &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
67 | color: $text-color;
68 | opacity: 0.3; /* Firefox */
69 | }
70 | }
71 | }
72 |
73 | .vgt-wrap.black-rhino{
74 | .vgt-wrap__footer{
75 | color: $text-color;
76 | border: 1px solid $border-color;
77 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
78 | .footer__row-count{
79 | position: relative;
80 | padding-right: 3px;
81 | &__label{
82 | color: $secondary-text-color;
83 | }
84 | &__select{
85 | color: $text-color-td;
86 | background: $input-bg;
87 | border: none;
88 | -webkit-appearance: none;
89 | -moz-appearance: none;
90 | appearance: none;
91 | padding-right: 15px;
92 | padding-left: 5px;
93 | border-radius: 3px;
94 | &::-ms-expand{
95 | display: none;
96 | }
97 | &:focus{
98 | border-color: $link-color;
99 | }
100 | }
101 | &::after{
102 | content: '';
103 | display: block;
104 | position: absolute;
105 | height: 0px;
106 | width: 0px;
107 | right: 6px;
108 | top: 50%;
109 | margin-top: -1px;
110 | border-top: 6px solid $text-color-td;
111 | border-left: 6px solid transparent;
112 | border-right: 6px solid transparent;
113 | border-bottom: none;
114 | pointer-events: none
115 | }
116 | }
117 | .footer__navigation{
118 | &__page-btn{
119 | color: $text-color;
120 | &.disabled,
121 | &.disabled:hover {
122 | .chevron.left:after{
123 | border-right-color: $text-color;
124 | }
125 | .chevron.right:after{
126 | border-left-color: $text-color;
127 | }
128 | }
129 | }
130 | &__info, &__page-info{
131 | color: $text-color;
132 | }
133 | }
134 | }
135 |
136 | // control bar
137 | .vgt-global-search{
138 | border: 1px solid $border-color;
139 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
140 | }
141 | .vgt-global-search__input{
142 | .input__icon{
143 | .magnifying-glass{
144 | border: 2px solid darken($border-color, 2%);
145 | &:before{
146 | background: darken($border-color, 2%);
147 | }
148 | }
149 | }
150 | .vgt-input, .vgt-select{
151 | color: $text-color;
152 | background-color: darken($thead-bg-color-2, 5%);
153 | border: 1px solid $input-border-color;
154 | &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
155 | color: $text-color;
156 | opacity: 0.3; /* Firefox */
157 | }
158 | }
159 | }
160 | }
--------------------------------------------------------------------------------
/src/styles/_table-footer.scss:
--------------------------------------------------------------------------------
1 | $footer-font-size: 1.1rem;
2 |
3 | .vgt-wrap__actions-footer{
4 | border: 1px solid $border-color;
5 | }
6 | .vgt-wrap__footer{
7 | color: $text-color;
8 | font-size: $footer-font-size;
9 | padding: 1em;
10 | border: 1px solid $border-color;
11 | background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
12 | .footer__row-count{
13 | position: relative;
14 | padding-right: 3px;
15 | &__label, &__select{
16 | display: inline-block;
17 | vertical-align: middle;
18 | }
19 | &__label{
20 | font-size: $footer-font-size;
21 | }
22 | &__select{
23 | font-size: $footer-font-size;
24 | background-color: transparent;
25 | width: auto;
26 | padding: 0;
27 | border: 0;
28 | border-radius: 0;
29 | height: auto;
30 | margin-left: 8px;
31 | color: $text-color;
32 | font-weight: bold;
33 | -webkit-appearance: none;
34 | -moz-appearance: none;
35 | appearance: none;
36 | padding-right: 15px;
37 | padding-left: 5px;
38 | &::-ms-expand{
39 | display: none;
40 | }
41 | &:focus{
42 | outline: none;
43 | border-color: $link-color;
44 | }
45 | }
46 | &::after{
47 | content: '';
48 | display: block;
49 | position: absolute;
50 | height: 0px;
51 | width: 0px;
52 | right: 6px;
53 | top: 50%;
54 | margin-top: -1px;
55 | border-top: 6px solid $text-color;
56 | border-left: 6px solid transparent;
57 | border-right: 6px solid transparent;
58 | border-bottom: none;
59 | pointer-events: none
60 | }
61 | }
62 | .footer__navigation{
63 | > button:first-of-type {
64 | margin-right: 16px;
65 | }
66 | font-size: $footer-font-size;
67 | &__page-btn, &__info, &__page-info{
68 | display: inline-block;
69 | vertical-align: middle;
70 | color: $secondary-text-color;
71 | }
72 | &__page-btn{
73 | -webkit-appearance: none;
74 | -moz-appearance: none;
75 | appearance: none;
76 | background: transparent;
77 | border: none;
78 | text-decoration: none;
79 | color: $text-color;
80 | font-weight: bold;
81 | white-space:nowrap;
82 | vertical-align: middle;
83 | &:hover{
84 | cursor: pointer;
85 | }
86 | &.disabled,
87 | &.disabled:hover {
88 | opacity: 0.5;
89 | cursor: not-allowed;
90 | .chevron.left:after{
91 | border-right-color: $text-color;
92 | }
93 | .chevron.right:after{
94 | border-left-color: $text-color;
95 | }
96 | }
97 | span{
98 | display: inline-block;
99 | vertical-align: middle;
100 | font-size: $footer-font-size;
101 | }
102 | .chevron{
103 | width: 24px;
104 | height: 24px;
105 | border-radius: 15%;
106 | position: relative;
107 | margin: 0;
108 | display: inline-block;
109 | vertical-align: middle;
110 | &:after{
111 | content: '';
112 | position: absolute;
113 | display: block;
114 | left: 50%;
115 | top: 50%;
116 | margin-top: -6px;
117 | border-top: 6px solid transparent;
118 | border-bottom: 6px solid transparent;
119 | }
120 | &.left::after{
121 | border-right: 6px solid $link-color;
122 | margin-left: -3px;
123 | }
124 |
125 | &.right::after{
126 | border-left: 6px solid $link-color;
127 | margin-left: -3px;
128 | }
129 | }
130 | }
131 | &__info, &__page-info{
132 | display: inline-block;
133 | margin: 0px 16px;
134 | }
135 | &__page-info{
136 | span{
137 | display: inline-block;
138 | vertical-align: middle;
139 | }
140 | &__current-entry{
141 | width: 30px;
142 | text-align: center;
143 | vertical-align: middle;
144 | display: inline-block;
145 | margin: 0px 10px;
146 | font-weight: bold;
147 | }
148 | }
149 |
150 |
151 | }
152 | }
153 |
154 | @media only screen and (max-width: 750px) {
155 | /* on small screens hide the info */
156 | .vgt-wrap__footer .footer__navigation__info{
157 | display: none;
158 | }
159 | .vgt-wrap__footer .footer__navigation__page-btn{
160 | margin-left: 16px;
161 | }
162 | }
--------------------------------------------------------------------------------
/vp-docs/guide/configuration/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 3
3 | ---
4 |
5 | # Table Options
6 |
7 | These options relate to the table as a whole
8 |
9 | ## columns
10 |
11 | type: `Array`
12 |
13 | Array containing objects that describe table columns. The column object itself can contain many [configurable properties](/guide/configuration/column-options.md).
14 | ```javascript
15 | [
16 | {
17 | label: 'Name',
18 | field: 'name',
19 | }
20 | //...
21 | ]
22 | ```
23 |
24 | ## rows
25 |
26 | type: `Array`
27 |
28 | Array containing row objects. Each row object contains data that will be displayed in the table row.
29 | ```javascript
30 | [
31 | {
32 | id:1,
33 | name:"John",
34 | age:20
35 | },
36 | //...
37 | ]
38 | ```
39 |
40 | ::: tip
41 | for **grouped rows**, you need a nested format. Refer to [Grouped Table](/guide/advanced/grouped-table.md) for examples.
42 | :::
43 |
44 | ## max-height
45 |
46 | type: `String`
47 | Set a maximum height for table body
48 |
49 | ```vue
50 |
139 | This will show up on the top right of the table.
140 |
141 |
155 | This will show up on the bottom of the table.
156 |
157 |
168 | This will show up when there are no rows
169 |
170 | 
Simple to Use
You get features like sorting / filtering / paging with minimal setup.
Advanced Customizations
Easily customize anything from table cells to column headers.
Performant
Creating performant client side tables has never been easier.