New customers data

public/demo/data/customers-medium.json

@@ -0,0 +1,804 @@
+{
+    "data": [
+    {
+      "id": 1000,
+      "name": "James Butt",
+      "country": {
+        "name": "Algeria",
+        "code": "dz"
+      },
+      "company": "Benton, John B Jr",
+      "date": "2015-09-13",
+      "status": "unqualified",
+      "activity": 17,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1001,
+      "name": "Josephine Darakjy",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Chanay, Jeffrey A Esq",
+      "date": "2019-02-09",
+      "status": "proposal",
+      "activity": 0,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1002,
+      "name": "Art Venere",
+      "country": {
+        "name": "Panama",
+        "code": "pa"
+      },
+      "company": "Chemel, James L Cpa",
+      "date": "2017-05-13",
+      "status": "qualified",
+      "activity": 63,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1003,
+      "name": "Lenna Paprocki",
+      "country": {
+        "name": "Slovenia",
+        "code": "si"
+      },
+      "company": "Feltz Printing Service",
+      "date": "2020-09-15",
+      "status": "new",
+      "activity": 37,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1004,
+      "name": "Donette Foller",
+      "country": {
+        "name": "South Africa",
+        "code": "za"
+      },
+      "company": "Printing Dimensions",
+      "date": "2016-05-20",
+      "status": "proposal",
+      "activity": 33,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1005,
+      "name": "Simona Morasca",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Chapman, Ross E Esq",
+      "date": "2018-02-16",
+      "status": "qualified",
+      "activity": 68,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1006,
+      "name": "Mitsue Tollner",
+      "country": {
+        "name": "Paraguay",
+        "code": "py"
+      },
+      "company": "Morlong Associates",
+      "date": "2018-02-19",
+      "status": "renewal",
+      "activity": 54,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1007,
+      "name": "Leota Dilliard",
+      "country": {
+        "name": "Serbia",
+        "code": "rs"
+      },
+      "company": "Commercial Press",
+      "date": "2019-08-13",
+      "status": "renewal",
+      "activity": 69,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1008,
+      "name": "Sage Wieser",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Truhlar And Truhlar Attys",
+      "date": "2018-11-21",
+      "status": "unqualified",
+      "activity": 76,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1009,
+      "name": "Kris Marrier",
+      "country": {
+        "name": "Mexico",
+        "code": "mx"
+      },
+      "company": "King, Christopher A Esq",
+      "date": "2015-07-07",
+      "status": "proposal",
+      "activity": 3,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1010,
+      "name": "Minna Amigon",
+      "country": {
+        "name": "Romania",
+        "code": "ro"
+      },
+      "company": "Dorl, James J Esq",
+      "date": "2018-11-07",
+      "status": "qualified",
+      "activity": 38,
+      "representative": {
+        "name": "Anna Fali",
+        "image": "annafali.png"
+      }
+    },
+    {
+      "id": 1011,
+      "name": "Abel Maclead",
+      "country": {
+        "name": "Singapore",
+        "code": "sg"
+      },
+      "company": "Rangoni Of Florence",
+      "date": "2017-03-11",
+      "status": "qualified",
+      "activity": 87,
+      "representative": {
+        "name": "Bernardo Dominic",
+        "image": "bernardodominic.png"
+      }
+    },
+    {
+      "id": 1012,
+      "name": "Kiley Caldarera",
+      "country": {
+        "name": "Serbia",
+        "code": "rs"
+      },
+      "company": "Feiner Bros",
+      "date": "2015-10-20",
+      "status": "unqualified",
+      "activity": 80,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1013,
+      "name": "Graciela Ruta",
+      "country": {
+        "name": "Chile",
+        "code": "cl"
+      },
+      "company": "Buckley Miller \u0026 Wright",
+      "date": "2016-07-25",
+      "status": "negotiation",
+      "activity": 59,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1014,
+      "name": "Cammy Albares",
+      "country": {
+        "name": "Philippines",
+        "code": "ph"
+      },
+      "company": "Rousseaux, Michael Esq",
+      "date": "2019-06-25",
+      "status": "new",
+      "activity": 90,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1015,
+      "name": "Mattie Poquette",
+      "country": {
+        "name": "Venezuela",
+        "code": "ve"
+      },
+      "company": "Century Communications",
+      "date": "2017-12-12",
+      "status": "negotiation",
+      "activity": 52,
+      "representative": {
+        "name": "Anna Fali",
+        "image": "annafali.png"
+      }
+    },
+    {
+      "id": 1016,
+      "name": "Meaghan Garufi",
+      "country": {
+        "name": "Malaysia",
+        "code": "my"
+      },
+      "company": "Bolton, Wilbur Esq",
+      "date": "2018-07-04",
+      "status": "unqualified",
+      "activity": 31,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1017,
+      "name": "Gladys Rim",
+      "country": {
+        "name": "Netherlands",
+        "code": "nl"
+      },
+      "company": "T M Byxbee Company Pc",
+      "date": "2020-02-27",
+      "status": "renewal",
+      "activity": 48,
+      "representative": {
+        "name": "Stephen Shaw",
+        "image": "stephenshaw.png"
+      }
+    },
+    {
+      "id": 1018,
+      "name": "Yuki Whobrey",
+      "country": {
+        "name": "Israel",
+        "code": "il"
+      },
+      "company": "Farmers Insurance Group",
+      "date": "2017-12-21",
+      "status": "negotiation",
+      "activity": 16,
+      "representative": {
+        "name": "Bernardo Dominic",
+        "image": "bernardodominic.png"
+      }
+    },
+    {
+      "id": 1019,
+      "name": "Fletcher Flosi",
+      "country": {
+        "name": "Argentina",
+        "code": "ar"
+      },
+      "company": "Post Box Services Plus",
+      "date": "2016-01-04",
+      "status": "renewal",
+      "activity": 19,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1020,
+      "name": "Bette Nicka",
+      "country": {
+        "name": "Paraguay",
+        "code": "py"
+      },
+      "company": "Sport En Art",
+      "date": "2016-10-21",
+      "status": "renewal",
+      "activity": 100,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1021,
+      "name": "Veronika Inouye",
+      "country": {
+        "name": "Ecuador",
+        "code": "ec"
+      },
+      "company": "C 4 Network Inc",
+      "date": "2017-03-24",
+      "status": "renewal",
+      "activity": 72,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1022,
+      "name": "Willard Kolmetz",
+      "country": {
+        "name": "Tunisia",
+        "code": "tn"
+      },
+      "company": "Ingalls, Donald R Esq",
+      "date": "2017-04-15",
+      "status": "renewal",
+      "activity": 94,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1023,
+      "name": "Maryann Royster",
+      "country": {
+        "name": "Belarus",
+        "code": "by"
+      },
+      "company": "Franklin, Peter L Esq",
+      "date": "2017-03-11",
+      "status": "qualified",
+      "activity": 56,
+      "representative": {
+        "name": "Elwin Sharvill",
+        "image": "elwinsharvill.png"
+      }
+    },
+    {
+      "id": 1024,
+      "name": "Alisha Slusarski",
+      "country": {
+        "name": "Iceland",
+        "code": "is"
+      },
+      "company": "Wtlz Power 107 Fm",
+      "date": "2018-03-27",
+      "status": "qualified",
+      "activity": 7,
+      "representative": {
+        "name": "Stephen Shaw",
+        "image": "stephenshaw.png"
+      }
+    },
+    {
+      "id": 1025,
+      "name": "Allene Iturbide",
+      "country": {
+        "name": "Italy",
+        "code": "it"
+      },
+      "company": "Ledecky, David Esq",
+      "date": "2016-02-20",
+      "status": "qualified",
+      "activity": 1,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1026,
+      "name": "Chanel Caudy",
+      "country": {
+        "name": "Argentina",
+        "code": "ar"
+      },
+      "company": "Professional Image Inc",
+      "date": "2018-06-24",
+      "status": "new",
+      "activity": 26,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1027,
+      "name": "Ezekiel Chui",
+      "country": {
+        "name": "Ireland",
+        "code": "ie"
+      },
+      "company": "Sider, Donald C Esq",
+      "date": "2016-09-24",
+      "status": "new",
+      "activity": 76,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1028,
+      "name": "Willow Kusko",
+      "country": {
+        "name": "Romania",
+        "code": "ro"
+      },
+      "company": "U Pull It",
+      "date": "2020-04-11",
+      "status": "qualified",
+      "activity": 7,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1029,
+      "name": "Bernardo Figeroa",
+      "country": {
+        "name": "Israel",
+        "code": "il"
+      },
+      "company": "Clark, Richard Cpa",
+      "date": "2018-04-11",
+      "status": "renewal",
+      "activity": 81,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1030,
+      "name": "Ammie Corrio",
+      "country": {
+        "name": "Hungary",
+        "code": "hu"
+      },
+      "company": "Moskowitz, Barry S",
+      "date": "2016-06-11",
+      "status": "negotiation",
+      "activity": 56,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1031,
+      "name": "Francine Vocelka",
+      "country": {
+        "name": "Honduras",
+        "code": "hn"
+      },
+      "company": "Cascade Realty Advisors Inc",
+      "date": "2017-08-02",
+      "status": "qualified",
+      "activity": 94,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1032,
+      "name": "Ernie Stenseth",
+      "country": {
+        "name": "Australia",
+        "code": "au"
+      },
+      "company": "Knwz Newsradio",
+      "date": "2018-06-06",
+      "status": "renewal",
+      "activity": 68,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1033,
+      "name": "Albina Glick",
+      "country": {
+        "name": "Ukraine",
+        "code": "ua"
+      },
+      "company": "Giampetro, Anthony D",
+      "date": "2019-08-08",
+      "status": "proposal",
+      "activity": 85,
+      "representative": {
+        "name": "Bernardo Dominic",
+        "image": "bernardodominic.png"
+      }
+    },
+    {
+      "id": 1034,
+      "name": "Alishia Sergi",
+      "country": {
+        "name": "Qatar",
+        "code": "qa"
+      },
+      "company": "Milford Enterprises Inc",
+      "date": "2018-05-19",
+      "status": "negotiation",
+      "activity": 46,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1035,
+      "name": "Solange Shinko",
+      "country": {
+        "name": "Cameroon",
+        "code": "cm"
+      },
+      "company": "Mosocco, Ronald A",
+      "date": "2015-02-12",
+      "status": "qualified",
+      "activity": 32,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1036,
+      "name": "Jose Stockham",
+      "country": {
+        "name": "Italy",
+        "code": "it"
+      },
+      "company": "Tri State Refueler Co",
+      "date": "2018-04-25",
+      "status": "qualified",
+      "activity": 77,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1037,
+      "name": "Rozella Ostrosky",
+      "country": {
+        "name": "Venezuela",
+        "code": "ve"
+      },
+      "company": "Parkway Company",
+      "date": "2016-02-27",
+      "status": "unqualified",
+      "activity": 66,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1038,
+      "name": "Valentine Gillian",
+      "country": {
+        "name": "Paraguay",
+        "code": "py"
+      },
+      "company": "Fbs Business Finance",
+      "date": "2019-09-17",
+      "status": "qualified",
+      "activity": 25,
+      "representative": {
+        "name": "Bernardo Dominic",
+        "image": "bernardodominic.png"
+      }
+    },
+    {
+      "id": 1039,
+      "name": "Kati Rulapaugh",
+      "country": {
+        "name": "Puerto Rico",
+        "code": "pr"
+      },
+      "company": "Eder Assocs Consltng Engrs Pc",
+      "date": "2016-12-03",
+      "status": "renewal",
+      "activity": 51,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1040,
+      "name": "Youlanda Schemmer",
+      "country": {
+        "name": "Bolivia",
+        "code": "bo"
+      },
+      "company": "Tri M Tool Inc",
+      "date": "2017-12-15",
+      "status": "negotiation",
+      "activity": 49,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1041,
+      "name": "Dyan Oldroyd",
+      "country": {
+        "name": "Argentina",
+        "code": "ar"
+      },
+      "company": "International Eyelets Inc",
+      "date": "2017-02-02",
+      "status": "qualified",
+      "activity": 5,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1042,
+      "name": "Roxane Campain",
+      "country": {
+        "name": "France",
+        "code": "fr"
+      },
+      "company": "Rapid Trading Intl",
+      "date": "2018-12-25",
+      "status": "unqualified",
+      "activity": 100,
+      "representative": {
+        "name": "Anna Fali",
+        "image": "annafali.png"
+      }
+    },
+    {
+      "id": 1043,
+      "name": "Lavera Perin",
+      "country": {
+        "name": "Vietnam",
+        "code": "vn"
+      },
+      "company": "Abc Enterprises Inc",
+      "date": "2018-04-10",
+      "status": "qualified",
+      "activity": 71,
+      "representative": {
+        "name": "Stephen Shaw",
+        "image": "stephenshaw.png"
+      }
+    },
+    {
+      "id": 1044,
+      "name": "Erick Ferencz",
+      "country": {
+        "name": "Belgium",
+        "code": "be"
+      },
+      "company": "Cindy Turner Associates",
+      "date": "2018-05-06",
+      "status": "unqualified",
+      "activity": 54,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1045,
+      "name": "Fatima Saylors",
+      "country": {
+        "name": "Canada",
+        "code": "ca"
+      },
+      "company": "Stanton, James D Esq",
+      "date": "2019-07-10",
+      "status": "renewal",
+      "activity": 93,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1046,
+      "name": "Jina Briddick",
+      "country": {
+        "name": "Mexico",
+        "code": "mx"
+      },
+      "company": "Grace Pastries Inc",
+      "date": "2018-02-19",
+      "status": "unqualified",
+      "activity": 97,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1047,
+      "name": "Kanisha Waycott",
+      "country": {
+        "name": "Ecuador",
+        "code": "ec"
+      },
+      "company": "Schroer, Gene E Esq",
+      "date": "2019-11-27",
+      "status": "new",
+      "activity": 80,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1048,
+      "name": "Emerson Bowley",
+      "country": {
+        "name": "Finland",
+        "code": "fi"
+      },
+      "company": "Knights Inn",
+      "date": "2018-11-24",
+      "status": "new",
+      "activity": 63,
+      "representative": {
+        "name": "Stephen Shaw",
+        "image": "stephenshaw.png"
+      }
+    },
+    {
+      "id": 1049,
+      "name": "Blair Malet",
+      "country": {
+        "name": "Finland",
+        "code": "fi"
+      },
+      "company": "Bollinger Mach Shp \u0026 Shipyard",
+      "date": "2018-04-19",
+      "status": "new",
+      "activity": 92,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    }
+  ]
+}

