### Vue 3 Basic Grid Setup with ArrayDataProvider

Source: https://context7.com/einhasad/vue-datatable/llms.txt

Demonstrates basic setup of the Grid component in a Vue 3 application using ArrayDataProvider for in-memory data. It defines user data, configures columns, and initializes the data provider without pagination. This example requires '@grid-vue/grid' and its default CSS.

```vue
<template>
  <Grid :data-provider="provider" :columns="columns" />
</template>

<script setup lang="ts">
import { Grid, ArrayDataProvider, type Column } from '@grid-vue/grid'
import '@grid-vue/grid/style.css'

interface User {
  id: number
  name: string
  email: string
  role: string
}

const users: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
]

const provider = new ArrayDataProvider<User>({
  items: users,
  pagination: false,
  paginationMode: 'cursor'
})

const columns: Column<User>[] = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' }
]
</script>
```

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

### Install @grid-vue/grid Package

Source: https://context7.com/einhasad/vue-datatable/llms.txt

This command installs the @grid-vue/grid package using npm. It is the first step to integrate the data grid library into your Vue 3 project. Ensure you have Node.js and npm installed.

```bash
npm install @grid-vue/grid
```

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

### Test npm Package Installation

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Tests the installation of the published `datatable-vue` package in a temporary directory. This involves creating a new npm project, installing the package, and verifying that it downloads without errors.

```bash
# Test installation
cd /tmp
mkdir test-install
cd test-install
npm init -y
npm install datatable-vue

# Should download successfully
```

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

### Install Scoped npm Package

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Installs a scoped npm package by prefixing the package name with its scope, e.g., `@dimapopov/datatable-vue`. This command fetches and installs the specified package and its dependencies into the project.

```bash
npm install @dimapopov/datatable-vue
```

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

### Install datatable-vue Package

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Command to install the datatable-vue package from npm. This is a necessary step to test the published package locally.

```bash
npm install datatable-vue
```

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

### Vue Datatable Column Examples (JavaScript)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Provides practical examples of configuring table columns in Vue Datatable using JavaScript object literals. Covers simple column setup, custom value rendering, dynamic cell components, router links, conditional display, cell styling, and footer calculations.

```javascript
// Simple column:
{
  key: 'name',
  label: 'User Name'
}
```

```javascript
// Value extractor:
{
  key: 'fullName',
  label: 'Name',
  value: (user) => `${user.firstName} ${user.lastName}`
}
```

```javascript
// Dynamic component:
{
  key: 'actions',
  label: 'Actions',
  component: (user) => ({
    is: 'button',
    props: {
      onClick: () => editUser(user)
    },
    content: 'Edit'
  })
}
```

```javascript
// RouterLink component:
import { RouterLink } from 'vue-router'

{
  key: 'name',
  label: 'Name',
  component: (user) => ({
    is: RouterLink,
    props: {
      to: { name: 'user-detail', params: { id: user.id } }
    },
    content: user.name
  })
}
```

```javascript
// Sortable column:
{
  key: 'createdAt',
  label: 'Created',
  sort: 'created_at'
}
```

```javascript
// Conditional visibility:
{
  key: 'secretData',
  label: 'Secret',
  show: (user) => user.role === 'admin'
}
```

```javascript
// Cell styling:
{
  key: 'status',
  label: 'Status',
  options: (model) => ({
    class: model.isActive ? 'text-success' : 'text-danger',
    style: { fontWeight: 'bold' }
  })
}
```

```javascript
// Footer calculations:
{
  key: 'amount',
  label: 'Amount',
  footer: (models) => {
    const total = models.reduce((sum, m) => sum + m.amount, 0)
    return `Total: $${total.toFixed(2)}`
  }
}
```

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

### Install @grid-vue/grid using npm, yarn, or pnpm

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Instructions for installing the @grid-vue/grid package using common package managers. This is the first step to integrate the grid component into your Vue 3 project.

```bash
npm install @grid-vue/grid
```

```bash
yarn add @grid-vue/grid
```

```bash
pnpm add @grid-vue/grid
```

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

### Build Vue Datatable Package

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Compiles the Vue datatable package by first navigating to the library directory, cleaning previous build artifacts and node modules, installing dependencies, and then running the build script. This prepares the package for publishing.

```bash
# Make sure you're in the lib directory
cd /Users/dimapopov/www/elite-vehicle/elite-vehicle-backend/frontend/lib

# Clean and rebuild
rm -rf dist node_modules
npm install
npm run build

# Verify build output
ls -la dist/
```

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

### Simple Match Query Setup (TypeScript)

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Configures DSTElasticDataProvider to perform a simple Elasticsearch 'match' query on the 'name' field for the term 'laptop'. This is useful for basic text searching where exact word matching is sufficient. The results are fetched from '/api/elasticsearch/products'.

```typescript
import { DSTElasticDataProvider } from '@/lib/providers/DSTElasticDataProvider'

const provider = new DSTElasticDataProvider({
  url: '/api/elasticsearch/products',
  pageSize: 20,
  defaultQuery: DSTElasticDataProvider.buildMatchQuery('name', 'laptop')
})
```

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

