[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8846":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},8846,"vue-table","ratiw\u002Fvue-table","ratiw","data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable\u002Fextensible pagination component.","",null,"Vue",1825,295,70,62,0,55.41,"MIT License",false,"master",true,[23,24,25,26],"component","datatable","pagination-components","vue","2026-06-12 04:00:41","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvuetable.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvuetable)\r\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Fvuetable.svg?maxAge=2592000)]()\r\n\r\n----\r\n\r\n## Please Note!\r\n\r\nThis is the previous version that works with Vue 1.x. The most up-to-date version is the [Vuetable-2](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvuetable-2). If you like it, please *star* the [Vuetable-2 repo](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvuetable-2) instead, or make a small [donation](https:\u002F\u002Fwww.paypal.me\u002Fratiw) to support it.\r\n\r\n### This version is *\"no longer supported\"* as I do not have time to maintain different version.\r\n\r\n----\r\n\r\nvuetable - data table simplify!\r\n========\r\n\r\n- No need to render the table yourself\r\n- One simple `vuetable` tag\r\n- Display data retrieved from server with sort options\r\n- Support multi-column sorting (v1.2.0) by @balping\r\n- Pagination component included, swap-able and extensible\r\n- Define fields to map your JSON data structure\r\n- Define row actions and capture the click event to do whatever you want\r\n- Field display customizable via callback function inside Vue.js instance\r\n- Programmatically show\u002Fhide any field via reactivity of fields definition\r\n- Use your favorite CSS framework classes to nicely format your table and displayed data\r\n- Events to allow control from Vue.js instance programmatically\r\n- Capture events from `vuetable` to manipulate your table and your data\r\n- Should work with any pre-defined JSON data structure\r\n- Should work with any CSS Framework, e.g. Semantic UI, Twitter's Bootstrap\r\n- Optional detail row to display additional data (v.1.2.0)\r\n\r\n---\r\n## vuetable is only working for Vue 1.x, vuetable-2 is for Vue 2.x\r\nIf you're looking for the version that's working with Vue 2.x, please go to [`vuetable-2`](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvuetable-2) repo. However, I still have no time to work on the documentation. But if you're familiar enough with `vuetable`, it shouldn't be any much different. Look at the [what's changed](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvuetable-2\u002Fblob\u002Fmaster\u002Fchanges.md) for info on changes from version 1 and the [upgrade guide](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvuetable-2\u002Fblob\u002Fmaster\u002Fupgrade-guide.md) on how you could upgrade from version 1.\r\n\r\n---\r\n\r\n## Note on vue-resource version\r\nvuetable internally uses vue-resource to request data from the `api-url`. Prior to v1.5.3, vuetable uses vue-resource v0.7.4 and it retrieves the returned data from `response.data` object. However, since [v0.9.0](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-resource\u002Freleases\u002Ftag\u002F0.9.0) the `response.data` has been renamed to `response.body`. vuetable v1.5.3 onward has been updated to use vue-resource v1.0.2.\r\n\r\nThis will cause problem with vuetable to display no data because the expected object key is no longer existed and some other related problems as discussed in [#100](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fissues\u002F100).\r\n\r\n**If you're using vue-resource in your project and the version is 0.9+, please upgrade to use vuetable v1.5.3.**\r\n\r\n## Breaking Changes\r\n#### v1.5.0\r\n  - deprecated props\r\n      + `detail-row-callback`: use `row-detail-component` instead\r\n\r\n#### v1.3.0\r\n  - deprecated props \r\n      - `paginateConfig`: use `paginateConfigCallback` instead\r\n      - `detail-row`: use `detail-row-callback` instead\r\n\r\n\r\n#### v1.2.0\r\n-  `sort-order` option type was changed from `Object` to `Array` to support `multi-sort`, therefore it should be declared as array. [#36](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fpull\u002F36)\r\n\r\n    ```\r\n    \u003Cvuetable \r\n      \u002F\u002F...\r\n      :sort-order=\"[{ field: 'name', direction: 'asc' }]\"\r\n    >\u003C\u002Fvuetable>\r\n    ```\r\n\r\n---\r\n\r\n##Live Demo\r\n- [JSON data structure](http:\u002F\u002Fvuetable.ratiw.net\u002Fapi\u002Fusers)\r\n- [Semantic UI example](http:\u002F\u002Fvuetable.ratiw.net\u002Fexamples\u002Fsemantic.html)\r\n- [Bootstrap UI example](http:\u002F\u002Fvuetable.ratiw.net\u002Fexamples\u002Fbootstrap.html)\r\n\r\n---\r\n\r\n## What is `vuetable`?\r\n`vuetable` is a Vue.js component that will automatically request (JSON) data\r\nfrom the server and display them nicely in html table with swappable\u002Fextensible\r\npagination sub-component. You can also add buttons to each row and hook an event\r\nto it\r\n\r\n![image](https:\u002F\u002Fi.imgsafe.org\u002Fd46e5e1.gif)\r\n\r\n> Please note that all the examples show in here are styling using Semantic UI CSS Framework,\r\n> but `vuetable` should be able to work with any CSS framwork including Twitter's Bootstrap.\r\n> Please read through and see more info [below](#bootstrap).\r\n\r\nYou do this:\r\n```html\r\n    \u003Cdiv id=\"app\" class=\"ui vertical stripe segment\">\r\n        \u003Cdiv class=\"ui container\">\r\n            \u003Cdiv id=\"content\" class=\"ui basic segment\">\r\n                \u003Ch3 class=\"ui header\">List of Users\u003C\u002Fh3>\r\n                \u003Cvuetable\r\n                    api-url=\"http:\u002F\u002Fexample.app:8000\u002Fapi\u002Fusers\"\r\n                    table-wrapper=\"#content\"\r\n                    :fields=\"columns\"\r\n                    :item-actions=\"itemActions\"\r\n                >\u003C\u002Fvuetable>\r\n            \u003C\u002Fdiv>\r\n        \u003C\u002Fdiv>\r\n    \u003C\u002Fdiv>\r\n```\r\n\r\n```javascript\r\n\t\u003Cscript>\r\n\t    new Vue({\r\n\t        el: '#app',\r\n\t        data: {\r\n\t            columns: [\r\n\t                'name',\r\n\t                'nickname',\r\n\t                'email',\r\n\t                'birthdate',\r\n\t                'gender',\r\n\t                '__actions'\r\n\t\t\t\t],\r\n\t            itemActions: [\r\n\t                { name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },\r\n\t                { name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},\r\n\t                { name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }\r\n\t            ]\r\n\t        },\r\n\t        methods: {\r\n\t            viewProfile: function(id) {\r\n\t                console.log('view profile with id:', id)\r\n\t            }\r\n\t        },\r\n\t        events: {\r\n\t            'vuetable:action': function(action, data) {\r\n\t                console.log('vuetable:action', action, data)\r\n\t                if (action == 'view-item') {\r\n\t                    this.viewProfile(data.id)\r\n\t                }\r\n\t            },\r\n\t            'vuetable:load-error': function(response) {\r\n\t                console.log('Load Error: ', response)\r\n\t            }\r\n\t        }\r\n        })\r\n\t\u003C\u002Fscript>\r\n```\r\n\r\nAnd you get this!\r\n![image](https:\u002F\u002Fi.imgsafe.org\u002Faf08442.jpg)\r\n\r\nSince I'm mainly using [Semantic UI](http:\u002F\u002Fsemantic-ui.com) as my default CSS Framework, all the css\r\nstyles in `vuetable` are based on Semantic UI. If you're using Twitter's [Bootstrap](http:\u002F\u002Fgetbootstrap.com)\r\ncss framework, please see [documentation in the Wiki pages](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fwiki\u002FUsing-%60vuetable%60-with-Twitter's-Bootstrap).\r\n\r\n## Usage\r\n\r\n### Javascript\r\n```javascript\r\n\u002F\u002Fvue-table dependencies (vue and vue-resource)\r\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fvue\u002F1.0.28\u002Fvue.js\">\u003C\u002Fscript>\r\n\r\n\u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fvue-resource\u002F1.3.4\u002Fvue-resource.common.js\">\u003C\u002Fscript>\r\n\r\n\u003Cscript type=\"text\u002Fjavascript\" src=\"http:\u002F\u002Fcdn.jsdelivr.net\u002Fvue.table\u002F1.5.3\u002Fvue-table.min.js\">\u003C\u002Fscript>\r\n\u002F\u002For\r\n\u003Cscript type=\"text\u002Fjavascript\" src=\"http:\u002F\u002Fcdn.jsdelivr.net\u002Fvue.table\u002F1.5.3\u002Fvue-table.js\">\u003C\u002Fscript>\r\n```\r\n\r\n### Bower\r\n\r\n```\r\n$ bower install vuetable\r\n```\r\n\r\n### NPM\r\n\r\n```\r\n$ npm install vuetable\r\n```\r\n\r\n### Vueify version for Browserify and Webpack\r\n\r\nJust `import` or `require` like so,\r\n\r\n```javascript\r\n\u002F\u002F\r\n\u002F\u002F firstly, require or import vue and vue-resource\r\n\u002F\u002F\r\nvar Vue = require('vue');\r\nvar VueResource = require('vue-resource');\r\nVue.use(VueResource);\r\n\r\n\u002F\u002F\r\n\u002F\u002F secondly, require or import Vuetable and optional VuetablePagination component\r\n\u002F\u002F\r\nimport Vuetable from 'vuetable\u002Fsrc\u002Fcomponents\u002FVuetable.vue';\r\nimport VuetablePagination from 'vuetable\u002Fsrc\u002Fcomponents\u002FVuetablePagination.vue';\r\nimport VuetablePaginationDropdown from 'vuetable\u002Fsrc\u002Fcomponents\u002FVuetablePaginationDropdown.vue';\r\n\r\n\u002F\u002F\r\n\u002F\u002F thirdly, register components to Vue\r\n\u002F\u002F\r\nVue.component('vuetable', Vuetable);\r\nVue.component('vuetable-pagination', VuetablePagination)\r\nVue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)\r\n\r\n```\r\nYou can combine the second and third steps into one if you like.\r\n\r\nYou need to explicitly register the pagination components using `Vue.component()` (instead of just declaring them through the `components:` section); otherwise, the pagination component will not work or swappable or extensible. I *guess* this is because it is embedded inside `vuetable` component.\r\n\r\n### Direct include\r\n\r\nJust import the `vue-table.js` after `vue.js` and `vue-resource.js` library in your page like so.\r\n```html\r\n\t\u003Cscript src=\"js\u002Fvue.js\">\u003C\u002Fscript>\r\n\t\u003Cscript src=\"js\u002Fvue-resource.js\">\u003C\u002Fscript>\r\n\t\u003Cscript src=\"js\u002Fvue-table.js\">\u003C\u002Fscript>\r\n```\r\n\r\nThen, reference the vuetable via `\u003Cvuetable>` tag as following\r\n\r\n```html\r\n\t\u003Cdiv id=\"app\">\r\n\t    \u003Cvuetable\r\n\t        api-url=\"\u002Fapi\u002Fusers\"\r\n\t        :fields=\"columns\"\r\n\t    >\u003C\u002Fvuetable>\r\n    \u003C\u002Fdiv>\r\n\r\n\t\u003Cscript>\r\n\t\tnew Vue({\r\n\t\t\tel: '#app',\r\n\t\t\tdata: {\r\n\t\t\t\tcolumns: [\r\n\t\t\t\t\t'firstname',\r\n\t\t\t\t\t'lastname',\r\n\t\t\t\t\t'nickname',\r\n\t\t\t\t\t'birthdate',\r\n\t\t\t\t\t'group.name_en',\r\n\t\t\t\t\t'gender',\r\n\t\t\t\t\t'last_login',\r\n\t\t\t\t\t'__actions'\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t})\r\n\t\u003C\u002Fscript>\r\n```\r\n- `api-url` is the url of the api that `vuetable` should request data from.\r\nThe returned data must be in the form of JSON formatted with at least the number of fields\r\ndefined in `fields` property.\r\n- `fields` is the fields mapping that will be used to display data in the table.\r\nYou can provide only the name of the fields to be used. But if you would like to get\r\nthe true power of `vuetable`, you must provide some more information.\r\nPlease see [Field Definition](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fwiki\u002FFields-Definition)\r\nsection for more detail.\r\n\r\nFor more detail, please see [documentation in the Wiki pages](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fwiki).\r\n\r\n\u003Ca id=\"browser_compat\">\u003C\u002Fa>\r\n## Browser Compatability\r\nAs I use **Chrome** almost exclusively, it is gaurantee to work on this browser and it SHOULD also work for other **WebKit** based browsers as well. But I can't really gaurantee that since I don't use them regularly. \r\n \r\nHowever, `vuetable` will NOT WORK on **Internet Explorer** (even IE11) due to the use of `\u003Ctemplate>` tag inside `\u003Ctable>` according to [this](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fissues\u002F25#issuecomment-220920656). In order to make it work with CSS framework table styling, I have to preserve the use of `\u003Ctable>` and `\u003Ctemplate>` tag inside it.\r\n \r\nIt seems to work just fine in **Microsoft Edge** though. Anyway, if you find that it does not work on any other browser, you can let me know by posting in the [Issues](https:\u002F\u002Fgithub.com\u002Fratiw\u002Fvue-table\u002Fissues). Or if you are able to make it work on those browser, please let me know or create a pull request.\r\n \r\n\u003Ca id=\"contribute\">\u003C\u002Fa>\r\n## Contributions\r\nAny contribution to the code (via pull request would be nice) or any part of the documentation (the Wiki always need some love and care) and any idea and\u002For suggestion are very welcome.\r\n \r\nHowever, please do not feel bad if your pull requests or contributions do not get merged or implemented into `vuetable`. \r\n \r\nYour contributions can, not only help make `vuetable` better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.\r\n\r\n### Building\r\n\r\nRun `npm install`\r\n\r\nThen make sure, you have installed browserify:\r\n\r\n```\r\n# npm install browserify -g\r\n```\r\n\r\nYou might need root access for running the above command.\r\n\r\nThen you can simply run the build script included in the root folder:\r\n\r\n```\r\n$ .\u002Fbuild.sh\r\n```\r\n\r\nThis will compile the vue components in the `src` directory to one file in the `dist` folder.\r\n\r\nYou might want to get a minified version, in this case run this:\r\n\r\n```\r\n$ .\u002Fbuild.sh production\r\n```\r\n\r\nFor developement it's useful when it's not needed to recompile manually each time you make a change. If you want this convenience first install watchify globally:\r\n\r\n```\r\n# npm install watchify -g\r\n```\r\n\r\nthen run\r\n\r\n```\r\n$ .\u002Fbuild.sh watch\r\n```\r\n\r\nNow each time you make a change, the source will be recompiled automatically.\r\n\r\n\r\n\r\n\u003Ca id=\"license\">\u003C\u002Fa>\r\n## License\r\n`vuetable` is open-sourced software licensed under the [MIT license](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT).\r\n","vuetable 是一个基于 Vue.js 的组件，用于从服务器自动请求 JSON 数据并以美观的 HTML 表格形式展示。该组件支持多列排序、可替换和扩展的分页功能，并且可以自定义字段映射以适应不同的 JSON 数据结构。此外，它还允许用户定义行操作及事件处理，通过回调函数自定义字段显示内容，并能响应式地控制字段的显示与隐藏。vuetable 适用于需要在 Vue.js 项目中快速实现数据表格展示的场景，尤其是当后端提供 RESTful API 服务时。注意，此版本仅兼容 Vue 1.x，对于 Vue 2.x 用户推荐使用 vuetable-2。",2,"2026-06-11 03:19:59","top_language"]