### Minimal Grid Configuration

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

A basic grid setup with essential column definitions and data. Use this as a starting point for simple data displays.

```javascript
Grid.grid('container', {
  columns: [
    { name: 'id' },
    { name: 'name' }
  ],
  data: {
    dataTable: {
      columns: {
        id: [1, 2, 3],
        name: ['Alice', 'Bob', 'Charlie']
      }
    }
  }
});
```

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

### Complete Grid Initialization with Resizing Enabled

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/column-resizing.md

Example of initializing a Grid instance with column resizing enabled in 'adjacent' mode.

```javascript
Grid.grid('container', {
  columns: [
    { name: 'id', width: 50 },
    { name: 'name', width: 200 },
    { name: 'email', width: 250 },
    { name: 'phone', width: 150 }
  ],
  data: { dataTable: {...} },
  rendering: {
    columns: {
      resizing: {
        enabled: true,      // Enable resize handles
        mode: 'adjacent'    // Adjacent mode (default)
      }
    }
  }
});
```

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

### Install Highcharts Grid Lite via NPM

Source: https://github.com/highcharts/grid-lite-dist/blob/main/README.md

Install the Grid Lite package using NPM. Then, import the package and its CSS into your project.

```bash
npm install @highcharts/grid-lite
```

```js
import * as Grid from "@highcharts/grid-lite";
import "@highcharts/grid-lite/css/grid-lite.css";
```

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

### Grid Initialization Example

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

Demonstrates how to initialize a Highcharts Grid Lite instance using the static `grid` factory method, both synchronously and asynchronously.

```javascript
// Synchronous initialization
const grid = Grid.grid('container', {
  columns: [{ name: 'id' }, { name: 'name' }],
  data: { dataTable: { columns: { id: [1, 2], name: ['Alice', 'Bob'] } } }
});

// Asynchronous initialization
const gridPromise = Grid.grid('container', options, true);
gridPromise.then(grid => {
  console.log('Grid initialized');
});
```

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

### Configure Grid Lite with DataTable

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Example of initializing Grid Lite with data from a DataTable object using the 'data' option.

```javascript
Grid.grid('container', {
  data: {
    dataTable: { columns: { id: [1, 2], name: ['Alice', 'Bob'] } }
  }
});
```

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

### Get Version String

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Retrieve the current version string of the Grid library.

```javascript
Grid.version
```

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

### Configure Grid Lite with CSV Data

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Example of initializing Grid Lite with data from a CSV file using the 'data' option.

```javascript
Grid.grid('container', {
  data: { connector: { type: 'CSV', csvURL: 'data.csv' } }
});
```

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

### Handle Grid Render Completion

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

This example shows how to execute a callback function once the grid has finished rendering using the `render` method's promise.

```javascript
grid.render().then(() => {
  console.log('Grid rendered');
});
```

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

### Load CSV and Update Grid Data

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

This example demonstrates loading data from a CSV file using a `DataConnector` and then updating the grid with that data.

```javascript
const csvConnector = new Grid.DataConnector({ url: 'data.csv' });
await csvConnector.load();
await grid.updateData(csvConnector);
```

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

### Chainable Pattern Example

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/types.md

Demonstrates fluent chaining of methods that return 'this'. Use this pattern for concise and readable method calls.

```javascript
table
  .setCell('id', 0, 1)
  .setCell('name', 0, 'Alice')
  .setCell('email', 0, 'alice@example.com');
```

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

### DataConnector.startPolling

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

Configures and starts a polling mechanism to periodically fetch updated data from the source at a specified interval.

```APIDOC
## DataConnector.startPolling

### Description
Starts polling for new data at intervals.

### Method
`startPolling(refreshTime, eventDetail?): Promise<void>`

### Parameters
#### Path Parameters
- **refreshTime** (number) - Required - Polling interval in milliseconds.
- **eventDetail** (`DataEventDetail`) - Optional - Custom event metadata.

### Returns
Promise resolving when polling starts.
```

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

### Access Grid Registry

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Get a reference to the registry containing all active grid instances.

```javascript
Grid.grids
```

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

### Instantiate DataPool with Connector Configurations

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Create a new DataPool instance and define multiple data connectors with their respective configurations. This example shows how to register JSON, CSV, and Google Sheets connectors.

```javascript
const pool = new Grid.DataPool({
  connectors: {
    'users': {
      type: 'JSON',
      JSONUrl: 'https://api.example.com/users.json'
    },
    'products': {
      type: 'CSV',
      csvURL: 'https://example.com/products.csv'
    },
    'sales': {
      type: 'GoogleSheets',
      googleSpreadsheetKey: 'ABC123...'
    }
  }
});
```

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

### Column Width Units Example

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/column-resizing.md

Demonstrates how to specify column widths using different units: pixels, percentage, and 'auto' for even distribution. The resizing behavior for percentage and 'auto' units is influenced by the selected mode.

```javascript
{
  name: 'col1',
  width: 100        // Pixels
}

{
  name: 'col2',
  width: '30%'      // Percentage of container
}

{
  name: 'col3',
  width: 'auto'     // Evenly distributed
}
```

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

### Update Grid Data and Pagination

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

This example shows how to update the grid's data and change the items per page setting using the `update` method.

```javascript
// Update data and pagination
await grid.update({
  data: { dataTable: newData },
  pagination: { itemsPerPage: 25 }
});
```

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

