### Install @bhplugin/vue3-datatable via Bower

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Installs the vue3-datatable package using Bower. Bower is a package manager for the web.

```bash
bower install @bhplugin/vue3-datatable --save
```

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

### Install @bhplugin/vue3-datatable via NPM

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Installs the vue3-datatable package using npm. This is the standard way to add the package to your project.

```bash
npm install @bhplugin/vue3-datatable --save
```

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

### Install @bhplugin/vue3-datatable via Yarn

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Installs the vue3-datatable package using Yarn. Yarn is an alternative package manager for JavaScript.

```bash
yarn add @bhplugin/vue3-datatable
```

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

### Vue 3 Datatable Usage Example

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Demonstrates how to use the Vue3Datatable component in a Vue 3 application. It includes importing the component, defining columns and rows, and rendering the table.

```html
<template>
    <vue3-datatable :rows="rows" :columns="cols"> </vue3-datatable>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Vue3Datatable from "@bhplugin/vue3-datatable";
    import "@bhplugin/vue3-datatable/dist/style.css";

    const cols = ref([
      { field: "id", title: "ID", width: "90px", filter: false },
      { field: "name", title: "Name" },
      { field: "username", title: "Username" },
      { field: "email", title: "Email" },
      { field: "phone", title: "Phone" },
      { field: "date", title: "Date", type: "date" },
      { field: "active", title: "Active", type: "bool" },
      { field: "age", title: "Age", type: "number" },
      { field: "address.city", title: "Address" },
      { field: "company.name", title: "Company" },
    ]);

    const rows = ref([
      {
        id: 1,
        name: "Leanne Graham",
        username: "Bret",
        email: "Sincere@april.biz",
        address: {
          street: "Kulas Light",
          suite: "Apt. 556",
          city: "Gwenborough",
          zipcode: "92998-3874",
          geo: {
            lat: "-37.3159",
            lng: "81.1496",
          },
        },
        phone: "1-770-736-8031 x56442",
        website: "hildegard.org",
        company: {
          name: "Romaguera-Crona",
          catchPhrase: "Multi-layered client-server neural-net",
          bs: "harness real-time e-markets",
        },
        date: "Tue Sep 27 2022 22:19:57",
        age: 10,
        active: true,
      },
      .......
    ]);
</script>
```

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

### Vue3 Datatable Core Methods

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Provides core functionalities for managing the datatable state, including resetting all options, retrieving filtered or visible rows, and managing column filters.

```javascript
reset(): void
  // Resets all options like selected rows, filter, search, current page, etc.

getFilteredRows(): Array<any>
  // Returns all filtered rows.

getVisibleRows(): Array<any>
  // Returns all visible rows.

getColumnFilters(): Object
  // Returns all column filters.
```

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

### Vue 3 Datatable Configuration Options

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

This section details the available props for configuring the Vue 3 datatable component. These props control sorting, filtering, pagination, and other display-related features.

```APIDOC
sortColumn:
  type: string
  default: "id"
  description: Name of the column to sort by.

sortDirection:
  type: string
  default: "asc"
  description: Sort direction, either 'asc' (ascending) or 'desc' (descending).

columnFilter:
  type: boolean
  default: false
  description: Enables or disables individual column filtering.

columnFilterLang:
  type: records<string,string>
  default: null
  description: Provides translations for column filter options. Example: {no_filter: 'Aucun', contain: 'Contiens', not_contain: 'Ne contiens pas', equal: 'Egale', not_equal: 'Différent', start_with: 'Commence par', end_with: 'Termine par', greater_than: 'Supérieur à', greater_than_equal: 'Sup. ou égale à', less_than: 'Inférieur à', less_than_equal: 'Inf. ou égale à', is_null: 'Est null', is_not_null: 'Non null'}

pagination:
  type: boolean
  default: true
  description: Enables or disables pagination.

showNumbers:
  type: boolean
  default: true
  description: Enables or disables the display of page numbers in pagination.

showNumbersCount:
  type: number
  default: 5
  description: Specifies the number of page numbers to display in pagination.

showFirstPage:
  type: boolean
  default: true
  description: Enables or disables the display of a 'first page' button in pagination.

showLastPage:
  type: boolean
  default: true
  description: Enables or disables the display of a 'last page' button in pagination.

firstArrow:
  type: string
  default: 'default arrow'
  description: Customizes the icon or text for the 'first page' button.

lastArrow:
  type: string
  default: 'default arrow'
  description: Customizes the icon or text for the 'last page' button.

previousArrow:
  type: string
  default: 'default arrow'
  description: Customizes the icon or text for the 'previous page' button.

nextArrow:
  type: string
  default: 'default arrow'
  description: Customizes the icon or text for the 'next page' button.

paginationInfo:
  type: string
  default: "Showing {0} to {1} of {2} entries"
  description: Custom message for pagination information, using placeholders for current page start, end, and total entries.

noDataContent:
  type: string
  default: 'No data available'
  description: Custom message to display when there is no data in the table.

stickyHeader:
  type: boolean
  default: false
  description: Enables or disables the sticky header functionality, keeping the header visible when scrolling.
```

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

