AJAX Example

vGrid requests continent rows from /api/continents. Filtering, sorting, and pagination are handled by the API.

Include vGrid

Copy public/vgrid.css and public/vgrid.js from this project into your website’s public files, then reference their public URLs.

<link rel="stylesheet" href="/vgrid.css">
<script src="/vgrid.js"></script>

Add a target element

vGrid appends itself to this element. The id must be unique on the page and must match the el value in the script.

<div id="vgrid"></div>

Initialize the grid

Place this script after the target element and after vgrid.js has loaded.

<script>
vGrid({
  el: '#vgrid',
  caption: "Continents",
  dataSource: '/api/continents',
  columns: [
    { name: 'id', label: 'ID' },
    { name: 'code', label: "Code" },
    { name: 'name', label: "Name" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Clear filters" },
    download: { active: true, symbol: '\u2913', title: "Download" },
    print: { active: true, symbol: '\u2912', title: "Print" },
    refresh: { active: true, symbol: '\u21BB', title: "Refresh" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Settings" },
  },
});
</script>

Basic backend examples

Every backend follows the same pattern: connect to data, select rows, then map each row to the fields configured in vGrid.

See the Swagger/OpenAPI reference for complete endpoint parameters and response schemas.


// Connect to your database. Use your language or framework's database client here.
$pdo = new PDO('mysql:host=localhost;dbname=example', 'username', 'password');

// Select the fields that the grid will display.
$rows = $pdo->query('SELECT id, code, name FROM continents')->fetchAll(PDO::FETCH_ASSOC);

// Map every database row to the JSON object pattern used by vGrid.
$data = [];
foreach ($rows as $row) {
    $data[] = [
        'id' => (int) $row['id'],
        'code' => $row['code'],
        'name' => $row['name'],
    ];
}

header('Content-Type: application/json');
echo json_encode([
    'data' => $data,
    'total' => count($data),
    'page' => 1,
    'limit' => count($data),
]);

import sqlite3
from flask import jsonify

# Connect to your database. Use your Python database library here.
connection = sqlite3.connect('example.db')

# Select the fields that the grid will display.
rows = connection.execute('SELECT id, code, name FROM continents').fetchall()

# Map every database row to the JSON object pattern used by vGrid.
data = []
for row in rows:
    data.append({
        'id': row[0],
        'code': row[1],
        'name': row[2],
    })

return jsonify({
    'data': data,
    'total': len(data),
    'page': 1,
    'limit': len(data),
})

// Connect to your database. Use your Java database client or framework here.
Connection connection = DriverManager.getConnection(url, username, password);

// Select the fields that the grid will display.
ResultSet rows = connection.createStatement().executeQuery("SELECT id, code, name FROM continents");

// Map every database row to the JSON object pattern used by vGrid.
List<Map<String, Object>> data = new ArrayList<>();
while (rows.next()) {
    data.add(Map.of(
        "id", rows.getInt("id"),
        "code", rows.getString("code"),
        "name", rows.getString("name")
    ));
}

return Map.of(
    "data", data,
    "total", data.size(),
    "page", 1,
    "limit", data.size()
);

// Connect to your database. Use your C# database client or framework here.
await using var connection = new SqlConnection(connectionString);

// Select the fields that the grid will display.
var rows = await connection.QueryAsync<Continent>("SELECT id, code, name FROM continents");

// Map every database row to the JSON object pattern used by vGrid.
var data = new List<object>();
foreach (var row in rows)
{
    data.Add(new { id = row.Id, code = row.Code, name = row.Name });
}

return Results.Json(new {
    data,
    total = data.Count,
    page = 1,
    limit = data.Count,
});