Angular PrimeNG Table Column Widths of a Scrollable Table

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use Table Column Widths of a Scrollable Table in Angular PrimeNG.

Angular PrimeNG Table Column Widths of a Scrollable Table are used to set the column width of a scrollable Table component. It makes the Table component more interactive and responsive on devices with different screen sizes. When the table is in scrollable mode, it uses the flex layout so there are some points to remember while setting the column widths of the table. These points are listed below:

• When the table is in vertical scroll-only mode, use the min-width property so that the columns can adjust themselves when there is more room available on bigger screens and on smaller screens, the horizontal scrollbar will be displayed for responsiveness.
• In the case of horizontal scrolling, use the width property instead of the min-width.
• When in vertical scrolling only mode, use the flex property to disable grow and shrink while in horizontal scrolling this is not needed as columns do not grow or shrink in horizontal scrolling.

Syntax:

<p-table>
  <ng-template pTemplate="body">
    <tr>
      <td style="flex: 0 0 15rem">
        ...
      </td>
      <td style="flex: 0 0 10rem">
        ...
      </td>
      <td style="flex: 0 0 15rem">
        ...
      </td>
    </tr>
  </ng-template>
</p-table>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2:  After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Project Structure

Example 1: Below is a simple example demonstrating the use of the Angular PrimeNG Table Column Widths of a Scrollable Table. Here we have set the width of columns using the flex property of CSS.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Table Column
    Widths of a Scrollable Table
</h4>

<p-table [value]="tableData"
         [scrollable]="true"
         scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th style="flex: 0 0 15rem">
                First Name
            </th>
            <th style="flex: 0 0 10rem">
                Last Name
            </th>
            <th style="flex: 0 0 15rem">
                Age
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-people>
        <tr>
            <td style="flex: 0 0 15rem">
                {{ people.firstname }}
            </td>
            <td style="flex: 0 0 10rem">
                {{ people.lastname }}
            </td>
            <td style="flex: 0 0 15rem">
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts

import { Component } from '@angular/core';

interface People {
    firstname?: string;
    lastname?: string;
    age?: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: People[] = [];
    cols: any[] = [];
    constructor() { }

    ngOnInit() {
        this.cols = [
            { field: 'firstname', header: 'First Name' },
            { field: 'lastname', header: 'Last Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                firstname: 'David',
                lastname: 'ace',
                age: '40',
            },
            {
                firstname: 'AJne',
                lastname: 'west',
                age: '40',
            },
            {
                firstname: 'Mak',
                lastname: 'Lame',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: Below is another example demonstrating the use of the Angular PrimeNG Table Column Widths of a Scrollable Table. Here we have set the width of table columns using the max-width property.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
    Angular PrimeNG Table Column
    Widths of a Scrollable Table
</h4>

<p-table [value]="tableData"
         [scrollable]="true"
         scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th style="max-width:400px">
                First Name
            </th>
            <th style="max-width:400px">
                Last Name
            </th>
            <th style="max-width:100px">
                Age
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-people>
        <tr>
            <td style="max-width:400px">
                {{ people.firstname }}
            </td>
            <td style="max-width:400px">
                {{ people.lastname }}
            </td>
            <td style="max-width:100px">
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts

import { Component } from '@angular/core';

interface People {
    firstname?: string;
    lastname?: string;
    age?: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    tableData: People[] = [];
    cols: any[] = [];
    constructor() { }

    ngOnInit() {
        this.cols = [
            { field: 'firstname', header: 'First Name' },
            { field: 'lastname', header: 'Last Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                firstname: 'David',
                lastname: 'ace',
                age: '40',
            },
            {
                firstname: 'AJne',
                lastname: 'west',
                age: '40',
            },
            {
                firstname: 'Mak',
                lastname: 'Lame',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
            {
                firstname: 'Peter',
                lastname: 'raw',
                age: '40',
            },
            {
                firstname: 'Kane',
                lastname: 'James',
                age: '40',
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/table