### Basic Elasticsearch Grid Setup (TypeScript, Vue)

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Initializes DSTElasticDataProvider for basic Elasticsearch grid display with specified URL, pagination, page size, and default sorting. Defines columns with custom value renderers for log data. This setup is suitable for displaying log entries with timestamp, message, and level.

```typescript
import { DSTElasticDataProvider } from '@/lib/providers/DSTElasticDataProvider'
import NewGrid from '@src/spa/components/NewGrid.vue'

const provider = new DSTElasticDataProvider({
  url: '/api/elasticsearch/logs',
  pagination: true,
  paginationMode: 'cursor',
  pageSize: 50,
  defaultSort: [
    { timestamp: 'desc' },
    { _id: 'desc' }
  ]
})

const columns = [
  {
    key: 'timestamp',
    label: 'Time',
    value: (log) => new Date(log.timestamp).toLocaleString()
  },
  {
    key: 'message',
    label: 'Message',
    value: (log) => log.message
  },
  {
    key: 'level',
    label: 'Level',
    value: (log) => log.level
  }
]
```

```vue
<template>
  <NewGrid
    :data-provider="provider"
    :columns="columns"
  />
</template>
```

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

### Vue 3 Grid with HTTP Data Provider and URL State

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Example of integrating the Vue 3 Grid component using an HttpDataProvider and QueryParamsStateProvider. This setup fetches data from '/api/users' and persists grid state (filters, sorting, pagination) in the URL query parameters.

```vue
<template>
  <Grid
    :data-provider="provider"
    :columns="columns"
  />
</template>

<script setup lang="ts">
import { Grid, HttpDataProvider, QueryParamsStateProvider, type Column } from '@grid-vue/grid'
import { useRouter } from 'vue-router'

const router = useRouter()

// State Provider manages grid state (filters, sorting, pagination)
const stateProvider = new QueryParamsStateProvider({
  router,
  prefix: 'search'  // URL params will be ?search-name=John&search-sort=-email
})

const provider = new HttpDataProvider({
  url: '/api/users',
  pagination: true,
  paginationMode: 'page',
  pageSize: 20,
  stateProvider  // Grid state is persisted in URL
})

const columns: Column[] = [
  {
    key: 'id',
    label: 'ID',
    sort: 'id'
  },
  {
    key: 'name',
    label: 'Name',
    value: (user) => user.name
  },
  {
    key: 'email',
    label: 'Email',
    value: (user) => user.email
  }
]
</script>
```

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

### Query Management Methods

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Methods for setting and getting the Elasticsearch query.

```APIDOC
## Query Management Methods

### `setElasticQuery(query: any): void`

**Description:** Set the Elasticsearch DSL query.

### `getElasticQuery(): any`

**Description:** Get the current Elasticsearch query.
```

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

### Vue 3 Grid with Array Data Provider and LocalStorage State

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Example demonstrating the Vue 3 Grid component with an ArrayDataProvider and LocalStorageStateProvider. This setup uses a local array of users as the data source and persists grid state in localStorage, allowing preferences to survive page refreshes.

```vue
<template>
  <Grid
    :data-provider="provider"
    :columns="columns"
  />
</template>

<script setup lang="ts">
import { Grid, ArrayDataProvider, LocalStorageStateProvider, type Column } from '@grid-vue/grid'

const users = [
  { id: 1, name: 'John', email: 'john@example.com' },
  { id: 2, name: 'Jane', email: 'jane@example.com' },
  // ... more items
]

// State Provider persists grid state in localStorage
const stateProvider = new LocalStorageStateProvider({
  storageKey: 'my-users-grid'  // User preferences survive page refreshes
})

const provider = new ArrayDataProvider({
  items: users,
  pagination: true,
  paginationMode: 'cursor',
  pageSize: 10,
  stateProvider
})

const columns: Column[] = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' }
]
</script>
```

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

### Configure HttpDataProvider for API Data Fetching (TypeScript)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Demonstrates how to configure the HttpDataProvider to fetch data from an HTTP API. It shows setup with pagination, custom HTTP clients like axios, and integration with state providers for managing query parameters.

```typescript
interface HttpDataProviderConfig {
  url: string                          // API endpoint
  pagination: boolean                  // Enable pagination
  paginationMode: 'cursor' | 'page'    // Pagination mode
  pageSize?: number                    // Items per page (default: 20)
  stateProvider?: StateProvider        // State management (optional)
  router?: Router                      // Creates QueryParamsStateProvider if provided
  httpClient?: HttpClient              // Custom HTTP client function
  responseAdapter?: ResponseAdapter    // Response format adapter
  headers?: Record<string, string>     // Custom headers
}

// Example with custom HTTP client (axios)
const provider = new HttpDataProvider({
  url: '/api/users',
  pagination: true,
  paginationMode: 'page',
  stateProvider: new QueryParamsStateProvider({ router, prefix: 'search' }),
  httpClient: async (url) => {
    const response = await axios.get(url)
    return response.data
  }
})

// Backward compatibility: pass router directly
const provider2 = new HttpDataProvider({
  url: '/api/users',
  pagination: true,
  paginationMode: 'page',
  router  // Automatically creates QueryParamsStateProvider with prefix='search'
})
```

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

