How to use "fixedColumns" in Datatable Angular 6

Question

I am new in Angular using DataTable in Angular 6.

(Referred : https://l-lin.github.io/angular-datatables)

I have installed fixedcolumns.

npm install datatables.net-fixedcolumns-bs

my angular code to initialize table is

ngOnInit() {   
    this.dtOptions[0] = {
      pagingType: 'full_numbers',
      pageLength: 25,
      info:"Showing _START_ to _END_ of _TOTAL_ results",
      infoEmpty:"Showing 0 to 0 of 0 results",
      scrollX:true,
      scrollCollapse:true,
      fixedColumns:{
        leftColumns: 1,
        rightColumns: 1
      }
    };

and HTML code is

<table class="table table-hover row-border hover" datatable [dtOptions]="dtOptions[0]" [dtTrigger]="dtTrigger" >
    <thead>
        <tr>
            <th style="text-align: left">Flag/Register name</th>
            <th style="text-align: left">Country/Government</th>
            <th style="text-align: center">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let flagView of flagViewModel">
            <td>{{flagView.countryName}} </td>
            <td>
                <div style="text-transform: uppercase" *ngIf="flagView.flagnameOfficialOther!=null">
                    {{flagView.flagnameOfficialOther}}
                </div>
            </td>
            <td style="text-align: center">
                <a style="border-top:0;border-left:0;border-right:0;" [routerLink]="['/flags/',flagView.flagId]" class="button-action x-small">View</a>
            </td>
        </tr>
    </tbody>
</table>

I am not getting any error message, but it is not working.

Please advice me what I need to do.

Thanks in advance.

I'm having the same problem. The editor recognizes it with npm install @types/datatables.net-fixedcolumns But then the option is not enabled — gal007, May 23 '20 at 19:09

score 0 · Answer 1 · answered May 27 '20 at 02:00

I can tell you how I did it in Angular 8.

First, I installed:

npm i datatables.net
npm i datatables.net-fixedcolumns-bs
npm i datatables.net-fixedcolumns
npm install @types/datatables.net-fixedcolumns

Then, I added these entries to the angular.json file:

"styles": [
          "src/styles.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css",
          "node_modules/bootswatch/dist/minty/bootstrap.min.css",
          "node_modules/datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/datatables.net-dt/js/dataTables.dataTables.js",
          "node_modules/datatables.net-fixedcolumns-dt/js/fixedColumns.dataTables.js"
]

And I added this in the component (instead of in the app.module.ts) file:

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-fixedcolumns-dt';

To later define a table in my component:

<table id="products" class="table table-striped table-bordered">

And finally load the data...

$('#products').DataTable({
      "columnDefs": [ 
        { "title": "Name", "targets": 0 },
        { "title": "Price", "targets": 1 },
        { "title": "Stock", "targets": 2 },
        { "title": "Description", "targets": 3 }
      ],
      fixedColumns:{
           leftColumns: 2
      },
      "data": formattedData
});

@rajhim I already posted my working example code. It is working for me — gal007, Jun 25 '20 at 17:11

score -1 · Answer 2 · answered Aug 19 '19 at 13:33

You have to install these:

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

did you install everything? https://l-lin.github.io/angular-datatables/#/getting-started

How to use "fixedColumns" in Datatable Angular 6

2 Answers2

Linked