Can I use datatable for my angular 5 application?

Can I use datatable for my angular 5 application?

shubhamnabshubhamnab Posts: 1Questions: 1Answers: 0

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

Answers

  • meiwalshmeiwalsh Posts: 1Questions: 0Answers: 0
    edited June 14

    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.

Sign In or Register to comment.