public/demo/data/customers-small.json

@@ -0,0 +1,164 @@
+{
+    "data": [
+    {
+      "id": 1000,
+      "name": "James Butt",
+      "country": {
+        "name": "Algeria",
+        "code": "dz"
+      },
+      "company": "Benton, John B Jr",
+      "date": "2015-09-13",
+      "status": "unqualified",
+      "activity": 17,
+      "representative": {
+        "name": "Ioni Bowcher",
+        "image": "ionibowcher.png"
+      }
+    },
+    {
+      "id": 1001,
+      "name": "Josephine Darakjy",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Chanay, Jeffrey A Esq",
+      "date": "2019-02-09",
+      "status": "proposal",
+      "activity": 0,
+      "representative": {
+        "name": "Amy Elsner",
+        "image": "amyelsner.png"
+      }
+    },
+    {
+      "id": 1002,
+      "name": "Art Venere",
+      "country": {
+        "name": "Panama",
+        "code": "pa"
+      },
+      "company": "Chemel, James L Cpa",
+      "date": "2017-05-13",
+      "status": "qualified",
+      "activity": 63,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1003,
+      "name": "Lenna Paprocki",
+      "country": {
+        "name": "Slovenia",
+        "code": "si"
+      },
+      "company": "Feltz Printing Service",
+      "date": "2020-09-15",
+      "status": "new",
+      "activity": 37,
+      "representative": {
+        "name": "Xuxue Feng",
+        "image": "xuxuefeng.png"
+      }
+    },
+    {
+      "id": 1004,
+      "name": "Donette Foller",
+      "country": {
+        "name": "South Africa",
+        "code": "za"
+      },
+      "company": "Printing Dimensions",
+      "date": "2016-05-20",
+      "status": "proposal",
+      "activity": 33,
+      "representative": {
+        "name": "Asiya Javayant",
+        "image": "asiyajavayant.png"
+      }
+    },
+    {
+      "id": 1005,
+      "name": "Simona Morasca",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Chapman, Ross E Esq",
+      "date": "2018-02-16",
+      "status": "qualified",
+      "activity": 68,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1006,
+      "name": "Mitsue Tollner",
+      "country": {
+        "name": "Paraguay",
+        "code": "py"
+      },
+      "company": "Morlong Associates",
+      "date": "2018-02-19",
+      "status": "renewal",
+      "activity": 54,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1007,
+      "name": "Leota Dilliard",
+      "country": {
+        "name": "Serbia",
+        "code": "rs"
+      },
+      "company": "Commercial Press",
+      "date": "2019-08-13",
+      "status": "renewal",
+      "activity": 69,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    },
+    {
+      "id": 1008,
+      "name": "Sage Wieser",
+      "country": {
+        "name": "Egypt",
+        "code": "eg"
+      },
+      "company": "Truhlar And Truhlar Attys",
+      "date": "2018-11-21",
+      "status": "unqualified",
+      "activity": 76,
+      "representative": {
+        "name": "Ivan Magalhaes",
+        "image": "ivanmagalhaes.png"
+      }
+    },
+    {
+      "id": 1009,
+      "name": "Kris Marrier",
+      "country": {
+        "name": "Mexico",
+        "code": "mx"
+      },
+      "company": "King, Christopher A Esq",
+      "date": "2015-07-07",
+      "status": "proposal",
+      "activity": 3,
+      "representative": {
+        "name": "Onyama Limba",
+        "image": "onyamalimba.png"
+      }
+    }
+  ]
+}