### Registering a Custom Resizing Mode

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/column-resizing.md

Example of how to register a custom resizing mode by extending the ResizingMode class and assigning it to the types object.

```typescript
// Register a custom resizing mode
const CustomResizingMode = class extends ResizingMode {
  // Custom implementation
};

ColumnResizing.types.custom = CustomResizingMode;
```

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

### Get Pagination Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Retrieve the current pagination configuration from the Grid instance. Use this to inspect or programmatically access pagination settings.

```typescript
get options(): PaginationOptions | undefined
```

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

### DataCursor Method Chaining Example

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-cursor.md

Demonstrates the fluent method chaining capability of DataCursor, where methods return 'this' to allow sequential calls.

```javascript
const dataCursor = new Grid.DataCursor();

dataCursor
  .addListener(table1.id, 'hover', hoverListener)
  .addListener(table1.id, 'select', selectListener)
  .addListener(table2.id, 'hover', otherHoverListener)
  .emitCursor(table1, {
    type: 'position',
    row: 0,
    column: 'id',
    state: 'hover'
  }, event, true);
```

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

### Set Default Column Options in Grid Lite

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Example of applying default settings to all columns using 'columnDefaults', with specific overrides for individual columns.

```javascript
Grid.grid('container', {
  columnDefaults: {
    width: 150,
    cells: { format: '{value}' },
    filtering: { enabled: true }
  },
  columns: [
    { name: 'id', width: 50 },  // Override width
    { name: 'name' }             // Use defaults
  ]
});
```

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

### Define Grid Lite Columns

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Example of configuring individual columns for Grid Lite, specifying properties like name, header, width, and data type.

```javascript
Grid.grid('container', {
  columns: [
    { name: 'id', header: 'ID', width: 50, dataType: 'number' },
    { name: 'name', header: 'Name', width: 200 },
    { name: 'email', header: 'Email', width: 250 },
    {
      name: 'active',
      header: 'Active',
      dataType: 'boolean',
      cells: { format: '{value}' }
    }
  ]
});
```

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

### Starting Data Polling

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

Enable periodic data fetching with `startPolling`, specifying the refresh interval in milliseconds. This is useful for keeping data up-to-date in real-time applications.

```typescript
startPolling(refreshTime: number, eventDetail?: DataEventDetail): Promise<void>
```

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

### render

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

Renders or re-renders the Grid from its current state. This is useful for refreshing the grid's display after external changes or initial setup.

```APIDOC
## render

### Description
Renders or re-renders the Grid from its current state. This is useful for refreshing the grid's display after external changes or initial setup.

### Method Signature
`render(): Promise<void>`

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* None

### Request Example
```javascript
grid.render().then(() => {
  console.log('Grid rendered');
});
```

### Response
#### Success Response (void)
Resolves when rendering completes.

#### Response Example
N/A (Promise resolves with no value)
```

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

### Full-Featured Grid Configuration

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

A comprehensive grid setup including advanced features like column resizing, theming, accessibility, and custom pagination language. Suitable for complex reporting and data management interfaces.

```javascript
Grid.grid('container', {
  id: 'my-grid',
  caption: { text: 'Sales Report' },
  description: { text: 'Q4 2024' },
  columns: [
    { name: 'date', header: 'Date', dataType: 'date', width: 100 },
    { name: 'region', header: 'Region', width: 150 },
    { name: 'revenue', header: 'Revenue', dataType: 'number', width: 120 },
    { name: 'growth', header: 'Growth %', dataType: 'number', width: 100 }
  ],
  data: { connector: { type: 'CSV', csvURL: 'sales.csv' } },
  pagination: {
    enabled: true,
    itemsPerPage: 25,
    position: 'bottom',
    pageSizeSelectorOptions: [10, 25, 50, 100]
  },
  rendering: {
    theme: 'hcg-theme-default',
    columns: { resizing: { enabled: true, mode: 'adjacent' } },
    rows: { virtualization: true }
  },
  accessibility: { enabled: true },
  lang: {
    pagination: {
      firstPage: 'First',
      lastPage: 'Last',
      nextPage: 'Next',
      previousPage: 'Previous'
    }
  }
});
```

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

### Register Custom Formatting Helpers

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/templating-utilities.md

Define and register custom helper functions using `Grid.Templating.helpers` for dynamic cell formatting. This example adds percentage and status formatters.

```javascript
Grid.Templating.helpers.percentage = (value) => {
  const num = Grid.Templating.numberFormat(value * 100, 1);
  return num + '%';
};

Grid.Templating.helpers.status = (value) => {
  return value ? '✓ Active' : '✗ Inactive';
};

Grid.grid('container', {
  columns: [
    {
      name: 'growth',
      cells: { format: '{percentage(value)}' }
    },
    {
      name: 'active',
      dataType: 'boolean',
      cells: { format: '{status(value)}' }
    }
  ]
});
```

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

### Basic Grid Initialization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Demonstrates how to import and initialize a basic grid with columns and data. Ensure the CSS is also imported for proper styling.

