Can I use datatable for my angular 5 application?

shubhamnab

I am developing angular 5 application in node.js. Can I use datatable component in my application?

meiwalsh

I am using angular 5 with datatable. You will need to install these:

Bring in the plugin:

npm install datatables.net --save
npm install @types/datatables.net --save . (this is needed for typescript compile)

To style the table,
For default style,

npm install datatables.net--dt --save

or for bootstrap,

npm install datatables.net-bs4 --save

Include datatables base css file globally (example in styles.css). you can also include the extensions css or in the component css:

@import '../node_modules/datatables.net-dt/css/jquery.dataTables.css';
@import '../node_modules/datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.min.css';

datatables extension
I brought in 2 extensions and their corresponding styles: button, fixedcolumns :

npm install datatables.net-buttons --save
npm install @types/datatables.net-buttons --save
npm install datatables.net-buttons-dt --save
npm install datatables.net-fixedcolumns --save 
npm install datatables.net-fixedcolumns-dt

For details on other extensions, you will want to use the download feature in datatables.net https://datatables.net/download/, select the extensions you want, scroll to the bottom and see the npm tab for the packages to install.

In order for the plugin to compile without a problem, you will need to bring in each extension's typescript types definition. Unfortunately, not all plugins have that. To find what typings are available, you can use https://microsoft.github.io/TypeSearch/
Fixedcolumns does not have its own typing file, so I include it in /src/typings.d.ts like this:

declare namespace DataTables {
    interface Settings {
        /**
         * FixedColumns extension options
         */
        fixedColumns?: any;
    }
}

I hope that helps.

rafysanchez

Good job!