Open Grid

• Schema‑Driven Design: Define tables, columns, and foreign keys in schema.json - frontend and backend adapt automatically
• Dynamic Grid Interface: Menu and grid render from schema configuration - no hardcoded table names or columns
• Inline Editing: Edit cells directly in the grid - changes saved via PATCH requests with real-time updates
• Smart Foreign Keys: Display human-friendly values instead of raw IDs - automatic joins handled by backend
• Row Management: Add new rows with schema defaults, delete with confirmation - boolean fields default to false
• Global Search: Filter rows across all displayed columns - instant results without page reload
• Debug Panel: Built-in debug logger tracks API calls, responses, and grid actions for full transparency
• Vanilla JavaScript: No framework dependencies - clean, maintainable code with modern ES6+ syntax

Perfect for: Admin panels, database browsers, data management tools, quick prototypes, and internal business applications. From schema.json to running grid in under 3 minutes.

{
  "tables": {
    "companies": {
      "display_name": "Companies",
      "columns": {
        "id": { "type": "SERIAL PRIMARY KEY", "display_name": "ID" },
        "name": { "type": "VARCHAR(255)", "display_name": "Company Name" },
        "industry": { "type": "VARCHAR(100)", "display_name": "Industry" },
        "is_active": { "type": "BOOLEAN", "display_name": "Active" }
      }
    },
    "contacts": {
      "display_name": "Contacts",
      "columns": {
        "id": { "type": "SERIAL PRIMARY KEY", "display_name": "ID" },
        "first_name": { "type": "VARCHAR(100)", "display_name": "First Name" },
        "email": { "type": "VARCHAR(255)", "display_name": "Email" },
        "company_id": { "type": "INTEGER", "display_name": "Company" }
      },
      "foreign_keys": {
        "company_id": {
          "reference_table": "companies",
          "reference_column": "id",
          "display_column": "name"
        }
      }
    }
  }
}