[
{
"path": ".browserslistrc",
"content": "> 1%\nlast 2 versions\nnot ie <= 8\n"
},
{
"path": ".circleci/config.yml",
"content": "version: 2.1\njobs:\n build:\n docker:\n - image: circleci/node\n steps:\n - checkout\n - run: yarn install\n - run: yarn test:unit\n - store_test_results:\n path: tests/results\n"
},
{
"path": ".editorconfig",
"content": "[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n"
},
{
"path": ".eslintignore",
"content": "/dist\n"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n root: true,\n env: {\n node: true\n },\n 'extends': [\n 'plugin:vue/essential',\n '@vue/standard'\n ],\n rules: {\n 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n },\n parserOptions: {\n parser: 'babel-eslint'\n }\n}\n"
},
{
"path": ".gitignore",
"content": ".DS_Store\nnode_modules\ndist\n\ntests/results\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw*\n\ndocs/.vuepress/dist\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2019 Hector Romero\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": ":fire::fire::fire: Vue 3 support is comming :fire::fire::fire:\n\nVue 3 support is already in beta in the `next` branch, the next version also supports Vue 2, you can take a look in the [new documentation site](https://vue-smart-table.netlify.app/).\n\n# VueJs Smart Table\n\nVue Smart Table was created out of the need for a simple highly customizable data table plugin \nthat could take advantage of Vue's slots. It has no dependencies but Vue and because it \nrenders as a standard HTML table it is compatible with CSS Frameworks such as Bootstrap and Foundation.\n\nOut of the box you will get filtering, column sorting, client side pagination and row selection.\n\n## Full Documentation\nPlease read the [documentation](https://tochoromero.github.io/vuejs-smart-table/) to learn how to use it.\n\n## Installation\nTo install simply run\n```\nnpm add vuejs-smart-table\n```\nor\n```\nyarn add vuejs-smart-table\n```\n\nThen in your `main.js`\n```js\nimport SmartTable from 'vuejs-smart-table'\n\nVue.use(SmartTable)\n```\nThis will globally register four Components: `v-table`, `v-th`, `v-tr` and `smart-pagination`\n"
},
{
"path": "babel.config.js",
"content": "module.exports = {\n presets: [\n '@vue/app'\n ]\n}\n"
},
{
"path": "deploy.sh",
"content": "#!/usr/bin/env sh\n\nset -e\n\nnpm run docs:build\ncd docs/.vuepress/dist\n\ngit init\ngit add -A\ngit commit -m 'deploy'\n\ngit push -f git@github.com:tochoromero/vuejs-smart-table.git master:gh-pages\n\ncd -\n"
},
{
"path": "docs/.vuepress/components/BasicFiltering.vue",
"content": "\n
\n\n```\n\n\n\n## Custom Filters\nYou also have the option to provide a custom filter for more complex situations. \nA Custom Filter is a function with two arguments: `filterValue` and `row`.\nIt should return `true` if the row should be displayed and `false` otherwise.\n\n### custom \nTo use a custom filter provide the filtering function on the `custom` property on the filter configuration object:\n\n### value \nWith custom filtering the `value` property is not limited to Strings, you can provide anything as the `value`, \nit will just get passed along to your custom function.\n\n#### Example\n```js\n\n```\n\n```html\n\n
\n\n```\n::: tip\nPlease think of the `InputSpinner` as a fancy `Input` with validation. The important bit is its `v-model`.\n:::\n\n\n"
},
{
"path": "docs/pagination/README.md",
"content": "# Pagination\n\nVue Smart Table supports client side pagination. \nTo enable it, you need to provide the `pageSize` and `currentPage` properties on the `v-table` Component.\n\n## Page Size \nThe `pageSize` property specify the amount of items each page should contain. \nIf this property is present, client side pagination will be enabled.\n\n## Current Page \nThe `currentPage` property indicates the current active page. \nThis property should be bound with a `sync` modifier, since the `v-table` itself \nmay update its value, e.g. if a new filter is applied and the amount of available items decreases \nso the current active page is no longer valid.\n::: tip\nThe `currentPage` property index starts at `1`, \nthis is to avoid confusion since visually the page links start at `1` not `0`.\n:::\n\n## Total pages \nThe total amount of pages is calculated using the Total Items and the Page Size. \nAs the Total Items changes the Total Pages will also change and a `totalPagesChanged` event \nwill be emitted with the new amount as its payload.\n\n## Total Items \nThe total amount of items changes as the Filters change. When it changes `v-table` will emit a `totalItemsChanged` Event.\nThis event will also be emitted when the `v-table` mounts so it will have the right amount from the start.\n\n## Pagination Controls\nThe pagination controls are handled outside of `v-table`, you can use whatever you want to control it, but we provide\na `SmartPagination` component so you can have it working out of the box.\n\nThe component requires the following properties:\n\n### Current Page \nThis should be the same `currentPage` property used for the `v-table` component \nand it should also use the `sync` modifier, that way whenever either of them changes it the other one will be notified.\n\n### Total Pages \nThe `v-table` component emits a `totalPagesChanged` event, when the event happens we should save the event payload and\nuse it for the `totalPages` property on the `SmartPagination` component.\n\n## Example\n```html\n\n
\n \n \n
Name
\n
Age
\n
State
\n
Registered
\n \n \n
\n
{{ row.name }}
\n
{{ row.age }}
\n
{{ row.address.state }}
\n
{{ row.registered }}
\n
\n \n \n \n \n
\n\n```\n\n```js\n\n```\n\n\n## Customizing Smart Pagination\nBesides the `currentPage` and `totalPages` properties, there are many others used to configure the behaviour and look\nand feel of the pagination controls.\n\n### Hide Single Page \nDetermines whether or not we show the pagination controls when there is only a single page.\n\n### Max Page Links \nBy default we will show every single page link, but you can use the `maxPageLinks` property to limit the amount of visible links.\n\n### Boundary Links \nDetermines whether or not we should show two links to navigate to the First and Last page.\n\n### First Text \nSpecify the text for the First Page link.\n\n### Last Text \nSpecify the text for the Last Page link.\n\n### Direction Links \nDetermines whether or not we should have direction links to navigate back and forth between pages.\n\n### CSS Customization\nThe HTML structure for the Smart Pagination component is as follows:\n```html\n\n```\nThis structure is compatible with Bootstrap's Pagination. But you can easily customize it with your own Styles.\n"
},
{
"path": "docs/selection/README.md",
"content": "# Row Selection\n\n## Table Row \nTo enable row selection you need to use the `v-tr` component. It only has one property: `row`\n\n### Row \nYou must provide the `row` property with the current Object for the row.\n\n## Selection Options\nYou can configure the Selection Mode and the Selected Class in the `v-table` component.\n\n### Selection Mode \nBy default the selection mode is `single`, meaning only one row at a time can be selected.\nYou can use the `selectionMode` property in the `v-table` component to set it to `multiple`, so multiple rows\ncan be selected.\n\n### Selected Class \nWhen a row is selected a class is added to the `tr` element, by default it is `vt-selected` byt you can change it to\nsomething else with the `selectedClass` property in the `v-table` component.\n\n## Selection Changed \nWhen the selected items changes the `v-table` component will emit a `selectionChanged` event with the\nlist of selected items as its payload.\n\n## Example\n\n```html\n\n
\n \n \n
Name
\n
Age
\n
State
\n
Registered
\n \n \n \n
{{ row.name }}
\n
{{ row.age }}
\n
{{ row.address.state }}
\n
{{ row.registered }}
\n \n \n \n \n Selected:\n
No Rows Selected
\n
\n
\n {{ selected.name }}\n
\n
\n
\n\n```\n\n```js\n\n```\n\n"
},
{
"path": "docs/sorting/README.md",
"content": "# Sorting\n\nTo enable column sorting, instead of using vanilla `th` elements we will use `v-th` Components for the columns\nthat will allow sorting.\n\n## Table Header \nThe `v-th` component renders to a regular `th` element but it allows you to sort the table, it has three properties:\n`sortKey`, `customSort` and `defaultSort`.\n\n### Sort Key \nThe `sortKey` property is used to get the Row value we will sort by it can either be a `String` or a `Function`.\n\n#### String\nAs a `String`, it represents the path to the property in the Row we want to sort. You can even use nested paths.\n```html\n\n Name\n State\n\n```\n\n#### Function\nIf you instead pass a `Function`, we will call it with the current `row` as a parameter and expect to get back\nthe value used for sorting.\n```html\n\n Name\n\n```\n\n```js\nmethods: {\n nameLength (row) {\n return `row.name.length`\n }\n}\n```\n\nOnce we have used the `key` property to get the column values, we will compare them. \nIf the values are number we will just compare them by subtraction.\nOtherwise we will call `toString()` on them and compare them with `localCompare`.\n\n### Custom Sort \nIn some cases you need more control over sorting, \nfor instance if you have a complex object or your sorting depends in two or more values. \nFor those instances instead of providing a `key` property you can use the `custom` property to provide a sorting function.\n\nThe function will receive the 2 rows being compared and a third parameter with the sort order \nwhere `1` represents ascending and `-1` represents descending.\nThe function needs to return `1` if the first row is greater, `-1` if the second row is greater \nor `0` if they are the same.\n\n```html\n\n Registered\n\n```\n\n```js\nmethods: {\n dateSort(a, b) {\n let date1 = new Date(a.registered).getTime();\n let date2 = new Date(b.registered).getTime();\n \n return date1 - date2;\n }\n}\n```\n\n### Default Sort \nYou should provide this for the one column you want the table to be sorted by default. \nThe possible values are: `asc` for ascending ordering and `desc` for descending order.\n\n```html\n\n Name\n\n```\n\n### Example\n```html\n\n \n \n Name\n Age\n State\n Registered\n \n \n
\n
{{ row.name }}
\n
{{ row.age }}
\n
{{ row.address.state }}
\n
{{ row.registered }}
\n
\n \n \n\n```\n\n```js\n\n```\n\n\n\n## CSS icons\nBy default we include three SVG icons to indicate the sorting state of a column. \nBut you can use CSS Styles to change the sort icons.\n\nThe first thing you need to do is to disable the default sort icons with the `hideSortIcons` property on the `v-table` component:\n\n```html\n\n...\n\n```\n\nThen you will get 4 CSS classes for `th` elements with sorting enabled:\n\n* `vt-sort`: This class is always present, its purpose is to provide a constant CSS class for the columns with sorting.\n* `vt-sortable`: This class indicates the column can be sorted and it is present when the column is not currently sorted.\n* `vt-asc`: This class indicates the column is being sorted by an ascending order.\n* `vt-desc`: This class indicates the column is being sorted by a descending order.\n\nFor this example we will use FontAwesome icons:\n\n```css\n.vt-sort:before{\n font-family: FontAwesome;\n padding-right: 0.5em;\n width: 1.28571429em;\n display: inline-block;\n text-align: center;\n}\n\n.vt-sortable:before{\n content: \"\\f0dc\";\n}\n\n.vt-asc:before{\n content: \"\\f160\";\n}\n\n.vt-desc:before{\n content: \"\\f161\";\n}\n```\n\n\n"
},
{
"path": "docs/the-basics/README.md",
"content": "# The Basics\n\nThe main goal for Vue Smart Table is to be intuitive to use while offering powerful features out of the box.\n \nTo achieve this we mix Vue Components and vanilla HTML Elements with the output being the same as a traditional HTML Table.\nThis will allow you to easily customize your tables with CSS or with a framework such as Bootstrap or Foundation.\n\nFor our examples we decided to use Bootstrap and Font Awesome, but you can use whatever your heart desires.\n\nHere is the code for the simplest table you can create:\n\n```js\n\n\n```\n\n```html\n\n \n \n
\n \n \n\n```\n\n\n\n## Table \n\nThe `v-table` component is the main element of Smart Table, here you will provide most of the configuration and listen for events. \nBut for now we will just focus on the `data` attribute.\n\n### Data \nEach `v-table` requires a `data` property, it must be an `array` even if it is initially empty.\nEach entry in the array represents a row in the table.\n\nIt is important to note the array will not be mutated by Smart Table, internally it will create a shallow copy of it to perform\nthe operations.\n\n## Head \nThe `head` slot is for the table `thead`, other than specifying the slot name with `slot=\"head\"` there is nothing special about this.\nYou just need to provide vanilla `th` elements for each of your columns.\n```html\n\n
Name
\n
Age
\n ...\n\n```\n\n## Body \nThe `body` slot is for the table `tbody`. This is a scoped slot which provides a `displayData` property.\n\n### Display Data \nThe `display-data` property provided by the `body` scoped slot is a shallow copy of the `data` array provided to the `v-table` component.\n\nThis array has all the plugins applied to it, for example, if filtering is enabled, this array will only contain the rows that pass the filters.\n\nYou will want to use a `v-for` directive to render the `tr` elements, remember, each entry in the `display-data` array represents a row.\n\n```html\n\n
\n
{{ row.name }}
\n
{{ row.age }}
\n ...\n
\n\n```\n\nAll right, this is the simplest table you can create, but right now Smart Table is effectively doing nothing you might as well just use a vanilla Html Table. \n\nKeep browsing to discover how powerful Smart Table is out of the box.\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"vuejs-smart-table\",\n \"keywords\": [\n \"vue\",\n \"table\",\n \"grid\",\n \"datagrid\"\n ],\n \"version\": \"0.0.8\",\n \"private\": false,\n \"main\": \"src/main.js\",\n \"author\": \"Hector Romero Granillo\",\n \"repository\": \"https://github.com/tochoromero/vuejs-smart-table\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"build\": \"vue-cli-service build --target lib --name smart-table src/main.js\",\n \"lint\": \"vue-cli-service lint\",\n \"test:unit\": \"vue-cli-service test:unit --reporter mocha-junit-reporter --reporter-options mochaFile=./tests/results/test_results.xml\",\n \"docs:dev\": \"vuepress dev docs\",\n \"docs:build\": \"vuepress build docs\"\n },\n \"dependencies\": {\n \"vue\": \"^2.5.17\"\n },\n \"devDependencies\": {\n \"@fortawesome/fontawesome-free\": \"^5.6.3\",\n \"@vue/cli-plugin-babel\": \"^3.1.1\",\n \"@vue/cli-plugin-eslint\": \"^3.1.5\",\n \"@vue/cli-plugin-unit-mocha\": \"^3.1.1\",\n \"@vue/cli-service\": \"^3.1.4\",\n \"@vue/eslint-config-standard\": \"^4.0.0\",\n \"@vue/test-utils\": \"^1.0.0-beta.20\",\n \"babel-eslint\": \"^10.0.1\",\n \"bootstrap\": \"^4.2.1\",\n \"chai\": \"^4.1.2\",\n \"eslint\": \"^5.8.0\",\n \"eslint-plugin-vue\": \"^5.0.0-0\",\n \"lint-staged\": \"^7.2.2\",\n \"mocha-junit-reporter\": \"^1.18.0\",\n \"sass\": \"^1.30.0\",\n \"sass-loader\": \"^10.1.0\",\n \"vue-template-compiler\": \"^2.5.17\",\n \"vuepress\": \"^0.14.8\"\n },\n \"gitHooks\": {\n \"pre-commit\": \"lint-staged\"\n },\n \"lint-staged\": {\n \"*.js\": [\n \"vue-cli-service lint\",\n \"git add\"\n ],\n \"*.vue\": [\n \"vue-cli-service lint\",\n \"git add\"\n ]\n }\n}\n"
},
{
"path": "postcss.config.js",
"content": "module.exports = {\n plugins: {\n autoprefixer: {}\n }\n}\n"
},
{
"path": "src/SmartPagination.vue",
"content": "\n \n\n\n\n\n\n"
},
{
"path": "src/VTable.vue",
"content": "\n