```javascript
import * as Grid from '@highcharts/grid-lite';
import '@highcharts/grid-lite/css/grid-lite.css';

// Create a grid
Grid.grid('container', {
  columns: [
    { name: 'id', header: 'ID', width: 50 },
    { name: 'name', header: 'Name', width: 200 },
    { name: 'email', header: 'Email', width: 250 }
  ],
  data: {
    dataTable: {
      columns: {
        id: [1, 2, 3],
        name: ['Alice', 'Bob', 'Charlie'],
        email: ['alice@example.com', 'bob@example.com', 'charlie@example.com']
      }
    }
  },
  pagination: {
    enabled: true,
    itemsPerPage: 10
  }
});
```

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

### Get a Specific Row

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Retrieves a single row by its index. Optionally, specify column IDs to get only specific data.

```typescript
getRow(rowIndex: number, columnIds?: Array<string>): Row | undefined
```

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

### Detect High Contrast Mode

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/templating-utilities.md

Provides an example of using Grid.isHighContrastModeActive to check if the user's system is in high contrast mode. This allows for conditional styling adjustments, such as applying a specific theme.

```javascript
if (Grid.isHighContrastModeActive()) {
  // Increase border thickness or adjust colors
  Grid.grid('container', {
    rendering: {
      theme: 'hcg-theme-high-contrast'
    }
  });
}
```

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

### Typical Grid Usage: Create, Update, and Access

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

Demonstrates the common workflow for using the Grid class: creating a grid with initial configuration and data, updating its data later, and accessing its table element.

```javascript
// 1. Create Grid with data
const grid = Grid.grid('container', {
  columns: [
    { name: 'id', width: 50 },
    { name: 'name', width: 200 },
    { name: 'email', width: 250 }
  ],
  data: {
    dataTable: {
      columns: {
        id: [1, 2, 3],
        name: ['Alice', 'Bob', 'Charlie'],
        email: ['alice@example.com', 'bob@example.com', 'charlie@example.com']
      }
    }
  },
  pagination: {
    enabled: true,
    itemsPerPage: 10
  }
});

// 2. Update data later
grid.update({
  data: { dataTable: newDataTable }
}).then(() => {
  console.log('Data updated and rendered');
});

// 3. Access table element
const tableElement = grid.tableElement;
console.log(tableElement.rows.length);
```

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

### Retrieve a Column by ID

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Get all values for a specific column.

```javascript
const nameColumn = table.getColumn('name');
// Returns ['Alice', 'Bob', 'Charlie']
```

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

### Create and Display Grid

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/api-summary.md

Initialize a new Grid instance with specified columns, data, and pagination settings. Use this to set up the basic grid structure.

```javascript
const grid = Grid.grid('container', {
  columns: [...],
  data: { dataTable: {...} },
  pagination: { enabled: true }
});
```

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

### Grid Initialization Methods

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Shows different ways to initialize the grid component. The factory method is recommended for most use cases.

```javascript
// Factory method (recommended)
const grid = Grid.grid('container', options);

// Constructor
const grid = new Grid.Grid('container', options);

// Asynchronous
const grid = await Grid.grid('container', options, true);
```

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

### Get All Column IDs

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Retrieve an array containing all the IDs of the columns present in the DataTable.

```javascript
const columnIds = table.getColumnIds(); // ['id', 'name', 'email']
```

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

### Create Grid Instance

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Use this function to create a new grid instance. It takes the render-to element, options, and an optional async flag.

```javascript
Grid.grid(renderTo, options, async?)
```

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

### Get All Registered Connector IDs

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Returns an array containing the IDs of all connectors currently registered within the DataPool.

```typescript
getConnectorIds(): Array<string>
```

```javascript
const connectorIds = pool.getConnectorIds();
// Returns: ['users', 'products', 'sales']
```

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

### Get Row Data

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Fetches a row object using its index. Can retrieve all columns or a subset specified by column IDs.

```javascript
const row = table.getRow(0);
// Returns { id: 1, name: 'Alice', email: 'alice@example.com' }
```

```javascript
const partial = table.getRow(0, ['name', 'email']);
// Returns { name: 'Alice', email: 'alice@example.com' }
```

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

### Enable Row Virtualization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Configure row rendering settings, including enabling virtualization and setting buffer size. Virtualization is off by default.

```javascript
Grid.grid('container', {
  rendering: {
    rows: {
      virtualization: true,
      virtualizationThreshold: 50,
      bufferSize: 15
    }
  }
});
```

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

### Create a DataTable with Initial Data

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Initialize a DataTable with predefined columns and metadata.

```javascript
const table = new Grid.DataTable({
  columns: {
    id: [1, 2, 3],
    name: ['Alice', 'Bob', 'Charlie']
  },
  id: 'my-table',
  metadata: { description: 'User data' }
});
```

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

### Asynchronous Pool Operations

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Interact with the pool asynchronously to get a connector by ID or set connector options. These methods return Promises.

```javascript
// Pool operations
await pool.getConnector(id)
await pool.setConnectorOptions(options, true)
```

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

### Grid Creation with Async

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Asynchronously create a grid instance using the Grid.grid method. The third argument indicates whether to render immediately.

```javascript
// Grid creation
await Grid.grid(renderTo, options, true)
```

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

### Retrieve a Column as a Reference

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Get a readonly reference to a column for improved performance with large datasets. Use this when you only need to read the data.

```javascript
// Get as reference for performance
const largeColumn = table.getColumn('largeData', true);
```

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

### Grid Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

Initializes a new Grid instance, managing its rendering, configuration, and lifecycle. It takes a render target, options object, and an optional callback.

