Data Grid - Profitbase/PowerBI-visuals-Gantt GitHub Wiki

The Data Grid formatting card allows you to style the left panel of your Gantt visual. You can set custom background colors for each level of your task hierarchy, customize the column headers, format text styles for parent and child rows, and display row totals.

1. Hierarchy Level Background Colors

You can set a different background color for each level of your task hierarchy. The visual automatically detects how many fields you have dragged into the Tasks and Hierarchy bucket and creates a matching color picker for each one:

Data Grid Background Color Pickers

For example, if you have three fields under Tasks and Hierarchy:

Tasks and Hierarchy Bucket

The background colors you pick will apply in order from the top-level parent rows down to the lowest subtasks:

Data Grid Background Colors Applied

2. Formatting the Header Row

You can customize the appearance of the column header row at the top of the data grid using three settings:

  • Header Background Color: Fills the background of the header bar.
  • Header Font Color: Sets the color of the column title text.
  • Header Font Size: Adjusts the title text size.

Header Styling Options

This allows you to create high-contrast headers to separate column titles from your task rows:

Formatted Header Row

3. Node Customization (Parent vs. Child Rows)

You can apply separate text styles for parent rows (which contain subtasks) and leaf rows (the lowest level tasks with no children).

To do this, select either Root Node (parents) or Child Node (leaves) from the customization dropdown to reveal their formatting options:

Root Node (Parent Rows)

Selecting Root node lets you customize:

  • Font Color, Font Size, and Font Style (Default, Bold, Italic, Underline) for all parent rows.
  • Expanded Node Background Color: The background fill color of a parent row only when it is expanded.
  • Expanded Node Font Color: The text color of a parent row only when it is expanded.

Root Node Settings

When applied, parent text styles (e.g. bold teal text) stand out:

Root Node Formatting Applied

You can also make expanded parent rows use a distinct background color (like grey) so open sections of your project are easier to spot:

Expanded Parent Row Background Applied

Expanded Node Background Settings

Child Node (Lowest-Level Task Rows)

Selecting Child node allows you to set the Font Color, Font Size, and Font Style (Default, Bold, Italic, Underline) specifically for your lowest-level tasks:

Child Node Settings

For example, you can set child tasks to render with underlined text:

Child Node Formatting Applied

4. Show Row Totals

(New in Gantt v3.x)

The Show Row Totals toggle adds aggregate/summary values to parent rows in numeric columns.

  • When turned Off (default): Parent rows will not show numeric summaries in the grid.
  • When turned On: Parent rows automatically show the sum or roll-up values of all their children for numeric columns.