# vue-data-grids > Vue.js data-tables Latest version **1.0.6** (published 2022-01-20) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-data-grids pnpm add vue-data-grids yarn add vue-data-grids bun add vue-data-grids ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.6 | | Published | 2022-01-20 | | First published | 2022-01-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=12 | | Dependencies | 0 | | Unpacked size | 1.2 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Mohamed Kamal | | Maintainers | mkchemist | | Keywords | data-tables, datatables, dataTables, vue-data-tables, data-grids, vue-data-grids | ## Links - npm: https://www.npmjs.com/package/vue-data-grids - Repository: https://github.com/mkchemist/vue-data-grids - Homepage: https://github.com/mkchemist/vue-data-grids#readme - Issues: https://github.com/mkchemist/vue-data-grids/issues - npm.io page: https://npm.io/package/vue-data-grids ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.6 (latest) — 2022-01-20 - 1.0.5 — 2022-01-20 - 1.0.4 — 2022-01-19 - 1.0.3 — 2022-01-16 - 1.0.2 — 2022-01-12 - 1.0.1 — 2022-01-12 - 1.0.0 — 2022-01-08 ## README # Vue Data Grids > Simple data Data Grids for **Vue.js** **_version 2_** > , this package require **Bootstrap** framework for styling table. ## Table of contents: - [Introduction](#introduction) - [Get started](#install) - [Quick start](#quick-start) - [API OPTIONS](#api-options) - [Slots](#table-slots) - [Buttons slot](#buttons-slot) - [Table header and data slots](#table-header-and-data-slots) - [Server Side Mode](#server-side-mode) - [Query Params](#query-params) - [Send Update Signal](#send-update-signal) - [Author](#author) ### Introduction --------------------------- Managing tables in [Vue.Js](#https://vuejs.org/) can be a cumbersome especially in case of large data set, despite of existences of a lot of awesome ready to use solution **[Awesome Vue.js](https://github.com/vuejs/awesome-vue)** but some of theme contain a lot of complex apis and need a boilerplate to run and get expected result, in this try , i did my best to make it easy as possible to get started with your tables either in **client side** mode or **server side mode**, i hope you enjoy it. ### Get started [↑ back to table of contents](#table-of-contents) ```npm npm i --save-dev vue-data-grids ``` ### Quick start [↑ back to table of contents](#table-of-contents) - Loading component file In browser ```html Vue Data Grids ``` in single file component ```js ``` - adding component to your html template ```html ``` ## API options [↑ back to table of contents](#table-of-contents) ```js options = { /** * is table in server side mode * * default :false */ serverSide: Boolean, /** * ajax configurations * */ ajax: { /** * api url */ url: String, /** * function to return * total rows count * to be used in pagination * * e.g * data => data.total * * default: 0 */ total: Function, /** * headers to be sent with * every api request * * * default : {} */ headers: Object, /** * query params to be sent * with every api request * * default : {} */ params: Object, /** * to load data one time only * this option is used when load all data in one time * to apply pagination, sort and search in client side * without fetching api every time you update your table * * default false */ once: Boolean }, /** * table columns */ columns: [ { /** * table column title * */ title:String, /** * table column data * * e.g * string => 'name' * function => (row) => row.name */ data: String|Function, /** * is column searchable * */ searchable: Boolean, /** * is column sortable * */ sortable: Boolean } ], /** * table rows * * default: [] */ rows: Array, /** * table result per page * * default: 10 */ rpp: Number, /** * table result per page options * * default: [10,20,50,100] */ rpp_list:Array, /** * is table responsive * */ responsive: Boolean, /** * sort data by * * default : null */ sortBy: String, /** * add checkbox to table * * default:false */ checkbox:Boolean, /** * callback invoked when * select row * * default: null */ onSelectRows:Function, /** * error message in server side mode * * default : Oops! something went wrong */ errorMessage: String, /** * on Query Update * * callback that invoked when table updated * it will pass a config parameter to the given function * config parameter : { * query: table query, * ajax: ajax configuration * } */ onQueryUpdate: Function } ``` ## Table Slots [↑ back to table of contents](#table-of-contents) #### Buttons slot [↑ back to table of contents](#table-of-contents) --- ```html ``` #### Table Header And Data slots [↑ back to table of contents](#table-of-contents) --- How slot work ? Table headers slot **_all white spaces in column title replaced by \_ and_**. ``` "My Name Is" => "my_name_is" ``` > if you want to add slot in table headers simply add suffix **_\_col_** to end of name. ```js let columns = [ { title: "Email", data: "email" }, { title: "User Full Name", data:"user.full_name" } ] // table header slot // table data slot ``` ## Server Side Mode [↑ back to table of contents](#table-of-contents) --- when using serve side mode , vue data grids will send query parameters with every request to api . ### Query params : [↑ back to table of contents](#table-of-contents) ```ts const query_params = { /** * page number * * @var number [default 1] */ page: 1, /** * result per page * * @var number [default 10] */ rpp: 10, /** * sort column name * * @var string [default null] */ sort_by: "name", /** * sort direction * directions [asc, desc] * * @var string [default asc] * */ sort_dir: "asc", /** * search keyword * * @var string [default null] */ search: "something", }; ``` ### Send update signal [↑ back to table of contents](#table-of-contents) > Incase of doing any action and want to reload table, simply add ref to vue-data-grids component and then call > method **sendUpdateSignal** #### Example ```html ``` ### Author [↑ back to table of contents](#table-of-contents) Mohamed Kamal ```PHP Laravel developer in love with JavaScript especially Vue.js, React.js and Electron.js``` [Email](mailto:m.k_chemist@yahoo.com) , [Twitter](https://twitter.com/mk_chemist) , [LinkedIn](https://www.linkedin.com/in/mohamed-kamal-032258191/) --- _Source: https://npm.io/package/vue-data-grids · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._