```APIDOC
## Grid Constructor

### `Grid(renderTo, options, afterLoadCallback?)`

Creates a new Grid instance and initializes it for rendering.

#### Parameters
- **renderTo** (string | HTMLElement) - Required - The render target (HTML element or CSS selector ID) where the Grid will be mounted. If a string is provided, it is treated as an element ID.
- **options** (Options) - Required - Configuration object controlling Grid behavior, columns, data, pagination, and rendering. See `Options` type for available settings.
- **afterLoadCallback** ((grid: Grid) => void) - Optional - Optional callback function invoked after the Grid completes initialization. Receives the Grid instance as argument.

**Returns:** `Grid` instance with rendered table and active event listeners.
```

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

### Using Icon Names in Configuration

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/svg-icons.md

Illustrates how icon names are referenced in various Grid configuration options, such as the context menu items and pagination buttons.

```APIDOC
## Icon Names in Configuration

Icon names are used in various Grid options:

```javascript
Grid.grid('container', {
  // In cell context menu
  contextMenu: {
    items: [
      { label: 'Copy', icon: 'copy' },
      { label: 'Delete', icon: 'trash' }
    ]
  },
  
  // In pagination buttons (auto-configured)
  pagination: {
    enabled: true
    // Uses: chevronLeft, chevronRight, doubleChevronLeft, doubleChevronRight
  }
});
```
```

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

### Grid Data Source Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Illustrates the various ways to provide data to the grid. Choose the format that best suits your data source.

```javascript
// Inline DataTable
data: { dataTable: { columns: {...} } }

// DataConnector (CSV, JSON, Google Sheets, HTML)
data: { connector: { type: 'CSV', csvURL: '...' } }

// Columns object
data: { columns: { col1: [...], col2: [...] } }
```

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

### Get Pagination Language Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Access the language-specific settings for pagination controls, such as button labels and page information format. This allows for internationalization.

```typescript
get lang(): PaginationLangOptions | undefined
```

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

### Retrieving Column Order

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

Call `getColumnOrder` to get the current order of columns as defined by metadata. Returns `undefined` if no specific order has been set.

```typescript
getColumnOrder(): string[] | undefined
```

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

### Assign Unique ID to Grid Lite Instance

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Example of setting a unique identifier for a Grid Lite instance using the 'id' option.

```javascript
Grid.grid('container', {
  id: 'main-grid',
  columns: [...],
  data: {...}
});
```

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

### Optional Overloads for Grid Initialization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/types.md

Illustrates the use of optional overloads for method signatures, allowing for both synchronous and asynchronous initialization of the Grid.

```typescript
// Synchronous
Grid.grid(renderTo, options);

// Asynchronous
Grid.grid(renderTo, options, true); // Returns Promise<Grid>
```

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

### Set Global Grid Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/templating-utilities.md

Illustrates how to use Grid.setOptions to configure default settings for all subsequent Grid instances. This is useful for applying consistent theming or pagination settings across multiple grids.

```javascript
// Set global defaults
Grid.setOptions({
  rendering: {
    theme: 'hcg-theme-dark'
  },
  pagination: {
    itemsPerPage: 50
  }
});

// All future grids use these defaults
Grid.grid('container1', { columns: [...], data: {...} });
Grid.grid('container2', { columns: [...], data: {...} });
```

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

### Grid Factory and Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/api-summary.md

Provides methods for creating new Grid instances, either through a preferred factory method or directly using the constructor. It also exposes a static registry of all active grids.

```APIDOC
## Grid Factory and Constructor

### Description
Methods for creating new Grid instances.

### Main Entry Points

#### Factory Method (preferred)
```typescript
Grid.grid(renderTo: string | HTMLElement, options: Options, async?: boolean): Grid | Promise<Grid>
```

#### Constructor (direct)
```typescript
new Grid.Grid(renderTo: string | HTMLElement, options: Options, afterLoadCallback?: Function)
```

#### Static Registry
```typescript
Grid.grids: Array<Grid | undefined>
```
```

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

### Instantiate Table Class

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Demonstrates how to access the table viewport instance after initializing a Grid. This is typically done after setting up columns and data for the grid.

```javascript
const grid = Grid.grid('container', {
  columns: [...],
  data: {...}
});

// Access the table viewport
const table = grid.viewport;
```

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

### Get Page Size Selector Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Retrieve the available options for the items-per-page selector. This array defines the choices users have for how many items to display.

```typescript
get pageSizeSelectorOptions(): number[]
```

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

### Getting Sorted Columns

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

The `getSortedColumns` method returns a collection of columns that are ordered according to the metadata. This is useful for ensuring data is processed in a consistent sequence.

```typescript
getSortedColumns(): DataTableColumnCollection
```

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

### Typical DataTable Usage Pattern

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Demonstrates the common workflow for creating, populating, querying, modifying, and listening for changes in a DataTable. It also shows how to integrate the DataTable with the Grid component.

