{"_id":"@54gradsoftware/vue-data-table","_rev":"1-ce50c29b80305680589aeb51287e7ae5","name":"@54gradsoftware/vue-data-table","dist-tags":{"latest":"4.1.0"},"versions":{"4.0.0":{"name":"@54gradsoftware/vue-data-table","version":"4.0.0","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"description":"A Vue plugin that adds advanced features to an HTML table","repository":{"type":"git","url":"git+https://github.com/54GradSoftware/vue-data-table.git"},"bugs":{"url":"https://github.com/54GradSoftware/vue-data-table/issues"},"license":"MIT","scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build --target lib --name DataTable src/main.js"},"main":"dist/DataTable.umd.js","unpkg":"dist/DataTable.umd.min.js","keywords":["vue","table","data"],"dependencies":{"export-from-json":"1.4.0","vue":"2.6.14"},"devDependencies":{"@vue/cli-plugin-babel":"4.5.13","@vue/cli-service":"4.5.13","node-sass":"6.0.1","sass-loader":"10.2.0","vue-template-compiler":"2.6.14"},"gitHead":"4d092b614f8715d7caf2543b5563f2b2a29fd989","homepage":"https://github.com/54GradSoftware/vue-data-table#readme","_id":"@54gradsoftware/vue-data-table@4.0.0","_nodeVersion":"12.22.12","_npmVersion":"6.14.16","dist":{"integrity":"sha512-4iHPxcUO3OG0vCDsV3H7zFvmK7pyH9ljQKCHDIWSVJKFMhu6CY4OnK9Og9e2VtEHEysFXg+GXIgKiSXv2u5qMA==","shasum":"5a81c369a71c93e5f1b360dee2b857d852b0bdd2","tarball":"https://registry.npmjs.org/@54gradsoftware/vue-data-table/-/vue-data-table-4.0.0.tgz","fileCount":48,"unpackedSize":1534310,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL1XmC/hd6YWC8nN0kGV0hiFzkqSROAlNU0Lmq2KhLNQIgLwofbXMaVNYJseL78vMltJZWhIiJyK0rxK/I6prslxY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvqpfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkLBAAhwDqd+Hp9a0aa+XbjPZw4ZBZD6tvEjCSmhf5PGqYyIak9gcF\r\n1hCs+1hZ+2loZ+IyMMFjBjalzvGLTVvnT044hZQ6qQJVG+6mFGdvAlL3a8u+\r\nETKOrE03vXUYYxmnIAivE+Ens7X8bslI6O9svfrm8Ci77HzLhRqF56hee90P\r\n8ljvcBfu5vHekdl/1oATzRoNKxZN+QSV3iLWq/c5te8ERW76UQN4ikdCdTfJ\r\nXEsu0u5/nsQXBFTKKPqBoaVpuxsqkMpl1wjQUYN3yU6mo6DSOE7tnx6t5GMf\r\np05pL/vRWxtnjSaDIKW8Md4WtvVinzNTB543fviHNn7R54pEUgZa2svbqPef\r\n1hf67jXBJXCdRlSvj4q8m/K+IoLt74EUb4zhjT182tKft5pCc/BJUfOMElVM\r\nSo7Bz8612F5tl9WeFS6eOPFrwr9UA0rjrkHHTiJBaK6ACWILOA+s0ms2gpCk\r\nb31vRLjUhn3F+RmQ2F2G8hInp2SuxAJ8dhmCekJAHye2zxWDlDG6YTUOBgof\r\nQ8LljHuuUyqIuNZPu9E0900N/RKzRaCOQNhN/iafmZu/sW5w1cKWfjFuXGDH\r\n9SL3GHRy52QOOvs5oHYMaksiIHbte+Te+38peuE0zPtoaG4/JHyE2K+ny2ca\r\nqm9lFxLtjZc64MfDPzR6f2vPJm7jW4QHvKs=\r\n=O4Dj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"54gradsoftware","email":"kontakt@54gradsoftware.de"},"directories":{},"maintainers":[{"name":"54gradsoftware","email":"kontakt@54gradsoftware.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-data-table_4.0.0_1673439839341_0.7071331176507187"},"_hasShrinkwrap":false},"4.1.0":{"name":"@54gradsoftware/vue-data-table","version":"4.1.0","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"description":"A Vue plugin that adds advanced features to an HTML table","repository":{"type":"git","url":"git+https://github.com/54GradSoftware/vue-data-table.git"},"bugs":{"url":"https://github.com/54GradSoftware/vue-data-table/issues"},"license":"MIT","scripts":{"build":"vite build"},"type":"module","main":"dist/vue-data-table.js","keywords":["vue","table","data"],"dependencies":{"bootstrap":"*","export-from-json":"1.7.0"},"devDependencies":{"@vitejs/plugin-vue":"^4.0.0","path":"^0.12.7","rollup-plugin-peer-deps-external":"^2.2.4","sass":"^1.57.1","vite":"^4.0.4"},"gitHead":"1908014d5e4984b3ad8e489ac693c5278ffd6af6","homepage":"https://github.com/54GradSoftware/vue-data-table#readme","_id":"@54gradsoftware/vue-data-table@4.1.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-0x1aXYs25Lkp66uqVGQdvvOkg5RvalCrqx1OWJjmYGZvs0rrv2DxDwWOYHC/za5TIN0lvTd6pI57RnpQenYXaw==","shasum":"8607fe5688a9010ccfa304b948f462ad93dc8545","tarball":"https://registry.npmjs.org/@54gradsoftware/vue-data-table/-/vue-data-table-4.1.0.tgz","fileCount":42,"unpackedSize":155352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBMhGCM9YKsA859hZhSSXeVLWiEwQcWv/RuBRdKK6IhAIhAN2zgXUqMQwUD0soDsIzvcrBqzuiw1BjR0IUY5stNqh1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwHCXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCRw/8C2t8iChXsoUJcSXUsO87fy3uY5yW/n5wl5+iPOXv5abtatRb\r\nTagro3LTwFrdtlKPDgBT3bV0U3bTLgn2SfhEICGtlgmCmrlWixW8Kn/fDE9d\r\nf8WO0HMFop5NWWfifc3v5sRzpMkxFQTPPq8OUqzdCOjYEBOjPLYWT4hfG0xA\r\nsAtqvEw5dh0P7kOmBAW/pVsBQ9sbNkT/FEq4LfLPUyhajYEnTD7rePb2+BSa\r\nTr3NJXTo3E5Zj2P+77JFHsotyLeBAXpkn8J9/SBVsoYtnondahoegZN6iN20\r\nmncgRuC0RnYYaLHziJbkayAjCKdFYV1er2j/QW7uCGD7tlcq35XiCoWChkjM\r\nGt1shKra/nGcRDUxrun5LKuRy/iP2LlJhEhZoznFuTCC3I+VheXeInjY9p3p\r\nFVQ6rwImezQXxQ7oFyYCoj5xo1e5C8Cge16wzgJvoHgcpZ8D3Gn9Mau6iRv/\r\nC4FnwRvkUrKLxQZc9rH4A4Gbnu1ts87ur/tC+bNFLR/cmRZCbJGs/KYAuDB7\r\n+eb+lqr1lVf4FOODSzottgLUXYDt5/ycit0OFnh45YMDsbBjKfmQ9BcFsMDC\r\nu3JqXqzq21JfBJ7jJyAYh+D+YAQ4nh2OCSUXo6RlIpYKdDee22dq3r78HPdq\r\nvml7ulVSeZHUk8GSopabDFN22fPkB8UpxII=\r\n=qAay\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"54gradsoftware","email":"kontakt@54gradsoftware.de"},"directories":{},"maintainers":[{"name":"54gradsoftware","email":"kontakt@54gradsoftware.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-data-table_4.1.0_1673556119302_0.4933532876172839"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-11T12:23:59.244Z","4.0.0":"2023-01-11T12:23:59.617Z","modified":"2023-01-12T20:41:59.554Z","4.1.0":"2023-01-12T20:41:59.487Z"},"maintainers":[{"name":"54gradsoftware","email":"kontakt@54gradsoftware.de"}],"description":"A Vue plugin that adds advanced features to an HTML table","homepage":"https://github.com/54GradSoftware/vue-data-table#readme","keywords":["vue","table","data"],"repository":{"type":"git","url":"git+https://github.com/54GradSoftware/vue-data-table.git"},"bugs":{"url":"https://github.com/54GradSoftware/vue-data-table/issues"},"license":"MIT","readme":"# VUE DATA TABLE\n\nVueDataTable is a Vue plugin that adds advanced features to an HTML table.\nIt was inspired by [DataTable jQuery Plugin](https://datatables.net/), but it\nwas written from scratch using Vue.\n\n## Table of contents\n\n1. [Features](#features)\n2. [Demo](#demo)\n3. [Getting started](#getting-started)\n - [Installation](#installation)\n - [Set Up](#set-up)\n - [Use](#use)\n4. [Configuration](#configuration)\n - [Columns](#columns)\n - [Lang](#lang)\n - [Custom components](#custom-components)\n5. [License](#license)\n6. [Versioning](#versioning)\n7. [Contributing](#contributing)\n8. [Authors](#authors)\n\n## Features\n\n- Multiple Column Sorting\n- Pagination\n- Search Filter\n- Export data (XLS, JSON, CVS, or TXT)\n- Custom component cell\n- Custom Text\n\n## Demo\n\nThe best way to see if a package suits your needs is by viewing and editing a\ndemo project. Here are some code playgrounds in which you can test\nVueDataTable.\n\n- [Demo 1 (preview)](https://ygnl5.csb.app/)\n- [Demo 1 (preview and code)](https://codesandbox.io/s/vue-data-table-demo01-ygnl5)\n- [Demo 2 (preview)](https://r94qe.csb.app/)\n- [Demo 2 (preview and code)](https://codesandbox.io/s/vue-data-table-demo02-r94qe)\n- [Demo 3 (preview)](https://fg8ok.csb.app/)\n- [Demo 3 (preview and code)](https://codesandbox.io/s/vue-data-table-demo03-fg8ok)\n- [Demo 4 (preview)](https://qyetb7.csb.app/)\n- [Demo 4 (preview and code)](https://codesandbox.io/s/vue-data-table-demo04-qyetb7)\n- [Demo 5 (preview)](https://0jkyuj.csb.app/)\n- [Demo 5 (preview and code)](https://codesandbox.io/s/vue-data-table-demo05-0jkyuj)\n\nBoth Demo 1 and Demo 2 are from older versions of this plugin, but should still work\nwith newer versions because the API didn't change much. Demo 3 is from the newest\nversion and has an example of a custom footer component. Demo 4 implements mass-selection\nof rows using custom component and checkboxes. Demo 5 uses a custom loading component\nthat is shown to the user while data is being loaded.\n\n## Getting started\n\n### Installation\n\n```shell\nnpm install --save @andresouzaabreu/vue-data-table\n```\n\n### Set up\n\n```javascript\nimport DataTable from \"@andresouzaabreu/vue-data-table\";\nVue.component(\"data-table\", DataTable);\n```\n\nDon\"t forget to add the style sheets\n\n```javascript\nimport \"@andresouzaabreu/vue-data-table/dist/DataTable.css\";\n```\n\n### Use\n\n```html\n\n\n```\n\n**Note** Notice that v-bind will take all key-value pairs in the object (in\nthis case, the `bindings`), and pass them as props to the VueDataTable. So,\nthis is a shortcut to pass multiple props at once.\n\n## Configuration\n\nOnly `data` e `columns` are required. Other props are optional.\n\n| prop | type | default | description |\n| --- | --- | --- | --- |\n| data | `Array` | - | Array of objects with the data to be displayed on the table |\n| columns | `Array` | - | Array of objects that specifies how to render each column. Optional if `columnKeys` is present. |\n| columnKeys | `Array` | - | Array of strings matching the object keys in `data`. This is discarded if `columns` is set. |\n| lang | `String` | `en` | The default language |\n| perPageSizes | `Array` | [10, 25, 50, 100] | The options for the number of rows being displayed per page |\n| defaultPerPage | `Number` | 10 | The default number of entries. If unset, then it will be the first value of `perPageSizes` |\n| isLoading | `Bool` | `false` | Whether table data is loading. Table rows are shown only if this value is set to `false`. |\n| loadingComponent | `Object`, `String` | - | VueJS component to be shown if `isLoading` is set to `true` |\n| showPerPage | `Bool` | `true` | Whether to show the `PerPage` component |\n| showEntriesInfo | `Bool` | `true` | Whether to show the EntriesInfo component |\n| showSearchFilter | `Bool` | `true` | Whether to show the SearchFilter component |\n| showPagination | `Bool` | `true` | Whether to show the Pagination component |\n| showDownloadButton | `Bool` | `true` | Whether to show the button to download the table's data |\n| tableClass | `String` | `table table-striped table-hover` | The table's HTML `class` attribute |\n| sortingMode | `String` | `multiple` | Whether to sort a single column or multiple columns at once |\n| sortingIndexComponent | `Object`, `String` | `DataTableSortingIndex` | VueJS component for the sorting index on sortable columns |\n| sortingIconComponent | `Object`, `String` | `DataTableSortingIcon` | VueJS component for the sorting icon on sortable columns |\n| footerComponent | `Object`, `String` | `null` | VueJS component for custom table footer |\n| allowedExports | `Array` | `[\"xls\", \"csv\", \"json\", \"txt\"]` | Formats the user can export the data to. Only four export types are available. |\n\n### Columns\n\n| key | type | default | description |\n| --- | --- | --- | --- |\n| key | `String` | - | The key of the objects in the `data` prop. The value of the matching key will be displayed in a table cell |\n| title | `String` | `titleCase(key)` | The title to be displayed in the `th` element. If not specified, it will capitalize the `key` and then remove its dashes and underscores |\n| searchable | `Bool` | `true` | Whether to allow filtering the objects in `data` by matching the `search` text in the object's `key` |\n| sortable | `Bool` | `true` | Whether to allow sorting the column. It will use the `key` to sort the objects in the `data` |\n| type | `String` | `string` | Where to sort the column as a string or as a number. Allowed values are `string` and `number`. |\n| sortingFunction | `Function` | - | Custom function provided by the user to sort the column. |\n| index | `Number` | 0 | A higher index puts the column to the right of the table. A lower index puts the column to the left of the table. |\n| component | `Object,String` | - | Custom Vue Component provided by the user. This component should have a prop called `data`, which contains the data of current row. |\n\nIf `columns` is not defined, then `columnKeys` must be defined and it will be\nmapped to a `columns` array with the default parameters. Example:\n\n```javascript\n// we can define the columns\nconfig = {\n data: users,\n columns: [\n {\n key: \"name\",\n },\n {\n key: \"email\",\n title: \"Email Address\",\n sortable: false,\n },\n {\n key: \"phone\",\n sortable: false,\n searchable: false,\n /* this will make this column appear to the right of the table\n since its index is greater than others*/\n index: 100,\n },\n {\n key: \"permissions\",\n /* custom function sort users by which user has more permissions */\n sortingFunction: function(a, b) {\n // permissions is an array\n return a.permissions.length - b.permissions.length;\n },\n /* custom component to display the permissions */\n component: UserPermissionList,\n }\n ]\n}\n\n// or use columnKeys shortcut\nconfig = {\n data: user,\n columnKeys: [\"name\", \"email\", \"registered_at\", \"last_access_at\"]\n},\n\n// which will take the default column and map the array into this\n[\n {\n key: \"name\",\n title: \"Name\",\n sortable: true,\n searchable: true,\n index: 0\n },\n {\n key: \"email\",\n title: \"Email\",\n sortable: true,\n searchable: true,\n index: 0\n },\n {\n key: \"registered_at\",\n title: \"Registered at\",\n sortable: true,\n searchable: true,\n index: 0\n },\n {\n key: \"last_access_at\",\n title: \"Last access at\",\n sortable: true,\n searchable: true,\n index: 0\n },\n]\n```\n\n#### Custom component\n\nIn the example above, we used a custom component called UserPermissionList.\nBelow is a sample of that custom component.\n\n```html\n\n\n```\n\nAnother example, using action buttons:\n\n```html\n\n\n```\n\n### Text\n\nCurrently, VueDataTable has support for three languages: English (en),\nBrazilian Portuguese (pt-br), and Spanish(es). The `lang` prop specifies in\nwhich language to display the text in our table.\n\nIf we want to add a custom text (maybe because there is no language support or\nbecause we want something else), we have to set it in the `text` prop.\n\nThe following table shows the texts we can customize and their default values\nfor the English language.\n\n| key | default |\n| --- | --- |\n| perPageText | \"Show :entries entries\" |\n| infoText | \"Showing :first to :last of :total entries\" |\n| infoFilteredText | \"Showing :first to :last of :filtered (filtered from :total entries)\" |\n| nextButtonText | \"Next\" |\n| previousButtonText | \"Previous\" |\n| paginationSearchText | \"Go to page\" |\n| paginationSearchButtonText | \"GO\" |\n| searchText | \"search:\" |\n| downloadText | \"export as:\" |\n| downloadButtonText | \"DOWNLOAD\" |\n| emptyTableText | \"No matching records found\" |\n\n**Note**: Notice that the placeholders `:first`, `:last`, `:total`, and\n`filtered` will be automatically replaced with the proper numbers.\n\nExample code:\n\n```javascript\nparameters() {\n return {\n data: [/**/],\n columns: [/**/],\n text: {\n PerPageText: \"Number of users per page :entries\",\n infoText: \"Displaying :first to :last of :total users\",\n emptyTableText: \"No users found :(\",\n }\n }\n}\n```\n\n#### Adding global custom language\n\nIf your lang is not yet supported, you can add a new language and use it in any\nVueDataTable instance as follow:\n\n```javascript\nimport { languageServiceProvider } from \"@andresouzaabreu/vue-data-table\";\nconst loremIpsumLanguage = {\n perPageText: \"lorem ppsum\",\n nextButtonText: \"labore nostrud\",\n /* more ... */\n};\nlanguageServiceProvider.setLang(\"lorem\", loremIpsumLanguage)\n\n/**\n * @function setLang\n * @param {String} lang the name of the language\n * @param {Object} translations an object with the translated text\n*/\n```\n\nYou can also change any default text for an existing language and that will\nreflect the changes globally. For example:\n\n```javascript\n// the default text for the download button in the export component is \"export as\"\n// we may want change that to \"download as\"\nlanguageServiceProvider.setLangText(\"en\", \"downloadText\", \"download as:\")\n\n/**\n * @function setLangText\n * @param lang\n * @param {String} key the key in the lang object\n * @param {String} text the text will be display to the user\n*/\n```\n\n### Custom order of components\n\nVueDataTable uses CSS's grid display to specify the position of its components\n(search filter, pagination, entries info, per page options, download button).\n\n**We can specify the position of the components by including our custom\nCSS/SCSS and overriding the defaults.**\n\nBy default, this is how VueDataTable displays the components:\n\n```scss\n.data-table {\n display: grid;\n width: 100%;\n grid-template-columns: 25% 25% 25% 25%;\n &> div {\n margin-top: 1rem;\n max-width: 100%;\n }\n & > .data-table-search-filter, .data-table-pagination, .data-table-export-data {\n margin-left: auto\n }\n @media (min-width: 1401px) {\n grid-template-areas:\n \"perPage search search search\"\n \"table table table table\"\n \"info pagination pagination download\";\n }\n @media (min-width: 1051px) AND (max-width: 1400px) {\n grid-template-areas:\n \"perPage search search search\"\n \"table table table table\"\n \"info pagination pagination pagination\"\n \". . download download\";\n }\n @media (min-width: 851px) AND (max-width: 1050px) {\n grid-template-areas:\n \"perPage search search search\"\n \"table table table table\"\n \"pagination pagination pagination pagination\"\n \"info info download download\";\n }\n @media (max-width: 800px) {\n & > .data-table-pagination {\n flex-wrap: wrap;\n }\n }\n @media (min-width: 651px) AND (max-width: 850px) {\n grid-template-areas:\n \"perPage search search search\"\n \"table table table table\"\n \"pagination pagination pagination pagination\"\n \"info info info info\"\n \"download download download download\";\n }\n @media (max-width: 650px) {\n grid-template-areas:\n \"search search search search\"\n \"perPage perPage perPage perPage \"\n \"table table table table\"\n \"pagination pagination pagination pagination\"\n \"info info info info\"\n \"download download download download\";\n & > .data-table-per-page {\n margin-left: auto\n }\n }\n}\n```\n\nFeel free to copy the styles above, modify it, and then set the position of the\ncomponents as you want.\n\n### Custom Components\n\nBesides a custom component for each column, you provide custom components\nfor the table's footer, the column's `sorting icon` (the icon displayed if\nthe columns is sorted), and the column's `sorting index` (the index of the\ncurrent column if it is being sorted and multi column sorting is enabled).\n\n#### Footer\n\nThe property `footerComponent` sets the component to render the table's footer.\nThe component can be either the component `Object`, or a `String` equals to the\nname of the registered component.\n\nThe `footerComponent` must be a `` HTML element and it must have the\nproperties `data`, `dataDisplayed`, `dataFiltered`. If the component does not\nspecify those properties in `props`, Vue will probably think they are some\ncustom HTML attribute and their values will be show as HTML attributes, which\nis really messy.\n\nThe property `data` correspond to all data passed to VueDataTable. The\n`dataDisplayed` corresponds to all data that is currently visible on the table.\nThe `dataFiltered` corresponds to all data that was filtered by a search query.\nThese properties can be used to perform common operations such as calculating\nthe sum of the values of the total rows of a certain column.\n\n#### Example\n\nSuppose we have a table that of fruits. The `data` is an array of objects\nwhose properties are `name`, `price`, and `amount`. We can provide a custom\nfooter to show the total amount of fruits bought and the total price.\n\nThe footer component would be something like:\n\n```html\n\n\n```\n\nAnd we pass this component as follow:\n\n```html\n\n\n```\n\nAlternately, you can register the component and pass a string:\n\n```javascript\n/* earlier on */\nimport TableFooter from './TableFooter.vue'\nVue.component(\"table-footer\", TableFooter)\n\n/* later on */\n\tfooterComponent: \"table-flooter\"\n```\n\n#### Sorting icon\n\nBy default, VueDataTable will display arrows to indicate the sorting direction\nwhen sorting a column. The `SortingIcon` component is wrapped in a `th`\nelement. The `th` element has a `data-sorting` attribute that may be `asc` or\n`desc` only. Based on this value, we display an `arrow_up` or an `arrow_down`\nicon using `CSS` rules.\n\n```html\n\n\n```\n\n**Note**: Some code was omitted to keep it clean.\n\nIf we want to add our custom icons for this, then we can register our\ncomponent.\n\n```javascript\nimport SortingIcon from \"./path/to/SortIcon.vue\";\n\nexport default {\n computed: {\n bindings() {\n return {\n SortingIconComponent: SortingIcon,\n data: [],\n /**/\n };\n }\n }\n}\n```\n\n#### Sorting Index Icon\n\nWhen sorting multiple columns, VueDataTable will display an icon with a index\nindicating which column has the priority in the sorting process.\n\n```html\n\n```\n\nIf we want to add our own component for this, we can register it just like we\ndid before.\n\n```javascript\nimport SortingIndex from \"./path/to/SortingIndex.vue\";\n\nexport default {\n computed: {\n bindings() {\n return {\n SortingIndexComponent: SortingIndex,\n data: [],\n /**/\n };\n }\n }\n};\n```\n\nIn our `SortingIndex` component, we must have a `index` property, which\ncorrespondent to the index of the column in the sorting process.\n\n```javascript\nexport default {\n name: \"SortingIndex\",\n props: {\n index: {\n type: Number,\n required: true\n }\n }\n};\n```\n\n## License\n\nDo whatever you want with the code of this repository. Really.\n\n## Versioning\n\nThis project uses [SemVer](http://semver.org/).\n\n## Contributing\n\nPull requests are welcome.\n\n## Author\n\n- **André Souza Abreu** - [Github](https://github.com/AndreSouzaAbreu)\n","readmeFilename":"README.md"}