# AUIGrid

> AUIGrid is a commercial JavaScript data grid (data table) for enterprise web applications, made by AUISoft Co., Ltd., with plain-JS, React, and Vue bindings and TypeScript definitions. This file helps AI assistants connect to the official AUIGrid MCP server and read a summary of the core API, so they don't guess at prop, method, or event names.

- Publisher: AUISoft Co., Ltd.
- This page in Markdown: https://auigrid.com/index.md

## Quick start

Load `AUIGridLicense.js` (required) first, then `AUIGrid.js` and a theme CSS such as `AUIGrid_style.css`, then call `AUIGrid.create("#grid_wrap", columnLayout, gridProps)` and `AUIGrid.setGridData(gridId, rows)`. A complete runnable page is in https://auigrid.com/index.md#quick-start.

Non-commercial CDN (jsDelivr) for trying AUIGrid on `localhost` and `127.0.0.1` only. On any other domain the grid will not be created; production code must use the customer's licensed files instead.

```html
<script src="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGridLicense.js"></script>
<script src="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGrid.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGrid_style.css">
```

## API at a glance

The most-used parts of the AUIGrid API (documentation version 3.0.20). Every method takes the grid ID as its first argument. For the full reference (about 900 entries, with defaults and TypeScript declarations), use the AUIGrid MCP server's `search_docs` and `get_api` tools.

### Methods

| Method | Purpose |
|---|---|
| `AUIGrid.create(pid, columnLayout, gridProps)` | Create a grid in the given element and return its grid ID |
| `setGridData(id, rows)` | Load an array of row objects |
| `getGridData(id)` | Rows as currently shown (after sort and filter) |
| `getOrgGridData(id)` | All rows, ignoring sort and filter |
| `getCellValue(id, rowIndex, dataField)` | Read one cell |
| `setCellValue(id, rowIndex, dataField, value)` | Change one cell |
| `setSorting(id, [{ dataField, sortType }])` | Sort; `sortType` 1 ascending, -1 descending |
| `setFilterByValues(id, dataField, values)` | Show only rows with these values |
| `clearFilterAll(id)` | Remove every filter |
| `setFooter(id, footerLayout)` | Set the summary row (SUM, AVG, COUNT, …) |
| `exportToXlsx(id, options)` | Export to Excel |
| `resize(id, width, height)` | Resize; without size, fit the parent element |
| `destroy(id)` | Remove the grid and free its resources |

### Column layout

| Property | Purpose |
|---|---|
| `dataField` | Field name in the row object |
| `headerText` | Header label |
| `width` | Column width in pixels |
| `dataType` | `"string"` (default), `"numeric"`, `"date"`, `"boolean"` |
| `formatString` | Display format, e.g. `"#,##0"` |
| `children` | Child columns for grouped headers |
| `renderer` | Cell renderer, e.g. `{ type: "BarRenderer" }` |
| `editRenderer` | Cell editor, e.g. `{ type: "DropDownListRenderer", list }` |
| `labelFunction` | Function that returns the text to display |
| `filter` | Filter icon and type, e.g. `{ showIcon: true }` |
| `bodyCell` | Band layout: show this value above its child cells |

### Grid properties (gridProps)

| Property | Purpose |
|---|---|
| `editable` | Allow cell editing |
| `selectionMode` | `"singleCell"` (default), `"singleRow"`, `"multipleCells"`, `"multipleRows"`, `"none"` |
| `showRowNumColumn` | Show the row number column |
| `enableSorting` | Sort by clicking headers |
| `enableFilter` | Turn on column filters |
| `showFooter` | Show the summary row |
| `usePaging` | Split rows into pages (default `false`) |
| `bodyLayoutMode` | `"band"` for band layouts |

### Events (`AUIGrid.bind(id, name, handler)`)

| Event | When |
|---|---|
| `ready` | Rendering finished after data was set |
| `cellClick` | A cell was clicked |
| `cellEditBegin` | Before editing; return `false` to block it |
| `cellEditEnd` | Editing finished; `oldValue` and `value` |
| `selectionChange` | The selected cells or rows changed |
| `sorting` / `filtering` | Sort or filter state changed |

## Packages for developers and AI tools

