# GeeGrid Executable Examples
Language: [English](./index.en.md) | [Korean](./index.ko.md)
API Reference: [/docs/api/](/docs/api/)
Complete AI context: [/ai-en.txt](/ai-en.txt)
These examples use verified GeeGrid v3 conventions. Start with mock data, then connect the verified project API.
# Example 1: Complete object-row Grid
Save as an HTML file in a project that serves the GeeGrid v3 assets.
~~~html
User GridIDNameDepartment
~~~
Default behavior uses mock data. Add mock=0 to the query string only after replacing /api/users with the verified project endpoint.
# Example 2: Array rows
~~~html
IDName
~~~
~~~js
var arrayGrid = new GeeGrid('arrayGrid');
arrayGrid.setTotalCount(2);
arrayGrid.setCurrentPage(1);
arrayGrid.setViewLength(20);
arrayGrid.setArrayData(
['id', 'name'],
[
[1, 'Alice Kim'],
[2, 'Daniel Lee']
]
);
arrayGrid.makePaging();
~~~
# Example 3: JSON records
~~~html
IDNameStatus
~~~
~~~js
var statusGrid = new GeeGrid('statusGrid');
var records = [
{ id: 1, name: 'Alice Kim', status: 'READY' }
];
statusGrid.setTotalCount(records.length);
statusGrid.setCurrentPage(1);
statusGrid.setViewLength(20);
statusGrid.setJsonData(records);
statusGrid.makePaging();
~~~
# Validation rules
- Constructor id must match the DOM id.
- handler and sort_handler values must match names registered with GeeGrid.on.
- Callback attributes contain names only.
- Choose the setter by actual row shape.
- Apply total count, page, view length, data, and paging in that order.
- Test mock flow before real API integration.
- Do not invent API URLs, authentication headers, response fields, or internal Runtime behavior.