### Install vue-good-table using npm

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

Instructions to install the vue-good-table package using npm, saving it as a dependency in your project.

```Shell
npm install --save vue-good-table
```

--------------------------------

### Create a basic vue-good-table component example

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

A complete Vue.js component example demonstrating the basic usage of vue-good-table, including defining columns with various types and populating rows with sample data for display.

```Vue.js
<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  name: 'my-component',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM do yy',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 }
      ]
    };
  }
};
</script>
```

--------------------------------

### Install Vue Good Table with npm

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Installs the Vue Good Table package and its dependencies using the npm package manager. The `--save` flag ensures the dependency is added to the project's `package.json` file.

```bash
npm install --save vue-good-table
```

--------------------------------

### Basic Vue Good Table Component Usage Example

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Demonstrates a basic implementation of the `vue-good-table` component in a Vue application. It defines columns with labels, fields, and data types (e.g., number, date, percentage), and provides sample row data to populate the table.

```vue
<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  name: 'my-component',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM do yy',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 }
      ]
    };
  }
};
</script>
```

--------------------------------

### Configure vue-good-table as a Nuxt.js plugin

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

Guide on creating a Nuxt.js plugin file to import and register vue-good-table globally within a Nuxt application, ensuring its styles are also included for proper rendering.

```JavaScript
import Vue from 'vue'
import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);
```

--------------------------------

### Create Vue Good Table Plugin for Nuxt.js

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Defines a Nuxt.js plugin file (`vue-good-table.js`) that imports Vue and Vue Good Table, along with its styles, and registers the plugin globally. This setup is necessary for proper integration within a Nuxt.js project.

```javascript
import Vue from 'vue'
import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);
```

--------------------------------

### Globally import and register vue-good-table plugin in Vue.js

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

Demonstrates how to import the vue-good-table plugin and its styles, then register it globally with Vue.js, making the component available throughout your application.

```JavaScript
import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);
```

--------------------------------

### Install Vue-good-table via npm

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

This snippet demonstrates how to install the vue-good-table package using npm, saving it as a dependency in your project.

```bash
npm install --save vue-good-table
```

--------------------------------

### Basic Vue Good Table Component Usage with Search and Pagination

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Demonstrates a basic setup of the `vue-good-table` component, including column definitions, row data, and enabling search and pagination features. This example shows how to integrate the table into a Vue.js template and script.

```html
<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
      }"
      :pagination-options="{
        enabled: true,
        perPage: 5,
      }"
      styleClass="vgt-table striped bordered"/>
  </div>
</template>
```

```javascript
<script>
export default {
  name: 'my-component',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
          filterOptions: {
            enabled: true,
          },
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
        { id:7, name:"Jane", age: 24, createdAt: '20111031' },
        { id:8, name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 }
      ]
    };
  }
};
</script>
```

--------------------------------

### Globally Register Vue Good Table Plugin in Vue.js

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Imports the Vue Good Table plugin and its associated CSS styles, then registers it globally with Vue using `Vue.use()`. This makes the component available throughout the entire Vue application.

```javascript
import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);
```

--------------------------------

### Configure Nuxt.js to Load Vue Good Table Plugin

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Adds the Vue Good Table plugin to the `plugins` array in `nuxt.config.js`. The `ssr: false` option ensures the plugin is only loaded on the client-side, which is typical for UI components that interact with the DOM.

```javascript
plugins: [
  { src: '~/plugins/vue-good-table', ssr: false }
]
```

--------------------------------

### Import vue-good-table into a specific Vue component

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

Shows how to import vue-good-table and its styles directly into a Vue component and register it within the component's 'components' option for local use.

```JavaScript
// import the styles
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';

// add to component
components: {
  VueGoodTable,
}
```

--------------------------------

### Basic Checkbox Table Implementation with Search in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/advanced/checkbox-table.html

This example provides a minimal setup for a checkbox table in `vue-good-table`, demonstrating how to enable row selection and search functionality simultaneously.

```Vue.js
<vue-good-table
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }"
  :search-options="{ enabled: true }">
</vue-good-table>
```

--------------------------------

### Import Vue Good Table into a Vue Component

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/README.md

Imports the Vue Good Table component and its styles directly into a specific Vue component. The component is then registered locally within the `components` option, making it available only to that component.

```javascript
// import the styles
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';

// add to component
components: {
  VueGoodTable,
}
```

--------------------------------

### Basic Checkbox Table with Search in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/checkbox-table.md

This example shows a minimal setup for a vue-good-table with enabled row selection and search functionality, demonstrating the core components required for a basic interactive table.

```Vue
<vue-good-table
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }"
  :search-options="{ enabled: true }">
</vue-good-table>
```

