{"id":15699087,"url":"https://github.com/golubkovden/vue-table-js","last_synced_at":"2025-03-12T01:38:11.442Z","repository":{"id":57396658,"uuid":"177216073","full_name":"golubkovden/vue-table-js","owner":"golubkovden","description":"Vue table component without any css :ghost:","archived":true,"fork":false,"pushed_at":"2019-09-18T13:11:17.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T08:03:16.375Z","etag":null,"topics":["component","multilevel","table","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/golubkovden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-22T22:18:34.000Z","updated_at":"2024-10-16T13:36:50.000Z","dependencies_parsed_at":"2022-09-13T12:23:44.147Z","dependency_job_id":null,"html_url":"https://github.com/golubkovden/vue-table-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golubkovden%2Fvue-table-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golubkovden%2Fvue-table-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golubkovden%2Fvue-table-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golubkovden%2Fvue-table-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/golubkovden","download_url":"https://codeload.github.com/golubkovden/vue-table-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243141268,"owners_count":20242815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","multilevel","table","vue"],"created_at":"2024-10-03T19:38:14.742Z","updated_at":"2025-03-12T01:38:11.169Z","avatar_url":"https://github.com/golubkovden.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Installation\n\n``` bash\nnpm install vue-table-js --save\n```\n\n# Hello world\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv id=\"app\"\u003e\n    \u003cvue-elastic-table :columns=\"columns\" :data=\"data\"\u003e\u003c/vue-elastic-table\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c!-- import Vue before Element --\u003e\n\u003cscript src=\"https://unpkg.com/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003c!-- import JavaScript --\u003e\n\u003cscript src=\"https://unpkg.com/vue-table-js/dist/vue-table-js.iife.js\"\u003e\u003c/script\u003e\n\u003c!-- Boot Vue instance --\u003e\n\u003cscript\u003e\n    new Vue({\n        el: '#app',\n        components: { VueTableJs },\n        data: {\n            columns: ['id', 'name'],\n            data: [\n                {id: 1, name: 'John'},\n                {id: 2, name: 'Mike'},\n            ],\n        },\n    });\n\u003c/script\u003e\n\u003c/html\u003e\n```\n\n# Component props\n\n## Columns \n* type: `String|Object` (see [Columns definition](#columns-definition))\n* required\n\n## Data \n* type: `Array\u003cObject\u003e`\n* default: `[]`\n\n## RowClass\n* type: `String|Function`\n* default: `undefined`\n\nWe can pass a string to `v-bind:row-class` to dynamically apply table row with specified class.\nIf you would like to add custom logic, you can do it with function, which return value compatible with \n[vue class bindings] types.\n\n```javascript\nfunction fn(item, index) {\n  // item - current element in an array of data props\n  // index  - index of element\n  return ['foo', 'bar'];\n}\n```\n\n## MultipleSorting\n* type: `Boolean`\n* default: `false`\n\n# #Columns definition\n\n## key\n* type: `String`\n* default: `undefined`\n\nKey of the data to be display. In multilevel headers you can leave the field `undefined` to combine different keys \nin one table column.  \n```javascript\nconst column = {\n    title: 'Foo',\n    children: [\n        'id', \n        'name'\n    ]\n}\n```\n\n## title \n* type: `String|Function|Object`\n* default: `undefined`\n\nHere you can define what will be rendered inside table header cell. Otherwise `key` option will be used. Using this \noption as `function` is useful with i18n. Also you can use [vue components].\n\n\u003e If you are using [functional component] you **must** provide v-bind and v-on by yourself\n\n``` html \n\u003ctemplate functional\u003e\n    \u003cth v-bind=\"data.attrs\" v-on=\"listeners\"\u003eCustom table header\u003c/th\u003e\n\u003c/template\u003e\n```\n\n## #component\n* type: `String|Object`\n* default: `undefined`\n\nThe vue component that will be used for display data in table data cell.\n\n```vue\n\u003ctemplate\u003e\n    \u003ctd\u003e\n      \u003cspan class=\"foo bar\"\u003e{{ data }}\u003c/span\u003e\n    \u003c/td\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        props: {\n            // The data of the selected by key path in current row\n            data: {\n                required: true,\n            },\n            // Other props available to be passed see in props below\n        }\n    }\n\u003c/script\u003e\n```\n\n## #sortable\n* type: `boolean|string`\n* default: `false`\n\nDefine is a column are sortable. \nUsing as `string` allows you override default behavior (full path of keys), see [events](#events)\n\nAppends to table header cell classes `sortable`, `desc` or `asc` \n\n## props\n* type: `Object|Function`\n* default: `undefined`\n\nAdditional props passed into [component](#component)\n\n## transform\n* type `Function|Array\u003cFunction\u003e`,\n* default: `undefined`\n\n## children\n* type: `Array\u003cColumn\u003e`\n* default: `undefined`\n\nSub columns\n\n``` js\n{\n    key: 'geo',\n    title: 'Geolocation',\n    children: [\n        {key: 'lat', title: 'Latitude'},\n        {key: 'lng', title: 'Longitude'},\n    ],\n},\n```\n\n# #Events\n\n## sorted\nEvent fired when user clicked on [`sorted` column](#sortable). Example of incoming payload of event\n\n```\n[\n    {column: 'id', direction: 'asc'},\n    // if using multiple-sorting option \n    {column: 'name', direction: 'desc'},\n    // if sortable option in column definition equals {..., sortable: 'my-custom-field', ...}\n    {column: 'my-custom-field', direction: 'asc'},\n]\n```\n\n\n[vue class bindings]: https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes\n[vue components]: https://vuejs.org/v2/guide/components.html\n[functional component]: https://vuejs.org/v2/guide/render-function.html#Functional-Components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolubkovden%2Fvue-table-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgolubkovden%2Fvue-table-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolubkovden%2Fvue-table-js/lists"}