### Sorting Methods

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Methods for setting and getting the sort order.

```APIDOC
## Sorting Methods

### `setSort(field: string, order: 'asc' | 'desc'): void`

**Description:** Set the sort field and order.

### `getSort(): SortState | null`

**Description:** Get the current sort state.
```

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

### Multi-Field Search Setup (TypeScript)

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Sets up DSTElasticDataProvider for searching across multiple fields ('name', 'description', 'category') using an Elasticsearch 'multi_match' query for the phrase 'gaming laptop'. This enhances search capabilities by looking for the query terms in specified fields.

```typescript
const provider = new DSTElasticDataProvider({
  url: '/api/elasticsearch/products',
  pageSize: 20,
  defaultQuery: DSTElasticDataProvider.buildMultiMatchQuery(
    ['name', 'description', 'category'],
    'gaming laptop'
  )
})
```

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

### Vue Datatable Custom Column Rendering Example

Source: https://context7.com/einhasad/vue-datatable/llms.txt

This Vue.js code snippet demonstrates how to customize column rendering in a datatable. It utilizes the `Grid` component from `@grid-vue/grid` and defines columns with custom `component` or `value` functions to display data dynamically. The example includes custom badges for priority, formatted status text, a progress bar, and an assignee display with an avatar.

```vue
<template>
  <Grid :data-provider="provider" :columns="columns" />
</template>

<script setup lang="ts">
import { Grid, ArrayDataProvider, type Column, type ComponentOptions } from '@grid-vue/grid'

interface Task {
  id: number
  title: string
  priority: 'low' | 'medium' | 'high' | 'critical'
  status: 'pending' | 'in_progress' | 'completed'
  progress: number
  assignee: { name: string; avatar: string }
}

const tasks: Task[] = [
  {
    id: 1,
    title: 'Fix login bug',
    priority: 'critical',
    status: 'in_progress',
    progress: 75,
    assignee: { name: 'John Doe', avatar: 'https://i.pravatar.cc/150?img=1' }
  },
  {
    id: 2,
    title: 'Update docs',
    priority: 'low',
    status: 'pending',
    progress: 0,
    assignee: { name: 'Jane Smith', avatar: 'https://i.pravatar.cc/150?img=2' }
  }
]

const provider = new ArrayDataProvider({ items: tasks, pagination: false, paginationMode: 'cursor' })

const columns: Column<Task>[] = [
  { key: 'id', label: 'ID' },
  { key: 'title', label: 'Task' },

  // Custom badge component for priority
  {
    key: 'priority',
    label: 'Priority',
    component: (task: Task): ComponentOptions => ({
      is: 'span',
      props: {
        class: `priority-badge priority-${task.priority}`,
        style: {
          padding: '0.25rem 0.75rem',
          borderRadius: '1rem',
          fontSize: '0.75rem',
          fontWeight: 'bold',
          textTransform: 'uppercase',
          background: getPriorityColor(task.priority),
          color: 'white'
        }
      },
      content: task.priority
    })
  },

  // Formatted text using value function
  {
    key: 'status',
    label: 'Status',
    value: (task: Task) => task.status.replace('_', ' ').toUpperCase()
  },

  // Progress bar with nested children
  {
    key: 'progress',
    label: 'Progress',
    component: (task: Task): ComponentOptions => ({
      is: 'div',
      props: { style: { width: '100%', minWidth: '120px' } },
      children: [
        {
          is: 'div',
          props: {
            style: {
              width: '100%',
              height: '8px',
              background: '#e2e8f0',
              borderRadius: '4px',
              overflow: 'hidden',
              marginBottom: '4px'
            }
          },
          children: [
            {
              is: 'div',
              props: {
                style: {
                  width: `${task.progress}%`,
                  height: '100%',
                  background: task.progress === 100 ? '#48bb78' : '#667eea',
                  transition: 'width 0.3s ease'
                }
              }
            }
          ]
        },
        {
          is: 'span',
          props: {
            style: { fontSize: '0.75rem', color: '#718096' }
          },
          content: `${task.progress}%`
        }
      ]
    })
  },

  // Assignee with avatar
  {
    key: 'assignee',
    label: 'Assignee',
    component: (task: Task): ComponentOptions => ({
      is: 'div',
      props: { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
      children: [
        {
          is: 'img',
          props: {
            src: task.assignee.avatar,
            alt: task.assignee.name,
            style: {
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              objectFit: 'cover'
            }
          }
        },
        {
          is: 'span',
          content: task.assignee.name
        }
      ]
    })
  }
]

function getPriorityColor(priority: string): string {
  const colors: Record<string, string> = {
    critical: '#e53e3e',
    high: '#dd6b20',
    medium: '#d69e2e',
    low: '#38a169'
  }
  return colors[priority] || '#718096'
}
</script>

```

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

### Custom Response Adapters for API Data (TypeScript)

Source: https://context7.com/einhasad/vue-datatable/llms.txt

This snippet shows how to implement custom response adapters for HttpDataProvider to handle various API response formats. It includes examples for default, legacy, and a custom Stripe API adapter. Dependencies include @grid-vue/grid.

