Introduction
In modern web applications, presenting data in tables is a common practice. However, sometimes, users need the flexibility to customize their view, especially when dealing with large datasets. One common requirement is the ability to resize columns in a table. This can enhance user experience and make the application more user-friendly.
In this article, we will explore how to create resizable columns in Angular, a popular web application framework. We'll achieve this functionality by creating a custom Angular directive called columnResize. We'll walk through the process step by step, from creating the directive to integrating it into an Angular component.
Table of Contents
- Understanding the Problem
-
Creating the Column Resize Directive
- Initializing Directive Properties
- Handling Mouse Events
- Resizing Columns
- Handling Edge Cases
- Using the Directive in an Angular Component
- Styling and Customization
- Frequently Asked Questions (FAQs)
- Conclusion
1. Understanding the Problem
Before diving into the code, let's understand the problem we're trying to solve. In a typical web application, when we display data in a table, each column has a fixed width. This fixed width can become problematic when dealing with different screen sizes or when users want to focus on specific columns.
To address this issue, we want to allow users to adjust the width of columns by dragging the column borders. This behavior should be intuitive, similar to how you would resize columns in spreadsheet applications like Microsoft Excel.
2. Creating the Column Resize Directive
Initializing Directive Properties
We'll start by creating our Angular directive, columnResize. This directive will be responsible for enabling column resizing. We'll use Angular's Renderer2 to manipulate the DOM elements. Here's how we initialize the directive's properties:
// column-resize.directive.ts
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[columnResize]'
})
export class ColumnResizeDirective {
private startX!: number;
private isResizing = false;
private initialWidth!: number;
private columnIndex!: number;
private table!: HTMLElement | null = null;
constructor(private el: ElementRef, private renderer: Renderer2) {}
// ...
}
Handling Mouse Events
To enable column resizing, we need to handle mouse events like mousedown, mousemove, and mouseup. When a user clicks on a column border (mousedown), we'll start tracking the mouse movement and calculate the new column width.
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
event.preventDefault();
this.startX = event.pageX;
this.isResizing = true;
this.initialWidth = this.el.nativeElement.offsetWidth;
// ...
}
Resizing Columns
Inside the onMouseMove event listener, we calculate the new width of the column and update its style. Additionally, we update the corresponding header and cell widths to maintain consistency.
const onMouseMove = (moveEvent: MouseEvent) => {
if (this.isResizing) {
const deltaX = moveEvent.pageX - this.startX;
const newWidth = this.initialWidth + deltaX;
// Update the width of the current column
this.renderer.setStyle(this.el.nativeElement, 'width', newWidth + 'px');
// Update the width of the corresponding header and cell in each row
columns[this.columnIndex].style.width = newWidth + 'px';
const rows = this.table.querySelectorAll('tr');
rows.forEach((row) => {
const cells = row.querySelectorAll('td');
if (cells[this.columnIndex]) {
cells[this.columnIndex].style.width = newWidth + 'px';
}
});
}
};
Handling Edge Cases
We also handle edge cases, such as when the table has a fixed width. In this case, we adjust the table's width accordingly to prevent horizontal scrolling issues.
// Adjust the width of the table if it has a fixed width
const tableWidth = this.table.offsetWidth;
if (tableWidth > 0) {
this.renderer.setStyle(this.table, 'width', tableWidth + deltaX + 'px');
}
Here is the full code
// column-resize.directive.ts
import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Subject, distinctUntilChanged, fromEvent, takeUntil } from 'rxjs';
@Directive({
selector: '[columnResize]'
})
export class ColumnResizeDirective implements OnInit, OnDestroy {
private startX!: number;
private isResizing = false;
private initialWidth!: number;
private columnIndex!: number;
private table: HTMLElement | null = null;
private tableWidth: number | null = null;
private onDestroy$ = new Subject<void>();
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
ngOnInit(): void {
const nativeElement = this.elementRef?.nativeElement as HTMLElement;
const mousedown = fromEvent<MouseEvent>(nativeElement, 'mousedown');
mousedown.pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
.subscribe(event => this.onMouseDown(event));
// prevent click event
fromEvent<MouseEvent>(nativeElement, 'click').pipe(takeUntil(this.onDestroy$), distinctUntilChanged())
.subscribe(event => event.stopPropagation());
}
private onMouseDown(event: MouseEvent) {
event.preventDefault();
this.startX = event?.pageX;
this.isResizing = true;
this.initialWidth = this.elementRef?.nativeElement?.offsetWidth;
// Find the index of the current column
const row = this.elementRef?.nativeElement?.parentElement;
const cells = Array.from(row?.children);
this.columnIndex = cells.indexOf(this.elementRef?.nativeElement);
this.renderer.addClass(this.elementRef?.nativeElement, 'resizing-col');
// this.renderer.addClass(document.body, 'resizing');
this.table = this.findParentTable(this.elementRef.nativeElement);
if (this.table) {
this.renderer.addClass(this.table, 'table-resizing');
const columns = this.table.querySelectorAll('th');
const tableWidth = this.table?.offsetWidth;
const onMouseMove = (moveEvent: MouseEvent) => {
if (this.isResizing) {
const deltaX = moveEvent?.pageX - this.startX;
const newWidth = this.initialWidth + deltaX;
this.tableWidth = !this.tableWidth && this.table?.offsetWidth ? this.table?.offsetWidth / 2 : this.tableWidth;
// Restrict the column width to a minimum of 40 and a maximum 50% of table or 350 pixels
if (newWidth >= 40 && newWidth <= (this.tableWidth || 350)) {
// Update the width of the current column
this.renderer.setStyle(this.elementRef?.nativeElement, 'width', `${newWidth}px`);
// Update the width of the corresponding header and cell in each row
columns[this.columnIndex].style.width = `${newWidth}px`;
const rows = this.table?.querySelectorAll('tr');
rows?.forEach((row) => {
const cells = row.querySelectorAll('td');
if (cells[this.columnIndex]) {
cells[this.columnIndex].style.width = `${newWidth}px`;
}
});
// Adjust the width of the table if it has a fixed width
if (tableWidth > 0) {
this.renderer.setStyle(this.table, 'width', tableWidth + deltaX + 'px');
}
}
}
};
const onMouseUp = () => {
this.isResizing = false;
this.renderer.removeClass(this.elementRef?.nativeElement, 'resizing-col');
if (this.table) this.renderer.removeClass(this.table, 'table-resizing');
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
}
private findParentTable(element: HTMLElement): HTMLElement | null {
while (element) {
if (element.tagName === 'TABLE') {
return element;
}
if (element?.parentElement) element = element?.parentElement;
}
return null;
}
ngOnDestroy(): void {
// we've destroyed the component, so update the subject
this.onDestroy$.next();
this.onDestroy$.complete();
}
}
3. Using the Directive in an Angular Component
With the columnResize directive in place, you can use it in your Angular components. Here's an example of how to integrate it into a component:
// table-resize.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-table-resize',
template: `
<table>
<thead>
<tr>
<th columnResize>Column 1</th>
<th columnResize>Column 2</th>
<th columnResize>Column 3</th>
<!-- Add more columns as needed -->
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<!-- Add more cells as needed -->
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
`,
styleUrls: ['./table-resize.component.css']
})
export class TableResizeComponent {}
In this example, we've added the columnResize directive to the th elements of the table header. You can use it in any table where you want to enable column resizing.
4. Styling and Customization
To enhance the user experience, you can add CSS styles to indicate that columns are resizable when the user hovers over the column borders. Additionally, you can customize the appearance of the resizing handle. Here's a simple CSS example:
/* table.component.html */
<div class="dc-table" [class.header-s]="headerSize=='s'" [class.table-paginator]="!paginator">
<ng-content selector=".header-row"></ng-content>
<ng-content selector=".table"></ng-content>
</div>
/* Add this to your component's CSS or global styles */
app-table {
.dc-table {
border-radius: 8px;
outline: 1px solid var(--grayscale-c5);
border-spacing: inherit;
overflow: hidden;
table.mat-table {
min-width: 100%;
}
}
}
.resizable-table {
overflow: auto;
app-table {
.dc-table {
overflow: auto;
}
}
}
th[columnResize] {
&:hover {
background: var(--grayscale-c3) !important;
position: relative;
&::after {
border-right: 2px solid var(--primary-c6);
content: '';
position: absolute;
top: 0;
right: 0px;
bottom: 0;
width: 10px;
cursor: var(--col-resize-svg);
}
}
&.resizing-col {
background: var(--grayscale-c3) !important;
border-right: 2px solid var(--primary-c6);
}
}
Feel free to adjust the styles to match your application's design.
5. Frequently Asked Questions (FAQs)
Q1: Can I use this directive in tables with horizontal scrolling?
Yes, the columnResize directive is designed to work with both regular tables and horizontally scrollable tables. It adjusts the table's width as needed to prevent issues with horizontal scrolling.
Q2: How can I prevent resizing certain columns?
If you want to prevent resizing for specific columns, you can conditionally apply the columnResize directive based on your application's logic. For example, you can use *ngIf to conditionally include the directive on certain th elements.
6. Conclusion
In this article, we've learned how to create resizable columns in Angular using a custom directive called columnResize. By following the step-by-step guide, you can enhance the user experience of your web application when dealing with tables
Top comments (5)
Noticed a pretty big issue- the findParentTable method will cause an endless loop that will crash your browser if no parent table exists.
the fix is to change this:
to this:
I've completely ripped apart this code at this point, it was a great starting point for me. I added some code that wraps all elements within the cells, and sets the width on both the cell, and the wrapper div. This made the resize work way more reliably, regardless of the content i threw at it.
Overall, your code has some room for improvement- but it proved extremely useful to me in terms of solution approach.. and it's the only place I'm seeing someone use a directive to solve this problem.
Thanks for sharing :)
updated the code please check. My pleasure
I implemented this solution, and resizing works but does not work smoothly. Anything wrong with this solution
noticed commenting out the code after:
"// Adjust the width if the table if it has a fixed width"
makes the resize work a lot better. seems like there's quite a bit of missing required css at the table level to make this work. I'm modifying it into my own because I really like this directive approach.
updated the code please check. My pleasure