### Vue3 Datatable Column Options

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Specifies the available options for configuring individual columns within the Vue3 Datatable. These options control column behavior, display, filtering, and sorting.

```APIDOC
isUnique: boolean
  - Description: Indicates if the database column is a primary key.
  - Default: false

field: string
  - Description: The name of the database column.
  - Default: ""

title: string
  - Description: The display name for the column.
  - Default: ""

value: string
  - Description: The filter value if filtering is enabled for the column.
  - Default: ""

condition: string
  - Description: The default condition for column filtering if enabled.
  - Default: "contain"

type: string
  - Description: The data type of the column (e.g., string, date, number, bool).
  - Default: ""

width: string
  - Description: Custom width for the column.
  - Default: ""

minWidth: string
  - Description: Custom minimum width for the column.
  - Default: ""

maxWidth: string
  - Description: Custom maximum width for the column.
  - Default: ""

hide: boolean
  - Description: Controls whether to show or hide the column.
  - Default: false

filter: boolean
  - Description: Enables or disables filtering for the column.
  - Default: true

search: boolean
  - Description: Enables or disables global search for the column.
  - Default: true

sort: boolean
  - Description: Enables or disables sorting for the column.
  - Default: true

cellRenderer: function, string
  - Description: Allows custom rendering for cells in the column.
  - Default: true

headerClass: string
  - Description: Custom CSS class for the header cell.
  - Default: ""

cellClass: string
  - Description: Custom CSS class for the data cells.
  - Default: ""
```

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

### Vue3-Datatable Component Props

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

This section details the props available for the vue3-datatable component. These props control the behavior, appearance, and data handling of the data table.

```APIDOC
Vue3DatatableProps:
  columns (required): array<colDef>
    Description: Defines the columns for the data table.
    Default: []

  rows (required): array<any>
    Description: The data rows to be displayed in the table.
    Default: []

  isServerMode: boolean
    Description: Enables server-side pagination when set to true.
    Default: false

  totalRows: number
    Description: Specifies the total number of rows, required when isServerMode is true.
    Default: 0

  skin: string
    Description: Applies custom styling classes for the table skin. Options include 'bh-table-striped' (stripe row), 'bh-table-hover' (hover row), 'bh-table-bordered' (bordered row), 'bh-table-compact' (compact table).
    Default: "bh-table-striped bh-table-hover"

  loading: boolean
    Description: Enables a loading indicator for the table.
    Default: false

  hasCheckbox: boolean
    Description: Enables checkboxes for rows.
    Default: false

  search: string
    Description: Enables global search functionality for the table.
    Default: ""

  page: number
    Description: Sets the current page number for pagination.
    Default: 1

  pageSize: number
    Description: Sets the number of rows to display per page.
    Default: 10

  pageSizeOptions: array<number>
    Description: Provides options for the number of rows per page.
    Default: [10, 20, 30, 50, 100]

  showPageSize: boolean
    Description: Controls the visibility of the page size selection options.
    Default: true

  rowClass: array<string>, function
    Description: Applies custom CSS classes to table rows.
    Default: ""

  cellClass: array<string>, function
    Description: Applies custom CSS classes to table cells.
    Default: ""

  sortable: boolean
    Description: Enables or disables column sorting.
    Default: true
```

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

### Vue3 Datatable Props

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Defines the main properties for configuring the Vue3 Datatable component. These props control aspects like table height, sticky headers, and row selection behavior.

```APIDOC
height: string
  - Description: Sets the height of the datatable. Only used when stickyHeader is enabled.
  - Default: "450px"

stickyFirstColumn: boolean
  - Description: Enables the fixed first column.
  - Default: false

cloneHeaderInFooter: boolean
  - Description: Enables cloning the header in the footer.
  - Default: false

selectRowOnClick: boolean
  - Description: Enables row selection via checkbox on row click.
  - Default: false
```

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

### Vue3 Datatable Events

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Lists the events emitted by the Vue3 Datatable component, which can be used to react to user interactions and data changes within the table.

```APIDOC
sortChange: Emitted when the sorting order of a column changes.

searchChange: Emitted when the global search input value changes.

pageChange: Emitted when the current page of the datatable changes.

pageSizeChange: Emitted when the number of items per page changes.

rowSelect: Emitted when a row is selected using the checkbox.

filterChange: Emitted when a column's filter criteria are changed.

rowClick: Emitted when a row is clicked.

rowDBClick: Emitted when a row is double-clicked.
```

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

### Vue3 Datatable Row Selection Methods

Source: https://github.com/bhaveshpatel200/vue3-datatable/blob/main/README.md

Enables management of row selection within the datatable, allowing users to select, unselect, and check the selection status of individual rows.

```javascript
getSelectedRows(): Array<any>
  // Returns all selected rows.

clearSelectedRows(): void
  // Unselects all selected rows.

selectRow(index: number): void
  // Selects the row with the given index. Non-existent rows will be ignored.

unselectRow(index: number): void
  // Unselects the row with the given index. Non-existent rows will be ignored.

isRowSelected(index: number): boolean
  // Returns true if the row with the given index is selected.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.