{"_id":"vue-good-table-next","_rev":"5-3e9267cbc7f0fdf84e6e591cc854f094","name":"vue-good-table-next","dist-tags":{"latest":"0.2.2"},"versions":{"0.0.1":{"name":"vue-good-table-next","version":"0.0.1","keywords":["vue","vuejs","table","datatable"],"author":{"name":"boris","email":"boris@singlequote.net"},"_id":"vue-good-table-next@0.0.1","maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"homepage":"https://github.com/borisflesch/vue-good-table-next#readme","bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"dist":{"shasum":"058d2c6d666e5394c4cacd958e2930921c75bc32","tarball":"https://registry.npmjs.org/vue-good-table-next/-/vue-good-table-next-0.0.1.tgz","fileCount":54,"integrity":"sha512-T7beYYqE2jy9RO0bZ0sRaWpp4rAgtvWedu7uM9c6oHgDH6SPwjkw0xcO1K5ceaje/LfkI1JCsvnQ9XrRcCdnvg==","signatures":[{"sig":"MEUCIQDg8r29WqvwHf4qXrgHrTtA8+YK/+LS/lLeU0C8rw4ArgIgE38alvtZ9yBJcM98VK0WNNF49IWUHOO3VI38uIryidw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2109490},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"b2b72ba11189b3b6fcc2aaf832480f34c5723c79","scripts":{"dev":"vite --config playground/vite.config.js","test":"echo \"No test specified\"","build":"rollup -c rollup.config.js","docs:dev":"vuepress dev vp-docs","docs:build":"vuepress build vp-docs"},"_npmUser":{"name":"borisflesch","email":"boris.flesch@gmail.com"},"repository":{"url":"git+https://github.com/borisflesch/vue-good-table-next.git","type":"git"},"_npmVersion":"7.3.0","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"16.5.0","dependencies":{"date-fns":"^2.24.0","lodash.isequal":"^4.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.1.0","sass":"^1.42.1","vite":"~2.5.3","chalk":"^4.1.0","rollup":"^2.56.1","vuepress":"^2.0.0-beta.26","chromedriver":"^92.0.2","postcss-loader":"^6.1.1","@vitejs/plugin-vue":"^1.9.0","rollup-plugin-scss":"3","eslint-config-airbnb":"^18.2.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-replace":"^3.0.0","rollup-plugin-analyzer":"^4.0.0","@rollup/plugin-commonjs":"^20.0.0","@vuepress/plugin-search":"^2.0.0-beta.26","@rollup/plugin-node-resolve":"^13.0.5","@vue/component-compiler-utils":"^3.2.2","@vuepress/plugin-google-analytics":"^2.0.0-beta.26","@vuepress/plugin-register-components":"^2.0.0-beta.26"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.0.1_1632407742245_0.20834317540394132","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"vue-good-table-next","version":"0.1.0","keywords":["vue","vuejs","table","datatable"],"author":{"name":"boris","email":"boris@singlequote.net"},"license":"MIT","_id":"vue-good-table-next@0.1.0","maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"}],"homepage":"https://github.com/borisflesch/vue-good-table-next#readme","bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"dist":{"shasum":"eecce0bc9611e709b4eed924d6744428ab342590","tarball":"https://registry.npmjs.org/vue-good-table-next/-/vue-good-table-next-0.1.0.tgz","fileCount":50,"integrity":"sha512-ULbi+XGPs5RRtx4vydIIB5q8KcJd+g9DB9bhHX7YdagMNNCB8uhqpR884e1lfzuM+9S7p8IzcwoW/o4VHIfRpg==","signatures":[{"sig":"MEQCIHVVUk+4R2ZQ5kBn9tjf1IPGVsjwGu0J8OuKqVgOc1qYAiAh8YbPtLH9HfCPZSaYkYclooqAorv0hCafXtkPiI0FPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1280876},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"938f0bf3c908a8eb6f45b2a65ad871a46efc3c04","scripts":{"dev":"vite --config playground/vite.config.js","build":"rollup -c rollup.config.js","docs:dev":"vuepress dev vp-docs","test:unit":"vue-cli-service test:unit","docs:build":"vuepress build vp-docs"},"_npmUser":{"name":"borisflesch","email":"boris.flesch@gmail.com"},"repository":{"url":"git+https://github.com/borisflesch/vue-good-table-next.git","type":"git"},"_npmVersion":"6.14.13","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"14.17.0","dependencies":{"date-fns":"^2.25.0","lodash.isequal":"^4.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.20","chai":"^4.1.2","sass":"^1.43.4","vite":"^2.6.13","chalk":"^4.1.0","sinon":"^11.1.2","rollup":"^2.58.3","vue-jest":"^5.0.0-0","vuepress":"^2.0.0-beta.26","typescript":"^4.4.4","chromedriver":"^95.0.0","postcss-loader":"^6.2.0","@vue/test-utils":"^2.0.0-rc.16","@vue/cli-service":"^4.5.15","@vitejs/plugin-vue":"^1.9.4","rollup-plugin-scss":"3","eslint-config-airbnb":"^18.2.0","rollup-plugin-terser":"^7.0.2","@vue/babel-preset-app":"^4.5.15","@rollup/plugin-replace":"^3.0.0","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-beta.26","@vue/cli-plugin-unit-jest":"^4.5.15","@rollup/plugin-node-resolve":"^13.0.6","@vue/component-compiler-utils":"^3.3.0","@vuepress/plugin-google-analytics":"^2.0.0-beta.26","@vuepress/plugin-register-components":"^2.0.0-beta.26"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.1.0_1635517261006_0.2947522291707465","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"vue-good-table-next","version":"0.2.0","keywords":["vue","vuejs","table","datatable"],"author":{"name":"boris","email":"boris@singlequote.net"},"license":"MIT","_id":"vue-good-table-next@0.2.0","maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"}],"homepage":"https://github.com/borisflesch/vue-good-table-next#readme","bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"dist":{"shasum":"c34ca9717b4439f09bbe4ea24a14a236882b4aca","tarball":"https://registry.npmjs.org/vue-good-table-next/-/vue-good-table-next-0.2.0.tgz","fileCount":55,"integrity":"sha512-UDreXX8Pg6Fhf4Q3GdefzseqU0TGIoICsEdri7o0dcqZ+nEtTEAKgc35Z+Q+6q+CqglJkiFjVK1KUhkld1lR3w==","signatures":[{"sig":"MEUCIQDDKY6mc2bZIr0ugCt3Uj4qUxSWrCu0X7nJMgAP5ZHJBwIgWFJnvFZRGU1Ep6bWTEtumM9xy6P1YzEDD8i6QjqkjzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2112462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiTYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb4w//UxyDSQwEgqCS6xVYVMGmyjxTbZgPeBDEfW0nESmmh2FIu0NV\r\nlRRjo/ZKlqiSCOK5U5xzS3T2RN0vN6kibr6FmmlDqQqhaknjWa8ArJ5Z2zKa\r\n10aJ5zXNXLHC4I+UN2pb5i5ffI1aVy72fjpSxRitFv3vajIly2ETsFUo1TRq\r\nAY/zZ74oCAvPJ05fDJO2wWY4oeC7jYtkMsTfSio9Mt9POAieGcfByhvjTy3Y\r\nCcewgct9rDfPXVA0LN6D6zUiJe0h4k7kRoUuiUiXdcun8J+vnJM9Fht26cpZ\r\nyRedWIu7JoBvkr2QC6yrKVRfx2vgksGCNwUL1xQqzeeDZvEHRR+q29u99dsq\r\n/LmUKNewJ9fLR4ow1DbLslT+Wm/Yl3j6YpyepwmnnhblEEGW3CiTNuLaik31\r\nnppu9VqsmXeTwEgMRbpI9UIWmpEa629THmkDtimcI0vU0aRXPCCBiIdEvEJJ\r\nvZdvOPo9jRkQ4zAMRrEv2CtM4X5Uwjn4hq0fSdNeJajAHRy3a9CWwBBwXzuO\r\nKx42ROddaR24E0mWzIMiawR6x8u8TaNWKL0LzoqFBbsK5TeNU4gyvvCjsDTG\r\nTu+n0K7yrll8VWqqtmHH+jTY5gVi+XRIvUWwhFV3ex1qhr0m422KTYlpxPPF\r\nMuMvLZElZyfMjqA21UId62r4mIO9t7XZOJw=\r\n=C0l1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"2fe0050c4507e7743695315834826cab98db8fbc","scripts":{"dev":"vite --config playground/vite.config.js","build":"rollup -c rollup.config.js","docs:dev":"vuepress dev vp-docs","test:unit":"vue-cli-service test:unit","docs:build":"vuepress build vp-docs"},"_npmUser":{"name":"borisflesch","email":"boris.flesch@gmail.com"},"repository":{"url":"git+https://github.com/borisflesch/vue-good-table-next.git","type":"git"},"_npmVersion":"8.1.2","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"16.13.2","dependencies":{"date-fns":"^2.25.0","lodash.isequal":"^4.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.20","chai":"^4.1.2","sass":"^1.43.4","vite":"^2.6.13","chalk":"^4.1.0","sinon":"^11.1.2","rollup":"^2.72.1","vue-jest":"^5.0.0-0","vuepress":"^2.0.0-beta.26","typescript":"^4.4.4","chromedriver":"^95.0.0","postcss-loader":"^6.2.0","@vue/test-utils":"^2.0.0-rc.16","@vue/cli-service":"^4.5.15","@vitejs/plugin-vue":"^1.9.4","rollup-plugin-scss":"3","eslint-config-airbnb":"^18.2.0","rollup-plugin-terser":"^7.0.2","@vue/babel-preset-app":"^4.5.15","@rollup/plugin-replace":"^3.0.0","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-beta.26","@vue/cli-plugin-unit-jest":"^4.5.15","@rollup/plugin-node-resolve":"^13.0.6","@vue/component-compiler-utils":"^3.3.0","@vuepress/plugin-google-analytics":"^2.0.0-beta.26","@vuepress/plugin-register-components":"^2.0.0-beta.26"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.2.0_1653159437940_0.35065726731441726","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"vue-good-table-next","version":"0.2.1","keywords":["vue","vuejs","table","datatable"],"author":{"name":"boris","email":"boris@singlequote.net"},"license":"MIT","_id":"vue-good-table-next@0.2.1","maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"}],"homepage":"https://github.com/borisflesch/vue-good-table-next#readme","bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"dist":{"shasum":"af0815d0ee5b179fa1f73e4408022250cba952d1","tarball":"https://registry.npmjs.org/vue-good-table-next/-/vue-good-table-next-0.2.1.tgz","fileCount":55,"integrity":"sha512-Zri8pQtUdb698FA+KSSOW4rxLthuJw8QUdWDdmArUPyxjVFH0wpXbK32r9RgPkHFMMPVUSsqchCqE2wE1tI0qg==","signatures":[{"sig":"MEQCIFDJaHOZxdjm3WLf/jFV4hDj1tW2uMBY1RpdroUK69ZjAiBS9AFEUgVPT4tivuq/qt24AJCu8Sd2Ny8TnNN21vznNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2108854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiX97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQBBAAlIrEsDJtRSfSnOGh8ML9mT2+PA2WWvhneEV62gBEuDp537DE\r\nToEi9QoC1XGfVcYE3KEAVoTBiUGQsuHq5QFII559zwgAo2tsw8rbPPXZ9nPz\r\n99m35rtmubm5wToLQ6EDowPUJOcA75EhB/j7uFhP0/ABVEpoSDtvMpv/cVHw\r\nuKLu0fhnX2neI21HzxKW5foaXLIkqBYjYRMnlZMlPifUCS5xtWQjJfUi6Wxd\r\nVsSPRxaXW3GTof5IJa7Zp2T86gJhP7BCT0LwcFOYBvIW8HgkPpcUar2ZqSIt\r\nLtd29nUWqDpJdd/eOE2xOlb8FlGaI0CXkYGT/QmizajxImMWFVcmVrUWR6jO\r\nRvJfCRniAnnzwbleo0VSwqogindrM9PY2ZVePLS7ncVmlqs/r6zTe2Q/MeWj\r\nDMyCb3zerQGiGURR8nG58N+flDCc2UTpyy/tNe2+8BsL1eGiPi9wvhnAbIqH\r\nPNMmpBMiPYSJMoRSHw72KndHOwlOx6VB8q3xRjnwmHaoLgkgTtQWT0gjPbDy\r\nRwgcbysZyUz1Bpua4vPaU8end6/DL+R2wtHqt3RMf16O0gW5/1cP1RlCF5ox\r\nEu7LC4aTvzaQKj/jCeZi1ChebH3GfnS6s88jk8kmOihyC17lpBDMYKEuf6Fm\r\nrc7W2UqnIok/DlsqVDlpubuLVAqlEvDfxHM=\r\n=RFrX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"235af9be62c8d4e3cf38ace80230a3557a82ecde","scripts":{"dev":"vite --config playground/vite.config.js","build":"rollup -c rollup.config.js","docs:dev":"vuepress dev vp-docs","test:unit":"vue-cli-service test:unit","docs:build":"vuepress build vp-docs"},"_npmUser":{"name":"borisflesch","email":"boris.flesch@gmail.com"},"repository":{"url":"git+https://github.com/borisflesch/vue-good-table-next.git","type":"git"},"_npmVersion":"8.1.2","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"16.13.2","dependencies":{"date-fns":"^2.25.0","lodash.isequal":"^4.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.20","chai":"^4.1.2","sass":"^1.43.4","vite":"^2.6.13","chalk":"^4.1.0","sinon":"^11.1.2","rollup":"^2.72.1","vue-jest":"^5.0.0-0","vuepress":"^2.0.0-beta.26","typescript":"^4.4.4","chromedriver":"^95.0.0","postcss-loader":"^6.2.0","@vue/test-utils":"^2.0.0-rc.16","@vue/cli-service":"^4.5.15","@vitejs/plugin-vue":"^1.9.4","rollup-plugin-scss":"3","eslint-config-airbnb":"^18.2.0","rollup-plugin-terser":"^7.0.2","@vue/babel-preset-app":"^4.5.15","@rollup/plugin-replace":"^3.0.0","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-beta.26","@vue/cli-plugin-unit-jest":"^4.5.15","@rollup/plugin-node-resolve":"^13.0.6","@vue/component-compiler-utils":"^3.3.0","@vuepress/plugin-google-analytics":"^2.0.0-beta.26","@vuepress/plugin-register-components":"^2.0.0-beta.26"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.2.1_1653178235208_0.7470307372776417","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"vue-good-table-next","version":"0.2.2","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","author":{"name":"boris","email":"boris@singlequote.net"},"contributors":[{"name":"xaksis","url":"https://github.com/xaksis"}],"license":"MIT","scripts":{"build":"rollup -c rollup.config.js","test:unit":"vue-cli-service test:unit","dev":"vite --config playground/vite.config.js","docs:build":"vuepress build vp-docs","docs:dev":"vuepress dev vp-docs","docs:serve":"vuepress serve vp-docs"},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","dependencies":{"date-fns":"^2.25.0","lodash.isequal":"^4.5.0"},"devDependencies":{"@rollup/plugin-commonjs":"^21.0.1","@rollup/plugin-node-resolve":"^13.0.6","@rollup/plugin-replace":"^3.0.0","@vitejs/plugin-vue":"^1.9.4","@vue/babel-preset-app":"^4.5.15","@vue/cli-plugin-unit-jest":"^4.5.15","@vue/cli-service":"^4.5.15","@vue/component-compiler-utils":"^3.3.0","@vue/test-utils":"^2.0.0-rc.16","@vuepress/plugin-google-analytics":"^2.0.0-beta.26","@vuepress/plugin-register-components":"^2.0.0-beta.26","@vuepress/plugin-search":"^2.0.0-beta.26","chai":"^4.1.2","chalk":"^4.1.0","chromedriver":"^95.0.0","eslint-config-airbnb":"^18.2.0","postcss-loader":"^6.2.0","rollup":"^2.72.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-scss":"3","rollup-plugin-terser":"^7.0.2","sass":"^1.43.4","sinon":"^11.1.2","typescript":"^4.4.4","vite":"^2.6.13","vue":"^3.2.20","vue-jest":"^5.0.0-0","vuepress":"^2.0.0-beta.26","webpack-node-externals":"^3.0.0"},"keywords":["vue","vuejs","table","datatable"],"repository":{"type":"git","url":"git+https://github.com/borisflesch/vue-good-table-next.git"},"sideEffects":["*.vue","*.css"],"_id":"vue-good-table-next@0.2.2","gitHead":"935b396987cf837c660cb65f762aa3fc9798f702","bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"homepage":"https://github.com/borisflesch/vue-good-table-next#readme","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-ts8En2SZEGPPgDs1wLjmZxH4INcEz/V/Bs2e8Y3wktAusWGJvv1cPcl4WQEHoaCtARPNjIuaUywncKbLCJGTog==","shasum":"26e1094a85957bb7dfcb78f1de49262d3599584b","tarball":"https://registry.npmjs.org/vue-good-table-next/-/vue-good-table-next-0.2.2.tgz","fileCount":48,"unpackedSize":1376636,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnt7xIKppvelHDVek04Te8bzI/o+3VAlGJ/jUbd7URkAiEAxdAx36YhfEfLWswY4ig0OMTj9HztzgZACN0K6MkikU4="}]},"_npmUser":{"name":"borisflesch","email":"boris.flesch@gmail.com"},"directories":{},"maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-good-table-next_0.2.2_1726000215229_0.16215250700465123"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-23T14:35:42.244Z","modified":"2024-09-10T20:30:15.786Z","0.0.1":"2021-09-23T14:35:42.494Z","0.1.0":"2021-10-29T14:21:01.214Z","0.2.0":"2022-05-21T18:57:18.191Z","0.2.1":"2022-05-22T00:10:35.404Z","0.2.2":"2024-09-10T20:30:15.584Z"},"bugs":{"url":"https://github.com/borisflesch/vue-good-table-next/issues"},"author":{"name":"boris","email":"boris@singlequote.net"},"license":"MIT","homepage":"https://github.com/borisflesch/vue-good-table-next#readme","keywords":["vue","vuejs","table","datatable"],"repository":{"type":"git","url":"git+https://github.com/borisflesch/vue-good-table-next.git"},"description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","contributors":[{"name":"xaksis","url":"https://github.com/xaksis"}],"maintainers":[{"name":"borisflesch","email":"boris.flesch@gmail.com"}],"readme":"# Vue-good-table-next\n\n| :warning: WARNING          |\n|:---------------------------|\n| This project is a port of Vue-good-table for Vue 3.x. The current version is stable enough to start developing new projects but work is still in progress and changes could be made in the short-term. Thus the project is not yet intended to be used in a production environment. |\n\n[![npm](https://img.shields.io/npm/dm/vue-good-table-next.svg?style=flat-square)](https://www.npmjs.com/package/vue-good-table-next)\n[![npm](https://img.shields.io/github/package-json/v/borisflesch/vue-good-table.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/releases)\n[![npm](https://img.shields.io/github/license/borisflesch/vue-good-table-next.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/master/LICENSE)\n[![](https://data.jsdelivr.com/v1/package/npm/vue-good-table-next/badge)](https://www.jsdelivr.com/package/npm/vue-good-table-next)\n[![Twitter Follow](https://img.shields.io/twitter/follow/borisflesch.svg?label=Follow&style=social)](https://twitter.com/borisflesch)\n\nAn easy to use, clean and powerful data table for Vue with essential features like sorting, column filtering, pagination and much more - [borisflesch.github.io/vue-good-table-next/](https://borisflesch.github.io/vue-good-table-next/)\n\n<!-- \n### Basic Table\n![Basic Screenshot](README/images/vgt-table.regular.png) -->\n\n<!-- ## Recipes\nSome example recipes for inspiration \n[vue-good-table Recipes](https://github.com/xaksis/vue-good-table/wiki/Vue-good-table-Recipes-(vue-good-table-2.x)) -->\n<!-- \n## Table of contents -->\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n\n<!-- \n- [Getting Started](#getting-started)\n  - [Installing](#installing)\n  - [Example Usage](#example-usage)\n- [Configuration](#configuration)\n  - [Component Options](#component-options)\n    - [Table](#table)\n    - [Sort Options](#sort-options)\n    - [Pagination Options](#pagination-options)\n    - [Search Options](#search-options)\n    - [Checkbox Table](#checkbox-table)\n    - [Grouped Row Options](#grouped-row-options)\n    - [Style/Theme](#styletheme)\n  - [Column Options](#column-options)\n    - [Column filter option in-depth](#column-filter-option-in-depth)\n  - [Table Events](#table-events)\n    - [@on-row-click](#on-row-click)\n    - [@on-cell-click](#on-cell-click)\n    - [@on-row-mouseenter](#on-row-mouseenter)\n    - [@on-row-mouseleave](#on-row-mouseleave)\n    - [@on-search](#on-search)\n    - [@on-page-change](#on-page-change)\n    - [@on-per-page-change](#on-per-page-change)\n    - [@on-sort-change](#on-sort-change)\n    - [@on-select-all](#on-select-all)\n    - [@on-column-filter](#on-column-filter)\n    - [@on-selected-rows-change](#on-selected-rows-change)\n  - [Style Options](#style-options)\n    - [.vgt-table](#vgt-table)\n    - [.vgt-table .stripped](#vgt-table-stripped)\n    - [.vgt-table .condensed](#vgt-table-condensed)\n- [Themes](#themes)\n  - [default](#default)\n  - [nocturnal `theme='nocturnal'`](#nocturnal-themenocturnal)\n  - [black-rhino `theme='black-rhino'`](#black-rhino-themeblack-rhino)\n- [Advanced Customization](#advanced-customization)\n  - [Custom row template](#custom-row-template)\n  - [Custom column headers](#custom-column-headers)\n  - [Grouped Rows](#grouped-rows)\n  - [Remote Mode](#remote-mode)\n  - [Table Actions Slot](#table-actions-slot)\n  - [Empty state slot](#empty-state-slot)\n- [Authors](#authors)\n- [License](#license) -->\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installing\n\nInstall with npm:\n```bash\nnpm install vue-good-table-next\n```\n\nInstall with npm:\n```bash\nyarn add vue-good-table-next\n```\n\nImport globally in app:\n\n```javascript\nimport VueGoodTablePlugin from 'vue-good-table-next';\n\n// import the styles \nimport 'vue-good-table-next/dist/vue-good-table-next.css'\n\nVue.use(VueGoodTablePlugin);\n```\n\nImport into your component\n```js\nimport { VueGoodTable } from 'vue-good-table-next';\n\n// add to component\ncomponents: {\n  VueGoodTable,\n}\n```\n\nImport into your component using Typescript\n```typescript\n// add to component\ncomponents: {\n  'vue-good-table': require('vue-good-table-next').VueGoodTable,\n}\n```\n\n\n##### Example table with grouped rows and column filters\n![Advanced Screenshot](README/images/vgt-table.advanced.png)\n\n## Features\n* [Table Search](https://borisflesch.github.io/vue-good-table-next/guide/configuration/search-options.html)\n* [Sorting](https://borisflesch.github.io/vue-good-table-next/guide/configuration/sort-options.html)\n* [Column Filtering](https://borisflesch.github.io/vue-good-table-next/guide/configuration/column-filter-options.html#filteroptions)\n* [Pagination](https://borisflesch.github.io/vue-good-table-next/guide/configuration/pagination-options.html)\n* [Highly Customizable](https://borisflesch.github.io/vue-good-table-next/guide/advanced/#custom-row-template)\n* [Checkbox Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/checkbox-table.html)\n* [Grouped Rows Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/grouped-table.html)\n* [Server Powered Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/remote-workflow.html#why-remote-mode)\n* [Customizable Style and Themes](https://borisflesch.github.io/vue-good-table-next/guide/style-configuration/)\n\n<!-- ## Upgrade Guide\nHey there! coming from 1.x? find the [upgrade guide here](https://github.com/xaksis/vue-good-table/wiki/Guide-to-upgrade-from-1.x-to-v2.0) -->\n\n<!-- \n### Example Usage\n```html\n<template>\n  <div>\n    <vue-good-table\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :search-options=\"{\n        enabled: true,\n      }\"\n      :pagination-options=\"{\n        enabled: true,\n        perPage: 5,\n      }\"\n      styleClass=\"vgt-table striped bordered\"/>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'my-component',\n  data(){\n    return {\n      columns: [\n        {\n          label: 'Name',\n          field: 'name',\n          filterOptions: {\n            enabled: true,\n          },\n        },\n        {\n          label: 'Age',\n          field: 'age',\n          type: 'number',\n        },\n        {\n          label: 'Created On',\n          field: 'createdAt',\n          type: 'date',\n          dateInputFormat: 'YYYY-MM-DD',\n          dateOutputFormat: 'MMM Do YY',\n        },\n        {\n          label: 'Percent',\n          field: 'score',\n          type: 'percentage',\n        },\n      ],\n      rows: [\n        { id:1, name:\"John\", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },\n        { id:2, name:\"Jane\", age: 24, createdAt: '2011-10-31', score: 0.03343 },\n        { id:3, name:\"Susan\", age: 16, createdAt: '2011-10-30', score: 0.03343 },\n        { id:4, name:\"Chris\", age: 55, createdAt: '2011-10-11', score: 0.03343 },\n        { id:5, name:\"Dan\", age: 40, createdAt: '2011-10-21', score: 0.03343 },\n        { id:6, name:\"John\", age: 20, createdAt: '2011-10-31', score: 0.03343 },\n        { id:7, name:\"Jane\", age: 24, createdAt: '20111031' },\n        { id:8, name:\"Susan\", age: 16, createdAt: '2013-10-31', score: 0.03343 },\n      ],\n    };\n  },\n};\n</script>\n``` -->\n<!-- \n## Configuration\n### Component Options\n#### Table\nThese options relate to the table as a whole\n\n##### columns `Array`\n\nArray containing objects that describe table columns. The column object itself can contain many [configurable properties](#column-options).\n```javascript\n[\n    {\n      label: 'Name',\n      field: 'name',\n      filterable: true,\n    }\n    //...\n]\n```\n\n##### rows `Array`\n\nArray containing row objects. Each row object contains data that will be displayed in the table row.\n```javascript\n[\n    {\n      id:1,\n      name:\"John\",\n      age:20\n    },\n    //...\n]\n```\n> for **grouped rows**, you need a nested format. Refer to [Grouped Rows](#grouped-rows) for an example.\n\n##### rtl `Boolean (default: false)`\n\nEnable Right-To-Left layout for the table\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :rtl=\"true\">\n</vue-good-table>\n```\n\n##### lineNumbers `Boolean (default: false)`\nShow line number for each row\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :lineNumbers=\"true\">\n</vue-good-table>\n```\n\n##### mode `String`\nSet mode=`remote` to allow sorting/filtering etc to be powered by server side instead of client side. Setting mode to remote, expects the following workflow:\n\n* pagination, sort, filter, search will emit [Table Events](#table-events) (loading div appears) \n* setup handlers for each event\n* in the handler call backend endpoints with the table params\n* update rows object with the returned response ( the loading div will disappear once you update the rows object)\n\nfor a detailed workflow example check out [The remote mode workflow wiki](https://github.com/xaksis/vue-good-table/wiki/Remote-Mode-Workflow)\n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  mode=\"remote\">\n</vue-good-table>\n```\n\n\n#### Sort Options\n---\nSet of options related to table sorting\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n    initialSortBy: {field: 'name', type: 'asc'}\n  }\">\n</vue-good-table>\n```\n\n##### sortOptions.enabled `Boolean (default: true)`\nEnable/disable sorting on table as a whole. \n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n  }\">\n</vue-good-table>\n```\n\n##### sortOptions.initialSortBy `Object`\nAllows specifying a default sort for the table on wakeup\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n    initialSortBy: {field: 'name', type: 'asc'}\n  }\">\n</vue-good-table>\n```\n\n```javascript\n// in data\ndefaultSort: {\n  field: 'name',\n  type: 'asc' //asc or desc (default: 'asc')\n}\n```\n\n#### Pagination Options\n---\nA set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPage: 5,\n    position: 'top',\n    perPageDropdown: [3, 7, 9],\n    dropdownAllowAll: false,\n    setCurrentPage: 2,\n    nextLabel: 'next',\n    prevLabel: 'prev',\n    rowsPerPageLabel: 'Rows per page',\n    ofLabel: 'of',\n    allLabel: 'All',\n  }\">\n</vue-good-table>\n```\nOptions explained below\n##### paginationOptions.enabled `Boolean (default: false)`\nEnable Pagination for table. By default the paginator is created at the bottom of the table.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true\n  }\">\n</vue-good-table>\n```\n\n##### paginationOptions.position `String (default: 'bottom')`\nAdd pagination on `'top'` or `'bottom'` (top and bottom) of the table (default position is bottom)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    position: 'top'\n  }\">\n</vue-good-table>\n```\n\n##### paginationOptions.perPage `Integer (default: 10)`\nNumber of rows to show per page\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPage: 5\n  }\">\n</vue-good-table>\n```\n\n##### paginationOptions.perPageDropdown `Array (default: [10,20,30,40,50])`\nCustomize the dropdown options for the amount of items per page\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPageDropdown: [3, 7, 9]\n  }\">\n</vue-good-table>\n```\n\n##### paginationOptions.dropdownAllowAll `Boolean (default: true)`\nenables/disables 'All' in the per page dropdown.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPageDropdown: [3, 7, 9],\n    dropdownAllowAll: false,\n  }\">\n</vue-good-table>\n```\n\n##### paginationOptions.setCurrentPage `Number`\nset current page programmatically. \n> There's no validation for number of pages so please be careful using this.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    setCurrentPage: 2,\n  }\">\n</vue-good-table>\n```\n\n##### pagination label/text options\nyou can change one or more of the texts shown on pagination by overriding the labels in the following way: \n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    nextLabel: 'next',\n    prevLabel: 'prev',\n    rowsPerPageLabel: 'Rows per page',\n    ofLabel: 'of',\n    allLabel: 'All',\n  }\">\n</vue-good-table>\n```\n\n#### Search Options\n---\nSet of search related options. These options pertain to the global table search.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    trigger: 'enter',\n    searchFn: mySearchFn,\n    placeholder: 'Search this table',\n    externalQuery: searchQuery\n  }\">\n</vue-good-table>\n```\n\nSearch options explained below\n\n##### searchOptions.enabled `Boolean (default: false)`\n\nAllows a single search input for the whole table \n\n>Note: enabling this option disables column filters\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true\n  }\">\n</vue-good-table>\n```\n\n##### searchOptions.trigger `String (default: '')`\nAllows you to specify if you want search to trigger on 'enter' event of the input. By default table searches on key-up. \n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    trigger: 'enter'\n  }\">\n</vue-good-table>\n```\n\n##### searchOptions.searchFn `Function`\n\nAllows you to specify your own search function for the global search\n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    searchFn: myFunc\n  }\">\n</vue-good-table>\n```\n```javascript\n// in js\nmethods: {\n  myFunc(row, col, cellValue, searchTerm){\n    return cellValue === 'my value';\n  },\n}\n```\n\n##### searchOptions.placeholder `String (default: 'Search Table')`\nText for global search input place holder\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    placeholder: 'Search this table',\n  }\">\n</vue-good-table>\n```\n\n##### searchOptions.externalQuery `String`\n\nIf you want to use your own input for searching the table, you can use this property\n\n```html\n<input type=\"text\" v-model=\"searchTerm\" >\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    externalQuery: searchTerm\n  }\">\n</vue-good-table>\n```\n```javascript\n// and in data\ndata(){\n  return {\n    searchTerm: '',\n    // rows, columns etc...\n  };\n}\n```\n\n#### Checkbox Table\nCreating table with selectable rows (checkboxes) is easier than ever. \n![Checkbox Screenshot](README/images/vgt-table.checkbox.png)\n\n##### selectOptions `Object`\nObject containing select options\n```html\n<vue-good-table\n  @on-select-all=\"allSelected\"\n  @on-selected-rows-change=\"onSelectedRowsChange\"\n  @on-row-click=\"rowSelected\"\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :selectOptions=\"{\n    enabled: true,\n    selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row\n    selectionInfoClass: 'custom-class',\n    selectionText: 'rows selected', // can also accept a function, e.g. n => `${n} rows selected`\n    clearSelectionText: 'clear',\n    alwaysShowSelectionInfo: false, // always show the row count, even when nothing is selected\n  }\">\n ```\n\n you can get the selectedRows by listening to the [@on-selected-rows-change](#on-selected-rows-change) event.\n\n\n#### Grouped Row Options\n---\nSometimes you have a hierarchy in table and you want to group rows under subheadings, vue-good-table allows you to do that as well. Following properties relate to row grouping\n\n##### groupOptions `Object`\nObject containing group related options. \n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :group-options=\"{\n    enabled: true,\n    headerPosition: 'bottom' \n  }\">\n ```\n> rows are formatted differently for grouped tables, refer to [Grouped Rows](#grouped-rows) section.\n\n#### Style/Theme\n---\nStyle options for table\n\n##### styleClass `String (default:  'vgt-table bordered')`\nAllows applying your own classes to table. Other in-built classes: condensed, striped, bordered\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  styleClass=\"vgt-table bordered striped\">\n</vue-good-table>\n```\n\n##### rowStyleClass `String or Function`\n\nAllows providing custom styles for rows. It can be a string: 'my-class' or a function.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :rowStyleClass=\"myStyleFn\">\n</vue-good-table>\n```\n```javascript\n// in methods\nmyStyleFn(row){ \n  // if row has something return a specific class \n  if(row.fancy) {\n    return 'fancy-class';\n  }\n  return '';\n}\n```      \n\n##### theme `String`\nAllows using other themes. \nIncluded themes: \n* [nocturnal](#nocturnal-themenocturnal)\n* [black-rhino](#black-rhino-themeblack-rhino)\n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  theme=\"nocturnal\">\n</vue-good-table>\n```\n\n\n### Column Options\n---\nEach column objects can contain the following configuration options:\n\n\n##### label `String`\nText to put on column header.\n\n```javascript\ncolumns: [\n  { \n    label: 'name'\n  },\n  // ...\n]\n```\n\n##### field `String`\n\nRow object property that this column corresponds to. This can be: \n\n* String <code>eg: 'name'</code> - simple row property name\n* String <code>eg: 'location.lat'</code>- nested row property name. lets say if the row had a property 'location' which was an object containing 'lat' and 'lon'\n* Function - a function that returns a value to be displayed based on the row object\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: this.fealdFn,\n  },\n  // ...\n]\n// in methods\nfieldFn(rowObj) {\n  return rowObj.name;\n}\n```\n\n##### type `String`\n\ntype of column. default: 'text'. This determines the formatting for the column and filter behavior as well. Possible values:\n* _number_ - right aligned\n* _decimal_ - right aligned, 2 decimal places\n* _percentage_ - expects a decimal like 0.03 and formats it as 3.00%\n* _boolean_ - right aligned\n* _date_ - expects a string representation of date eg `'20170530'`. You should also specify [dateInputFormat](#dateinputformat) and [dateOutputFormat](dateoutputformat)\n\n```javascript\ncolumns: [\n  { \n    label: 'joined On',\n    field: 'createdAt',\n    type: 'date',\n    dateInputFormat: 'YYYY-MM-DD', // expects 2018-03-16\n    dateOutputFormat: 'MMM Do YYYY', // outputs Mar 16th 2018\n  },\n  // ...\n]\n```\n\n##### dateInputFormat `String`\nprovide the format to parse date string\n\n##### dateOutputFormat `String`\nprovide the format for output date\n\n##### sortable `Boolean`\nenable/disable sorting on columns. This property is higher priority than global sortable property\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    sortable: false,\n  },\n  // ...\n]\n```\n\n##### sortFn `Function`\n\ncustom sort function. If you want to supply your own sort function you can use this property.\n\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Name',\n    field: 'name',\n    sortable: true,\n    sortFn: this.sortFn,\n  }\n  //...\n],\n// in methods\nmethods: {\n  sortFn(x, y, col, rowX, rowY) {\n    // x - row1 value for column\n    // y - row2 value for column\n    // col - column being sorted\n    // rowX - row object for row1\n    // rowY - row object for row2\n    return (x < y ? -1 : (x > y ? 1 : 0));\n  }\n}\n```\n\n##### formatFn `Function`\nAllows for custom format of values, <code>function(value)</code>, should return the formatted value to display.\n\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Salary',\n    field: 'salary',\n    sortable: true,\n    formatFn: this.formatFn,\n  }\n  //...\n],\n// in methods\nformatFn: function(value) {\n  return '$' + value;\n}\n```\n\n##### html `Boolean`\nindicates whether this column will require html rendering. \n> The preferred way of creating columns that have html is by [using slots](#custom-row-template)\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Action',\n    field: 'btn',\n    html: true,\n  }\n  //...\n],\nrows: [\n  {\n    btn: '<button>My Action</button>',\n    // ...\n  }\n]\n```\n\n##### width `Number`\nprovide a width value for this column\n\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    width: '50px',\n  },\n  // ...\n]\n```\n\n##### hidden `Boolean`\nhide a column\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    hidden: true,\n  },\n  // ...\n]\n```\n\n##### thClass `String`\nprovide custom class(es) to the table header\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    thClass: 'custom-th-class',\n  },\n  // ...\n]\n```\n\n##### tdClass `String`\nprovide custom class(es) to the table cells\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    tdClass: 'text-center',\n  },\n  // ...\n]\n```\n\n##### globalSearchDisabled `Boolean (default: false)`\nif true, this column will be ignored by the global search\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    globalSearchDisabled: true,\n  },\n  // ...\n]\n```\n\n##### filterOptions `Object`\nA collection of filter specific properties. You can find more about these properties in [column filter options section](#column-filter-option-in-depth)\n\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    filterOptions: {\n  \t  enabled: true, // enable filter for this column\n      placeholder: 'Filter This Thing', // placeholder for filter input\n      filterValue: 'Jane', // initial populated value for this filter\n      filterDropdownItems: [], // dropdown (with selected values) instead of text input\n      filterFn: this.columnFilterFn, //custom filter function that\n      trigger: 'enter', //only trigger on enter not on keyup \n    },\n  },\n  // ...\n]\n```\n\n#### Column filter option in-depth\n---\nSome filterOption properties need a little more explanation\n\n##### filterDropdownItems `Array of strings or Array of objects`\nallows creating a dropdown for filter as opposed to an input\n\n```javascript\n//array\nfilterDropdownItems: ['Blue', 'Red', 'Yellow']\n//or\nfilterDropdownItems: [  \n  { value: 'n', text: 'Inactive' },  \n  { value: 'y', text: 'Active' },  \n  { value: 'c', text: 'Check' }  \n],\n```\n\n##### filterFn `Function`\nCustom filter, function of two variables: <code>function(data, filterString)</code>, should return true if data matches the filterString, otherwise false\n\n```javascript\nfilterFn: function(data, filterString) {\n  var x = parseInt(filterString)\n  return data >= x - 5 && data <= x + 5;\n}\n// would create a filter matching numbers within 5 of the provided value\n```\n\n### Table Events\n\n#### @on-row-click\nevent emitted on table row click\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-click=\"onRowClick\">\n ```\n ```javascript\n methods: {\n   onRowClick(params) {\n     // params.row - row object \n     // params.pageIndex - index of this row on the current page.\n     // params.selected - if selection is enabled this argument \n     // indicates selected or not\n     // params.event - click event\n   }\n }\n ```\n\n #### @on-cell-click\nevent emitted on table cell click\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-cell-click=\"onCellClick\">\n ```\n ```javascript\n methods: {\n   onCellClick(params) {\n     // params.row - row object \n     // params.column - column object\n     // params.rowIndex - index of this row on the current page.\n     // params.event - click event\n   }\n }\n ```\n \n #### @on-row-mouseenter\nevent emitted on row mouseenter\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-mouseenter=\"onRowMouseover\">\n ```\n ```javascript\n methods: {\n   onRowMouseover(params) {\n     // params.row - row object \n     // params.pageIndex - index of this row on the current page.\n   }\n }\n ```\n \n #### @on-row-mouseleave\nevent emitted on table row mouseleave\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-mouseleave=\"onRowMouseleave\">\n ```\n ```javascript\n methods: {\n   onRowMouseleave(row, pageIndex) {\n     // row - row object \n     // pageIndex - index of this row on the current page.\n   }\n }\n ```\n \n#### @on-search\nevent emitted on global search (when global search is enabled)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-search=\"onSearch\">\n ```\n ```javascript\n methods: {\n   onSearch(params) {\n     // params.searchTerm - term being searched for\n     // params.rowCount - number of rows that match search\n   }\n }\n ```\n \n#### @on-page-change\nevent emitted on pagination page change (when pagination is enabled)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-page-change=\"onPageChange\">\n ```\n ```javascript\n methods: {\n   onPageChange(params) {\n     // params.currentPage - current page that pagination is at\n     // params.currentPerPage - number of items per page\n     // params.total - total number of items in the table\n   }\n }\n ```\n \n#### @on-per-page-change\nevent emitted on per page dropdown change (when pagination is enabled)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-per-page-change=\"onPageChange\">\n```\n```javascript\nmethods: {\n  onPageChange(params) {\n    // params.currentPage - current page that pagination is at\n    // params.currentPerPage - number of items per page\n    // params.total - total number of items in the table\n  }\n}\n```\n\n#### @on-sort-change\nevent emitted on sort change\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-sort-change=\"onSortChange\">\n```\n```javascript\nmethods: {\n  onSortChange(params) {\n    // params.sortType - ascending or descending\n    // params.columnIndex - index of column being sorted\n  }\n}\n```\n \n\n#### @on-select-all\nevent emitted when all is selected (only emitted for checkbox tables)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-select-all=\"onSelectAll\">\n ```\n ```javascript\n methods: {\n   onSelectAll(params) {\n     // params.selected - whether the select-all checkbox is checked or unchecked\n     // params.selectedRows - all rows that are selected (this page)\n   }\n }\n ```\n \n #on-selected-rows-change\n event emitted each time selectedRows has changed\n ```html\n <vue-good-table\n   :columns=\"columns\"\n   :rows=\"rows\"\n   @on-selected-rows-change=\"onSelectedRowsChange\">\n  ```\n  ```javascript\n  methods: {\n    onSelectedRowsChange(params) {\n      // params.selectedRows - all rows that are selected (this page)\n    }\n  }\n  ```\n \n #### @on-column-filter\nevent emitted when column is filtered (only emitted for remote mode)\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-column-filter=\"onColumnFilter\">\n ```\n ```javascript\n methods: {\n   onColumnFilter(params) {\n     // params.columnFilters - filter values for each column in the following format:\n     // {field1: 'filterTerm', field3: 'filterTerm2')\n   }\n }\n ```\n\n### Style Options\n\nVue-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\n\n#### .vgt-table\n![Table Screenshot](README/images/vgt-table.regular.png)\n\n#### .vgt-table .stripped\n![Table Bordered Striped Screenshot](README/images/vgt-table.png)\n\n#### .vgt-table .condensed\n![Table Bordered Striped Screenshot](README/images/vgt-table.condensed.png)\n\n\n## Themes\n\n### default\n### nocturnal `theme='nocturnal'`\n![Nocturnal Theme Screenshot](README/images/vgt-table.nocturnal.png)\n\n### black-rhino `theme='black-rhino'`\n![Black Rhino Theme Screenshot](README/images/vgt-table.black-rhino.png)\n\n## Advanced Customization\n\n### Custom row template\nvue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\">\n  <template slot=\"table-row\" slot-scope=\"props\">\n    <span v-if=\"props.column.field == 'age'\">\n      age: {{props.row.age}}\n    </span>\n    <span v-else>\n      {{props.formattedRow[props.column.field]}}\n    </span>\n  </template>\n</vue-good-table>\n```\n**Note:** \n* The original row object can be accessed via `props.row`\n* The currently displayed table row index can be accessed via `props.index` . \n* The original row index can be accessed via `props.row.originalIndex`. You can then access the original row object by using `rows[props.row.originalIndex]`.\n* The column object can be accessed via `props.column`\n* You can access the formatted row data (for example - formatted date) via `props.formattedRow`\n\n### Custom column headers\nSometimes you might want to use custom column formatting. You can do that in the following way\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\">\n  <template slot=\"table-column\" slot-scope=\"props\">\n     <span v-if=\"props.column.label =='Name'\">\n        <i class=\"fa fa-address-book\"></i> {{props.column.label}}\n     </span>\n     <span v-else>\n        {{props.column.label}}\n     </span>\n  </template>\n</vue-good-table>\n```\n\n### Grouped Rows\nTo create grouped rows, you need two things. \n1. add groupOptions to table component\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :groupOptions=\"{\n  \tenabled: true\n  }\">\n</vue-good-table>\n```\n\n2. make sure the rows are formatted correctly. grouped rows need to be nested with headers rows containing rows in their children property. For example: \n\n```javascript\nrows: [{\n  mode: 'span', // span means this header will span all columns\n  label: 'Header Two', // this is the label that'll be used for the header\n  children: [\n    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },\n    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },\n  ]\n}]\n```\n\n3. sometimes, you might want a summary row instead of a header row. for example if you want to show total score for your group\n\n```javascript\nrows: [{\n  name: 'Total', // this is the label that'll be used for the header\n  age: undefined,\n  createdAt: undefined,\n  score: 0.3, // total score here\n  children: [\n    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },\n    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },\n  ]\n}]\n```\n\n4. if you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :groupOptions=\"{\n  \tenabled: true,\n    headerPosition: 'bottom',\n  }\">\n</vue-good-table>\n```\n\nyou can check out some live examples on the recipes page: \n[vue-good-table Recipes](https://github.com/xaksis/vue-good-table/wiki/Vue-good-table-Recipes-(vue-good-table-2.x))\n\n\n### Remote Mode\nSometimes you might want to power the table from the backend. Where filtering, paging, sorting etc are done serverside. In order to accomplish that you can follow [The remote mode workflow wiki](https://github.com/xaksis/vue-good-table/wiki/Remote-Mode-Workflow)\n\n### Table Actions Slot\nIf you want to add table specific actions like a print button for example, you can use the Table Actions Slot. If you have global search enabled, the action panel will show up to the right of that.\n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\">\n  <div slot=\"table-actions\">\n    This will show up on the top right of the table. \n  </div>\n</vue-good-table>\n```\n\n\n### Empty state slot\nYou can provide html for empty state slot as well. Example:\n\n```html\n<vue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\">\n  <div slot=\"emptystate\">\n    This will show up when there are no columns\n  </div>\n</vue-good-table>\n``` -->\n\n## Authors\n\n* [Boris Flesch](https://github.com/boris-flesch)\n* [xaksis](https://github.com/xaksis) (initial version of Vue-good-table for Vue 2.x)\n* [Other Contributors](https://github.com/borisflesch/vue-good-table-next/graphs/contributors)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details\n","readmeFilename":"README.md"}