# Column Sizing
## Live example
{% hint style="success" %}
[Column Sizing](https://demos.dikesoft.com/dk-grid/column/sizing) live example.
{% endhint %}
## Column width
When you define a column, this column will have an initial value for the `width` property.
{% hint style="info" %}
If `width` property is not defined, the **default** value will be **200**. The with's unit is **pixels**.
{% endhint %}
## Changing the column width through the UI
### Minimum and Maximum column width
If you want to change the width of a column, you must provide the `minWidth` and `maxWidth` properties.
{% hint style="info" %}
If you do not provide the `minWidth` and `maxWidth` properties, they will take the value of the `width` property.
{% endhint %}
{% hint style="success" %}
If you want the user to change the column width through the UI, mark the column as **resizable**.
{% endhint %}
To see these properties in action, consider the following initial configuration:
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { DikeGridColumnDef, DikeGridDataSourceInput,
DikeTextColumnDef
} from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-sizing',
templateUrl: './column-sizing.component.html',
styleUrls: ['./column-sizing.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
private columnDef: DikeGridColumnDef;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}
With the initial configuration, we have the following:
1. The **Employee Id** column does not define its `width` nor its `resizable` property.
2. You can change the **Surname** column width through the UI because the configuration sets the `resizable` property and the `minWidth` and `maxWidth` properties have a different value of `width` property.
3. The **Name** column is **resizable**, and the `minWidth` and `maxWidth` properties will take the same value as the `width` property because this configuration does not set their values. Therefore, you will not be able to change the **Name** column width.
4. Finally, for the **Email** column, only the `width` property is set.
As you can see in the following gif, you can only change the **Surname** column width but not for the **Name** column.
{% hint style="info" %}
When a column is **resizable**, the cursor changes to **col-resize**, and when you start resizing it, the DikeGrid draws a **vertical line**. The color of the line will be the **accent** color.
{% endhint %}
### Changing the width through the vertical row lines
If the vertical lines per row are visible, you can resize a column using them.
Let us make the vertical lines per row visible. First, open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel), then check the **Vertical Row Lines** checkbox from the **Appearance** group.
In the following gif, you can see how dragging a vertical line changes the size of the column.
{% hint style="info" %}
Remember, columns displayed in the **left** or **center** panel have their **gutter-line** at their **right**. See the [Grid Structure - Gutters](https://docs.dikesoft.com/fundamentals/grid-structure/gutters#who-does-the-vertical-gutters-own) section.
{% endhint %}
### Columns in the right panel
Columns displayed in the right panel have their gutter-line at their left. Therefore, these columns change their size in an inverse direction compared to columns displayed in the left or center panel.
When you resize a column in the right panel to increase its width, you must move its gutter-line to the left.
If you want to decrease the column width, move the gutter-line to the right.
Let us create two more columns in the right panel, **Hire Date** and **Age** columns.
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
// Define the Age column to be displayed in the right Panel:
const ageColumn = new DikeTextColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.maxWidth = 150;
ageColumn.order = 2;
ageColumn.resizable = true;
ageColumn.panel = 'rightPanel';
// Add the Age column:
columnDef.addColumns(ageColumn);
// Grab the DikeGridColumnDef instance:
this.columnDef = columnDef;
// Once all the columns have been added:
Promise.resolve().then(() => {
// Find the Employee Id column:
const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
// Set the initial values in the text boxes:
if (!!employeeId && isDikeDataColumnDef(employeeId)) {
this.columnSizingForm.patchValue({
width: employeeId.width,
minWidth: employeeId.minWidth,
maxWidth: employeeId.maxWidth,
resizable: employeeId.resizable
});
}
});
}
```
{% endtab %}
{% endtabs %}
#### Dragging the panel division line
When you drag the line that divides two adjacent panels, all columns resize evenly. The resizing operation finishes until all columns reach their minimum or maximum width.
The same occurs for columns displayed in the left panel.
{% hint style="success" %}
You can change the width of the panel division line when the panel is being resized by providing an Injection Token called `DIVISION_PANEL_LINE_WIDTH_RESIZING`. By default, the width is **5 pixels** in width.
{% endhint %}
## DikeGrid Column API
You can change the size properties using the API from the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef)service instance.
{% hint style="success" %}
In the [Column Definition](https://docs.dikesoft.com/column-definitions#dikegridcolumndef-less-than-t-greater-than-service) section, see how to grab the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef) instance from the corresponding [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent).
{% endhint %}
### Employee Id column
Since the **Employee Id** column is not resizable and its `width` property is not defined, let us add the UI controls and the corresponding code to change its width using the DikeGrid API.
{% code title="column-sizing.component.html" %}
```markup
Employee Id
```
{% endcode %}
The previous `form` is added above the `dike-grid` selector generating the following output:
Now, you can change the **Employee Id** column's width, min-width, and max-width. If you click on the **checkbox** next to the Apply button, you can **mark** the Employee Id column as **resizable**.
#### Changing the width using the API
Consider the following code:
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
Resizable
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onChangeColumnSize(): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
// If the column is found:
const width: number = this.columnSizingForm.get('width').value as number;
const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;
// Change the column size:
this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
}
}
```
{% endtab %}
{% endtabs %}
Once the input elements pass the validators, the button can invoke the callback method. Inside the callback definition:
1. Firstly, you must find the column to be modified.
2. Notice how the found column instance is narrowing to a reference of type [`DikeDataColumnDef`](https://docs.dikesoft.com/reference/classes/columns#dikedatacolumndef-less-than-t-r-greater-than), due to the `findColumn()` method returns a reference of type [`DikeColumnDef`](https://docs.dikesoft.com/reference/classes/columns#dikecolumndef).
3. The code uses the `changeColumnWidth()` method to pass the column instance and the size properties, where only the width is mandatory.
{% hint style="info" %}
Internally, the [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent) validates the **width**, **minWidth**, and **maxWidth** arguments. For instance, if minWidth is greater than the width, the width value is assigned to minWidth.
{% endhint %}
{% hint style="info" %}
Despite the `resizable` property for the **Employee Id** column is not set, the size properties of the column can be changed using the API.
{% endhint %}
#### Setting the resizable property
Remember that the `resizable` property allows the user to change the width of a column or column group.
The following code snippet is the callback attached to the **checkbox change Event**.
{% code title="column-sizing.component.ts" %}
```typescript
onResizableChange(value: MatCheckboxChange): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn) {
// If the column is found, change its resizable property:
this.columnDef.setColumnResizable(targetColumn, value.checked);
}
}
```
{% endcode %}
Once again, the target column must be found, in this case. The method `setColumnResizable()` marks the **Employee Id** column as **resizable**.
The previous output shows how the **Employee Id** column is resized after setting it as **resizable**. We must have changed the `minWidth`, or `maxWidth` properties as well.
{% hint style="info" %}
Even though a column is marked as **resizable**, if the `minWidth` and `maxWidth` properties have the same value as the `width` property, the column will not resize using the UI.
{% endhint %}
## Column Sizing Event
If you notice, the last output reports the changes in the `width` property of the **Employee Id** column when this one is being resized.
The [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent) emits an Event called `columnSizeChange`. This event is emitted every time a data column changes its size.
{% hint style="info" %}
The [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef)service also emits the `columnSizeChange` event.
{% endhint %}
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
onColumnSizeChange(column: DikeDataColumnDef): void {
if (column.fieldName === 'employeeId') {
this.columnSizingForm.patchValue({
width: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth
});
}
}
```
{% endtab %}
{% endtabs %}
Since the `columnSizeChange` event sends any column that has changed in width, the if statement gives us the **Employee Id** column.
## Resizing Groups
By definition, a column group's width equals the sum of its child columns' width. Therefore, a column group does not have a `width` property.
All descendant columns, marked as **resizable**, will change in width when resizing a group.
{% hint style="info" %}
The `columnSizeChange` event does not send the group itself nor the descendant groups. Instead, it only **sends** the descendant **data columns**.
{% endhint %}
Let us define the following configuration:
1. Firstly, We have a primary group named **Personal Info**.
2. Under the **Personal Info** group, we have the **Complete Name** column group, the **Gender** and **Age** columns.
3. Finally, we have **Name** and **Surname** columns under the **Complete Name** group.
4. Except for the **Complete Name** group, all columns and column groups are resizable.
{% code title="column-sizing.component.ts" %}
```markup
```
{% endcode %}
{% hint style="info" %}
Column groups marked as **resizable** can change in width only from the UI.
{% endhint %}
As you can see in the previous output:
1. When resizing the **Personal Info** group, the operation draws a vertical line with an **accent** color until the columns.
2. The resize process draws the line only into the column's boundary for the **Surname** column.
{% hint style="success" %}
Remember, for resizing a column or a group, you must grab the gutter-line for the column. See the [Grid Structure - Gutters](https://docs.dikesoft.com/fundamentals/grid-structure/gutters#who-does-the-vertical-gutters-own) section for more details.
{% endhint %}
## Summary
Once you define a column at the creation phase, you can change its width at execution time, either from the **UI** or the **API**. Columns that are resizing through the UI must be **resizable**.
The DikeGrid instance only **sends** the changed **data columns** when the resizing operation occurs, not column groups.
### Complete code for this section
{% tabs %}
{% tab title="column-sizing.component.html" %}
```markup
Employee Id
```
{% endtab %}
{% tab title="column-sizing.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { Subscription } from 'rxjs';
import { DikeDataColumnDef, DikeGridColumnDef, DikeGridDataSourceInput,
DikeTextColumnDef, isDikeDataColumnDef } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-sizing',
templateUrl: './column-sizing.component.html',
styleUrls: ['./column-sizing.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnSizingComponent implements OnInit, OnDestroy {
dkgDataSource: DikeGridDataSourceInput;
columnSizingForm: FormGroup;
gridProperties: DikeGridProperties;
private columnDef: DikeGridColumnDef;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private formBuilder: FormBuilder,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
onColumnDefInstance(columnDef: DikeGridColumnDef): void {
// Define the Email column:
const emailColumn = new DikeTextColumnDef('email', 'Email');
emailColumn.width = 300;
emailColumn.order = 3;
// Then, add the colums to the DikeGridComponent instance:
columnDef.addColumns(emailColumn);
// Define the Age column to be displayed in the right Panel:
const ageColumn = new DikeTextColumnDef('age', 'Age');
ageColumn.width = 85;
ageColumn.maxWidth = 150;
ageColumn.order = 2;
ageColumn.resizable = true;
ageColumn.panel = 'rightPanel';
// Add the Age column:
columnDef.addColumns(ageColumn);
// Grab the DikeGridColumnDef instance:
this.columnDef = columnDef;
// Once all the columns have been added:
Promise.resolve().then(() => {
// Find the Employee Id column:
const employeeId = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
// Set the initial values in the text boxes:
if (!!employeeId && isDikeDataColumnDef(employeeId)) {
this.columnSizingForm.patchValue({
width: employeeId.width,
minWidth: employeeId.minWidth,
maxWidth: employeeId.maxWidth,
resizable: employeeId.resizable
});
}
});
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Creating the form that binds the UI ontrols:
this.columnSizingForm = this.createMainForm();
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
getControl(formControlName: string): AbstractControl {
return this.columnSizingForm.get(formControlName);
}
onColumnSizeChange(column: DikeDataColumnDef): void {
if (column.fieldName === 'employeeId') {
this.columnSizingForm.patchValue({
width: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth
});
}
}
onResizableChange(value: MatCheckboxChange): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn) {
// If the column is found, change its resizable property:
this.columnDef.setColumnResizable(targetColumn, value.checked);
}
}
onChangeColumnSize(): void {
// Search the employeeId column:
const targetColumn = this.columnDef.findColumn(column => column.fieldName === 'employeeId');
if (!!targetColumn && isDikeDataColumnDef(targetColumn)) {
// If the column is found:
const width: number = this.columnSizingForm.get('width').value as number;
const minWidth: number | null = this.columnSizingForm.get('minWidth').value;
const maxWidth: number | null = this.columnSizingForm.get('maxWidth').value;
// Change the column size:
this.columnDef.changeColumnWidth(targetColumn, { width, minWidth, maxWidth });
}
}
private createMainForm(): FormGroup {
const mainForm = this.formBuilder.group({
resizable: [false]
});
const widthControl = new FormControl('',
[Validators.required, Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
widthControl.markAllAsTouched();
const minWidthControl = new FormControl('',
[Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
minWidthControl.markAsTouched();
const maxWidthControl = new FormControl('',
[Validators.min(25), Validators.max(600), Validators.pattern('^[0-9]*$')]);
maxWidthControl.markAllAsTouched();
mainForm.addControl('width', widthControl);
mainForm.addControl('minWidth', minWidthControl);
mainForm.addControl('maxWidth', maxWidthControl);
return mainForm;
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}