--------------------------------

### Configure Global Search Options for Vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/search-options.md

Demonstrates the initial setup of global search options for `vue-good-table`, including enabling search, setting trigger behavior, diacritic skipping, custom search function, placeholder text, and external query binding.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    trigger: 'enter',
    skipDiacritics: true,
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
    @on-search="onSearch"
  }">
</vue-good-table>
```

--------------------------------

### Declare Vue Good Table Plugin in Nuxt.js Configuration

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/index.html

This configuration snippet demonstrates how to declare the `vue-good-table` plugin within your `nuxt.config.js` file. The `ssr: false` option indicates that the plugin should only be loaded on the client-side, which is often necessary for plugins that interact directly with the DOM or browser APIs.

```JavaScript
plugins: [
  { src: '~/plugins/vue-good-table', ssr: false }
]
```

--------------------------------

### Configure All Vue Good Table Pagination Options

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

This example demonstrates how to configure all available pagination options for the `vue-good-table` component, including enabling pagination, setting mode, per-page limits, position, dropdown options, current page, jump buttons, and custom labels.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    mode: 'records',
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    jumpFirstOrLast : true,
    firstLabel : 'First Page',
    lastLabel : 'Last Page',
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
    infoFn: (params) => `my own page ${params.firstRecordOnPage}` 
  }">
</vue-good-table>
```

--------------------------------

### Implement Custom Global Search Function

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/search-options.md

Provides an example of how to define and use a custom search function (`myFunc`) for the global search. The function receives row, column, cell value, and search term as arguments.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    searchFn: myFunc
  }">
</vue-good-table>
```

```javascript
// in js
methods: {
  myFunc(row, col, cellValue, searchTerm){
    return cellValue === 'my value';
  },
}
```

--------------------------------

### Configure All Search Options in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

This example demonstrates how to configure all available search options for the `vue-good-table` component. It includes settings for enabling search, trigger events, custom search functions, placeholders, and external query binding.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :searchOptions="{
    enabled: true,
    trigger: 'enter',
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
  }">
</vue-good-table>
```

--------------------------------

### Import Vue-good-table into a Vue component

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

This snippet provides examples for importing and registering the VueGoodTable component locally within a Vue component, supporting both JavaScript and TypeScript syntax.

```javascript
import { VueGoodTable } from 'vue-good-table';

// add to component
components: {
  VueGoodTable,
}
```

```typescript
// add to component
components: {
  'vue-good-table': require('vue-good-table').VueGoodTable,
}
```

--------------------------------

### Enable Pagination for vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

A simple example demonstrating how to activate pagination for the `vue-good-table` component by setting the `enabled` property to `true` within `pagination-options`.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true
  }">
</vue-good-table>
```

--------------------------------

### Configure All Pagination Options in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

This example demonstrates how to configure all available pagination options for the `vue-good-table` component. It includes settings for enabling pagination, items per page, position, dropdown options, and custom labels for navigation.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :paginationOptions="{
    enabled: true,
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    allLabel: 'All',
  }">
</vue-good-table>
```

--------------------------------

### Configure All Pagination Options in vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

This example demonstrates how to set up all available pagination options for the `vue-good-table` component. It includes enabling pagination, choosing a display mode, defining items per page, setting the paginator position, customizing the per-page dropdown, and overriding default labels and functions.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    mode: 'records',
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    jumpFirstOrLast : true,
    firstLabel : 'First Page',
    lastLabel : 'Last Page',
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
    infoFn: (params) => `my own page ${params.firstRecordOnPage}`
  }">
</vue-good-table>
```

--------------------------------

### Example: Array of Strings for vue-good-table Filter Dropdown

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/column-filter-options.html

Shows how to define 'filterDropdownItems' using a simple array of strings, where each string becomes a selectable option in the filter dropdown.

```JavaScript
filterDropdownItems: ['Blue', 'Red', 'Yellow']
```

--------------------------------

### Configure All Global Search Options for vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/search-options.html

This example demonstrates a comprehensive configuration of global search options for the `vue-good-table` component. It shows how to enable search, set the trigger to 'enter', skip diacritics for performance, provide a custom search function (`mySearchFn`), set a custom placeholder, bind an external query (`searchQuery`), and handle the `on-search` event.

```Vue.js
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    trigger: 'enter',
    skipDiacritics: true,
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
    @on-search="onSearch"
  }">
</vue-good-table>
```

--------------------------------

### Enable and Configure Multiple Column Sorting in vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/sort-options.html

Example demonstrating how to enable multiple column sorting and set an initial sort order for two columns (`name` ascending, `age` descending) in `vue-good-table`.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    multipleColumns: true,
    initialSortBy: [
      {field: 'name', type: 'asc'},
      {field: 'age', type: 'desc'}
    ],
  }">
</vue-good-table>
```

