AgGrid

Basic Initialization

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly.

1. Initialize the plugin by referencing the necessary files:

                <script src="ag-grid/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" type="text/css" href="ag-grid/ag-grid.css">

Note! Add Ag Grid themes css files as per requirements.

2. Call the DataTable-function after the page has loaded

                 /*** GRID OPTIONS ***/
    var gridOptions = {
        columnDefs: columnDefs,
        rowSelection: "multiple",
        floatingFilter: true,
        filter: true,
        pagination: true,
        paginationPageSize: 20,
        pivotPanelShow: "always",
        colResizeDefault: "shift",
        animateRows: true,
        resizable: true
    };
    /*** DEFINED TABLE VARIABLE ***/
    var gridTable = document.getElementById("myGrid");
    /*** INIT TABLE ***/
    new agGrid.Grid(gridTable, gridOptions);

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Plugin Link	https://www.ag-grid.com/
Template Page	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/table-ag-grid.html