{"id":22490323,"url":"https://github.com/borisflesch/vue-good-table-next","last_synced_at":"2025-08-02T22:32:53.978Z","repository":{"id":39916994,"uuid":"409377765","full_name":"borisflesch/vue-good-table-next","owner":"borisflesch","description":"An easy to use powerful data table for Vue 3.x with advanced customizations including sorting, column filtering, pagination, grouping etc. Based on Vue-good-table (Vue 2.x).","archived":false,"fork":true,"pushed_at":"2024-09-10T21:44:06.000Z","size":48678,"stargazers_count":218,"open_issues_count":1,"forks_count":41,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-06T02:09:42.801Z","etag":null,"topics":["data","datatable","table","vue","vue3","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"https://borisflesch.github.io/vue-good-table-next/","language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"xaksis/vue-good-table","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/borisflesch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-22T22:48:37.000Z","updated_at":"2024-12-04T02:08:59.000Z","dependencies_parsed_at":"2023-02-14T00:46:24.190Z","dependency_job_id":null,"html_url":"https://github.com/borisflesch/vue-good-table-next","commit_stats":null,"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisflesch%2Fvue-good-table-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisflesch%2Fvue-good-table-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisflesch%2Fvue-good-table-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/borisflesch%2Fvue-good-table-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/borisflesch","download_url":"https://codeload.github.com/borisflesch/vue-good-table-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501076,"owners_count":17930187,"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":["data","datatable","table","vue","vue3","vuejs","vuejs3"],"created_at":"2024-12-06T17:22:03.705Z","updated_at":"2024-12-06T17:24:47.759Z","avatar_url":"https://github.com/borisflesch.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Vue-good-table-next\n\n| :warning: WARNING          |\n|:---------------------------|\n| This project is a port of Vue-good-table for Vue 3.x. The current version is stable enough to start developing new projects but work is still in progress and changes could be made in the short-term. Thus the project is not yet intended to be used in a production environment. |\n\n[![npm](https://img.shields.io/npm/dm/vue-good-table-next.svg?style=flat-square)](https://www.npmjs.com/package/vue-good-table-next)\n[![npm](https://img.shields.io/github/package-json/v/borisflesch/vue-good-table.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/releases)\n[![npm](https://img.shields.io/github/license/borisflesch/vue-good-table-next.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/master/LICENSE)\n[![](https://data.jsdelivr.com/v1/package/npm/vue-good-table-next/badge)](https://www.jsdelivr.com/package/npm/vue-good-table-next)\n[![Twitter Follow](https://img.shields.io/twitter/follow/borisflesch.svg?label=Follow\u0026style=social)](https://twitter.com/borisflesch)\n\nAn easy to use, clean and powerful data table for Vue with essential features like sorting, column filtering, pagination and much more - [borisflesch.github.io/vue-good-table-next/](https://borisflesch.github.io/vue-good-table-next/)\n\n\u003c!-- \n### Basic Table\n![Basic Screenshot](README/images/vgt-table.regular.png) --\u003e\n\n\u003c!-- ## Recipes\nSome example recipes for inspiration \n[vue-good-table Recipes](https://github.com/xaksis/vue-good-table/wiki/Vue-good-table-Recipes-(vue-good-table-2.x)) --\u003e\n\u003c!-- \n## Table of contents --\u003e\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\u003c!-- \n- [Getting Started](#getting-started)\n  - [Installing](#installing)\n  - [Example Usage](#example-usage)\n- [Configuration](#configuration)\n  - [Component Options](#component-options)\n    - [Table](#table)\n    - [Sort Options](#sort-options)\n    - [Pagination Options](#pagination-options)\n    - [Search Options](#search-options)\n    - [Checkbox Table](#checkbox-table)\n    - [Grouped Row Options](#grouped-row-options)\n    - [Style/Theme](#styletheme)\n  - [Column Options](#column-options)\n    - [Column filter option in-depth](#column-filter-option-in-depth)\n  - [Table Events](#table-events)\n    - [@on-row-click](#on-row-click)\n    - [@on-cell-click](#on-cell-click)\n    - [@on-row-mouseenter](#on-row-mouseenter)\n    - [@on-row-mouseleave](#on-row-mouseleave)\n    - [@on-search](#on-search)\n    - [@on-page-change](#on-page-change)\n    - [@on-per-page-change](#on-per-page-change)\n    - [@on-sort-change](#on-sort-change)\n    - [@on-select-all](#on-select-all)\n    - [@on-column-filter](#on-column-filter)\n    - [@on-selected-rows-change](#on-selected-rows-change)\n  - [Style Options](#style-options)\n    - [.vgt-table](#vgt-table)\n    - [.vgt-table .stripped](#vgt-table-stripped)\n    - [.vgt-table .condensed](#vgt-table-condensed)\n- [Themes](#themes)\n  - [default](#default)\n  - [nocturnal `theme='nocturnal'`](#nocturnal-themenocturnal)\n  - [black-rhino `theme='black-rhino'`](#black-rhino-themeblack-rhino)\n- [Advanced Customization](#advanced-customization)\n  - [Custom row template](#custom-row-template)\n  - [Custom column headers](#custom-column-headers)\n  - [Grouped Rows](#grouped-rows)\n  - [Remote Mode](#remote-mode)\n  - [Table Actions Slot](#table-actions-slot)\n  - [Empty state slot](#empty-state-slot)\n- [Authors](#authors)\n- [License](#license) --\u003e\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installing\n\nInstall with npm:\n```bash\nnpm install vue-good-table-next\n```\n\nInstall with npm:\n```bash\nyarn add vue-good-table-next\n```\n\nImport globally in app:\n\n```javascript\nimport VueGoodTablePlugin from 'vue-good-table-next';\n\n// import the styles \nimport 'vue-good-table-next/dist/vue-good-table-next.css'\n\nVue.use(VueGoodTablePlugin);\n```\n\nImport into your component\n```js\nimport { VueGoodTable } from 'vue-good-table-next';\n\n// add to component\ncomponents: {\n  VueGoodTable,\n}\n```\n\nImport into your component using Typescript\n```typescript\n// add to component\ncomponents: {\n  'vue-good-table': require('vue-good-table-next').VueGoodTable,\n}\n```\n\n\n##### Example table with grouped rows and column filters\n![Advanced Screenshot](README/images/vgt-table.advanced.png)\n\n## Features\n* [Table Search](https://borisflesch.github.io/vue-good-table-next/guide/configuration/search-options.html)\n* [Sorting](https://borisflesch.github.io/vue-good-table-next/guide/configuration/sort-options.html)\n* [Column Filtering](https://borisflesch.github.io/vue-good-table-next/guide/configuration/column-filter-options.html#filteroptions)\n* [Pagination](https://borisflesch.github.io/vue-good-table-next/guide/configuration/pagination-options.html)\n* [Highly Customizable](https://borisflesch.github.io/vue-good-table-next/guide/advanced/#custom-row-template)\n* [Checkbox Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/checkbox-table.html)\n* [Grouped Rows Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/grouped-table.html)\n* [Server Powered Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/remote-workflow.html#why-remote-mode)\n* [Customizable Style and Themes](https://borisflesch.github.io/vue-good-table-next/guide/style-configuration/)\n\n\u003c!-- ## Upgrade Guide\nHey there! coming from 1.x? find the [upgrade guide here](https://github.com/xaksis/vue-good-table/wiki/Guide-to-upgrade-from-1.x-to-v2.0) --\u003e\n\n\u003c!-- \n### Example Usage\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-good-table\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :search-options=\"{\n        enabled: true,\n      }\"\n      :pagination-options=\"{\n        enabled: true,\n        perPage: 5,\n      }\"\n      styleClass=\"vgt-table striped bordered\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'my-component',\n  data(){\n    return {\n      columns: [\n        {\n          label: 'Name',\n          field: 'name',\n          filterOptions: {\n            enabled: true,\n          },\n        },\n        {\n          label: 'Age',\n          field: 'age',\n          type: 'number',\n        },\n        {\n          label: 'Created On',\n          field: 'createdAt',\n          type: 'date',\n          dateInputFormat: 'YYYY-MM-DD',\n          dateOutputFormat: 'MMM Do YY',\n        },\n        {\n          label: 'Percent',\n          field: 'score',\n          type: 'percentage',\n        },\n      ],\n      rows: [\n        { id:1, name:\"John\", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },\n        { id:2, name:\"Jane\", age: 24, createdAt: '2011-10-31', score: 0.03343 },\n        { id:3, name:\"Susan\", age: 16, createdAt: '2011-10-30', score: 0.03343 },\n        { id:4, name:\"Chris\", age: 55, createdAt: '2011-10-11', score: 0.03343 },\n        { id:5, name:\"Dan\", age: 40, createdAt: '2011-10-21', score: 0.03343 },\n        { id:6, name:\"John\", age: 20, createdAt: '2011-10-31', score: 0.03343 },\n        { id:7, name:\"Jane\", age: 24, createdAt: '20111031' },\n        { id:8, name:\"Susan\", age: 16, createdAt: '2013-10-31', score: 0.03343 },\n      ],\n    };\n  },\n};\n\u003c/script\u003e\n``` --\u003e\n\u003c!-- \n## Configuration\n### Component Options\n#### Table\nThese options relate to the table as a whole\n\n##### columns `Array`\n\nArray containing objects that describe table columns. The column object itself can contain many [configurable properties](#column-options).\n```javascript\n[\n    {\n      label: 'Name',\n      field: 'name',\n      filterable: true,\n    }\n    //...\n]\n```\n\n##### rows `Array`\n\nArray containing row objects. Each row object contains data that will be displayed in the table row.\n```javascript\n[\n    {\n      id:1,\n      name:\"John\",\n      age:20\n    },\n    //...\n]\n```\n\u003e for **grouped rows**, you need a nested format. Refer to [Grouped Rows](#grouped-rows) for an example.\n\n##### rtl `Boolean (default: false)`\n\nEnable Right-To-Left layout for the table\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :rtl=\"true\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### lineNumbers `Boolean (default: false)`\nShow line number for each row\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :lineNumbers=\"true\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### mode `String`\nSet mode=`remote` to allow sorting/filtering etc to be powered by server side instead of client side. Setting mode to remote, expects the following workflow:\n\n* pagination, sort, filter, search will emit [Table Events](#table-events) (loading div appears) \n* setup handlers for each event\n* in the handler call backend endpoints with the table params\n* update rows object with the returned response ( the loading div will disappear once you update the rows object)\n\nfor a detailed workflow example check out [The remote mode workflow wiki](https://github.com/xaksis/vue-good-table/wiki/Remote-Mode-Workflow)\n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  mode=\"remote\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n\n#### Sort Options\n---\nSet of options related to table sorting\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n    initialSortBy: {field: 'name', type: 'asc'}\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### sortOptions.enabled `Boolean (default: true)`\nEnable/disable sorting on table as a whole. \n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### sortOptions.initialSortBy `Object`\nAllows specifying a default sort for the table on wakeup\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :sort-options=\"{\n    enabled: true,\n    initialSortBy: {field: 'name', type: 'asc'}\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n```javascript\n// in data\ndefaultSort: {\n  field: 'name',\n  type: 'asc' //asc or desc (default: 'asc')\n}\n```\n\n#### Pagination Options\n---\nA set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPage: 5,\n    position: 'top',\n    perPageDropdown: [3, 7, 9],\n    dropdownAllowAll: false,\n    setCurrentPage: 2,\n    nextLabel: 'next',\n    prevLabel: 'prev',\n    rowsPerPageLabel: 'Rows per page',\n    ofLabel: 'of',\n    allLabel: 'All',\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\nOptions explained below\n##### paginationOptions.enabled `Boolean (default: false)`\nEnable Pagination for table. By default the paginator is created at the bottom of the table.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### paginationOptions.position `String (default: 'bottom')`\nAdd pagination on `'top'` or `'bottom'` (top and bottom) of the table (default position is bottom)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    position: 'top'\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### paginationOptions.perPage `Integer (default: 10)`\nNumber of rows to show per page\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPage: 5\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### paginationOptions.perPageDropdown `Array (default: [10,20,30,40,50])`\nCustomize the dropdown options for the amount of items per page\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPageDropdown: [3, 7, 9]\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### paginationOptions.dropdownAllowAll `Boolean (default: true)`\nenables/disables 'All' in the per page dropdown.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    perPageDropdown: [3, 7, 9],\n    dropdownAllowAll: false,\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### paginationOptions.setCurrentPage `Number`\nset current page programmatically. \n\u003e There's no validation for number of pages so please be careful using this.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    setCurrentPage: 2,\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### pagination label/text options\nyou can change one or more of the texts shown on pagination by overriding the labels in the following way: \n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :paginationOptions=\"{\n    enabled: true,\n    nextLabel: 'next',\n    prevLabel: 'prev',\n    rowsPerPageLabel: 'Rows per page',\n    ofLabel: 'of',\n    allLabel: 'All',\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n#### Search Options\n---\nSet of search related options. These options pertain to the global table search.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    trigger: 'enter',\n    searchFn: mySearchFn,\n    placeholder: 'Search this table',\n    externalQuery: searchQuery\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\nSearch options explained below\n\n##### searchOptions.enabled `Boolean (default: false)`\n\nAllows a single search input for the whole table \n\n\u003eNote: enabling this option disables column filters\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### searchOptions.trigger `String (default: '')`\nAllows you to specify if you want search to trigger on 'enter' event of the input. By default table searches on key-up. \n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    trigger: 'enter'\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### searchOptions.searchFn `Function`\n\nAllows you to specify your own search function for the global search\n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    searchFn: myFunc\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n```javascript\n// in js\nmethods: {\n  myFunc(row, col, cellValue, searchTerm){\n    return cellValue === 'my value';\n  },\n}\n```\n\n##### searchOptions.placeholder `String (default: 'Search Table')`\nText for global search input place holder\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    placeholder: 'Search this table',\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### searchOptions.externalQuery `String`\n\nIf you want to use your own input for searching the table, you can use this property\n\n```html\n\u003cinput type=\"text\" v-model=\"searchTerm\" \u003e\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :searchOptions=\"{\n    enabled: true,\n    externalQuery: searchTerm\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n```javascript\n// and in data\ndata(){\n  return {\n    searchTerm: '',\n    // rows, columns etc...\n  };\n}\n```\n\n#### Checkbox Table\nCreating table with selectable rows (checkboxes) is easier than ever. \n![Checkbox Screenshot](README/images/vgt-table.checkbox.png)\n\n##### selectOptions `Object`\nObject containing select options\n```html\n\u003cvue-good-table\n  @on-select-all=\"allSelected\"\n  @on-selected-rows-change=\"onSelectedRowsChange\"\n  @on-row-click=\"rowSelected\"\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :selectOptions=\"{\n    enabled: true,\n    selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row\n    selectionInfoClass: 'custom-class',\n    selectionText: 'rows selected', // can also accept a function, e.g. n =\u003e `${n} rows selected`\n    clearSelectionText: 'clear',\n    alwaysShowSelectionInfo: false, // always show the row count, even when nothing is selected\n  }\"\u003e\n ```\n\n you can get the selectedRows by listening to the [@on-selected-rows-change](#on-selected-rows-change) event.\n\n\n#### Grouped Row Options\n---\nSometimes you have a hierarchy in table and you want to group rows under subheadings, vue-good-table allows you to do that as well. Following properties relate to row grouping\n\n##### groupOptions `Object`\nObject containing group related options. \n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :group-options=\"{\n    enabled: true,\n    headerPosition: 'bottom' \n  }\"\u003e\n ```\n\u003e rows are formatted differently for grouped tables, refer to [Grouped Rows](#grouped-rows) section.\n\n#### Style/Theme\n---\nStyle options for table\n\n##### styleClass `String (default:  'vgt-table bordered')`\nAllows applying your own classes to table. Other in-built classes: condensed, striped, bordered\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  styleClass=\"vgt-table bordered striped\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n##### rowStyleClass `String or Function`\n\nAllows providing custom styles for rows. It can be a string: 'my-class' or a function.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :rowStyleClass=\"myStyleFn\"\u003e\n\u003c/vue-good-table\u003e\n```\n```javascript\n// in methods\nmyStyleFn(row){ \n  // if row has something return a specific class \n  if(row.fancy) {\n    return 'fancy-class';\n  }\n  return '';\n}\n```      \n\n##### theme `String`\nAllows using other themes. \nIncluded themes: \n* [nocturnal](#nocturnal-themenocturnal)\n* [black-rhino](#black-rhino-themeblack-rhino)\n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  theme=\"nocturnal\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n\n### Column Options\n---\nEach column objects can contain the following configuration options:\n\n\n##### label `String`\nText to put on column header.\n\n```javascript\ncolumns: [\n  { \n    label: 'name'\n  },\n  // ...\n]\n```\n\n##### field `String`\n\nRow object property that this column corresponds to. This can be: \n\n* String \u003ccode\u003eeg: 'name'\u003c/code\u003e - simple row property name\n* String \u003ccode\u003eeg: 'location.lat'\u003c/code\u003e- nested row property name. lets say if the row had a property 'location' which was an object containing 'lat' and 'lon'\n* Function - a function that returns a value to be displayed based on the row object\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: this.fealdFn,\n  },\n  // ...\n]\n// in methods\nfieldFn(rowObj) {\n  return rowObj.name;\n}\n```\n\n##### type `String`\n\ntype of column. default: 'text'. This determines the formatting for the column and filter behavior as well. Possible values:\n* _number_ - right aligned\n* _decimal_ - right aligned, 2 decimal places\n* _percentage_ - expects a decimal like 0.03 and formats it as 3.00%\n* _boolean_ - right aligned\n* _date_ - expects a string representation of date eg `'20170530'`. You should also specify [dateInputFormat](#dateinputformat) and [dateOutputFormat](dateoutputformat)\n\n```javascript\ncolumns: [\n  { \n    label: 'joined On',\n    field: 'createdAt',\n    type: 'date',\n    dateInputFormat: 'YYYY-MM-DD', // expects 2018-03-16\n    dateOutputFormat: 'MMM Do YYYY', // outputs Mar 16th 2018\n  },\n  // ...\n]\n```\n\n##### dateInputFormat `String`\nprovide the format to parse date string\n\n##### dateOutputFormat `String`\nprovide the format for output date\n\n##### sortable `Boolean`\nenable/disable sorting on columns. This property is higher priority than global sortable property\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    sortable: false,\n  },\n  // ...\n]\n```\n\n##### sortFn `Function`\n\ncustom sort function. If you want to supply your own sort function you can use this property.\n\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Name',\n    field: 'name',\n    sortable: true,\n    sortFn: this.sortFn,\n  }\n  //...\n],\n// in methods\nmethods: {\n  sortFn(x, y, col, rowX, rowY) {\n    // x - row1 value for column\n    // y - row2 value for column\n    // col - column being sorted\n    // rowX - row object for row1\n    // rowY - row object for row2\n    return (x \u003c y ? -1 : (x \u003e y ? 1 : 0));\n  }\n}\n```\n\n##### formatFn `Function`\nAllows for custom format of values, \u003ccode\u003efunction(value)\u003c/code\u003e, should return the formatted value to display.\n\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Salary',\n    field: 'salary',\n    sortable: true,\n    formatFn: this.formatFn,\n  }\n  //...\n],\n// in methods\nformatFn: function(value) {\n  return '$' + value;\n}\n```\n\n##### html `Boolean`\nindicates whether this column will require html rendering. \n\u003e The preferred way of creating columns that have html is by [using slots](#custom-row-template)\n```javascript\n// in data\ncolumns: [\n  {\n    label: 'Action',\n    field: 'btn',\n    html: true,\n  }\n  //...\n],\nrows: [\n  {\n    btn: '\u003cbutton\u003eMy Action\u003c/button\u003e',\n    // ...\n  }\n]\n```\n\n##### width `Number`\nprovide a width value for this column\n\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    width: '50px',\n  },\n  // ...\n]\n```\n\n##### hidden `Boolean`\nhide a column\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    hidden: true,\n  },\n  // ...\n]\n```\n\n##### thClass `String`\nprovide custom class(es) to the table header\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    thClass: 'custom-th-class',\n  },\n  // ...\n]\n```\n\n##### tdClass `String`\nprovide custom class(es) to the table cells\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    tdClass: 'text-center',\n  },\n  // ...\n]\n```\n\n##### globalSearchDisabled `Boolean (default: false)`\nif true, this column will be ignored by the global search\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    globalSearchDisabled: true,\n  },\n  // ...\n]\n```\n\n##### filterOptions `Object`\nA collection of filter specific properties. You can find more about these properties in [column filter options section](#column-filter-option-in-depth)\n\n```javascript\ncolumns: [\n  { \n    label: 'name',\n    field: 'user_name',\n    filterOptions: {\n  \t  enabled: true, // enable filter for this column\n      placeholder: 'Filter This Thing', // placeholder for filter input\n      filterValue: 'Jane', // initial populated value for this filter\n      filterDropdownItems: [], // dropdown (with selected values) instead of text input\n      filterFn: this.columnFilterFn, //custom filter function that\n      trigger: 'enter', //only trigger on enter not on keyup \n    },\n  },\n  // ...\n]\n```\n\n#### Column filter option in-depth\n---\nSome filterOption properties need a little more explanation\n\n##### filterDropdownItems `Array of strings or Array of objects`\nallows creating a dropdown for filter as opposed to an input\n\n```javascript\n//array\nfilterDropdownItems: ['Blue', 'Red', 'Yellow']\n//or\nfilterDropdownItems: [  \n  { value: 'n', text: 'Inactive' },  \n  { value: 'y', text: 'Active' },  \n  { value: 'c', text: 'Check' }  \n],\n```\n\n##### filterFn `Function`\nCustom filter, function of two variables: \u003ccode\u003efunction(data, filterString)\u003c/code\u003e, should return true if data matches the filterString, otherwise false\n\n```javascript\nfilterFn: function(data, filterString) {\n  var x = parseInt(filterString)\n  return data \u003e= x - 5 \u0026\u0026 data \u003c= x + 5;\n}\n// would create a filter matching numbers within 5 of the provided value\n```\n\n### Table Events\n\n#### @on-row-click\nevent emitted on table row click\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-click=\"onRowClick\"\u003e\n ```\n ```javascript\n methods: {\n   onRowClick(params) {\n     // params.row - row object \n     // params.pageIndex - index of this row on the current page.\n     // params.selected - if selection is enabled this argument \n     // indicates selected or not\n     // params.event - click event\n   }\n }\n ```\n\n #### @on-cell-click\nevent emitted on table cell click\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-cell-click=\"onCellClick\"\u003e\n ```\n ```javascript\n methods: {\n   onCellClick(params) {\n     // params.row - row object \n     // params.column - column object\n     // params.rowIndex - index of this row on the current page.\n     // params.event - click event\n   }\n }\n ```\n \n #### @on-row-mouseenter\nevent emitted on row mouseenter\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-mouseenter=\"onRowMouseover\"\u003e\n ```\n ```javascript\n methods: {\n   onRowMouseover(params) {\n     // params.row - row object \n     // params.pageIndex - index of this row on the current page.\n   }\n }\n ```\n \n #### @on-row-mouseleave\nevent emitted on table row mouseleave\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-row-mouseleave=\"onRowMouseleave\"\u003e\n ```\n ```javascript\n methods: {\n   onRowMouseleave(row, pageIndex) {\n     // row - row object \n     // pageIndex - index of this row on the current page.\n   }\n }\n ```\n \n#### @on-search\nevent emitted on global search (when global search is enabled)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-search=\"onSearch\"\u003e\n ```\n ```javascript\n methods: {\n   onSearch(params) {\n     // params.searchTerm - term being searched for\n     // params.rowCount - number of rows that match search\n   }\n }\n ```\n \n#### @on-page-change\nevent emitted on pagination page change (when pagination is enabled)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-page-change=\"onPageChange\"\u003e\n ```\n ```javascript\n methods: {\n   onPageChange(params) {\n     // params.currentPage - current page that pagination is at\n     // params.currentPerPage - number of items per page\n     // params.total - total number of items in the table\n   }\n }\n ```\n \n#### @on-per-page-change\nevent emitted on per page dropdown change (when pagination is enabled)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-per-page-change=\"onPageChange\"\u003e\n```\n```javascript\nmethods: {\n  onPageChange(params) {\n    // params.currentPage - current page that pagination is at\n    // params.currentPerPage - number of items per page\n    // params.total - total number of items in the table\n  }\n}\n```\n\n#### @on-sort-change\nevent emitted on sort change\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-sort-change=\"onSortChange\"\u003e\n```\n```javascript\nmethods: {\n  onSortChange(params) {\n    // params.sortType - ascending or descending\n    // params.columnIndex - index of column being sorted\n  }\n}\n```\n \n\n#### @on-select-all\nevent emitted when all is selected (only emitted for checkbox tables)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-select-all=\"onSelectAll\"\u003e\n ```\n ```javascript\n methods: {\n   onSelectAll(params) {\n     // params.selected - whether the select-all checkbox is checked or unchecked\n     // params.selectedRows - all rows that are selected (this page)\n   }\n }\n ```\n \n #on-selected-rows-change\n event emitted each time selectedRows has changed\n ```html\n \u003cvue-good-table\n   :columns=\"columns\"\n   :rows=\"rows\"\n   @on-selected-rows-change=\"onSelectedRowsChange\"\u003e\n  ```\n  ```javascript\n  methods: {\n    onSelectedRowsChange(params) {\n      // params.selectedRows - all rows that are selected (this page)\n    }\n  }\n  ```\n \n #### @on-column-filter\nevent emitted when column is filtered (only emitted for remote mode)\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  @on-column-filter=\"onColumnFilter\"\u003e\n ```\n ```javascript\n methods: {\n   onColumnFilter(params) {\n     // params.columnFilters - filter values for each column in the following format:\n     // {field1: 'filterTerm', field3: 'filterTerm2')\n   }\n }\n ```\n\n### Style Options\n\nVue-good-table allows providing your own css classes for the table via **styleClass** option but it also has in-built classes that you can make use of\n\n#### .vgt-table\n![Table Screenshot](README/images/vgt-table.regular.png)\n\n#### .vgt-table .stripped\n![Table Bordered Striped Screenshot](README/images/vgt-table.png)\n\n#### .vgt-table .condensed\n![Table Bordered Striped Screenshot](README/images/vgt-table.condensed.png)\n\n\n## Themes\n\n### default\n### nocturnal `theme='nocturnal'`\n![Nocturnal Theme Screenshot](README/images/vgt-table.nocturnal.png)\n\n### black-rhino `theme='black-rhino'`\n![Black Rhino Theme Screenshot](README/images/vgt-table.black-rhino.png)\n\n## Advanced Customization\n\n### Custom row template\nvue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\u003e\n  \u003ctemplate slot=\"table-row\" slot-scope=\"props\"\u003e\n    \u003cspan v-if=\"props.column.field == 'age'\"\u003e\n      age: {{props.row.age}}\n    \u003c/span\u003e\n    \u003cspan v-else\u003e\n      {{props.formattedRow[props.column.field]}}\n    \u003c/span\u003e\n  \u003c/template\u003e\n\u003c/vue-good-table\u003e\n```\n**Note:** \n* The original row object can be accessed via `props.row`\n* The currently displayed table row index can be accessed via `props.index` . \n* The original row index can be accessed via `props.row.originalIndex`. You can then access the original row object by using `rows[props.row.originalIndex]`.\n* The column object can be accessed via `props.column`\n* You can access the formatted row data (for example - formatted date) via `props.formattedRow`\n\n### Custom column headers\nSometimes you might want to use custom column formatting. You can do that in the following way\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\u003e\n  \u003ctemplate slot=\"table-column\" slot-scope=\"props\"\u003e\n     \u003cspan v-if=\"props.column.label =='Name'\"\u003e\n        \u003ci class=\"fa fa-address-book\"\u003e\u003c/i\u003e {{props.column.label}}\n     \u003c/span\u003e\n     \u003cspan v-else\u003e\n        {{props.column.label}}\n     \u003c/span\u003e\n  \u003c/template\u003e\n\u003c/vue-good-table\u003e\n```\n\n### Grouped Rows\nTo create grouped rows, you need two things. \n1. add groupOptions to table component\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :groupOptions=\"{\n  \tenabled: true\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\n2. make sure the rows are formatted correctly. grouped rows need to be nested with headers rows containing rows in their children property. For example: \n\n```javascript\nrows: [{\n  mode: 'span', // span means this header will span all columns\n  label: 'Header Two', // this is the label that'll be used for the header\n  children: [\n    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },\n    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },\n  ]\n}]\n```\n\n3. sometimes, you might want a summary row instead of a header row. for example if you want to show total score for your group\n\n```javascript\nrows: [{\n  name: 'Total', // this is the label that'll be used for the header\n  age: undefined,\n  createdAt: undefined,\n  score: 0.3, // total score here\n  children: [\n    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },\n    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },\n  ]\n}]\n```\n\n4. if you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\n  :groupOptions=\"{\n  \tenabled: true,\n    headerPosition: 'bottom',\n  }\"\u003e\n\u003c/vue-good-table\u003e\n```\n\nyou can check out some live examples on the recipes page: \n[vue-good-table Recipes](https://github.com/xaksis/vue-good-table/wiki/Vue-good-table-Recipes-(vue-good-table-2.x))\n\n\n### Remote Mode\nSometimes you might want to power the table from the backend. Where filtering, paging, sorting etc are done serverside. In order to accomplish that you can follow [The remote mode workflow wiki](https://github.com/xaksis/vue-good-table/wiki/Remote-Mode-Workflow)\n\n### Table Actions Slot\nIf you want to add table specific actions like a print button for example, you can use the Table Actions Slot. If you have global search enabled, the action panel will show up to the right of that.\n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\u003e\n  \u003cdiv slot=\"table-actions\"\u003e\n    This will show up on the top right of the table. \n  \u003c/div\u003e\n\u003c/vue-good-table\u003e\n```\n\n\n### Empty state slot\nYou can provide html for empty state slot as well. Example:\n\n```html\n\u003cvue-good-table\n  :columns=\"columns\"\n  :rows=\"rows\"\u003e\n  \u003cdiv slot=\"emptystate\"\u003e\n    This will show up when there are no columns\n  \u003c/div\u003e\n\u003c/vue-good-table\u003e\n``` --\u003e\n\n## Authors\n\n* [Boris Flesch](https://github.com/boris-flesch)\n* [xaksis](https://github.com/xaksis) (initial version of Vue-good-table for Vue 2.x)\n* [Other Contributors](https://github.com/borisflesch/vue-good-table-next/graphs/contributors)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisflesch%2Fvue-good-table-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fborisflesch%2Fvue-good-table-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fborisflesch%2Fvue-good-table-next/lists"}