How To Set Width Of mat-table Column In Angular?

In Angular Material, the mat-table component is a powerful data table tool that allows you to display data in a structured and flexible way. However, when it comes to customizing the appearance of the table, especially the width of individual columns, you may need to apply custom styling techniques.

In this article, will walk you through various methods for setting the width of mat-table columns in Angular, offering both inline and external styles, as well as techniques for responsive design.

What is mat-table?

The mat-table component in Angular Material is a versatile data table that supports features such as sorting, pagination, and filtering. By default, the columns in a mat-table take up the space they need based on their content. However, you may want to define specific widths for some or all of the columns to create a better visual layout or to ensure the table remains consistent across different screen sizes.

Steps To Set Width Of mat-table Column In Angular

Step 1: Create an angular Application using the following Command.

ng new angular-table
cd angular-table

Step 2: Install Angular Material and MatTable Module

Next, install Angular Material and add the MatTableModule and MatPaginatorModule to your project:

ng add @angular/material

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.6",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/material": "^18.2.6",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  }

Step 3: Creating the mat-table with Column Widths

Now, let's create the mat-table and define column widths. Follow these steps:

1. Create the app.component.ts File

In app.component.ts, we'll create a standalone component that contains the table, sets up data, and defines the column widths.

//app.component.ts

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { CommonModule } from '@angular/common';

interface UserData {
    id: number;
    name: string;
    age: number;
}

const ELEMENT_DATA: UserData[] = [
    { id: 1, name: 'Rahul', age: 28 },
    { id: 2, name: 'Amit', age: 34 },
    { id: 3, name: 'Kavya', age: 45 },
    { id: 4, name: 'Kiran', age: 28 },
    { id: 5, name: 'Riti', age: 34 },
    { id: 6, name: 'Mohit', age: 45 },
    { id: 7, name: 'Raj', age: 28 },
    { id: 8, name: 'Ajay', age: 34 },
    { id: 9, name: 'Kavya', age: 45 },
    { id: 10, name: 'Sakshi', age: 28 },
    { id: 11, name: 'Jatin', age: 34 },
    { id: 12, name: 'Raghav', age: 45 },
];

@Component({
    selector: 'app-root',
    standalone: true,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    imports: [MatTableModule, CommonModule],
})
export class AppComponent {
    displayedColumns: string[] = ['id', 'name', 'age'];
    dataSource = ELEMENT_DATA;
}

In this file:

• We import MatTableModule and MatPaginatorModule to create the table and its pagination.
• We define a data source, ELEMENT_DATA, which contains the data to be displayed in the table.

2. Create the app.component.html File

Next, we define the structure of the table in app.component.html:

<!-- app.component.html -->

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" class="mat-table" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef class="column-id">ID</th>
            <td mat-cell *matCellDef="let element" class="column-id">{{ element.id }}</td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef class="column-name">Name</th>
            <td mat-cell *matCellDef="let element" class="column-name">{{ element.name }}</td>
        </ng-container>

        <!-- Age Column -->
        <ng-container matColumnDef="age">
            <th mat-header-cell *matHeaderCellDef class="column-age">Age</th>
            <td mat-cell *matCellDef="let element" class="column-age">{{ element.age }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

3. Create the app.component.css File

In app.component.css, you can add some basic styles to enhance the appearance of the table:

/* app.component.css */

.mat-table {
    width: 100%;
}

th.mat-header-cell,
td.mat-cell {
    text-align: left;
    padding: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.column-id {
    flex: 0 0 100px;
}

.column-name {
    flex: 0 0 200px;
}

.column-age {
    flex: 0 0 150px;
}

.mat-row,
.mat-header-row {
    display: flex;
}

.mat-cell,
.mat-header-cell {
    display: flex;
    align-items: center;
}

To start the application run the following command.

ng serve --open

Output