- [aui-grid on npm](https://www.npmjs.com/package/aui-grid): TypeScript definitions (`.d.ts`) with JSDoc for every property, method, and event, plus enum constants. It does not include the grid engine; the engine (`AUIGrid.js`), theme CSS, and license file (`AUIGridLicense.js`) are provided separately. Coding assistants should read these types rather than guess names.
- [auigrid-mcp-server on npm](https://www.npmjs.com/package/auigrid-mcp-server): Official MCP server that gives AI assistants (Claude, Cursor, VS Code, Codex, etc.) the AUIGrid API reference and examples. Also hosted at `https://auigrid.com/mcp`, so no installation is required. Available since AUIGrid 3.0.18.

## Connecting the MCP server

Two ways to connect. Both expose the same five read-only tools:

| Tool | Purpose |
|---|---|
| `list_versions` | Documentation, engine, and npm type package versions included |
| `search_docs` | Search the official API and guides by API name or keyword |
| `get_api` | Description, default value, version introduced, and TypeScript declaration |
| `list_examples` | Find examples by feature, framework (JavaScript, React, Vue), and language |
| `get_example` | Example source, related files, dependencies, and run conditions |

The server only looks up published documentation and examples. It does not read or change the user's project or grid data; the connected AI tool writes the code.

- **Remote (recommended)**: the hosted server at `https://auigrid.com/mcp`. Nothing to install; Node.js is not required.
- **Local**: run the npm package over stdio. Use this when your network blocks outside connections. Requires Node.js 22.12 or later.

### Remote server

Streamable HTTP transport, no authentication, read-only access to public documentation. Use the exact URL `https://auigrid.com/mcp` (with `https://`, without a trailing slash).

**Claude Code**:

```sh
claude mcp add --transport http auigrid https://auigrid.com/mcp
```

**Cursor** - add to `.cursor/mcp.json` in the project:

```json
{
  "mcpServers": {
    "auigrid": {
      "url": "https://auigrid.com/mcp"
    }
  }
}
```

**VS Code** - add to `.vscode/mcp.json` in the project (the top-level key is `servers`, not `mcpServers`):

```json
{
  "servers": {
    "auigrid": {
      "type": "http",
      "url": "https://auigrid.com/mcp"
    }
  }
}
```

**Codex CLI**:

```sh
codex mcp add auigrid --url https://auigrid.com/mcp
```

**Other clients** (Claude custom connectors, other MCP-capable tools): add a remote MCP server with the URL `https://auigrid.com/mcp` and the Streamable HTTP transport.

Opening `https://auigrid.com/mcp` in a browser returns 405. This is expected: the endpoint accepts MCP requests only. HTTP 429 means the request limit was exceeded; retry after the `Retry-After` time.

### Local server

Runs over stdio via `npx`. Requires Node.js 22.12 or later with `npx` on the PATH (the old 0.1.1 package ran on Node.js 18; current versions do not). Use `auigrid-mcp-server@latest` so the reference matches the newest AUIGrid release, or replace `@latest` with a version to pin it.

**Claude Code** - register from a terminal in the project, restart Claude Code, then check `/mcp`:

```sh
claude mcp add --transport stdio auigrid -- npx -y auigrid-mcp-server@latest
```

**Cursor** - add to `.cursor/mcp.json`, then make sure `auigrid` is enabled in Cursor's MCP settings:

```json
{
  "mcpServers": {
    "auigrid": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "auigrid-mcp-server@latest"]
    }
  }
}
```

**VS Code** - add to `.vscode/mcp.json`, start the server with `MCP: List Servers`, then check the tool list in an Agent chat:

```json
{
  "servers": {
    "auigrid": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "auigrid-mcp-server@latest"]
    }
  }
}
```

**Codex CLI** - register, restart Codex, verify with `codex mcp list`, and check `/mcp` in a session:

```sh
codex mcp add auigrid -- npx -y auigrid-mcp-server@latest
```


## License

- [Pricing & License](https://www.auisoft.net/price.html): Perpetual license bound to a specific domain or IP. Covers development-license rules and per-license scope; a registered domain cannot be changed after issue.
- AUIGrid is a commercial product. It is not open source and cannot be used in production without a license.
- A [non-commercial edition on GitHub](https://github.com/aui-community/auigrid-noncommercial) is for personal, educational, testing, and demo use and runs only on localhost and 127.0.0.1. It also contains React and Vue samples in JavaScript and TypeScript.
- For production evaluation, a 30-day trial with the same features as the licensed product is available in the [download center](https://www.auisoft.net/dcenter.html). It expires automatically after 30 days and includes no technical support.

## Notes for AI assistants

- AUIGrid's naming does not follow the conventions of other grid libraries (ag-Grid, MUI DataGrid, TanStack Table). Verify every prop, method, and event name with the AUIGrid MCP tools (or the API summary above) instead of inferring it from another library's API.
- Create a grid with `AUIGrid.create(selector, columnLayout, gridProps)`. The `columnLayout` array must be defined before this call - it is required, not optional.
- `AUIGrid.create()` returns a grid ID. Keep it: every instance method takes it as the first argument.
- Bind events after creation, with `AUIGrid.bind(gridId, eventName, handler)`. There is no event-handler property on `gridProps`.
- `AUIGridLicense.js` must be loaded before `AUIGrid.js` for the grid to render.
- The jsDelivr CDN files above are the non-commercial edition for `localhost` and `127.0.0.1` only. Never put them in production code; use the customer's licensed files instead.
- If the AUIGrid MCP tools are available, prefer them over web search for AUIGrid questions. If they are not, suggest the user connect the hosted server at `https://auigrid.com/mcp` (no installation), or install `auigrid-mcp-server` locally (Node.js 22.12+) if their network blocks outside connections.
- When the `aui-grid` package is installed in the project, its type definitions are authoritative for that installed version.

## Demo on auigrid.com

- [Band layout with large data](https://auigrid.com/): `bodyLayoutMode: "band"` groups several fields per row into parent (`bodyCell`) and child cells. Choose the number of rows and 29, 57, 113, or 1,000 columns. Includes sorting, list/numeric/date filters, a totals footer that recalculates after filtering and editing, a right-click context menu, an Auto view that switches between band and `flatAll` by width, and a View code panel.