--------------------------------

### Set Table Data Mode

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Configures the table's data handling mode. Setting `mode="remote"` enables server-side processing for features like sorting and filtering, instead of client-side handling. Refer to the Server Side Workflow guide for detailed examples.

```APIDOC
mode
type: String
Set mode=`remote` to allow sorting/filtering etc to be powered by server side instead of client side.
```

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  mode="remote">
</vue-good-table>
```

--------------------------------

### Configure Vue Good Table for Remote Mode

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/advanced/remote-workflow.html

This Vue.js template snippet demonstrates the basic setup for `vue-good-table` in 'remote' mode, showing how to enable pagination and bind the `totalRows` and `rows` properties to component data, which will be populated from a server.

```Vue.js
<vue-good-table
  mode="remote"
  :pagination-options="{
    enabled: true,
  }"
  :totalRows="totalRecords"
  :rows="rows"
  :columns="columns"/>
```

--------------------------------

### Importing Vue-Good-Table's Root Sass File

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/style-configuration/sass.html

This Sass snippet demonstrates how to import the primary stylesheet of Vue-Good-Table directly from its installed npm package, enabling developers to leverage or override the component's default styling.

```Sass
@import "../node_modules/vue-good-table/src/styles/style.scss";
```

--------------------------------

### Configure Vue-Good-Table for Basic Remote Mode

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/remote-workflow.md

This HTML snippet demonstrates the fundamental setup for enabling remote mode in `vue-good-table` by setting the `mode` prop to 'remote'. It also binds `totalRows` and `rows` to data properties, indicating that data will be managed externally by the server.

```html
<vue-good-table
  mode="remote"
  :pagination-options="{
    enabled: true,
  }"
  :totalRows="totalRecords"
  :rows="rows"
  :columns="columns"/>
```

--------------------------------

### Example: Array of Objects for vue-good-table Filter Dropdown

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/column-filter-options.html

Shows how to define 'filterDropdownItems' using an array of objects, where each object has 'value' and 'text' properties for more granular control over dropdown options.

```JavaScript
filterDropdownItems: [
  { value: 'n', text: 'Inactive' },
  { value: 'y', text: 'Active' },
  { value: 'c', text: 'Check' }
],
```

--------------------------------

### Configure HTML Rendering for Vue Good Table Column

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Indicates whether a column requires HTML rendering. The preferred method for creating HTML columns is by using slots. The example shows how to set the `html` property to `true` for a column and provide HTML content in the corresponding row data.

```javascript
columns: [
  {
    label: 'Action',
    field: 'btn',
    html: true,
  }
  //...
],
rows: [
  {
    btn: '<button>My Action</button>',
    // ...
  }
]
```

--------------------------------

### Disable 'All' Option in Per Page Dropdown

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

This example demonstrates how to disable the 'All' option in the 'per page' dropdown for `vue-good-table` pagination, restricting users to predefined page sizes.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
  }">
</vue-good-table>
```

--------------------------------

### Configure Basic Sorting and Initial Single-Column Sort

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/sort-options.md

This snippet demonstrates the fundamental setup for enabling sorting and defining an initial single-column sort order within a `vue-good-table` component using the `sort-options` prop. It sets `enabled` to true and specifies a default sort by 'name' in ascending order.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>
```

--------------------------------

### Handle Global Search Event in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Event emitted when a global search is performed (if enabled). The `onSearch` method receives parameters including the search term and the count of matching rows. The example shows how to bind the event in HTML and implement the handler in JavaScript.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-search="onSearch">
 
```

```javascript
methods: {
   onSearch(params) {
     // params.searchTerm - term being searched for
     // params.rowCount - number of rows that match search
   }
 }
```

--------------------------------

### Vue Good Table Pagination Enable/Disable 'All' Option

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `dropdownAllowAll` option. This boolean property controls whether an 'All' option is included in the 'rows per page' dropdown, allowing users to display all rows on a single page.

```APIDOC
dropdownAllowAll:
  type: Boolean
  default: true
  description: enables/disables 'All' in the per page dropdown.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        perPageDropdown: [3, 7, 9],
        dropdownAllowAll: false,
      }">
    </vue-good-table>
```

--------------------------------

### Implement Custom Column Filters in Vue-Good-Table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/README.md

This section provides examples for creating custom column filters in vue-good-table. It shows how to use a `slot="column-filter"` to render a custom filter component and how to integrate it with the table's filtering logic, including `updateFilters` and `formatValue`.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="column-filter" slot-scope="props">
    <my-custom-filter
      v-if="props.column.filterOptions.customFilter"       
      @input="handleCustomFilter"/>
  </template>