```javascript
// 1. Create and populate table
const table = new Grid.DataTable({
  columns: {
    id: [1, 2, 3],
    name: ['Alice', 'Bob', 'Charlie'],
    age: [25, 30, 35]
  }
});

// 2. Query data
const name = table.getCell('name', 0); // 'Alice'
const allNames = table.getColumn('name'); // ['Alice', 'Bob', 'Charlie']
const row = table.getRow(1); // { id: 2, name: 'Bob', age: 30 }

// 3. Modify data
table.setCell('age', 0, 26);
table.insertRows(3, [{ id: 4, name: 'David', age: 28 }]);

// 4. Listen for changes
table.on('afterSetCell', (event) => {
  console.log(`Updated cell: ${event.columnId}`);
});

// 5. Use with Grid
const grid = Grid.grid('container', {
  data: { dataTable: table }
});
```

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

### Access Visible Rows

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Gets the subset of rows currently present in the grid's viewport. For virtualized grids, this is a small portion of the total data.

```javascript
// Small subset if virtualized
const visibleRows = grid.viewport?.rows;

// All rows available via data provider
const allRowCount = grid.dataProvider?.getRowCount();
```

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

### Pagination Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Initializes a new Pagination instance for a given Grid. This constructor sets up the pagination logic but does not render the controls; the `render()` method must be called separately to display them.

```APIDOC
## Pagination(grid)

### Description
Creates a new Pagination instance for a Grid.

### Method
Constructor

### Parameters
#### Path Parameters
- **grid** (Grid) - Required - The Grid instance this pagination controls.

### Returns
Pagination instance (not immediately rendered; call `render()` to display).
```

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

### deleteRows

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Deletes one or more rows from the DataTable, either by specifying a starting index and count, or an array of specific row indices. Returns the deleted rows.

```APIDOC
## deleteRows(rowIndex?, rowCount?, eventDetail?)

### Description
Deletes rows from the table.

### Method Signature
`deleteRows(
  rowIndex?: number | number[],
  rowCount?: number,
  eventDetail?: DataEventDetail
): Array<Row>`

### Parameters
#### Path Parameters
- **rowIndex** (number | number[]) - Optional - Starting row index or array of indices to delete. If omitted, deletes all rows.
- **rowCount** (number) - Optional - Number of rows to delete starting from `rowIndex`.
- **eventDetail** (DataEventDetail) - Optional - Custom event metadata.

### Returns
Deleted rows.

### Emits
`deleteRows`, `afterDeleteRows` events.

### Example
```javascript
// Delete rows 2-4
const deleted = table.deleteRows(2, 3);

// Delete specific rows
const deleted = table.deleteRows([0, 3, 5]);

// Delete all rows
const deleted = table.deleteRows();
```
```

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

### Listen for Grid Initialization Complete

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

This snippet shows how to attach an event listener to the 'afterLoad' event to execute code once the grid has finished initializing.

```javascript
const grid = Grid.grid('container', options);

// Listen for initialization complete
if (grid.on) {
  grid.on('afterLoad', (event) => {
    console.log('Grid fully loaded');
  });
}
```

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

### Format Dates in Grid Cells

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/templating-utilities.md

Utilize `dateFormat` to display timestamps in various formats. Examples show long, short, and international date formats.

```javascript
const timestamp = new Date('2024-12-25').getTime();

// Long format
Grid.Templating.dateFormat('%A, %B %d, %Y', timestamp);
// "Wednesday, December 25, 2024"

// Short format
Grid.Templating.dateFormat('%m/%d/%Y', timestamp);
// "12/25/2024"

// International format
Grid.Templating.dateFormat('%d.%m.%Y', timestamp);
// "25.12.2024"
```

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

### Pagination Configuration

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Details on how to enable and configure pagination via the Grid options.

```APIDOC
## Configuration via Grid Options

Pagination is configured in the `pagination` option of the Grid:

```typescript
Grid.grid('container', {
  pagination: {
    enabled: true,
    itemsPerPage: 20,
    position: 'bottom',
    showFirstLastButtons: true,
    alignment: 'center',
    pageSizeSelectorOptions: [10, 20, 50, 100]
  }
});
```

### PaginationOptions

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `enabled` | boolean | — | Whether pagination is enabled. When true, pagination controls render. |
| `itemsPerPage` | number | 10 | Number of items to display per page. |
| `position` | string | `'bottom'` | Where to render pagination: `'top'`, `'bottom'`, `'footer'`, or `'#elementId'`. |
| `showFirstLastButtons` | boolean | `true` | Show buttons to jump to first/last page. |
| `alignment` | `'left' | 'center' | 'right'` | `'left'` | Horizontal alignment of controls. |
| `pageSizeSelectorOptions` | `number[]` | `[10, 25, 50]` | Options available in the items-per-page dropdown. |

### PaginationLangOptions

Language strings for pagination labels:

```typescript
interface PaginationLangOptions {
  firstPage?: string;          // e.g., 'First'
  lastPage?: string;           // e.g., 'Last'
  nextPage?: string;           // e.g., 'Next'
  previousPage?: string;       // e.g., 'Previous'
  pageInfo?: string;           // e.g., 'Page {current} of {total}'
  itemsPerPage?: string;       // e.g., 'Items per page'
  allRows?: string;            // e.g., 'All'
}
```
```

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

### Get Total Row Count

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Returns the total number of rows currently in the table. This count may differ from the original if modifications like filtering have been applied.

```javascript
const rowCount = table.getRowCount(); // 1000
```

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

### Enabling Large Dataset Performance with Virtualization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Optimize performance for datasets with 100,000 rows by enabling row virtualization. Configure buffer size and a threshold for automatic enablement.