src/service/CustomerService.js

@@ -2,7 +2,19 @@ import axios from 'axios'
 
 export default class CarService {
 
-	getCustomers() {
+	getCustomersSmall() {
-		return axios.get('demo/data/customers.json').then(res => res.data.data);
+		return axios.get('demo/data/customers-small.json').then(res => res.data.data);
+    }
+
+    getCustomersMedium() {
+		return axios.get('demo/data/customers-medium.json').then(res => res.data.data);
+    }
+
+    getCustomersLarge() {
+		return axios.get('demo/data/customers-large.json').then(res => res.data.data);
+    }
+
+    getCustomersXLarge() {
+		return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
 	}
 }

src/views/datatable/DataTableColGroupDemo.vue

@@ -134,7 +134,7 @@ export default {
             {brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
         ];
     },
-    computed: {
+    computed: {
         lastYearTotal() {
             let total = 0;
             for(let sale of this.sales) {
@@ -184,7 +184,7 @@ export default {
             {brand: 'Toshiba', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
         ];
     },
-    computed: {
+    computed: {
         lastYearTotal() {
             let total = 0;
             for(let sale of this.sales) {

src/views/datatable/DataTableDemo.vue

@@ -23,6 +23,10 @@
                         </template>
                         <Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
                         <Column field="name" header="Name" :sortable="true">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Name</span>
+                                {{slotProps.data.name}}
+                            </template>
                             <template #filter>
                                 <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
                             </template>
@@ -132,7 +136,7 @@ export default {
         this.customerService = new CustomerService();
     },
     mounted() {
-        this.customerService.getCustomers().then(data => this.customers = data);
+        this.customerService.getCustomersLarge().then(data => this.customers = data);
     },
     methods: {
         filterDate(value, filter) {
@@ -241,8 +245,9 @@ export default {
     }
 }
 
-.p-column-filter {
+/deep/ .p-column-filter {
     margin-top: 1em;
+    display: block;
 
     input {
         width: 100%;
@@ -253,7 +258,7 @@ export default {
     float: right;
 
     input {
-        width: 250px;
+        width: 200px;
     }
 }
 

src/views/datatable/DataTableDoc.vue

@@ -2325,6 +2325,10 @@ export default {
             </template>
             <Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
             <Column field="name" header="Name" :sortable="true">
+                <template #body="slotProps">
+                    <span class="p-column-title">Name</span>
+                    {{slotProps.data.name}}
+                </template>
                 <template #filter>
                     <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
                 </template>
@@ -2346,7 +2350,7 @@ export default {
                     <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.representative.name}}</span>
                 </template>
                     <template #filter>
-                    <MultiSelect v-model="filters['representative.name'']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
+                    <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                         <template #option="slotProps">
                             <div class="p-multiselect-representative-option">
                                 <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
@@ -2428,7 +2432,7 @@ export default {
         this.customerService = new CustomerService();
     },
     mounted() {
-        this.customerService.getCustomers().then(data => this.customers = data);
+        this.customerService.getCustomersLarge().then(data => this.customers = data);
     },
     methods: {
         filterDate(value, filter) {
@@ -2461,17 +2465,51 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.p-column-filter {
+.customer-badge {
-    margin-top: 1em;
+    border-radius: 2px;
+    padding: .25em .5em;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &amp;.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    &amp;.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    &amp;.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &amp;.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    &amp;.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    &amp;.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
+    }
 }
 
-.p-dropdown-car-option {
+.p-multiselect-representative-option {
-    display: flex;
+    display: inline-block;
-    align-items: center;
+    vertical-align: middle;
-    text-align: left;
 
     img {
-        margin-right: .5em;
+        vertical-align: middle;
         width: 24px;
     }
 
@@ -2480,15 +2518,51 @@ export default {
     }
 }
 
+/deep/ .p-paginator {
+    .p-dropdown {
+        float: left;
+    }
+
+    .p-paginator-current {
+        float: right;
+    }
+}
+
+/deep/ .p-progressbar {
+    height: 8px;
+    background-color: #D8DADC;
+
+    .p-progressbar-value {
+        background-color: #00ACAD;
+    }
+}
+
+/deep/ .p-column-filter {
+    margin-top: 1em;
+    display: block;
+
+    input {
+        width: 100%;
+    }
+}
+
 .p-datatable-globalfilter-container {
     float: right;
 
     input {
-        width: 250px;
+        width: 200px;
     }
 }
 
-/deep/ .p-datatable.p-datatable-cars {
+/deep/ .p-datepicker {
+    min-width: 25em;
+
+    td {
+        font-weight: 400;
+    }
+}
+
+/deep/ .p-datatable.p-datatable-customers {
     .p-datatable-header {
         border: 0 none;
         padding: 12px;
@@ -2506,12 +2580,9 @@ export default {
         text-align: left;
     }
 
-        .p-column-title {
-        font-size: 16px;
-    }
-
     .p-datatable-tbody > tr > td {
         border: 0 none;
+        cursor: auto;
     }
 }
 </CodeHighlight>