</vue-good-table>
```

```javascript
columns: [
  {
    label: 'Name',
    field: 'name'
  },
  {
    label: 'Category',
    field: 'category'
  },
  {
    label: 'Statistics',
    field: 'statistics',
    filterOptions: {
      customFilter: true
    }
  } 
]
// in your methods
handleCustomFilter(value) {
  // filtering logic here
}
```

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="column-filter" slot-scope="{ column, updateFilters }">
    <my-custom-filter
      v-if="column.filterOptions.customFilter"
      @input="(value) => updateFilters(column, value)"/>
  </template>
</vue-good-table>
```

```javascript
{
  label: 'Name',
  field: 'name.displayName',
  filterOptions: {
    customFilter: true,
    slotFilterField: 'name.id',
    formatValue: function (value) {
      return valueArray.join(',');  
    } 
  }
}
```

--------------------------------

### Add Custom Columns to Vue-Good-Table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/README.md

This example shows how to integrate columns not present in the original row data into vue-good-table. It uses the `slot="table-row"` to render 'before' and 'after' content based on custom column fields, requiring corresponding column definitions.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'before'">
      before
    </span>
    <span v-else-if="props.column.field == 'after'">
      after
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>
```

```javascript
{
  label: 'Before',
  field: 'before'
},
{
  label: 'After',
  field: 'after'
}
```

--------------------------------

### Vue Good Table Pagination Customize Per Page Dropdown Options

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `perPageDropdown` option. This array property allows you to customize the specific integer values presented in the 'rows per page' dropdown menu.

```APIDOC
perPageDropdown:
  type: Array
  default: [10,20,30,40,50]
  description: Customize the dropdown options for the amount of items per page.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        perPageDropdown: [3, 7, 9]
      }">
    </vue-good-table>
```

--------------------------------

### Handle Row Mouse Enter Event in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Event emitted when the mouse pointer enters a table row. The `onRowMouseover` method receives parameters including the row object and page index. The example shows how to bind the event in HTML and implement the handler in JavaScript.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-mouseenter="onRowMouseover">
 
```

```javascript
methods: {
   onRowMouseover(params) {
     // params.row - row object 
     // params.pageIndex - index of this row on the current page.
   }
 }
```

--------------------------------

### Configure Column Filter Options in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

A collection of properties for configuring column-specific filters. This object allows enabling filters, setting placeholders, initial values, dropdown items, custom filter functions, and trigger events. The example demonstrates various `filterOptions` properties.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    filterOptions: {
  	  enabled: true, // enable filter for this column
      placeholder: 'Filter This Thing', // placeholder for filter input
      filterValue: 'Jane', // initial populated value for this filter
      filterDropdownItems: [], // dropdown (with selected values) instead of text input
      filterFn: this.columnFilterFn, //custom filter function that
      trigger: 'enter', //only trigger on enter not on keyup 
    },
  },
  // ...
]
```

--------------------------------

### Formatted Multiselect Filter with vue-select and custom logic

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/README.md

This example shows how to use `vue-select` with a custom `formatValue` function to transform the array of selected objects into a comma-separated string of IDs, suitable for `vue-good-table`'s filter value. It includes both the HTML template and the corresponding JavaScript data and methods.

```html
<v-select
  :options="optionList"
  label="name"
  multiple
  @input="(valuesArray) => updateFilters(column, valuesArray)"
/>
```

```javascript
// vue-select emits an array of any objects selected in the dropdown
// which is being converted to a string of ids to pass into the column filter value
data: {
  optionList: [
    {
      name: 'Joan',
      id: 1
    },
    {
      name: 'Don',
      id: 2
    }
  ],
  columns: [
    {
      label: 'name',
      field: 'name',
      filterOptions: {
        enabled: true,
        customFilter: true,
        formatValue: this.formatFilterValue
      }
    }
  ]
},
methods: {
  formatFilterValue(valuesArray) {
    return valuesArray.map((value) => value.id).join(',');
  }
}
```

--------------------------------

### Vue-good-table Search Options API Reference

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/search-options.md

Detailed API documentation for the `search-options` prop of the `vue-good-table` component, outlining available properties, their types, default values, and descriptions.

```APIDOC
search-options: Object
  enabled: Boolean (default: false)
    Allows a single search input for the whole table.
    Warning: Enabling this option disables column filters.
  trigger: String (default: '')
    Allows you to specify if you want search to trigger on 'enter' event of the input. By default table searches on key-up.
  skipDiacritics: boolean (default: false)
    By default, search does a diacriticless comparison so you can search through accented characters. This however slows down the search to some extent. If your data doesn't have accented characters, you can skip this check and gain some performance.
  searchFn: Function
    Allows you to specify your own search function for the global search.
  placeholder: String (default: 'Search Table')
    Text for global search input place holder.
  externalQuery: String
    If you want to use your own input for searching the table, you can use this property.