```javascript
// 100,000 rows - enable virtualization
Grid.grid('container', {
  columns: [...],
  data: { dataTable: hugeDataset },
  rendering: {
    rows: {
      virtualization: true,
      bufferSize: 15,           // Render 15 rows outside viewport
      virtualizationThreshold: 50  // Auto-enable at 50+ rows
    }
  }
});
```

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

### Registry Pattern for Type and Instance Registration

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/types.md

Demonstrates the registry pattern for registering custom types and creating instances. Use this to extend Grid functionality with custom connectors.

```typescript
DataConnector.registerType('CustomCSV', CustomCSVConnector);
const connector = new DataConnector({ type: 'CustomCSV', ... });
```

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

### Get Connector Options by ID

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Retrieves the configuration options for a specific data connector using its unique ID. Returns undefined if the connector ID is not found.

```typescript
protected getConnectorOptions(connectorId: string): DataConnectorTypeOptions | undefined
```

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

### DataPool Class

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/api-summary.md

Manages on-demand loading of multiple data connectors. It provides methods to get, list, and update connectors, as well as cancel pending requests.

```APIDOC
## DataPool Class

### Description
Manages on-demand loading of multiple connectors.

### Key Methods
- `getConnector(id)` — Load or get cached connector
- `getConnectorIds()` — List all connector IDs
- `isNewConnector(id)` — Check if loaded
- `setConnectorOptions(options, update?)` — Update connector
- `cancelPendingRequests()` — Abort loading
```

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

### Large Dataset with Virtualization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Configure the grid for handling large datasets by enabling row virtualization and setting pagination options. This improves performance by only rendering visible rows.

```javascript
Grid.grid('container', {
  columns: [
    { name: 'id', width: 50 },
    { name: 'name', width: 200 },
    { name: 'email', width: 250 }
  ],
  data: { connector: { type: 'CSV', csvURL: 'large.csv' } },
  rendering: {
    rows: {
      virtualization: true,
      virtualizationThreshold: 50,
      bufferSize: 15
    }
  },
  pagination: {
    enabled: true,
    itemsPerPage: 50
  }
});
```

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

### Lazy-Load Multiple Data Sources with DataPool

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Initialize a DataPool with multiple data source configurations. Later, retrieve and use specific connectors as needed, enabling lazy loading.

```javascript
const pool = new Grid.DataPool({
  connectors: {
    'quarterly-sales': {
      type: 'CSV',
      csvURL: 'https://example.com/quarterly-sales.csv'
    },
    'customer-list': {
      type: 'JSON',
      JSONUrl: 'https://api.example.com/customers.json'
    },
    'inventory': {
      type: 'GoogleSheets',
      googleSpreadsheetKey: 'SHEET_KEY_HERE'
    },
    'web-data': {
      type: 'HTMLTable',
      htmlTableID: 'my-table'
    }
  }
});

// Later, load only the connector needed
const salesConnector = await pool.getConnector('quarterly-sales');
const grid = Grid.grid('container', {
  data: { connector: salesConnector }
});
```

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

### init()

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Initializes the table asynchronously. This method is typically called automatically during Grid initialization to set up event listeners, load columns, initialize rows, and prepare the viewport for rendering.

```APIDOC
## init()

### Description
Initializes the table asynchronously. Called automatically during Grid initialization. Sets up event listeners, loads columns, initializes rows, and prepares the viewport for rendering.

### Method
`init(): Promise<void>`

### Returns
Promise resolving when initialization completes.

### Example
```javascript
const grid = Grid.grid('container', {
  columns: [...],
  data: {...}
});

// Wait for Grid initialization
grid.render().then(() => {
  console.log('Table ready');
});
```
```

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

### Grid.grid Static Method

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

A factory method to create and initialize a new Grid instance. It supports both synchronous and asynchronous initialization, returning either a Grid instance or a Promise resolving to a Grid instance.

```APIDOC
## Grid.grid Static Method

### `Grid.grid(renderTo, options, async?): Grid | Promise<Grid>`

Factory method to create and initialize a new Grid. Provides two overloads for synchronous and asynchronous initialization.

#### Parameters
- **renderTo** (string | HTMLElement) - Required - CSS selector ID (string) or HTML element where the Grid mounts.
- **options** (Options) - Required - Configuration object for the Grid.
- **async** (boolean) - Optional - When `true`, returns a Promise that resolves with the Grid instance after async initialization completes. When `false` or omitted, returns the Grid instance synchronously.

**Returns:** `Grid` when `async` is false or omitted; `Promise<Grid>` when `async` is `true`.

**Example:**
```javascript
// Synchronous initialization
const grid = Grid.grid('container', {
  columns: [{ name: 'id' }, { name: 'name' }],
  data: { dataTable: { columns: { id: [1, 2], name: ['Alice', 'Bob'] } } }
});

// Asynchronous initialization
const gridPromise = Grid.grid('container', options, true);
gridPromise.then(grid => {
  console.log('Grid initialized');
});
```
```

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

### Accessing Table Elements

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Get the native HTML table element and its body for direct DOM manipulation or inspection. Useful for advanced styling or integrating with other DOM-dependent libraries.

```javascript
const grid = Grid.grid('container', {
  columns: [...],
  data: {...}
});

// Get the native HTML table
const tableElement = grid.tableElement;
console.log(tableElement.rows.length);

// Get table body
const tbody = grid.viewport?.tbodyElement;
```

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

