This app is built using Appsmith. Turn any datasource into an internal app in minutes. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source.
Github • Docs • Community • Tutorials • Youtube • Discord
You can visit the application using the below link
Widget Positioning & Spacing
Appsmith uses a grid-based layout system for widget positioning.
Grid Basics
| Property | Description | Default |
|---|---|---|
topRow |
Starting row position (0-based) | - |
bottomRow |
Ending row position | - |
leftColumn |
Starting column (0-based) | - |
rightColumn |
Ending column | - |
parentRowSpace |
Pixels per row | 10px |
parentColumnSpace |
Pixels per column | ~25px |
The canvas is 64 columns wide. Each row is 10 pixels tall.
Calculating Size
Height = (bottomRow - topRow) × 10px
Width = (rightColumn - leftColumn) × 25px
Visual Example
Row 0 ┌────────────────────────────────────────┐
│ Navigation (topRow: 0) │
Row 7 └────────────────────────────────────────┘ ← bottomRow: 7
Row 8 ┌────────────────────────────────────────┐ ← topRow: 8 (1 row gap = 10px)
│ Content Widget │
Row 16 └────────────────────────────────────────┘
This Project's Standard
| Widget | topRow | bottomRow | Notes |
|---|---|---|---|
| Navigation | 0 | 7 | 70px tall |
| First Content | 8 | 16 | 10px gap below nav |
Dynamic Height
Widgets with "dynamicHeight": "AUTO_HEIGHT" adjust height based on content. The bottomRow serves as an initial guide, and originalTopRow/originalBottomRow store the original placement values.