```typescript
import {
  HttpDataProvider,
  type ResponseAdapter,
  type PaginationData
} from '@grid-vue/grid'

// Example 1: Using DefaultResponseAdapter (default)
// Expected API response format:
// {
//   items: [...],
//   nextCursor: "abc123",
//   hasMore: true
// }
// OR
// {
//   items: [...],
//   pagination: { currentPage: 1, pageCount: 10, perPage: 20, totalCount: 200 }
// }
const defaultProvider = new HttpDataProvider({
  url: '/api/users',
  pagination: true,
  paginationMode: 'page'
  // Uses DefaultResponseAdapter by default
})

// Example 2: Using LegacyResponseAdapter
// Expected API response format:
// {
//   result: [...],
//   _meta: {
//     pagination: { currentPage: 1, pageCount: 10, perPage: 20, totalCount: 200 }
//   }
// }
import { LegacyResponseAdapter } from '@grid-vue/grid'

const legacyProvider = new HttpDataProvider({
  url: '/api/legacy/users',
  pagination: true,
  paginationMode: 'page',
  responseAdapter: new LegacyResponseAdapter()
})

// Example 3: Custom Response Adapter for Stripe API
// Expected Stripe API format:
// {
//   data: [...],
//   has_more: true,
//   object: "list"
// }
class StripeResponseAdapter<T> implements ResponseAdapter<T> {
  extractItems(response: unknown): T[] {
    const resp = response as { data?: T[] }
    return resp.data || []
  }

  extractPagination(response: unknown): PaginationData | undefined {
    const resp = response as { data?: T[]; has_more?: boolean }
    if (resp.data && resp.data.length > 0) {
      const lastItem = resp.data[resp.data.length - 1] as { id?: string }
      return {
        nextCursor: lastItem.id || '',
        hasMore: resp.has_more || false
      }
    }
    return undefined
  }

  isSuccess(response: unknown): boolean {
    const resp = response as { object?: string }
    return resp.object === 'list'
  }

  getErrorMessage(response: unknown): string | undefined {
    const resp = response as { error?: { message?: string } }
    return resp.error?.message
  }
}

const stripeProvider = new HttpDataProvider({
  url: 'https://api.stripe.com/v1/customers',
  pagination: true,
  paginationMode: 'cursor',
  responseAdapter: new StripeResponseAdapter(),
  headers: {
    'Authorization': 'Bearer sk_test_...'
  }
})

```

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

### Vue Page-Based Pagination and Sorting Datatable

Source: https://context7.com/einhasad/vue-datatable/llms.txt

Implements page-based pagination and column sorting for a Vue.js datatable. It uses HttpDataProvider to fetch data from a remote API and QueryParamsStateProvider to manage sorting and pagination state in the URL. The example includes custom rendering for status badges and date formatting.

```vue
<template>
  <Grid
    :data-provider="provider"
    :columns="columns"
    :show-pagination-summary="true"
    :max-visible-pages="5"
    :hide-prev-next-on-edge="true"
  />
</template>

<script setup lang="ts">
import {
  Grid,
  HttpDataProvider,
  QueryParamsStateProvider,
  type Column
} from '@grid-vue/grid'
import { useRouter } from 'vue-router'

interface Order {
  id: string
  order_number: string
  customer_name: string
  total: number
  status: 'pending' | 'processing' | 'shipped' | 'delivered'
  created_at: string
}

const router = useRouter()

const provider = new HttpDataProvider<Order>({
  url: 'https://api.example.com/orders',
  pagination: true,
  paginationMode: 'page', // Page-based pagination
  pageSize: 25,
  stateProvider: new QueryParamsStateProvider({
    router,
    prefix: 'order' // URL: ?order-sort=-created_at&order-page=2
  })
})

// Columns with sorting enabled
const columns: Column<Order>[] = [
  {
    key: 'order_number',
    label: 'Order #',
    sort: 'order_number' // Enable sorting
  },
  {
    key: 'customer_name',
    label: 'Customer',
    sort: 'customer_name'
  },
  {
    key: 'total',
    label: 'Total',
    sort: 'total',
    value: (order) => `$${order.total.toFixed(2)}`
  },
  {
    key: 'status',
    label: 'Status',
    sort: 'status',
    component: (order) => ({
      is: 'span',
      props: {
        class: `status-badge status-${order.status}`,
        style: getStatusStyle(order.status)
      },
      content: order.status.toUpperCase()
    })
  },
  {
    key: 'created_at',
    label: 'Date',
    sort: 'created_at',
    value: (order) => new Date(order.created_at).toLocaleDateString()
  }
]

function getStatusStyle(status: string): Record<string, string> {
  const styles: Record<string, Record<string, string>> = {
    pending: { background: '#fef5e7', color: '#f39c12', padding: '0.25rem 0.5rem', borderRadius: '0.25rem' },
    processing: { background: '#ebf5fb', color: '#3498db', padding: '0.25rem 0.5rem', borderRadius: '0.25rem' },
    shipped: { background: '#e8f8f5', color: '#1abc9c', padding: '0.25rem 0.5rem', borderRadius: '0.25rem' },
    delivered: { background: '#eafaf1', color: '#27ae60', padding: '0.25rem 0.5rem', borderRadius: '0.25rem' }
  }
  return styles[status] || {}
}
</script>

```

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