```

--------------------------------

### Example: Custom Range Filter Function for vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/column-filter-options.html

Provides an example of a custom 'filterFn' that filters numerical data within a specified range around the 'filterString'. This function parses the filter string as an integer and checks if the data falls within +/- 5 of that value.

```JavaScript
filterFn: function(data, filterString) {
  var x = parseInt(filterString)
  return data >= x - 5 && data <= x + 5;
}
```

--------------------------------

### Enable Multi-Column Sorting and Set Initial Multi-Sort

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/sort-options.md

This snippet demonstrates how to allow users to sort by multiple columns using `multipleColumns: true`. It also shows how to set an initial sort order involving multiple columns by providing an array of sort objects to `initialSortBy`, where the order in the array determines primary and secondary sorts.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    multipleColumns: true,
    initialSortBy: [
      {field: 'name', type: 'asc'},
      {field: 'age', type: 'desc'}
    ],
  }">
</vue-good-table>
```

--------------------------------

### Enable/Disable Sorting for vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/sort-options.html

Example showing how to explicitly enable sorting for the `vue-good-table` component using the `enabled` property within `sort-options`.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
  }">
</vue-good-table>
```

--------------------------------

### Set Vue Good Table Pagination Position

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

This example demonstrates how to change the position of the pagination controls in `vue-good-table` to 'top'. By default, pagination is at the 'bottom'.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    position: 'top'
  }">
</vue-good-table>
```

--------------------------------

### API Reference for vue-good-table infoFn Parameters

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

Details the structure and properties of the `params` object passed to the `infoFn` callback in `vue-good-table`'s pagination options, including record indices, total counts, and current page information.

```APIDOC
infoFn Parameters:
  firstRecordOnPage: index of the first record on the current page
  lastRecordOnPage: index of the last record on the current page
  totalRecords: total number of records
  currentPage: current page
  totalPage: total number of pages
```

--------------------------------

### Hide a Column in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Allows hiding a specific column from the table display. The example shows how to set the `hidden` property to `true` for the 'user_name' column.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    hidden: true,
  },
  // ...
]
```

--------------------------------

### Apply Base Styles to Vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/style-configuration/style-classes.md

Initializes all core styles for the table. This class is fundamental for `vue-good-table`'s default appearance.

```vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  styleClass="vgt-table">
</vue-good-table>
```

--------------------------------

### Set Column Width in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Provides a specific width value for a table column. The example demonstrates setting a fixed width of '50px' for the 'user_name' column.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    width: '50px',
  },
  // ...
]
```

--------------------------------

### Disable Global Search for a Column in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

If set to `true`, this column will be ignored by the global search functionality. The example shows how to disable global search for the 'user_name' column.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    globalSearchDisabled: true,
  },
  // ...
]
```

--------------------------------

### Define Table Columns

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Array containing objects that describe table columns. Each column object can have configurable properties.

```APIDOC
columns
type: Array
Array containing objects that describe table columns. The column object itself can contain many configurable properties.
```

```javascript
[
    {
      label: 'Name',
      field: 'name',
    }
    //...
]
```

--------------------------------

### Implement Vue-Good-Table Remote Mode Event Handling

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/remote-workflow.md

This comprehensive set of code demonstrates how to handle user interactions in `vue-good-table`'s remote mode. It includes the HTML template for attaching event listeners, the Vue `data` properties to manage table state, and the `methods` to update parameters and fetch data from the server based on user actions.

```html
<vue-good-table
  mode="remote"
  @on-page-change="onPageChange"
  @on-sort-change="onSortChange"
  @on-column-filter="onColumnFilter"
  @on-per-page-change="onPerPageChange"
  :totalRows="totalRecords"
  :isLoading.sync="isLoading"
  :pagination-options="{
    enabled: true,
  }"
  :rows="rows"
  :columns="columns"/>
