first commit

public/assets2/js/scripts/ag-grid/ag-grid.js

@@ -0,0 +1,159 @@
+/*=========================================================================================
+    File Name: ag-grid.js
+    Description: Aggrid Table
+    --------------------------------------------------------------------------------------
+    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+    Author: PIXINVENT
+    Author URL: http://www.themeforest.net/user/pixinvent
+==========================================================================================*/
+
+$(document).ready(function() {
+  /*** COLUMN DEFINE ***/
+  var columnDefs = [
+    {
+      headerName: "First Name",
+      field: "firstname",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 175,
+      filter: true,
+      checkboxSelection: true,
+      headerCheckboxSelectionFilteredOnly: true,
+      headerCheckboxSelection: true
+    },
+    {
+      headerName: "Last Name",
+      field: "lastname",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 175
+    },
+    {
+      headerName: "Company",
+      field: "company",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 250
+    },
+    {
+      headerName: "City",
+      field: "city",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 125
+    },
+    {
+      headerName: "Country",
+      field: "country",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 150
+    },
+    {
+      headerName: "State",
+      field: "state",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 125
+    },
+    {
+      headerName: "Zip",
+      field: "zip",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 125
+    },
+    {
+      headerName: "Email",
+      field: "email",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 260,
+      pinned: "left"
+    },
+    {
+      headerName: "Followers",
+      field: "followers",
+      editable: true,
+      sortable: true,
+      filter: true,
+      width: 150
+    }
+  ];
+
+  /*** 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");
+
+  /*** GET TABLE DATA FROM URL ***/
+
+  agGrid
+    .simpleHttpRequest({ url: "../../../app-assets/data/ag-grid-data.json" })
+    .then(function(data) {
+      gridOptions.api.setRowData(data);
+    });
+
+  /*** FILTER TABLE ***/
+  function updateSearchQuery(val) {
+    gridOptions.api.setQuickFilter(val);
+  }
+
+  $(".ag-grid-filter").on("keyup", function() {
+    updateSearchQuery($(this).val());
+  });
+
+  /*** CHANGE DATA PER PAGE ***/
+  function changePageSize(value) {
+    gridOptions.api.paginationSetPageSize(Number(value));
+  }
+
+  $(".sort-dropdown .dropdown-item").on("click", function() {
+    var $this = $(this);
+    changePageSize($this.text());
+    $(".filter-btn").text("1 - " + $this.text() + " of 500");
+  });
+
+  /*** EXPORT AS CSV BTN ***/
+  $(".ag-grid-export-btn").on("click", function(params) {
+    gridOptions.api.exportDataAsCsv();
+  });
+
+  /*** INIT TABLE ***/
+  new agGrid.Grid(gridTable, gridOptions);
+
+  /*** SET OR REMOVE EMAIL AS PINNED DEPENDING ON DEVICE SIZE ***/
+
+  if ($(window).width() < 768) {
+    gridOptions.columnApi.setColumnPinned("email", null);
+  } else {
+    gridOptions.columnApi.setColumnPinned("email", "left");
+  }
+  $(window).on("resize", function() {
+    if ($(window).width() < 768) {
+      gridOptions.columnApi.setColumnPinned("email", null);
+    } else {
+      gridOptions.columnApi.setColumnPinned("email", "left");
+    }
+  });
+});

public/assets2/js/scripts/ag-grid/ag-grid.min.js

@@ -0,0 +1 @@
+$(document).ready(function(){var t={columnDefs:[{headerName:"First Name",field:"firstname",editable:!0,sortable:!0,filter:!0,width:175,checkboxSelection:!0,headerCheckboxSelectionFilteredOnly:!0,headerCheckboxSelection:!0},{headerName:"Last Name",field:"lastname",editable:!0,sortable:!0,filter:!0,width:175},{headerName:"Company",field:"company",editable:!0,sortable:!0,filter:!0,width:250},{headerName:"City",field:"city",editable:!0,sortable:!0,filter:!0,width:125},{headerName:"Country",field:"country",editable:!0,sortable:!0,filter:!0,width:150},{headerName:"State",field:"state",editable:!0,sortable:!0,filter:!0,width:125},{headerName:"Zip",field:"zip",editable:!0,sortable:!0,filter:!0,width:125},{headerName:"Email",field:"email",editable:!0,sortable:!0,filter:!0,width:260,pinned:"left"},{headerName:"Followers",field:"followers",editable:!0,sortable:!0,filter:!0,width:150}],rowSelection:"multiple",floatingFilter:!0,filter:!0,pagination:!0,paginationPageSize:20,pivotPanelShow:"always",colResizeDefault:"shift",animateRows:!0,resizable:!0},e=document.getElementById("myGrid");agGrid.simpleHttpRequest({url:"../../../app-assets/data/ag-grid-data.json"}).then(function(e){t.api.setRowData(e)}),$(".ag-grid-filter").on("keyup",function(){var e;e=$(this).val(),t.api.setQuickFilter(e)}),$(".sort-dropdown .dropdown-item").on("click",function(){var e,i=$(this);e=i.text(),t.api.paginationSetPageSize(Number(e)),$(".filter-btn").text("1 - "+i.text()+" of 500")}),$(".ag-grid-export-btn").on("click",function(e){t.api.exportDataAsCsv()}),new agGrid.Grid(e,t),$(window).width()<768?t.columnApi.setColumnPinned("email",null):t.columnApi.setColumnPinned("email","left"),$(window).on("resize",function(){$(window).width()<768?t.columnApi.setColumnPinned("email",null):t.columnApi.setColumnPinned("email","left")})});