### Tips & Best Practices

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Recommendations for optimizing the use of DSTElasticDataProvider.

```APIDOC
## Tips & Best Practices

1.  **Unique Tiebreaker for Sort:** Always include a unique tiebreaker (like `_id`) in your `defaultSort` array for consistent cursor pagination.
    ```typescript
    defaultSort: [{ timestamp: 'desc' }, { _id: 'desc' }]
    ```

2.  **Keyword Fields for Terms Aggregations:** Use `.keyword` fields for `terms` aggregations to ensure exact matching.
    ```typescript
    DSTElasticDataProvider.buildTermsAggregation('category.keyword', 50)  // ✅ Correct
    DSTElasticDataProvider.buildTermsAggregation('category', 50)           // ❌ May not work as expected
    ```

3.  **Limit Aggregation Size:** Specify a `size` for `terms` aggregations to improve performance by fetching only the top terms.
    ```typescript
    DSTElasticDataProvider.buildTermsAggregation('tags', 10)  // Only top 10 tags
    ```

4.  **`trackTotalHits` Usage:** Use `trackTotalHits: true` for exact counts (can be slow on large datasets) or `trackTotalHits: 10000` for approximate counts above a threshold (faster).
    ```typescript
    trackTotalHits: true   // Exact count (slower)
    trackTotalHits: 10000  // Approximate above 10k (faster)
    ```

5.  **Optimize `pageSize`:** Adjust `pageSize` based on document size and network conditions. Smaller for large documents (10-20), larger for small documents (50-100).

6.  **Source Filtering:** Use `sourceFields` to reduce response payload size by specifying only the fields you need.
    ```typescript
    sourceFields: ['id', 'name', 'price']  // Only return these fields
    ```
```

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

### DSTElasticDataProvider Constructor

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Initializes the DSTElasticDataProvider with a configuration object and an optional router.

```APIDOC
## Constructor

Initializes the DSTElasticDataProvider.

### Method

`new DSTElasticDataProvider(config: DSTElasticDataProviderConfig, router?: any)`

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

**`config`** (DSTElasticDataProviderConfig) - Required - Configuration options for the data provider.
  - **`url`** (string) - Required - Elasticsearch endpoint URL.
  - **`pagination`** (boolean) - Optional - Enable pagination. Defaults to `true`.
  - **`paginationMode`** (string) - Optional - Pagination mode. Defaults to `'cursor'`.
  - **`pageSize`** (number) - Optional - Items per page. Defaults to `20`.
  - **`httpClient`** (ElasticHttpClient) - Optional - Custom HTTP client. Defaults to `fetch`.
  - **`defaultQuery`** (any) - Optional - Default Elasticsearch query. Defaults to `{ match_all: {} }`.
  - **`defaultSort`** (any[]) - Optional - Default sort array. Defaults to `[]`.
  - **`aggregations`** (Record<string, any>) - Optional - Aggregations configuration.
  - **`sourceFields`** (string[]) - Optional - Fields to return (`_source`).
  - **`trackTotalHits`** (boolean) - Optional - Track total hit count. Defaults to `true`.
  - **`searchPrefix`** (string) - Optional - URL query param prefix.

**`router`** (any) - Optional - Router instance.

### Request Example

```json
{
  "config": {
    "url": "http://localhost:9200",
    "pageSize": 50,
    "defaultSort": [{"timestamp": "desc"}, {"_id": "desc"}]
  }
}
```

### Response

None (constructor does not return a value)

```

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

### Troubleshooting

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Common issues and their solutions when using DSTElasticDataProvider.

```APIDOC
## Troubleshooting

### Problem: Pagination not working correctly

**Solution:** Ensure your `defaultSort` configuration includes a unique tiebreaker field (e.g., `_id`) to guarantee consistent ordering, which is crucial for cursor-based pagination.

```typescript
defaultSort: [{ myField: 'desc' }, { _id: 'desc' }]
```

### Problem: Aggregations not returning expected results

**Solution:** Verify that the `aggregations` configuration option is correctly set in the provider's constructor and that you are accessing the aggregation results using the correct keys.

```typescript
const aggs = provider.getAggregations()
const buckets = aggs?.myAgg?.buckets || []
```

### Problem: Search queries are not returning correct results

**Solution:** Double-check that you are using the appropriate query builder methods for your field types and that the field names in your queries exactly match the field names in your Elasticsearch index.

```typescript
// For general text fields (analyzed)
DSTElasticDataProvider.buildMatchQuery('description', searchText)

// For exact matches on keyword fields (not analyzed)
DSTElasticDataProvider.buildTermQuery('status.keyword', 'active')
```
```

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

### Initialize Git Repository and Set Remote Origin

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Initializes a new Git repository or configures an existing one to connect to a remote GitHub repository. It sets the main branch name and pushes the initial commit to the origin.

```bash
# Initialize repo and push
git remote add origin https://github.com/YOUR_USERNAME/datatable-vue.git
git branch -M main
git push -u origin main
```

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