### Configure Grid Caption and Description

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Set a caption above the table and a description below it using the `caption.text` and `description.text` options.

```javascript
Grid.grid('container', {
  caption: {
    text: 'Sales Data - Q4 2024'
  },
  description: {
    text: 'Showing active sales transactions'
  }
});
```

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

### Instantiate and Load HTMLTableConnector

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

Instantiate the HTMLTableConnector by providing the type and the ID of the HTML table. Call load() to fetch the data.

```javascript
const htmlConnector = new Grid.DataConnector({
  type: 'HTMLTable',
  htmlTableID: 'my-table'
});
await htmlConnector.load();
```

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

### Asynchronous Connector Operations

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Manage connector operations asynchronously, including loading data, updating configurations, applying modifiers, and starting polling. These operations return Promises.

```javascript
// Connector operations
await connector.load()
await connector.update(options, true)
await connector.applyTableModifiers()
await connector.startPolling(5000)
```

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

### Enable Pagination on Grid Creation

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Enables pagination with default settings when creating a grid instance. Configure items per page, position, and page size selector options.

```javascript
Grid.grid('container', {
  columns: [
    { name: 'id' },
    { name: 'name' },
    { name: 'email' }
  ],
  data: {
    dataTable: {
      columns: {
        id: [...],
        name: [...],
        email: [...] 
      }
    }
  },
  pagination: {
    enabled: true,
    itemsPerPage: 25,
    position: 'bottom',
    showFirstLastButtons: true,
    pageSizeSelectorOptions: [10, 25, 50, 100]
  }
});
```

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

### Listen for Modifier Events

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-modifiers.md

Attach event listeners to modifiers to react to events like 'afterModify'. This example shows how to log a message when data sorting is successfully completed.

```javascript
const modifier = new Grid.DataModifier({ type: 'Sort', orderByColumn: 'name' });

if (modifier.on) {
  modifier.on('afterModify', (event) => {
    console.log('Data sorted successfully');
  });
}
```

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

### Select Row Range for Pagination

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-modifiers.md

Use RangeModifier to select a specific range of rows for pagination. Specify the range using 'ranges' with start and end indices, or 'minIndex' and 'maxIndex'.

```javascript
// Select rows 10-19
const modifier = new Grid.DataModifier({
  type: 'Range',
  ranges: [[10, 20]]
});

const rangedTable = modifier.modifyTable(originalTable);

// Or equivalently
const modifier = new Grid.DataModifier({
  type: 'Range',
  minIndex: 10,
  maxIndex: 20
});
```

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

### Grid Configuration Options

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/README.md

Provides an overview of the main configuration options available for customizing grid behavior and appearance. This includes columns, data, pagination, rendering, accessibility, and language settings.

```javascript
Grid.grid('container', {
  columns: [...],
  data: {...},
  pagination: { enabled: true, itemsPerPage: 25 },
  rendering: { theme: 'hcg-theme-default', ... },
  accessibility: { enabled: true },
  lang: { pagination: {...} }
});
```

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

### Format Currency in Grid Cells

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/templating-utilities.md

Use `numberFormat` to define a custom currency formatter for grid cells. This example sets up a formatter for prices with two decimal places and comma separators.

```javascript
const formatCurrency = (value) => {
  return Grid.Templating.numberFormat(value, 2, '.', ',');
};

Grid.grid('container', {
  columns: [
    {
      name: 'price',
      cells: {
        format: '${value}'
      }
    }
  ]
});
```

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

### Get Icon Definition from Registry

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/svg-icons.md

Use `getIconFromRegistry` to find an icon's definition by its name. It checks custom icons first if provided. This is useful for checking icon existence before attempting to render.

```typescript
export declare function getIconFromRegistry(
  name: string,
  customIcons?: Record<string, IconRegistryValue>
): IconRegistryValue | undefined
```

```javascript
const iconDef = Grid.SvgIcons.getIconFromRegistry('chevronRight');
console.log(iconDef); // { width: 24, height: 24, children: [...] }

// Check if exists before rendering
if (Grid.SvgIcons.getIconFromRegistry('myIcon')) {
  const element = Grid.SvgIcons.createGridIcon('myIcon');
}
```

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

### Configure Grid Pagination

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/configuration.md

Use the `pagination` option to enable and customize pagination behavior, including items per page, position, and page size selection.

```javascript
Grid.grid('container', {
  pagination: {
    enabled: true,
    itemsPerPage: 25,
    position: 'bottom',
    showFirstLastButtons: true,
    alignment: 'center',
    pageSizeSelectorOptions: [10, 25, 50, 100]
  }
});
```

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

### Customizing Icons

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/svg-icons.md

Demonstrates how to override built-in icons or add new custom icons by providing SVG definitions within the `rendering.icons` configuration option when initializing the Grid.

```APIDOC
## Custom Icons

Override built-in icons or add new ones via `rendering.icons`:

```javascript
Grid.grid('container', {
  columns: [...],
  data: {...},
  rendering: {
    icons: {
      // Override built-in icon
      chevronRight: '<svg viewBox="0 0 24 24">...</svg>',
      
      // Add custom icon
      myCustomIcon: {
        width: 24,
        height: 24,
        viewBox: '0 0 24 24',
        children: [
          {
            d: 'M12 2 L22 12 L12 22 L10 20 L18 12 L10 4 Z',
            fill: 'currentColor'
          }
        ]
      }
    }
  }
});
```
```

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

