Header Templates

Dynamic headers allow you to display customized information above the grid using Mustache templates.

Overview

Header templates let you:

• Display project information prominently
• Show current user and date/time
• Display grid statistics (element count, filter status)
• Create branded or informative headers

Enabling Headers

1. Open Grid Settings (gear icon)
2. Navigate to the Header tab
3. Toggle Enable Dynamic Header on
4. Select or create a template
5. Adjust the maximum height (1-50% of viewport)

Template Variables

Templates use Mustache syntax with double curly braces: {{variable.name}}

Project Variables

Variable	Description	Example
{{project.name}}	Project name	"Office Building Phase 2"
{{project.id}}	Project ID	"123"
{{project.description}}	Project description	"Main office complex"

User Variables

Variable	Description	Example
{{user.name}}	Current user's name	"John Doe"
{{user.email}}	Current user's email	"john@example.com"

View Variables

Variable	Description	Example
{{view.name}}	Current view name	"All Elements"
{{view.filterCount}}	Number of active filters	"3"
{{view.hasAdvancedFilter}}	Has advanced filter	"true"

Grid Variables

Variable	Description	Example
{{grid.elementCount}}	Total element count	"1,234"
{{grid.visibleColumnCount}}	Visible columns	"8"
{{grid.groupByCount}}	Number of groupings	"2"

Date Variables

Variable	Description	Example
{{date.today}}	Today's date (localized)	"12/15/2024"
{{date.now}}	Current date/time	"12/15/2024, 2:30 PM"

Creating Templates

Using the Template Library

1. In the Header settings, click Template Library
2. Click New Template
3. Enter a name and description
4. Write your template content
5. Preview in real-time
6. Choose visibility (personal or shared)
7. Click Save

Example Templates

Simple Project Header

<div style="padding: 16px; background: #f8f9fa; border-bottom: 1px solid #e9ecef;">
  <h2 style="margin: 0;">{{project.name}}</h2>
  <p style="margin: 8px 0 0; color: #6c757d;">
    {{grid.elementCount}} elements | {{view.name}}
  </p>
</div>

Detailed Status Header

<div style="display: flex; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
  <div>
    <h3 style="margin: 0;">{{project.name}}</h3>
    <small>{{project.description}}</small>
  </div>
  <div style="text-align: right;">
    <div>{{user.name}}</div>
    <small>{{date.now}}</small>
  </div>
</div>

Filter Status Header

<div style="padding: 8px 16px; background: #fff3cd; border-left: 4px solid #ffc107;">
  <strong>View:</strong> {{view.name}} |
  <strong>Filters:</strong> {{view.filterCount}} active |
  <strong>Showing:</strong> {{grid.elementCount}} elements
</div>

Managing Templates

Edit a Template

1. Open Template Library
2. Click the edit icon on any template
3. Modify the content
4. Save changes

Duplicate a Template

1. Open Template Library
2. Click the duplicate icon
3. Enter a new name
4. Modify as needed

Delete a Template

1. Open Template Library
2. Click the delete icon
3. Confirm deletion

Warning

Deleting a template that's in use will show "No template selected" in grids using it.

Best Practices

Styling Tips

• Use inline styles for consistent rendering
• Keep backgrounds light for readability
• Test with different amounts of content
• Consider dark mode compatibility

Performance

• Keep templates simple
• Avoid complex JavaScript in templates
• Large images should be hosted externally

Accessibility

• Use sufficient color contrast
• Include semantic HTML elements
• Keep text sizes readable

Troubleshooting

Template Not Rendering

• Check for syntax errors (unmatched braces)
• Verify the template is selected in settings
• Ensure header is enabled

Variables Showing as Empty

• Some variables require context (e.g., project must be selected)
• Check variable spelling (case-sensitive)
• User variables require authentication

Header Too Large

• Reduce max height setting
• Simplify template content
• Use overflow: hidden in styles