### Static Helper Methods

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Utility methods for building Elasticsearch queries and aggregations.

```APIDOC
## Static Helper Methods

### `DSTElasticDataProvider.buildMatchQuery(field: string, value: string): any`

**Description:** Build a match query for full-text search.

### `DSTElasticDataProvider.buildMultiMatchQuery(fields: string[], value: string): any`

**Description:** Build a multi-match query across multiple fields.

### `DSTElasticDataProvider.buildBoolQuery(options: { must?: any[]; should?: any[]; must_not?: any[]; filter?: any[] }): any`

**Description:** Build a boolean query combining multiple clauses.

### `DSTElasticDataProvider.buildTermQuery(field: string, value: any): any`

**Description:** Build a term query for exact matches (typically on keyword fields).

### `DSTElasticDataProvider.buildRangeQuery(field: string, options: { gte?: any; lte?: any; gt?: any; lt?: any }): any`

**Description:** Build a range query for numerical or date fields.

### `DSTElasticDataProvider.buildTermsAggregation(field: string, size?: number): any`

**Description:** Build a terms aggregation to get counts for distinct terms in a field.

### `DSTElasticDataProvider.buildDateHistogramAggregation(field: string, interval: string): any`

**Description:** Build a date histogram aggregation for time-based data.
```

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

### Login to npm Registry

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Logs the user into the npm registry using their credentials. Prompts for username, password, and email. Supports Two-Factor Authentication (2FA) with one-time passwords.

```bash
npm login

# You'll be prompted for:
# Username: your-npm-username
# Password: (your password - won't be visible)
# Email: (public) your-email@example.com

# Optional: One-Time Password (if 2FA enabled)
```

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

### Integrating Custom Filters with Vue-Datatable

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Provides a Vue template example demonstrating how to integrate custom filter components with the data table. It outlines the pattern for updating filters and refreshing the table data.

```vue
<template>
  <Grid :data-provider="provider" :columns="columns">
    <template #search="{ provider, refresh }">
      <!-- Your project-specific filter components -->
      <MyDateRangeFilter
        @change="(value) => {
          const stateProvider = provider.getStateProvider()
          stateProvider.setFilter('dateFrom', value.from)
          stateProvider.setFilter('dateTo', value.to)
          refresh()
        }"
      />

      <MySelectFilter
        :options="statusOptions"
        @change="(value) => {
          provider.getStateProvider().setFilter('status', value)
          refresh()
        }"
      />
    </template>
  </Grid>
</template>
```

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

### Dry Run npm Package Publish

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Simulates the `npm publish` command without actually uploading the package. This allows verification of the files that will be included in the published package and their estimated size.

```bash
npm publish --dry-run

# Should show ~28 files, ~61 KB
```

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

### Custom Empty State Display in Vue-Datatable

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Explains how to define a custom view for when the data table contains no records. This can include messages, images, or other elements to guide the user. It uses the #empty template slot.

```vue
<Grid :data-provider="provider" :columns="columns">
  <template #empty>
    <div class="custom-empty">
      <img src="/empty-state.svg" />
      <p>No data found. Try adjusting your filters.</p>
    </div>
  </template>
</Grid>
```

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

### Create and Push Git Tag for Release

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Creates a Git tag for a specific version (e.g., `v0.1.0`) and pushes this tag to the remote repository. This is a standard practice for marking release points in the project's history.

```bash
# Tag the version
git tag v0.1.0

# Push tag
git push origin v0.1.0
```

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

### URL State Management with HashStateProvider

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Demonstrates using HashStateProvider to manage the data table's state within the URL hash fragment. This is an alternative to query parameters for state persistence.

```text
/users#search-q=john&search-sort=-created_at
```

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

### Data Loading Methods

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Methods for loading, loading more, and refreshing data from the provider.

```APIDOC
## Data Loading Methods

### `load(options?: LoadOptions): Promise<LoadResult<T>>`

**Description:** Load initial data.

### `loadMore(): Promise<LoadResult<T>>`

**Description:** Load the next page of data.

### `refresh(): Promise<LoadResult<T>>`

**Description:** Refresh data from the beginning.
```

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

### Vue-Datatable CSS Custom Properties for Styling

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Provides examples of CSS custom properties that can be overridden to theme the data table component. This allows for easy visual customization without modifying the component's source code.

```css
:root {
  --grid-border-color: #e0e0e0;
  --grid-header-bg: #f8f9fa;
  --grid-header-color: #212529;
  --grid-row-hover-bg: #f5f5f5;
  --grid-button-active-bg: #007bff;
  --grid-button-active-color: #fff;
}
```

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

### Vue Datatable Toolbar Slot Implementation (Vue.js)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Shows how to customize the toolbar area of Vue Datatable using the `#toolbar` slot. This example includes a refresh button that can trigger a data reload and shows the loading state of the grid.

```vue
<Grid :data-provider="provider" :columns="columns">
  <template #toolbar="{ refresh, loading }">
    <button @click="refresh" :disabled="loading">
      Refresh
    </button>
  </template>
</Grid>
```

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

