# Panels
## Content Panels
There are three Content Panels in the DikeGrid structure definition. The Content Panels are **left**, **center**, and **right** panels. Every Content Panel can accommodate any number of columns, but only the center panel will be scrollable.
Let us rearrange and create the following columns:
1. First, add the **Employee Id** column in the **left** panel.
2. Then, add the **Name**, **Surname**, **Gender**, **Age**, and **Email** columns to the **center** panel.
3. Lastly, add the **Hire Date** column to the **right** panel.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
The following output shows the previous column definition:
{% hint style="info" %}
You can define columns or column groups in a Content Panel.
{% endhint %}
As you can see, columns in the left and right panels are visible all the time.
Highlighting the cell definitions for the three panels, we can see that the Content Row is split into three template columns according to the CSS Grid Layout specification.
{% hint style="danger" %}
Be aware of left and right panels' width. Since these panels are not scrollable, if the left and right panels exceed the grid's width, the center panel will not be visible.
{% endhint %}
### Panel division line
A division line separates two adjacent panels when creating columns in the left or right panels. Every line belongs to the left and right panels, respectively.
{% hint style="info" %}
All resizable columns in a panel change their width evenly when resizing the panel. For more details, see [Column Sizing](/columns/column-sizing.md#dragging-the-panel-division-line).
{% endhint %}
#### Space between two panels
There is a space between two adjacent panels. Then, the DikeGrid draws the division line at the center of this space.
By default, the space between two adjacent panels is **13 pixels** in width. However, you can change the space width by providing an Injection Token called `DIVISION_PANEL_GAP`.
#### Panel division line width
The division line is a **pixel width**. Same as before, you can change this value by providing an Injection Token called `DIVISION_PANEL_LINE_WIDTH`.
The following code snippet shows custom values for the mentioned Injection Tokens.
{% code title="structure.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: DIVISION_PANEL_GAP, useValue: 21},
{ provide: DIVISION_PANEL_LINE_WIDTH, useValue: 3}
]
})
export class StructureModule { }
```
{% endcode %}
The following screenshot shows the previous module configuration.
As we can see in the previous screenshot, the panel division line is thicker, and the space between panels is larger.
## Group panel
Like any other panel in the DikeGrid definition, the group panel accommodates all the columns to group the DikeGrid data rows.
Let us allow row grouping in the DikeGrid instance to see how the group panel looks.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can enable row grouping only at the creation phase of the DikeGrid.
{% endhint %}
The following screenshot shows the group panel. As you can see, the group panel is at the ***top*** of the column headers.
Rearrange the **Age** column to display it in the group panel.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
After making the **Age** column **groupable** and creating it in the **group panel**, the output looks like the following:
{% hint style="warning" %}
You can define **data** columns in the **group panel**, only; not column groups. For more details, see the Row Grouping section.
{% endhint %}
### Changing the group panel height
By default, the group panel has **71 pixels** of height. You can change this value by providing an input property called `rowGroupingRowHeight`.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
In the previous code snippet, we added the `rowGroupingRowHeight` property to the DikeGrid instance and was bound to the `gridProperties` object.
Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Row Grouping** section, and type 100 in the **Row-Grouping Row Height** textbox.
{% hint style="success" %}
You can also change the group panel height by providing an Injection Token called `ROW_GROUPING_ROW_HEIGHT`.
{% endhint %}
### Changing the height of the columns in the group panel
By default, the columns contained in the group panel have a height of **36 pixels**. However, you can change it by providing a value for the input property called `rowGroupingColumnHeight`.
Let us bind the `gridProperties` object to the `rowGroupingColumnHeight` input property.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel) go to the **Row Grouping** section, and type 80 in the **Columns Height** textbox.
{% hint style="success" %}
You can also change the height of the columns by providing an Injection Token called `ROW_GROUPING_COLUMN_HEIGHT`.
{% endhint %}
### Changing the Row-Grouping indent width
When you open a group, you will see an indent between the most left side of the DikeGrid and the first column.
The Row-Grouping indent is visible by default. However, you can hide it if you want. You can show or hide this indent by providing an input property called `displayRowGroupingIndent`.
{% hint style="success" %}
You can also change the indent width by providing an Injection Token called `ROW_GROUPING_INDENT`.
{% endhint %}
By default, this indent is **25 pixels** in width. Nevertheless, you can change the indent width by providing an input property called `rowGroupingIndentWidth`.
{% hint style="success" %}
You can also change the indent width by providing an Injection Token called `ROW_GROUPING_INDENT_WIDTH`.
{% endhint %}
Let us bind the related properties from the `gridProperties` object.
{% code title="grid-structure.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can remove the columns from the **group panel** because the `draggable` input property is bound to the **Gender** and **Age** columns.
{% endhint %}
Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel) go to the **Row Grouping** section, and type 100 in the **Indent Width** textbox. You can uncheck the **Row-Grouping Indent** checkbox to hide the Row-Grouping indent.
To apply an indent to every Content Row depends on the row belonging level.
We grouped the DikeGrid rows by two columns in the previous configuration: **Gender** and **Age**.
This configuration generates an output of **three levels**:
1. **Level zero.** This level is the first group, which corresponds to the **Gener** column. At this level, the indent is not visible.
2. **Level one.** This level is the second group, which corresponds to the **Age** column. At this level, the indent is 100 pixels in width.
3. **Level three.** This level corresponds to the data itself. At this level, the indent is 255 pixels in width.
{% hint style="info" %}
The indent is equal to ***indent width \* level*** ***+ 55 pixels*** for a nested data row.
The 55 pixels in width corresponds to the group icon used to open and close the group.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dikesoft.com/fundamentals/grid-structure/panels.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.