```

```javascript
data() {
  return {
    isLoading: false,
    columns: [
      //...
    ],
    rows: [],
    totalRecords: 0,
    serverParams: {
      columnFilters: {
      },
      sort: [
        {
          field: '',
          type: ''
        }
      ],
      page: 1, 
      perPage: 10
    }
  }; 
},
```

```javascript
methods: {
    updateParams(newProps) {
      this.serverParams = Object.assign({}, this.serverParams, newProps);
    },
    
    onPageChange(params) {
      this.updateParams({page: params.currentPage});
      this.loadItems();
    },

    onPerPageChange(params) {
      this.updateParams({perPage: params.currentPerPage});
      this.loadItems();
    },

    onSortChange(params) {
      this.updateParams({
        sort: [{
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        }],
      });
      this.loadItems();
    },
    
    onColumnFilter(params) {
      this.updateParams(params);
      this.loadItems();
    }

    // load items is what brings back the rows from server
    loadItems() {
      getFromServer(this.serverParams).then(response => {
         this.totalRecords = response.totalRecords;
         this.rows = response.rows;
      });
    }
}
```

--------------------------------

### Apply Base Styles to vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/style-configuration/style-classes.html

The `.vgt-table` class is the foundational style class for `vue-good-table`. It initializes all the core visual styles required for the table to render correctly. This class should always be included in the `styleClass` prop.

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      styleClass="vgt-table">
    </vue-good-table>
```

--------------------------------

### Vue Good Table Pagination Rows Per Page Option

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `perPage` option. This integer property determines the maximum number of rows to display on a single page.

```APIDOC
perPage:
  type: Integer
  default: 10
  description: Number of rows to show per page.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        perPage: 5
      }">
    </vue-good-table>
```

--------------------------------

### Apply Default Theme to vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/style-configuration/index.html

Demonstrates rendering the vue-good-table component using its default styling. No explicit 'theme' prop is required as 'default' is the implicit theme, providing a standard table appearance.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows">
</vue-good-table>
```

--------------------------------

### Apply Custom Class to Table Cells in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Provides custom CSS class(es) to the table cells (<td>) of a specific column. The example applies 'text-center' to the 'user_name' column's cells.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    tdClass: 'text-center',
  },
  // ...
]
```

--------------------------------

### Apply Custom Class to Table Header in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Provides custom CSS class(es) to the table header (<th>) of a specific column. The example applies 'custom-th-class' to the 'user_name' column's header.

```javascript
columns: [
  { 
    label: 'name',
    field: 'user_name',
    thClass: 'custom-th-class',
  },
  // ...
]
```

--------------------------------

### API Reference: `placeholder` property

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/search-options.html

Defines the text displayed as a placeholder in the global search input field.

```APIDOC
Property: placeholder
  Type: String
  Default: 'Search Table'
  Description: Text for global search input place holder
```

--------------------------------

### Customize Vue Good Table Pagination Info with infoFn

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

Demonstrates how to provide a custom function (`infoFn`) to format the pagination information display in `vue-good-table`, allowing dynamic content based on pagination parameters.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    infoFn: (params) => `Showing ${params.firstRecordOnPage} to ${params.lastRecordOnPage} of page ${params.currentPage}`,
  }">
</vue-good-table>
```

--------------------------------

### Enable or Disable Table Sorting Globally

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/sort-options.md

This example shows how to control the overall sorting functionality for the entire `vue-good-table` instance by setting the `enabled` property within the `sort-options` object. A value of `true` enables sorting, while `false` disables it.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
  }">
</vue-good-table>
```

--------------------------------

### Vue Good Table Pagination Per Page Dropdown Visibility

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `perPageDropdownEnabled` option. This boolean property controls the visibility of the dropdown menu that allows users to select the number of rows per page.

```APIDOC
perPageDropdownEnabled:
  type: Boolean
  default: true
  description: Show or hide the per page dropdown.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        perPageDropdownEnabled: false,
      }">
    </vue-good-table>
```

--------------------------------

### Importing Vue-Good-Table's Root Sass File

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/style-configuration/sass.md

This snippet demonstrates how to import the main Sass styling file for Vue-Good-Table into your project. Importing this file allows you to utilize or override the default styles provided by the component.

```SCSS
@import "../node_modules/vue-good-table/src/styles/style.scss";
```

--------------------------------

### Configure Basic Sort Options in vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/sort-options.html

Demonstrates how to enable sorting and set an initial single-column sort order for a `vue-good-table` component using the `sort-options` prop.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>
```

--------------------------------

### Customize Selected Row Actions Slot in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/advanced/checkbox-table.md

This example demonstrates how to use the selected-row-actions slot to add custom action buttons or content to the info bar that appears when rows are selected. This allows for context-specific actions based on the selection.

```HTML
<vue-good-table
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{
    enabled: true,
  }"
  :search-options="{ enabled: true }">
  <div slot="selected-row-actions">
    <button>Action 1</button>
  </div>
