7. General Design — DataGrid (Table)
In this step, all visual and functional settings of the DataGrid widget are configured: column visibility, order, width, header style, row style, grid lines, pagination, sortability, filtering, and conditional row color.
Wizard route: /cartography/add/generaldesign
Prerequisite
Steps 1, 2, and 3 of the DataGrid flow must be completed (4, 5, 6 are skipped).
1. Screen Layout
The left side contains the configuration form (column list, header/row/grid settings); the right side shows a live table preview.
2. Header (Header Row)
| Field | Description | Unit |
|---|---|---|
| Header Background Color | Header row background color | color |
| Header Text Color | Header text color | color |
| Header Font Size | Header font size | px |
| Header Height | Header row height | px |
| Bold Font | Whether the header is bold (toggle) | — |
| Header Hover Color | Color when hovering over header | color |
3. Row & Cell
| Field | Description | Unit |
|---|---|---|
| Row Background Color | Row background color | color |
| Row Text Color | Row text color | color |
| Alternating Row Color | Different color for odd/even rows | color |
| Selection Color | Selected row color | color |
| Cell Font Size | Cell font size | px |
| Cell Padding Horizontal | Cell horizontal padding | px |
| Row Hover Color | Color when hovering over a row | color |
| Row Hover Text Color | Hover text color | color |
| Row Hover Font Size | Hover font size | px |
Alternating Row Color
Light grey (#F9FAFB) and white alternating rows improve readability in long lists.
4. Grid Lines
| Field | Description |
|---|---|
| Grid Line Color | Line color |
| Grid Line Width | Line thickness (px) |
| Show Vertical Grid Lines | Vertical lines |
| Show Horizontal Grid Lines | Horizontal lines |
5. Columns (Column Management)
The most important section for DataGrid. All columns from Compass are listed; settings are available per column:
| Field | Description |
|---|---|
| Column Visibility | Show / hide each column (toggle) |
| Column Order | Reorder via drag-and-drop |
| Column Width | Fixed pixel or flexible width |
| Sortable | Sort when clicking the header (toggle) |
| Filterable | Filter box above the column (toggle) |
Which Columns to Show?
If the query returns many columns, select the ones you want visible here and hide the unnecessary ones. Table width and readability improve. Recommendation: keep at most 8-10 columns visible on screen.
6. Pagination
| Field | Description |
|---|---|
| Pagination Active | Toggle |
| Rows Per Page | Number of rows on one page (10/20/50/100) |
Pagination vs Scroll
Use pagination for 100+ rows; scroll is sufficient for <100 rows. For very dense (>500) data, pagination protects performance.
7. Conditional Row Color
Color rows based on the value of a specific column.
| Field | Description |
|---|---|
| Rule Column | Which column's value drives the color |
| Match | Value match condition (e.g., priority = 'HIGH') |
| Color | Color for matching rows |
Conditional Color in Alarm Lists
In an alarm table, based on the priority column:
- HIGH → 🔴 red
- MEDIUM → 🟡 yellow
- LOW → ⚪ white
8. Confirmation
When you click the Next button at the top right, flow.hasGeneralDesign = true is marked.