{"_id":"@davydovks/vue-good-table-next","_rev":"4-314be4d46c04cb659960fa14bb214c83","name":"@davydovks/vue-good-table-next","dist-tags":{"latest":"0.2.6"},"versions":{"0.2.3":{"name":"@davydovks/vue-good-table-next","version":"0.2.3","keywords":["vue","vuejs","table","datatable"],"author":{"name":"Konstantin Davydov","email":"davydovks@gmail.com"},"license":"MIT","_id":"@davydovks/vue-good-table-next@0.2.3","maintainers":[{"name":"davydovks","email":"davydovks@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"},{"name":"boris","email":"boris@singlequote.net"}],"homepage":"https://github.com/davydovks/vue-good-table-next#readme","bugs":{"url":"https://github.com/davydovks/vue-good-table-next/issues"},"dist":{"shasum":"71ae20373d40fdfe0b8aa0a2013ba22b9aa1c2c0","tarball":"https://registry.npmjs.org/@davydovks/vue-good-table-next/-/vue-good-table-next-0.2.3.tgz","fileCount":50,"integrity":"sha512-YSgd+L20aMN9EMBNVHcDzLf1dWi0Z/+r1HFSkzorahUgeqMx4JZtRn0vyFT2ULIpz2+6FrxhwTU3c9fFMqtD6g==","signatures":[{"sig":"MEUCIGjO+y7kty6RU9QKuE7OzmMm4ScXbsDlglOboFXBCRIuAiEAq+HrTj1DBzORAtGmFYZO3pyyViHzQTdxdY910MqjprA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1863500},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"cf6291cb712c2f1afe80487b60187a22ecd67723","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":"davydovks","email":"davydovks@gmail.com"},"repository":{"url":"git+https://github.com/davydovks/vue-good-table-next.git","type":"git"},"_npmVersion":"9.8.1","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"18.18.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-rc.15","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","@vuepress/bundler-vite":"^2.0.0-rc.15","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-rc.15","@vuepress/theme-default":"^2.0.0-rc.42","@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-rc.15","@vuepress/plugin-register-components":"^2.0.0-rc.15"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.2.3_1768479963791_0.2192831603057428","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"@davydovks/vue-good-table-next","version":"0.2.4","keywords":["vue","vuejs","table","datatable"],"author":{"name":"Konstantin Davydov","email":"davydovks@gmail.com"},"license":"MIT","_id":"@davydovks/vue-good-table-next@0.2.4","maintainers":[{"name":"davydovks","email":"davydovks@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"},{"name":"boris","email":"boris@singlequote.net"}],"homepage":"https://github.com/davydovks/vue-good-table-next#readme","bugs":{"url":"https://github.com/davydovks/vue-good-table-next/issues"},"dist":{"shasum":"25c9eb95da7d6bb07916b60d3543dbc8ba15926d","tarball":"https://registry.npmjs.org/@davydovks/vue-good-table-next/-/vue-good-table-next-0.2.4.tgz","fileCount":50,"integrity":"sha512-X0u4EEC8ynJPS5k7IFr7Ee/WWUs9xR90tOrODnkkZ5OaoceQcr58+ngK2cEtFGGQbwSj/fwW+/2AlKRdx1nwEw==","signatures":[{"sig":"MEUCIQCwyYyG067CArfTTwpWhFcAiXObEWDiQzb4tJRaEXKW7QIgf/cbhUkZlnafe52QrUklYMDVfhjs8cXLVX62X/VR3CY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1876938},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"56f750c9ac92589034e92d65e6a8643b1ee1ec23","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":"davydovks","email":"davydovks@gmail.com"},"repository":{"url":"git+https://github.com/davydovks/vue-good-table-next.git","type":"git"},"_npmVersion":"9.8.1","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"18.18.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-rc.15","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","@vuepress/bundler-vite":"^2.0.0-rc.15","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-rc.15","@vuepress/theme-default":"^2.0.0-rc.42","@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-rc.15","@vuepress/plugin-register-components":"^2.0.0-rc.15"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.2.4_1768486023311_0.5635933463498783","host":"s3://npm-registry-packages-npm-production"}},"0.2.5":{"name":"@davydovks/vue-good-table-next","version":"0.2.5","keywords":["vue","vuejs","table","datatable"],"author":{"name":"Konstantin Davydov","email":"davydovks@gmail.com"},"license":"MIT","_id":"@davydovks/vue-good-table-next@0.2.5","maintainers":[{"name":"davydovks","email":"davydovks@gmail.com"}],"contributors":[{"url":"https://github.com/xaksis","name":"xaksis"},{"name":"boris","email":"boris@singlequote.net"}],"homepage":"https://github.com/davydovks/vue-good-table-next#readme","bugs":{"url":"https://github.com/davydovks/vue-good-table-next/issues"},"dist":{"shasum":"0da4e18f3799c9835c7c5814cc05dca1d04f9fb7","tarball":"https://registry.npmjs.org/@davydovks/vue-good-table-next/-/vue-good-table-next-0.2.5.tgz","fileCount":50,"integrity":"sha512-P9vH7bHW/Zm7ugF4/f3FhijqgggDlOGqr9PikJjh0qOcWDO8rhbSJRFWfLPsrNfbxf62Tmhtg2bsKUMvZKkDmQ==","signatures":[{"sig":"MEYCIQCSKfNhwq2GZBcXzRkvX1v74g0VoCEHo/0VjYFhmbL1/QIhAJ47iJJ6sKkwS83OoobZuLGJyky36AnSxAlID9UAhFxF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1876604},"main":"dist/vue-good-table.cjs.js","module":"dist/vue-good-table.esm.js","gitHead":"85b57d9798fc9ec8fc3b6f556f8ccde028c77543","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":"davydovks","email":"davydovks@gmail.com"},"repository":{"url":"git+https://github.com/davydovks/vue-good-table-next.git","type":"git"},"_npmVersion":"9.8.1","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","directories":{},"sideEffects":["*.vue","*.css"],"_nodeVersion":"18.18.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-rc.15","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","@vuepress/bundler-vite":"^2.0.0-rc.15","rollup-plugin-analyzer":"^4.0.0","webpack-node-externals":"^3.0.0","@rollup/plugin-commonjs":"^21.0.1","@vuepress/plugin-search":"^2.0.0-rc.15","@vuepress/theme-default":"^2.0.0-rc.42","@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-rc.15","@vuepress/plugin-register-components":"^2.0.0-rc.15"},"_npmOperationalInternal":{"tmp":"tmp/vue-good-table-next_0.2.5_1768907803290_0.032898938775939746","host":"s3://npm-registry-packages-npm-production"}},"0.2.6":{"name":"@davydovks/vue-good-table-next","version":"0.2.6","description":"A simple, clean data table for Vue (3.x) with essential features like sorting, column filtering, pagination etc","author":{"name":"Konstantin Davydov","email":"davydovks@gmail.com"},"contributors":[{"name":"xaksis","url":"https://github.com/xaksis"},{"name":"boris","email":"boris@singlequote.net"}],"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"},"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/bundler-vite":"^2.0.0-rc.15","@vuepress/plugin-google-analytics":"^2.0.0-rc.15","@vuepress/plugin-register-components":"^2.0.0-rc.15","@vuepress/plugin-search":"^2.0.0-rc.15","@vuepress/theme-default":"^2.0.0-rc.42","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-rc.15","webpack-node-externals":"^3.0.0"},"keywords":["vue","vuejs","table","datatable"],"repository":{"type":"git","url":"git+https://github.com/davydovks/vue-good-table-next.git"},"sideEffects":["*.vue","*.css"],"_id":"@davydovks/vue-good-table-next@0.2.6","gitHead":"45027b66a64ed8f8bdf89d77608b6e8d6bc56310","bugs":{"url":"https://github.com/davydovks/vue-good-table-next/issues"},"homepage":"https://github.com/davydovks/vue-good-table-next#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-JIQ89dZPoT3g65jWMpdpWgCjfVnnFsW5d33vHbmUToicssZpEtht8lpvZA5y6q+9917k5MkF/wHoOqAjzhlMSA==","shasum":"bc2a4630e379aa0dd7c74c5c46ce93506dc17177","tarball":"https://registry.npmjs.org/@davydovks/vue-good-table-next/-/vue-good-table-next-0.2.6.tgz","fileCount":50,"unpackedSize":1876321,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCnEHWh/fxKLveM0ia8NU1S0L4sB3F2tjzj/PFByNIA/wIgAXTzy3IcQHbFEbjzBothXcwYL3T542pW8xldhywvFig="}]},"_npmUser":{"name":"davydovks","email":"davydovks@gmail.com"},"directories":{},"maintainers":[{"name":"davydovks","email":"davydovks@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-good-table-next_0.2.6_1768911630486_0.03798781512548177"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-15T12:26:03.666Z","modified":"2026-01-20T12:20:31.101Z","0.2.3":"2026-01-15T12:26:03.947Z","0.2.4":"2026-01-15T14:07:03.548Z","0.2.5":"2026-01-20T11:16:43.455Z","0.2.6":"2026-01-20T12:20:30.695Z"},"bugs":{"url":"https://github.com/davydovks/vue-good-table-next/issues"},"author":{"name":"Konstantin Davydov","email":"davydovks@gmail.com"},"license":"MIT","homepage":"https://github.com/davydovks/vue-good-table-next#readme","keywords":["vue","vuejs","table","datatable"],"repository":{"type":"git","url":"git+https://github.com/davydovks/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"},{"name":"boris","email":"boris@singlequote.net"}],"maintainers":[{"name":"davydovks","email":"davydovks@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/@davydovks/vue-good-table-next.svg?style=flat-square)](https://www.npmjs.com/package/@davydovks/vue-good-table-next)\n[![npm](https://img.shields.io/github/package-json/v/davydovks/vue-good-table-next.svg?style=flat-square)](https://github.com/davydovks/vue-good-table-next/releases)\n[![npm](https://img.shields.io/github/license/davydovks/vue-good-table-next.svg?style=flat-square)](https://github.com/davydovks/vue-good-table-next/master/LICENSE)\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* [Konstantin Davydov](https://github.com/davydovks)\n* [Boris Flesch](https://github.com/boris-flesch) (initial version of Vue-good-table-next for Vue 3.x)\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"}