</vue-good-table>
```

--------------------------------

### Vue Good Table Pagination Position Option

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `position` option within `pagination-options`. This property controls whether the pagination controls are displayed at the 'top', 'bottom', or both 'top and bottom' of the table. The default position is 'bottom'.

```APIDOC
position:
  type: String
  default: 'bottom'
  description: Add pagination on 'top' or 'bottom' (top and bottom) of the table.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        position: 'top'
      }">
    </vue-good-table>
```

--------------------------------

### APIDOC: `sort-options.initialSortBy` Property

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/sort-options.html

API documentation for the `initialSortBy` property, allowing specification of a default sort order for the table on load. It supports both single and multiple column sorting.

```APIDOC
type: Object or Array
Allows specifying a default sort for the table on wakeup. Both field and type values are required.
```

--------------------------------

### API Reference: Column Filter filterValue Property

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/column-filter-options.md

Documents the `filterValue` property, which allows pre-populating the column filter input with an initial value.

```APIDOC
filterValue:
  type: String
  description: If you want filter to be pre-populated, use this property
```

--------------------------------

### Add Custom Table Actions Slot

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Provides a slot for adding table-specific actions, such as a print button, typically appearing on the top right of the table. This slot can be used even if global search is not enabled.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="table-actions">
    This will show up on the top right of the table. 
  </div>
</vue-good-table>
```

--------------------------------

### Import Vue-good-table globally in Vue application

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

This snippet shows how to import and register vue-good-table as a global plugin in your Vue application, including its necessary CSS styles.

```javascript
import VueGoodTablePlugin from 'vue-good-table';

// import the styles 
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);
```

--------------------------------

### Customize Empty State Display for vue-good-table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Illustrates how to use the `emptystate` slot to provide custom HTML content that will be displayed when the `vue-good-table` has no rows to render.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="emptystate">
    This will show up when there are no columns
  </div>
</vue-good-table>
```

--------------------------------

### Vue Good Table Programmatically Set Current Page

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/pagination-options.html

API documentation and example for the `setCurrentPage` option. This number property allows you to programmatically set the currently displayed page. A warning is included as there is no built-in validation for the page number, requiring careful usage.

```APIDOC
setCurrentPage:
  type: Number
  description: set current page programmatically.
  WARNING: There's no validation for number of pages so please be careful using this.
```

```Vue
<vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        setCurrentPage: 2,
      }">
    </vue-good-table>
```

--------------------------------

### Define Dropdown Items for Column Filter in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Allows creating a dropdown for a column filter instead of a text input. It accepts an array of strings or an array of objects with `value` and `text` properties. The example shows both array of strings and array of objects formats.

```javascript
//array
filterDropdownItems: ['Blue', 'Red', 'Yellow']
//or
filterDropdownItems: [  
  { value: 'n', text: 'Inactive' },  
  { value: 'y', text: 'Active' },  
  { value: 'c', text: 'Check' }  
],
```

--------------------------------

### Enable Pagination for Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

This snippet shows how to enable pagination for the `vue-good-table` component by setting the `enabled` option to `true` within `pagination-options`.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true
  }">
</vue-good-table>
```

--------------------------------

### Vue Good Table Pagination Option: jumpFirstOrLast

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

API documentation for the `jumpFirstOrLast` option in `vue-good-table`'s pagination. This boolean option enables or disables buttons to jump to the first or last page.

```APIDOC
jumpFirstOrLast:
  type: Boolean
  default: false
  description: Enable pagination buttons to jump to the first or last page.
```

--------------------------------

### Handle Row Mouse Leave Event in Vue Good Table

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Event emitted when the mouse pointer leaves a table row. The `onRowMouseleave` method receives the row object and page index as parameters. The example shows how to bind the event in HTML and implement the handler in JavaScript.

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-mouseleave="onRowMouseleave">
 
```

```javascript
methods: {
   onRowMouseleave(row, pageIndex) {
     // row - row object 
     // pageIndex - index of this row on the current page.
   }
 }
```

--------------------------------

### Server Response Requirements for Vue Good Table Remote Mode

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/advanced/remote-workflow.html

This API documentation outlines the essential data structure that a backend server must return to `vue-good-table` when operating in remote mode. It specifies the two required components: `relevant rows` for the current page and `totalRecords` for overall pagination.

```APIDOC
Server Response Structure:
  1. relevant rows: Array of objects
     - Description: Set of rows for the current page, matching the current filter and sort.
  2. totalRecords: Number
     - Description: Total number of records matching the parameters sent by the client (not just the current page). Required for correct pagination.
```

--------------------------------

### Enable Compact Mobile View

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Enables a mobile-friendly list view for the table on small devices (screen size below 576px). This property is a boolean and defaults to `false`.

```APIDOC
compactMode
type: Boolean (default: false)
Enable mobile-friendly List view on small devices (screenSize below 576px)
```

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  compactMode>
</vue-good-table>
```

