# AUIGrid is a JavaScript grid with enterprise-grade performance

AUIGrid is a commercial JavaScript data grid for enterprise web applications, made by AUISoft Co., Ltd. It works in plain JavaScript and TypeScript and has official React and Vue components.

On this page: [Quick start](#quick-start) · [API at a glance](#api-at-a-glance) · [AI / MCP](#connect-auigrid-to-your-ai-coding-assistant) · [FAQ](#faq) · [Pricing & License](https://www.auisoft.net/price.html) · [llms.txt](https://auigrid.com/llms.txt)

## Demo: band layout with large data

The interactive demo at https://auigrid.com/ loads large data sets into one grid without paging. `bodyLayoutMode: "band"` groups several fields per row into parent (`bodyCell`) and child cells; virtual scrolling renders only the cells on screen. It includes status list, quantity stepper, calendar, and checkbox editors, multi-column sorting, list/numeric/date filters, a totals footer, a right-click context menu, an Auto view that switches between band and `flatAll` by width, and a View code panel.

## Use it with your stack

- **JavaScript**: add one script and one stylesheet, then call `AUIGrid.create()`.
- **TypeScript**: typed column layouts, properties, and events. Definitions on npm: [`aui-grid`](https://www.npmjs.com/package/aui-grid) (types only; the grid engine and license file are provided separately).
- **React**: an `AUIGrid` React component with the same column layout and props.
- **Vue**: a Vue 3 component for templates and the Composition API.

Samples: https://github.com/aui-community/auigrid-noncommercial

## Connect AUIGrid to your AI coding assistant

The AUIGrid MCP server gives AI coding tools the official API reference, default values, TypeScript declarations, and JavaScript, React, and Vue examples. Available since AUIGrid 3.0.18.

- **Remote (recommended)**: `https://auigrid.com/mcp`. Streamable HTTP, no authentication, nothing to install. Use the exact URL, without a trailing slash. Opening it in a browser returns 405; that is expected.
- **Local**: `npx -y auigrid-mcp-server@latest` over stdio, with Node.js 22.12 or later. Use it when your network blocks outside connections.

### Claude Code

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

Local:

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

### Codex CLI

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

Local:

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

### Cursor (`.cursor/mcp.json`)

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

Local:

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

### VS Code (`.vscode/mcp.json`, top-level key `servers`)

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

Local:

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

### Other MCP clients

Add a remote MCP server (for example, a Claude custom connector) with the URL `https://auigrid.com/mcp` and the Streamable HTTP transport. HTTP 429 means the request limit was exceeded; retry after the `Retry-After` time.

### 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, and language |
| `get_example` | Example source, related files, dependencies, and run conditions |

The server is read-only: it looks up published documentation and examples and does not read or change your project or grid data. The AUIGrid engine and license are separate.

## Quick start

Save this page and open it on `localhost` to try it right away.

> **Non-commercial CDN:** the files below are the non-commercial edition and run only on `localhost` and `127.0.0.1`. For any other domain, replace them with your licensed AUIGrid files (`AUIGrid.js`, `AUIGridLicense.js`, theme CSS).

### Notes for AI assistants

- AUIGrid's naming does not follow other grid libraries (ag-Grid, MUI DataGrid, TanStack Table). Check every property, method, and event name with the AUIGrid MCP tools instead of inferring it.
- Create a grid with `AUIGrid.create(selector, columnLayout, gridProps)`. Define the `columnLayout` array before this call; it is required.
- `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`.
- Load `AUIGridLicense.js` before `AUIGrid.js`; without it the grid will not render.
- The jsDelivr CDN files are the non-commercial edition for `localhost` and `127.0.0.1` only. Don't put them in production code; use the customer's licensed files instead.
- Prefer the AUIGrid MCP tools over web search. When the `aui-grid` package is installed, its type definitions are authoritative for that version.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AUIGrid Quick Start</title>
  <!-- Non-commercial edition: runs only on localhost and 127.0.0.1.
       For other domains, use your licensed AUIGrid files instead. -->
  <!-- AUIGrid license file: required; load it before AUIGrid.js -->
  <script src="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGridLicense.js"></script>
  <!-- AUIGrid library: required -->
  <script src="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGrid.js"></script>
  <!-- Theme stylesheet: required; swap for another theme if you like -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aui-community/auigrid-noncommercial@main/dist/AUIGrid_style.css">
</head>
<body>
  <div id="grid_wrap" style="width:800px; height:480px;"></div>
  <script>
    const columnLayout = [
      { dataField: "name", headerText: "Name", width: 140 },
      { dataField: "country", headerText: "Country", width: 120 },
      { dataField: "quantity", headerText: "Quantity", dataType: "numeric" },
      { dataField: "price", headerText: "Price", dataType: "numeric", formatString: "#,##0" }
    ];

    const myGridID = AUIGrid.create("#grid_wrap", columnLayout, { editable: true });

    AUIGrid.setGridData(myGridID, [
      { name: "Anna", country: "Korea", quantity: 12, price: 52000 },
      { name: "Lucas", country: "Germany", quantity: 4, price: 128000 }
    ]);

    AUIGrid.bind(myGridID, "cellClick", (event) => {
      console.log(event.dataField, event.value);
    });
  </script>
</body>
</html>
```

## 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 |

## FAQ

**What is AUIGrid?**
AUIGrid is a commercial JavaScript data grid for enterprise web applications, made by AUISoft Co., Ltd. It works in plain JavaScript and has official React and Vue components. TypeScript definitions are published on npm as `aui-grid`; that package does not include the grid engine, which is provided separately with the license file.

**How do I connect AUIGrid to an AI coding assistant?**
Add the AUIGrid MCP server. The recommended way is the hosted endpoint `https://auigrid.com/mcp` (Streamable HTTP, no installation). If your network blocks outside connections, run it locally: use `npx -y auigrid-mcp-server@latest` with Node.js 22.12 or later.

**Does the AUIGrid MCP server read my code or grid data?**
No. It only looks up the published AUIGrid documentation and examples. It has no tools that read or change your project or grid data; your AI tool writes the code.

**Which frameworks does AUIGrid support?**
Plain JavaScript and TypeScript, plus official React and Vue components with samples in both JavaScript and TypeScript.

**How is AUIGrid licensed?**
AUIGrid is a commercial product, not open source. Production use requires a perpetual license bound to a specific domain or IP; a registered domain cannot be changed after issue. See https://www.auisoft.net/price.html. A non-commercial edition on GitHub (aui-community/auigrid-noncommercial) is for personal, educational, testing, and demo use and runs only on localhost and 127.0.0.1. For production evaluation, a 30-day trial is available in the download center (https://www.auisoft.net/dcenter.html).

---

AUISoft Co., Ltd. · AUIGrid