### Get DataConnector Instance by ID

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Loads and returns a DataConnector instance. On first call, it loads from source; subsequent calls return a cached instance. All promises resolve with the same instance if multiple calls occur before loading.

```typescript
getConnector(connectorId: string): Promise<DataConnectorType>
```

```javascript
const pool = new Grid.DataPool({
  connectors: {
    'users': { type: 'JSON', JSONUrl: '...' }
  }
});

const usersConnector = await pool.getConnector('users');
const table = usersConnector.getTable();
```

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

### Loading Data from the Source

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-connectors.md

Initiate data loading using the `load` method. This asynchronous operation resolves with the connector instance upon successful data retrieval and emits `load` and `afterLoad` events.

```typescript
load(eventDetail?: DataEventDetail): Promise<this>
```

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

### Delete Rows

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/datatable-class.md

Use `deleteRows` to remove rows from the DataTable. You can specify a starting index and count, an array of specific indices, or omit all arguments to delete all rows. The method returns the deleted rows and emits `deleteRows` and `afterDeleteRows` events.

```typescript
deleteRows(
  rowIndex?: number | number[],
  rowCount?: number,
  eventDetail?: DataEventDetail
): Array<Row>
```

```javascript
// Delete rows 2-4
const deleted = table.deleteRows(2, 3);

// Delete specific rows
const deleted = table.deleteRows([0, 3, 5]);

// Delete all rows
const deleted = table.deleteRows();
```

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

### DataPool Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-pool-class.md

Initializes a new DataPool instance. This constructor takes an optional configuration object that defines the data source connectors to be managed by the pool. The connectors are registered but not loaded until they are explicitly requested.

```APIDOC
## DataPool Constructor

### Description
Creates a new DataPool instance. The `options` parameter allows for the registration of multiple data source connectors, which will be managed by the pool and loaded on demand.

### Signature
```typescript
constructor(options?: DataPoolOptions): DataPool
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **options** (`DataPoolOptions`) - Optional - Pool configuration with connector definitions.

### Request Example
```javascript
const pool = new Grid.DataPool({
  connectors: {
    'users': {
      type: 'JSON',
      JSONUrl: 'https://api.example.com/users.json'
    },
    'products': {
      type: 'CSV',
      csvURL: 'https://example.com/products.csv'
    },
    'sales': {
      type: 'GoogleSheets',
      googleSpreadsheetKey: 'ABC123...'
    }
  }
});
```

### Response
#### Success Response (200)
Returns a DataPool instance with registered connectors (not yet loaded).

#### Response Example
```json
{
  "instance": "DataPool"
}
```
```

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

### Table Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/table-class.md

Constructs a new table viewport instance for a Grid. It requires the Grid instance and the native HTML table element to render within. Initialization is completed by calling the `init()` method.

```APIDOC
## Table Constructor

### Description
Constructs a new table viewport instance.

### Method
`constructor(grid, tableElement)`

### Parameters
#### Path Parameters
- **grid** (Grid) - Yes - The Grid instance this table belongs to.
- **tableElement** (HTMLTableElement) - Yes - The native HTML `<table>` element to render within.

### Request Example
```javascript
const grid = Grid.grid('container', {
  columns: [...],
  data: {...}
});

// Access the table viewport
const table = grid.viewport;
```

### Response
**Returns:** Table instance (not yet initialized; call `init()` to complete setup).
```

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

### Grid Static Factory Method Signatures

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/grid-class.md

Outlines the synchronous and asynchronous signatures for the static `grid` factory method, used for creating Grid instances.

```typescript
// Synchronous signature
static grid(renderTo: string | HTMLElement, options: Options, async?: boolean): Grid

// Asynchronous signature
static grid(renderTo: string | HTMLElement, options: Options, async: true): Promise<Grid>
```

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

### Pagination Constructor

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/pagination-class.md

Initializes a new Pagination instance for a given Grid. The constructor itself does not render the controls; the `render()` method must be called separately to display them.

```typescript
constructor(grid: Grid): Pagination
```

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

### Typical Workflow with Modifiers in Grid Initialization

Source: https://github.com/highcharts/grid-lite-dist/blob/main/_autodocs/data-modifiers.md

Configure data modifiers directly within the `Grid.grid` initialization for a typical workflow. This includes loading data via a connector and applying a chain of filters, sorts, and range limits.

```javascript
// 1. Load data
const connector = new Grid.DataConnector({
  type: 'JSON',
  JSONUrl: 'https://api.example.com/employees.json'
});
await connector.load();

// 2. Create Grid with modifiers
Grid.grid('container', {
  data: {
    connector: connector,
    dataModifier: {
      type: 'Chain',
      modifiers: [
        { type: 'Filter', conditions: [{ column: 'department', operator: 'eq', value: 'Sales' }] },
        { type: 'Sort', orderByColumn: 'salary', direction: 'desc' },
        { type: 'Range', minIndex: 0, maxIndex: 20 }
      ]
    }
  },
  columns: [
    { name: 'id' },
    { name: 'name' },
    { name: 'salary', dataType: 'number' }
  ]
});
```