--------------------------------

### Implement Custom Filter Function for Vue Good Table Column

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

A custom filter function that takes `data` and `filterString` as arguments and should return `true` if the data matches the filter string, otherwise `false`. The example demonstrates a `filterFn` that matches numbers within 5 of the provided value.

```javascript
filterFn: function(data, filterString) {
  var x = parseInt(filterString)
  return data >= x - 5 && data <= x + 5;
}
// would create a filter matching numbers within 5 of the provided value
```

--------------------------------

### Customize Empty State Display

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Allows providing custom HTML content to be displayed when the table has no rows.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="emptystate">
    This will show up when there are no rows
  </div>
</vue-good-table>
```

--------------------------------

### Vue Good Table Pagination Label Options

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/pagination-options.md

API documentation for customizing various text labels within `vue-good-table`'s pagination controls, including navigation, rows per page, and general page information.

```APIDOC
nextLabel:
  type: String
  description: Label for the 'next' page button.
prevLabel:
  type: String
  description: Label for the 'previous' page button.
rowsPerPageLabel:
  type: String
  description: Label for the 'Rows per page' text.
ofLabel:
  type: String
  description: Label for the 'of' text (e.g., '1 of 10').
pageLabel:
  type: String
  description: Label for the 'page' text (used in 'pages' mode).
allLabel:
  type: String
  description: Label for the 'All' option in the per page dropdown.
```

--------------------------------

### Display Row Line Numbers

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/README.md

Shows a sequential line number for each row in the table. This property is a boolean and defaults to `false`.

```APIDOC
line-numbers
type: Boolean (default: false)
Show line number for each row
```

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :line-numbers="true">
</vue-good-table>
```

--------------------------------

### Configure Search Input Placeholder Text (`placeholder`)

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/configuration/search-options.html

Sets the placeholder text displayed in the global search input field of the `vue-good-table` component.

```Vue
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    placeholder: 'Search this table',
  }">
</vue-good-table>
```

--------------------------------

### Integrating `vue-select` for Multiselect Filters in `vue-good-table`

Source: https://github.com/xaksis/vue-good-table/blob/master/docs/guide/advanced/index.html

This snippet demonstrates how to replace the built-in multiselect filter in `vue-good-table` with `vue-select`. It shows basic integration, setting the `multiple` attribute, and binding options. It also includes an example of how to format the emitted array of values into a comma-separated string for the column filter.

```Vue.js
<v-select
  :options="optionList"
  multiple
  @input="(value) => updateFilters(column, value)"
/>
```

```Vue.js
<v-select
  :options="optionList"
  label="name"
  multiple
  @input="(valuesArray) => updateFilters(column, valuesArray)"
/>
```

```JavaScript
data: {
  optionList: [
    {
      name: 'Joan',
      id: 1
    },
    {
      name: 'Don',
      id: 2
    }
  ],
  columns: [
    {
      label: 'name',
      field: 'name',
      filterOptions: {
        enabled: true,
        customFilter: true,
        formatValue: this.formatFilterValue
      }
    }
  ]
},
methods: {
  formatFilterValue(valuesArray) {
    return valuesArray.map((value) => value.id).join(',');
  }
}
```

--------------------------------

### Add Custom Actions to vue-good-table Header

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Demonstrates using the `table-actions` slot to insert custom HTML content, such as a print button, which appears at the top right of the table, next to the global search if enabled.

```html
<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="table-actions">
    This will show up on the top right of the table. 
  </div>
</vue-good-table>
```

--------------------------------

### Integrate External Input for Global Search

Source: https://github.com/xaksis/vue-good-table/blob/master/vp-docs/guide/configuration/search-options.md

Demonstrates how to bind an external input field's value (`searchTerm`) to the table's global search, allowing custom search UI. The `searchTerm` variable should be defined in the component's data.

```html
<input type="text" v-model="searchTerm" >
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    externalQuery: searchTerm
  }">
</vue-good-table>
```

```javascript
// and in data
data(){
  return {
    searchTerm: '',
    // rows, columns etc...
  };
}
```

--------------------------------

### Customize Search Input Placeholder Text

Source: https://github.com/xaksis/vue-good-table/blob/master/README.md

Sets the placeholder text for the global search input field, providing a hint to the user about its purpose.

```APIDOC
searchOptions.placeholder `String (default: 'Search Table')`
Text for global search input place holder
```

```html
<vue-good-table
  :columns="columns"
  :rows="rows"
  :searchOptions="{
    enabled: true,
    placeholder: 'Search this table',
  }">
</vue-good-table>
```