AUIGrid is a JavaScript grid with enterprise-grade performance.

Code for the grid below — updates when you change Data size or View

Getting ready…

Data generation: —
setGridData: —
Rendered body cells (DOM) / data fields: —

This demo requires JavaScript. With JavaScript enabled, you can load large data into an AUIGrid band layout grid and try scrolling and editing yourself.

Use it with your stack

AUIGrid is plain JavaScript, so it works anywhere. Official wrappers and samples are ready for React and Vue.

JavaScript

Add one script and one stylesheet, then call AUIGrid.create().
TypeScript

Typed column layouts, properties, and events for React and Vue projects.
React

An AUIGrid React component with the same column layout and props.
Vue

A Vue 3 component for templates and the Composition API.

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, so they write grid code from the real documentation instead of guessing. Available since AUIGrid 3.0.18.

Remote endpoint Recommended No install

Streamable HTTP, no authentication. Use the exact URL, without a trailing slash. Opening it in a browser returns 405; that is expected.

https://auigrid.com/mcp

Local npm package Node.js 22.12+

Your AI tool starts auigrid-mcp-server with npx (stdio). Use it when your network blocks outside connections.

npx -y auigrid-mcp-server@latest

Setup by tool

Claude Code

Remote. Run in your project's terminal, then restart Claude Code and check /mcp:

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

Or local:

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

Codex CLI

Remote. Register, restart Codex, then check codex mcp list:

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

Or local:

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

Cursor

Remote. Add to .cursor/mcp.json in the project:

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

Or local, then make sure auigrid is enabled in Cursor's MCP settings:

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

VS Code

Remote. Add to .vscode/mcp.json (the top-level key is servers, not mcpServers), then start it from MCP: List Servers:

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

Or local:

{
  "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

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

Try asking

"Use AUIGrid MCP to check the values and default of bodyLayoutMode, then write a band column layout."
"Find the React TypeScript band layout example and apply it to our component. Check the real type declarations."
"Look up exportToXlsx and useExportStyle and write an example that styles the export separately from the screen."

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

Quick start

Three files and one call to AUIGrid.create(). Save the page below 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). See Pricing & License.

Notes for AI assistants

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.

index.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. Every method takes the grid ID as its first argument. For the full reference (about 900 entries, with defaults and TypeScript declarations), connect the AUIGrid MCP server.

Methods

`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

`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)

`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 like the demo above

Events AUIGrid.bind(id, name, handler)

`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

Pricing & License

Commercial license

Perpetual license for production use
Bound to a specific domain or IP
A registered domain cannot be changed after issue
Commercial product, not open source

Non-commercial edition

For personal, educational, testing, and demo use
Runs only on localhost and 127.0.0.1
No official technical support
Engine and samples on GitHub
For production evaluation, a 30-day trial is in the download center

Prices, development license rules, and what each license covers are on auisoft.net.

See pricing on auisoft.net ↗

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. See setup by tool.

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?

AUIGrid works with plain JavaScript and TypeScript, and provides official React and Vue components with samples in both JavaScript and TypeScript (GitHub).

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 Pricing & License. A non-commercial edition on GitHub 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 in the download center.

AUIGrid is a JavaScript grid with enterprise-grade performance.

Large data band layout: scrolling and editing

Use it with your stack

JavaScript

TypeScript

React

Vue

Connect AUIGrid to your AI coding assistant

Remote endpoint Recommended No install

Local npm package Node.js 22.12+

Setup by tool

Tools

Try asking

Quick start

Notes for AI assistants

API at a glance

Methods

Column layout

Grid properties (gridProps)

Events AUIGrid.bind(id, name, handler)

Pricing & License

Commercial license

Non-commercial edition

FAQ