### Check npm Package Availability

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Verifies if a package name is already taken on the npm registry by attempting to view its details. If package information is returned, the name is in use.

```bash
npm view datatable-vue
# If it exists, you'll see package info
```

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

### URL State Management with QueryParamsStateProvider

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Explains how QueryParamsStateProvider synchronizes the data table's state (search, sort, page) with URL query parameters. This allows for bookmarkable and shareable table states.

```text
/users?search-q=john&search-sort=-created_at&search-page=2
```

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

### Vue-Datatable State Provider Implementations

Source: https://context7.com/einhasad/vue-datatable/llms.txt

Demonstrates the initialization of different StateProvider types for Vue-Datatable, including InMemory, QueryParams, LocalStorage, and Hash. Each provider is configured with sample data and specific options like router integration or storage keys. These providers manage grid state independently of data fetching.

```typescript
import {
  ArrayDataProvider,
  InMemoryStateProvider,
  QueryParamsStateProvider,
  LocalStorageStateProvider,
  HashStateProvider,
  type Column
} from '@grid-vue/grid'
import { useRouter } from 'vue-router'

interface Task {
  id: number
  title: string
  status: string
}

const tasks: Task[] = [
  { id: 1, title: 'Task 1', status: 'pending' },
  { id: 2, title: 'Task 2', status: 'completed' }
]

// Example 1: InMemoryStateProvider (state lost on refresh)
const inMemoryProvider = new ArrayDataProvider({
  items: tasks,
  pagination: true,
  paginationMode: 'page',
  pageSize: 10,
  stateProvider: new InMemoryStateProvider()
})

// Example 2: QueryParamsStateProvider (state in URL query params)
// URL becomes: ?search-title=task&search-sort=-status&search-page=2
const router = useRouter()
const queryParamsProvider = new ArrayDataProvider({
  items: tasks,
  pagination: true,
  paginationMode: 'page',
  pageSize: 10,
  stateProvider: new QueryParamsStateProvider({
    router,
    prefix: 'search' // Customize prefix
  })
})

// Example 3: LocalStorageStateProvider (persists across sessions)
const localStorageProvider = new ArrayDataProvider({
  items: tasks,
  pagination: true,
  paginationMode: 'page',
  pageSize: 10,
  stateProvider: new LocalStorageStateProvider({
    storageKey: 'my-tasks-grid-state' // Custom storage key
  })
})

// Example 4: HashStateProvider (state in URL hash)
// URL becomes: #search-title=task&search-sort=-status
const hashProvider = new ArrayDataProvider({
  items: tasks,
  pagination: true,
  paginationMode: 'page',
  pageSize: 10,
  stateProvider: new HashStateProvider({
    router,
    prefix: 'search'
  })
})
```

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

### Date Range Query using DSTElasticDataProvider

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Creates an Elasticsearch query to filter data within a specific date range using DSTElasticDataProvider's `buildRangeQuery`. This example sets a default query for logs created within the year 2024 and sorts them by creation date.

```typescript
const query = DSTElasticDataProvider.buildBoolQuery({
  must: [
    DSTElasticDataProvider.buildRangeQuery('created_at', {
      gte: '2024-01-01',
      lte: '2024-12-31'
    })
  ]
})

const provider = new DSTElasticDataProvider({
  url: '/api/elasticsearch/logs',
  pageSize: 100,
  defaultQuery: query,
  defaultSort: [{ created_at: 'desc' }]
})
```

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

### Vue Datatable Search Slot Implementation (Vue.js)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Demonstrates how to implement a custom search input using the `#search` slot in Vue Datatable. This example shows how to bind the input value to the StateProvider's filter and trigger a grid refresh on user input.

```vue
<Grid :data-provider="provider" :columns="columns">
  <template #search="{ provider, refresh }">
    <input
      type="text"
      @input="(e) => {
        // StateProvider handles state persistence (URL, localStorage, etc.)
        provider.getStateProvider().setFilter('q', e.target.value)
        refresh()
      }"
    />
  </template>
</Grid>
```

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

### DSTElasticDataProvider Constructor and Configuration

Source: https://github.com/einhasad/vue-datatable/blob/main/doc/DSTElasticDataProvider.md

Initializes the DSTElasticDataProvider with configuration options for connecting to Elasticsearch. Key options include the Elasticsearch endpoint URL, pagination settings, custom HTTP clients, default queries and sorts, aggregations, source field filtering, and total hit tracking.

```typescript
new DSTElasticDataProvider(config: DSTElasticDataProviderConfig, router?: any)
```

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

### Vue-Datatable Programmatic State Management

Source: https://context7.com/einhasad/vue-datatable/llms.txt

Shows how to programmatically manage the state of a Vue-Datatable using an InMemoryStateProvider. This includes setting and getting filters and sorting, as well as clearing individual states or the entire state. This is useful for controlling grid behavior directly in your application logic.

```typescript
// Example 5: Programmatic state management
const stateProvider = new InMemoryStateProvider()

// Set filters
stateProvider.setFilter('status', 'completed')
stateProvider.setFilter('title', 'important')

// Set sorting
stateProvider.setSort('created_at', 'desc')

// Get state
const filters = stateProvider.getAllFilters()
// { status: 'completed', title: 'important' }

const sort = stateProvider.getSort()
// { field: 'created_at', order: 'desc' }

// Clear state
stateProvider.clearFilter('status')
stateProvider.clearSort()
stateProvider.clear() // Clear all state
```

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

### Create GitHub Release

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Manually creates a new release on GitHub by associating it with a Git tag. This process typically involves providing a release title and description, and upon publishing, can trigger associated CI/CD workflows.

```bash
# Create release on GitHub:
# Go to: https://github.com/YOUR_USERNAME/datatable-vue/releases/new
# - Choose tag: v0.1.0
# - Title: v0.1.0 - Initial Release
# - Click "Publish release"

# GitHub Actions will automatically publish to npm!
```

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

### Vue Datatable Row Options Configuration (Vue.js)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Illustrates how to customize row appearance and attributes in Vue Datatable using the `row-options` prop. This example shows how to dynamically apply CSS classes and inline styles based on row data, and set custom data attributes.

```vue
<Grid
  :data-provider="provider"
  :columns="columns"
  :row-options="getRowOptions"
/>

<script setup>
function getRowOptions(model) {
  return {
    class: {
      'inactive-row': !model.isActive,
      'premium-user': model.isPremium
    },
    style: {
      backgroundColor: model.highlighted ? '#fffacd' : undefined
    },
    'data-user-id': model.id
  }
}
</script>
```

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

### View Published npm Package Details

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

Retrieves and displays information about a specific package published on npm. This is useful for verifying that the package has been published correctly and checking its version and metadata.

```bash
npm view datatable-vue

# Should output package information
```

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

### Version Bumping for npm Packages

Source: https://github.com/einhasad/vue-datatable/blob/main/PUBLISH.md

npm commands for incrementing package versions (patch, minor, major) and publishing to npm. Used for managing releases based on the type of changes made.

```bash
# Bug fixes (0.1.0 → 0.1.1)
npm version patch

# New features (0.1.0 → 0.2.0)
npm version minor

# Breaking changes (0.1.0 → 1.0.0)
npm version major

# Then publish
npm publish --access public
```

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

### Define Custom Response Adapter (TypeScript)

Source: https://github.com/einhasad/vue-datatable/blob/main/README.md

Shows how to create a custom `ResponseAdapter` to handle non-standard API response formats. This involves implementing methods to extract items, pagination data, check for success status, and retrieve error messages from diverse API responses. An example of integrating this adapter with `HttpDataProvider` is provided.

```ts
class MyCustomAdapter implements ResponseAdapter {
  extractItems(response: any): any[] {
    return response.data.items
  }

  extractPagination(response: any): PaginationData | undefined {
    if (response.data.nextToken) {
      return {
        nextCursor: response.data.nextToken,
        hasMore: response.data.hasNextPage
      }
    }
    return undefined
  }

  isSuccess(response: any): boolean {
    return response.success === true
  }

  getErrorMessage(response: any): string | undefined {
    return response.error?.message
  }
}

const provider = new HttpDataProvider({
  url: '/api/data',
  pagination: true,
  paginationMode: 'cursor',
  responseAdapter: new MyCustomAdapter()
}, router)
```

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

### Vue Datatable with Server-Side Data Fetching (Vue.js)

Source: https://context7.com/einhasad/vue-datatable/llms.txt

This snippet demonstrates how to use HttpDataProvider in Vue.js for server-side data fetching. It supports pagination, state management via QueryParamsStateProvider, and basic search functionality. It requires Vue Router and the @grid-vue/grid library.

```vue
<template>
  <div>
    <input
      v-model="searchQuery"
      @input="handleSearch"
      placeholder="Search users..."
    />
    <Grid
      :data-provider="provider"
      :columns="columns"
      @loaded="onDataLoaded"
      @error="onError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Grid,
  HttpDataProvider,
  QueryParamsStateProvider,
  type Column
} from '@grid-vue/grid'

interface User {
  id: number
  username: string
  email: string
  created_at: string
}

const router = useRouter()
const searchQuery = ref('')

// Create provider with QueryParamsStateProvider (state in URL)
const stateProvider = new QueryParamsStateProvider({
  router,
  prefix: 'search' // URL params: ?search-username=john&search-sort=-created_at
})

const provider = new HttpDataProvider<User>({
  url: 'https://api.example.com/users',
  pagination: true,
  paginationMode: 'page',
  pageSize: 20,
  stateProvider,
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  }
})

const columns: Column<User>[] = [
  { key: 'id', label: 'ID', sort: 'id' },
  { key: 'username', label: 'Username', sort: 'username' },
  { key: 'email', label: 'Email', sort: 'email' },
  {
    key: 'created_at',
    label: 'Created',
    sort: 'created_at',
    value: (user) => new Date(user.created_at).toLocaleDateString()
  }
]

function handleSearch() {
  provider.load({ searchParams: { username: searchQuery.value } })
}

function onDataLoaded(items: User[]) {
  console.log('Loaded items:', items.length)
}

function onError(error: Error) {
  console.error('Failed to load data:', error)
}
</script>
```