From dbb5146eb8f49f15541659406db76d9ce4a8d128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Tue, 7 May 2019 13:24:05 +0300
Subject: [PATCH] DataView component initial

---
 public/demo/data/cars-large.json              | 1204 +++++++++++++++++
 public/demo/data/cars-medium.json             |   54 +
 public/demo/data/cars-small.json              |   14 +
 src/AppMenu.vue                               |    1 +
 src/components/dataview/DataView.css          |   41 +
 src/components/dataview/DataView.vue          |  168 +++
 .../dataview/DataViewLayoutOptions.vue        |   41 +
 src/main.js                                   |    4 +
 src/router.js                                 |    5 +
 src/service/CarService.js                     |   16 +
 src/views/dataview/DataViewDemo.vue           |   86 ++
 src/views/dataview/DataViewDoc.vue            |  297 ++++
 12 files changed, 1931 insertions(+)
 create mode 100644 public/demo/data/cars-large.json
 create mode 100644 public/demo/data/cars-medium.json
 create mode 100644 public/demo/data/cars-small.json
 create mode 100644 src/components/dataview/DataView.css
 create mode 100644 src/components/dataview/DataView.vue
 create mode 100644 src/components/dataview/DataViewLayoutOptions.vue
 create mode 100644 src/service/CarService.js
 create mode 100644 src/views/dataview/DataViewDemo.vue
 create mode 100644 src/views/dataview/DataViewDoc.vue

diff --git a/public/demo/data/cars-large.json b/public/demo/data/cars-large.json
new file mode 100644
index 000000000..751150284
--- /dev/null
+++ b/public/demo/data/cars-large.json
@@ -0,0 +1,1204 @@
+{
+    "data":[
+        {
+            "vin":"ee8a89d8",
+            "brand":"Fiat",
+            "year":1987,
+            "color":"Maroon"
+        },
+        {
+            "vin":"642b3edc",
+            "brand":"Renault",
+            "year":1968,
+            "color":"White"
+        },
+        {
+            "vin":"19ec7580",
+            "brand":"Renault",
+            "year":1981,
+            "color":"Black"
+        },
+        {
+            "vin":"39980f30",
+            "brand":"VW",
+            "year":1986,
+            "color":"Red"
+        },
+        {
+            "vin":"ec9cc4e4",
+            "brand":"Fiat",
+            "year":1981,
+            "color":"Brown"
+        },
+        {
+            "vin":"09a06548",
+            "brand":"VW",
+            "year":1965,
+            "color":"Green"
+        },
+        {
+            "vin":"05c47246",
+            "brand":"Mercedes",
+            "year":2007,
+            "color":"Blue"
+        },
+        {
+            "vin":"a9cb87aa",
+            "brand":"Fiat",
+            "year":1962,
+            "color":"Green"
+        },
+        {
+            "vin":"eae758fa",
+            "brand":"BMW",
+            "year":1999,
+            "color":"Yellow"
+        },
+        {
+            "vin":"1241c403",
+            "brand":"Jaguar",
+            "year":1964,
+            "color":"Yellow"
+        },
+        {
+            "vin":"13f853a7",
+            "brand":"Honda",
+            "year":2006,
+            "color":"White"
+        },
+        {
+            "vin":"447d9ed9",
+            "brand":"Jaguar",
+            "year":2005,
+            "color":"Orange"
+        },
+        {
+            "vin":"78fa052e",
+            "brand":"Jaguar",
+            "year":1990,
+            "color":"Orange"
+        },
+        {
+            "vin":"8b77772a",
+            "brand":"Mercedes",
+            "year":1991,
+            "color":"Blue"
+        },
+        {
+            "vin":"23ba7e86",
+            "brand":"Honda",
+            "year":1975,
+            "color":"Yellow"
+        },
+        {
+            "vin":"9bacb32d",
+            "brand":"Volvo",
+            "year":1968,
+            "color":"Brown"
+        },
+        {
+            "vin":"62094d91",
+            "brand":"Mercedes",
+            "year":1962,
+            "color":"Green"
+        },
+        {
+            "vin":"dc7003f4",
+            "brand":"Jaguar",
+            "year":1976,
+            "color":"Maroon"
+        },
+        {
+            "vin":"08607aef",
+            "brand":"Mercedes",
+            "year":1987,
+            "color":"Maroon"
+        },
+        {
+            "vin":"45eee33a",
+            "brand":"BMW",
+            "year":1980,
+            "color":"Silver"
+        },
+        {
+            "vin":"f199ec5c",
+            "brand":"Jaguar",
+            "year":1961,
+            "color":"Green"
+        },
+        {
+            "vin":"b34cd9e8",
+            "brand":"VW",
+            "year":1993,
+            "color":"Silver"
+        },
+        {
+            "vin":"54b20b02",
+            "brand":"Renault",
+            "year":1967,
+            "color":"Brown"
+        },
+        {
+            "vin":"5dd8766e",
+            "brand":"Honda",
+            "year":1998,
+            "color":"Orange"
+        },
+        {
+            "vin":"df50ce22",
+            "brand":"Mercedes",
+            "year":1964,
+            "color":"White"
+        },
+        {
+            "vin":"ecb3e9e1",
+            "brand":"Honda",
+            "year":2003,
+            "color":"Silver"
+        },
+        {
+            "vin":"750d731d",
+            "brand":"Renault",
+            "year":1962,
+            "color":"Blue"
+        },
+        {
+            "vin":"bec38cf4",
+            "brand":"Renault",
+            "year":1960,
+            "color":"Blue"
+        },
+        {
+            "vin":"b7752002",
+            "brand":"Jaguar",
+            "year":1964,
+            "color":"Black"
+        },
+        {
+            "vin":"315fe9c4",
+            "brand":"Fiat",
+            "year":1985,
+            "color":"Red"
+        },
+        {
+            "vin":"be65f786",
+            "brand":"Mercedes",
+            "year":1963,
+            "color":"Orange"
+        },
+        {
+            "vin":"786a7d57",
+            "brand":"Mercedes",
+            "year":2003,
+            "color":"Black"
+        },
+        {
+            "vin":"a3aee412",
+            "brand":"Volvo",
+            "year":2003,
+            "color":"Maroon"
+        },
+        {
+            "vin":"749e6bdd",
+            "brand":"Audi",
+            "year":1995,
+            "color":"Brown"
+        },
+        {
+            "vin":"8cc40f50",
+            "brand":"BMW",
+            "year":1961,
+            "color":"Brown"
+        },
+        {
+            "vin":"5de63a6f",
+            "brand":"Renault",
+            "year":1961,
+            "color":"White"
+        },
+        {
+            "vin":"bdae1e20",
+            "brand":"Jaguar",
+            "year":2008,
+            "color":"Blue"
+        },
+        {
+            "vin":"290cc891",
+            "brand":"VW",
+            "year":1992,
+            "color":"Brown"
+        },
+        {
+            "vin":"007e1014",
+            "brand":"Renault",
+            "year":1966,
+            "color":"Black"
+        },
+        {
+            "vin":"429c502d",
+            "brand":"Honda",
+            "year":1995,
+            "color":"Silver"
+        },
+        {
+            "vin":"c336f9b6",
+            "brand":"Honda",
+            "year":1991,
+            "color":"Maroon"
+        },
+        {
+            "vin":"a6783ba3",
+            "brand":"Honda",
+            "year":2004,
+            "color":"Yellow"
+        },
+        {
+            "vin":"2ddaf8d5",
+            "brand":"Volvo",
+            "year":1982,
+            "color":"Blue"
+        },
+        {
+            "vin":"c09c4b15",
+            "brand":"VW",
+            "year":1991,
+            "color":"Blue"
+        },
+        {
+            "vin":"4609844c",
+            "brand":"Honda",
+            "year":1972,
+            "color":"Black"
+        },
+        {
+            "vin":"8db7df27",
+            "brand":"Audi",
+            "year":1982,
+            "color":"Blue"
+        },
+        {
+            "vin":"dcc58086",
+            "brand":"Audi",
+            "year":2001,
+            "color":"Brown"
+        },
+        {
+            "vin":"f1274cbe",
+            "brand":"Fiat",
+            "year":1995,
+            "color":"Silver"
+        },
+        {
+            "vin":"0858a5d4",
+            "brand":"Renault",
+            "year":1992,
+            "color":"Green"
+        },
+        {
+            "vin":"c2d42bb6",
+            "brand":"Volvo",
+            "year":1972,
+            "color":"Green"
+        },
+        {
+            "vin":"5535cd5a",
+            "brand":"Renault",
+            "year":1980,
+            "color":"Silver"
+        },
+        {
+            "vin":"e3313e1e",
+            "brand":"Honda",
+            "year":2009,
+            "color":"Orange"
+        },
+        {
+            "vin":"f4dea691",
+            "brand":"BMW",
+            "year":2002,
+            "color":"Brown"
+        },
+        {
+            "vin":"ec15a449",
+            "brand":"Honda",
+            "year":1990,
+            "color":"Yellow"
+        },
+        {
+            "vin":"80b74a0e",
+            "brand":"BMW",
+            "year":1979,
+            "color":"Yellow"
+        },
+        {
+            "vin":"513fe268",
+            "brand":"Honda",
+            "year":1987,
+            "color":"White"
+        },
+        {
+            "vin":"6934c8f8",
+            "brand":"Renault",
+            "year":1989,
+            "color":"Red"
+        },
+        {
+            "vin":"6a4c3ad0",
+            "brand":"Honda",
+            "year":1994,
+            "color":"Yellow"
+        },
+        {
+            "vin":"e0acd7b5",
+            "brand":"Mercedes",
+            "year":1965,
+            "color":"Red"
+        },
+        {
+            "vin":"2f31ac35",
+            "brand":"Jaguar",
+            "year":1991,
+            "color":"Brown"
+        },
+        {
+            "vin":"36104237",
+            "brand":"VW",
+            "year":1992,
+            "color":"Silver"
+        },
+        {
+            "vin":"5be099b4",
+            "brand":"BMW",
+            "year":1991,
+            "color":"Yellow"
+        },
+        {
+            "vin":"e2f55f31",
+            "brand":"BMW",
+            "year":1967,
+            "color":"Silver"
+        },
+        {
+            "vin":"11274338",
+            "brand":"Mercedes",
+            "year":1999,
+            "color":"Blue"
+        },
+        {
+            "vin":"f710e177",
+            "brand":"Fiat",
+            "year":2007,
+            "color":"White"
+        },
+        {
+            "vin":"d8375b4b",
+            "brand":"Volvo",
+            "year":1977,
+            "color":"Blue"
+        },
+        {
+            "vin":"a27ddfe3",
+            "brand":"VW",
+            "year":1978,
+            "color":"Blue"
+        },
+        {
+            "vin":"d8848162",
+            "brand":"BMW",
+            "year":2008,
+            "color":"Black"
+        },
+        {
+            "vin":"e9cb3677",
+            "brand":"BMW",
+            "year":2004,
+            "color":"Black"
+        },
+        {
+            "vin":"c9dc321d",
+            "brand":"BMW",
+            "year":1989,
+            "color":"Red"
+        },
+        {
+            "vin":"4c75c610",
+            "brand":"Volvo",
+            "year":1972,
+            "color":"Yellow"
+        },
+        {
+            "vin":"1c90c93d",
+            "brand":"Audi",
+            "year":2004,
+            "color":"Silver"
+        },
+        {
+            "vin":"5ccc9f7f",
+            "brand":"Jaguar",
+            "year":1961,
+            "color":"Red"
+        },
+        {
+            "vin":"94498bc0",
+            "brand":"Fiat",
+            "year":1965,
+            "color":"Silver"
+        },
+        {
+            "vin":"1d1a21f3",
+            "brand":"Honda",
+            "year":1985,
+            "color":"Red"
+        },
+        {
+            "vin":"ea463ad3",
+            "brand":"BMW",
+            "year":1992,
+            "color":"Blue"
+        },
+        {
+            "vin":"c24bdeb2",
+            "brand":"Honda",
+            "year":1991,
+            "color":"Red"
+        },
+        {
+            "vin":"af3b744b",
+            "brand":"Audi",
+            "year":1998,
+            "color":"Green"
+        },
+        {
+            "vin":"bebd5a96",
+            "brand":"Jaguar",
+            "year":1989,
+            "color":"Black"
+        },
+        {
+            "vin":"6ef9dbf3",
+            "brand":"Fiat",
+            "year":1962,
+            "color":"Orange"
+        },
+        {
+            "vin":"eede8f1e",
+            "brand":"Jaguar",
+            "year":1977,
+            "color":"Brown"
+        },
+        {
+            "vin":"9d11b02d",
+            "brand":"BMW",
+            "year":1971,
+            "color":"Yellow"
+        },
+        {
+            "vin":"1d4223a1",
+            "brand":"Mercedes",
+            "year":1975,
+            "color":"Brown"
+        },
+        {
+            "vin":"4d118346",
+            "brand":"Mercedes",
+            "year":1985,
+            "color":"Brown"
+        },
+        {
+            "vin":"cce76f06",
+            "brand":"Honda",
+            "year":1980,
+            "color":"Maroon"
+        },
+        {
+            "vin":"2af398ed",
+            "brand":"Renault",
+            "year":1970,
+            "color":"Yellow"
+        },
+        {
+            "vin":"c0ddab4c",
+            "brand":"Audi",
+            "year":2003,
+            "color":"Silver"
+        },
+        {
+            "vin":"a27ea639",
+            "brand":"Mercedes",
+            "year":1968,
+            "color":"Yellow"
+        },
+        {
+            "vin":"e6441f09",
+            "brand":"Jaguar",
+            "year":1982,
+            "color":"Green"
+        },
+        {
+            "vin":"c4c59d58",
+            "brand":"Fiat",
+            "year":2005,
+            "color":"Orange"
+        },
+        {
+            "vin":"9d31fc0a",
+            "brand":"Mercedes",
+            "year":1974,
+            "color":"Brown"
+        },
+        {
+            "vin":"b0ffce2d",
+            "brand":"Volvo",
+            "year":1966,
+            "color":"Yellow"
+        },
+        {
+            "vin":"ca7e52e3",
+            "brand":"Honda",
+            "year":1971,
+            "color":"Orange"
+        },
+        {
+            "vin":"56b36f0e",
+            "brand":"Mercedes",
+            "year":2008,
+            "color":"Orange"
+        },
+        {
+            "vin":"ba045e1e",
+            "brand":"Jaguar",
+            "year":1968,
+            "color":"White"
+        },
+        {
+            "vin":"fd579989",
+            "brand":"BMW",
+            "year":1975,
+            "color":"Black"
+        },
+        {
+            "vin":"084850a3",
+            "brand":"Audi",
+            "year":1990,
+            "color":"Red"
+        },
+        {
+            "vin":"e39245ab",
+            "brand":"BMW",
+            "year":1969,
+            "color":"White"
+        },
+        {
+            "vin":"41ab14a1",
+            "brand":"Jaguar",
+            "year":1987,
+            "color":"Silver"
+        },
+        {
+            "vin":"7ec4c1c0",
+            "brand":"Jaguar",
+            "year":1980,
+            "color":"Black"
+        },
+        {
+            "vin":"bf1c14aa",
+            "brand":"Audi",
+            "year":1984,
+            "color":"Yellow"
+        },
+        {
+            "vin":"adeff567",
+            "brand":"Volvo",
+            "year":2000,
+            "color":"Brown"
+        },
+        {
+            "vin":"61e5e07d",
+            "brand":"Mercedes",
+            "year":1978,
+            "color":"Orange"
+        },
+        {
+            "vin":"7555e46a",
+            "brand":"Audi",
+            "year":1966,
+            "color":"Blue"
+        },
+        {
+            "vin":"95babbd1",
+            "brand":"Honda",
+            "year":1998,
+            "color":"Black"
+        },
+        {
+            "vin":"ff6885f7",
+            "brand":"Audi",
+            "year":1996,
+            "color":"White"
+        },
+        {
+            "vin":"5b5a0031",
+            "brand":"Audi",
+            "year":1968,
+            "color":"Brown"
+        },
+        {
+            "vin":"de63c575",
+            "brand":"Mercedes",
+            "year":1989,
+            "color":"Yellow"
+        },
+        {
+            "vin":"6bf3bfbc",
+            "brand":"Audi",
+            "year":1968,
+            "color":"Green"
+        },
+        {
+            "vin":"d2d2e8d4",
+            "brand":"Fiat",
+            "year":1985,
+            "color":"Green"
+        },
+        {
+            "vin":"edcab1f7",
+            "brand":"VW",
+            "year":1979,
+            "color":"Silver"
+        },
+        {
+            "vin":"03234e20",
+            "brand":"Mercedes",
+            "year":1962,
+            "color":"Orange"
+        },
+        {
+            "vin":"de2a7b08",
+            "brand":"Honda",
+            "year":2007,
+            "color":"Blue"
+        },
+        {
+            "vin":"717b8282",
+            "brand":"BMW",
+            "year":1999,
+            "color":"Yellow"
+        },
+        {
+            "vin":"790e7f03",
+            "brand":"Volvo",
+            "year":1983,
+            "color":"White"
+        },
+        {
+            "vin":"8eefb223",
+            "brand":"Jaguar",
+            "year":1983,
+            "color":"Silver"
+        },
+        {
+            "vin":"5e524acd",
+            "brand":"Jaguar",
+            "year":1994,
+            "color":"Maroon"
+        },
+        {
+            "vin":"26b1aff9",
+            "brand":"BMW",
+            "year":1965,
+            "color":"Black"
+        },
+        {
+            "vin":"c007a623",
+            "brand":"Renault",
+            "year":1968,
+            "color":"Maroon"
+        },
+        {
+            "vin":"76733e83",
+            "brand":"Honda",
+            "year":1991,
+            "color":"White"
+        },
+        {
+            "vin":"ef3c14f7",
+            "brand":"Fiat",
+            "year":1987,
+            "color":"Brown"
+        },
+        {
+            "vin":"2b4ca005",
+            "brand":"Honda",
+            "year":2009,
+            "color":"Silver"
+        },
+        {
+            "vin":"8191dbb6",
+            "brand":"BMW",
+            "year":2005,
+            "color":"Black"
+        },
+        {
+            "vin":"f6b3bd94",
+            "brand":"Renault",
+            "year":1967,
+            "color":"Yellow"
+        },
+        {
+            "vin":"abb19f41",
+            "brand":"Volvo",
+            "year":1975,
+            "color":"Blue"
+        },
+        {
+            "vin":"7470c95f",
+            "brand":"Renault",
+            "year":1996,
+            "color":"Black"
+        },
+        {
+            "vin":"5f1b57a3",
+            "brand":"Volvo",
+            "year":1986,
+            "color":"Red"
+        },
+        {
+            "vin":"ed47a74b",
+            "brand":"BMW",
+            "year":2007,
+            "color":"Brown"
+        },
+        {
+            "vin":"ed6030f7",
+            "brand":"Honda",
+            "year":1990,
+            "color":"Red"
+        },
+        {
+            "vin":"944c71dc",
+            "brand":"Mercedes",
+            "year":1991,
+            "color":"Silver"
+        },
+        {
+            "vin":"c7d838a5",
+            "brand":"VW",
+            "year":1980,
+            "color":"Yellow"
+        },
+        {
+            "vin":"712db898",
+            "brand":"Audi",
+            "year":1965,
+            "color":"Red"
+        },
+        {
+            "vin":"99acc06f",
+            "brand":"BMW",
+            "year":1995,
+            "color":"Silver"
+        },
+        {
+            "vin":"6c68ffa5",
+            "brand":"Jaguar",
+            "year":1999,
+            "color":"Green"
+        },
+        {
+            "vin":"63893922",
+            "brand":"Renault",
+            "year":1991,
+            "color":"Brown"
+        },
+        {
+            "vin":"dca5f739",
+            "brand":"Jaguar",
+            "year":2002,
+            "color":"Blue"
+        },
+        {
+            "vin":"16da6dcb",
+            "brand":"Jaguar",
+            "year":2006,
+            "color":"Blue"
+        },
+        {
+            "vin":"fe9ca30c",
+            "brand":"Fiat",
+            "year":1967,
+            "color":"Maroon"
+        },
+        {
+            "vin":"f0193ac7",
+            "brand":"Mercedes",
+            "year":1979,
+            "color":"Orange"
+        },
+        {
+            "vin":"145f5551",
+            "brand":"Jaguar",
+            "year":1993,
+            "color":"Brown"
+        },
+        {
+            "vin":"24714317",
+            "brand":"Mercedes",
+            "year":1971,
+            "color":"White"
+        },
+        {
+            "vin":"1a9c6e4e",
+            "brand":"Jaguar",
+            "year":1997,
+            "color":"Yellow"
+        },
+        {
+            "vin":"c9b7ef72",
+            "brand":"Fiat",
+            "year":1992,
+            "color":"Maroon"
+        },
+        {
+            "vin":"b1b6c375",
+            "brand":"Fiat",
+            "year":1963,
+            "color":"Silver"
+        },
+        {
+            "vin":"7254a003",
+            "brand":"Audi",
+            "year":1982,
+            "color":"White"
+        },
+        {
+            "vin":"6f0de80f",
+            "brand":"Renault",
+            "year":1987,
+            "color":"Blue"
+        },
+        {
+            "vin":"e3048f87",
+            "brand":"Fiat",
+            "year":1989,
+            "color":"Blue"
+        },
+        {
+            "vin":"361e435a",
+            "brand":"BMW",
+            "year":1973,
+            "color":"Green"
+        },
+        {
+            "vin":"59e6a9f3",
+            "brand":"BMW",
+            "year":1964,
+            "color":"Maroon"
+        },
+        {
+            "vin":"b791fe05",
+            "brand":"Mercedes",
+            "year":1993,
+            "color":"Yellow"
+        },
+        {
+            "vin":"68b0dd88",
+            "brand":"BMW",
+            "year":2002,
+            "color":"Green"
+        },
+        {
+            "vin":"5b439d1f",
+            "brand":"BMW",
+            "year":1964,
+            "color":"Maroon"
+        },
+        {
+            "vin":"9a7ac9e3",
+            "brand":"Renault",
+            "year":1988,
+            "color":"White"
+        },
+        {
+            "vin":"d214751d",
+            "brand":"Honda",
+            "year":1997,
+            "color":"White"
+        },
+        {
+            "vin":"72229390",
+            "brand":"Mercedes",
+            "year":1996,
+            "color":"White"
+        },
+        {
+            "vin":"b5fbbeee",
+            "brand":"VW",
+            "year":1999,
+            "color":"Brown"
+        },
+        {
+            "vin":"8972b543",
+            "brand":"Audi",
+            "year":1973,
+            "color":"Black"
+        },
+        {
+            "vin":"7bc21024",
+            "brand":"Renault",
+            "year":1980,
+            "color":"Yellow"
+        },
+        {
+            "vin":"5d661964",
+            "brand":"Renault",
+            "year":2005,
+            "color":"Silver"
+        },
+        {
+            "vin":"a6ccc2d8",
+            "brand":"Honda",
+            "year":1994,
+            "color":"Blue"
+        },
+        {
+            "vin":"c1f15f28",
+            "brand":"Volvo",
+            "year":1999,
+            "color":"Black"
+        },
+        {
+            "vin":"161512ce",
+            "brand":"VW",
+            "year":1962,
+            "color":"Black"
+        },
+        {
+            "vin":"16e0b448",
+            "brand":"Fiat",
+            "year":1990,
+            "color":"Green"
+        },
+        {
+            "vin":"f0734442",
+            "brand":"Audi",
+            "year":1966,
+            "color":"Orange"
+        },
+        {
+            "vin":"5e233279",
+            "brand":"Audi",
+            "year":1964,
+            "color":"Green"
+        },
+        {
+            "vin":"1de720b2",
+            "brand":"Renault",
+            "year":2003,
+            "color":"Orange"
+        },
+        {
+            "vin":"46efaeb2",
+            "brand":"Jaguar",
+            "year":1993,
+            "color":"Green"
+        },
+        {
+            "vin":"88f2354c",
+            "brand":"Jaguar",
+            "year":2006,
+            "color":"Black"
+        },
+        {
+            "vin":"04819fd6",
+            "brand":"Mercedes",
+            "year":1983,
+            "color":"White"
+        },
+        {
+            "vin":"401771c8",
+            "brand":"Volvo",
+            "year":1962,
+            "color":"Silver"
+        },
+        {
+            "vin":"8600877b",
+            "brand":"VW",
+            "year":1996,
+            "color":"Black"
+        },
+        {
+            "vin":"946bd645",
+            "brand":"Honda",
+            "year":1991,
+            "color":"Red"
+        },
+        {
+            "vin":"ad078e69",
+            "brand":"Fiat",
+            "year":1991,
+            "color":"Brown"
+        },
+        {
+            "vin":"93138901",
+            "brand":"Mercedes",
+            "year":1961,
+            "color":"Silver"
+        },
+        {
+            "vin":"f365dfa4",
+            "brand":"Mercedes",
+            "year":1980,
+            "color":"Black"
+        },
+        {
+            "vin":"22647161",
+            "brand":"Audi",
+            "year":2007,
+            "color":"Blue"
+        },
+        {
+            "vin":"92d1ee27",
+            "brand":"Jaguar",
+            "year":1977,
+            "color":"Silver"
+        },
+        {
+            "vin":"137c2b3a",
+            "brand":"Honda",
+            "year":1970,
+            "color":"Blue"
+        },
+        {
+            "vin":"b05b5235",
+            "brand":"BMW",
+            "year":1967,
+            "color":"Yellow"
+        },
+        {
+            "vin":"1afbf400",
+            "brand":"Audi",
+            "year":1966,
+            "color":"Maroon"
+        },
+        {
+            "vin":"8530ae50",
+            "brand":"BMW",
+            "year":1979,
+            "color":"Brown"
+        },
+        {
+            "vin":"c9a487a3",
+            "brand":"Volvo",
+            "year":1981,
+            "color":"Silver"
+        },
+        {
+            "vin":"5cb0bed6",
+            "brand":"Honda",
+            "year":1962,
+            "color":"Orange"
+        },
+        {
+            "vin":"cf7d0b45",
+            "brand":"Fiat",
+            "year":1997,
+            "color":"Green"
+        },
+        {
+            "vin":"bc762dd0",
+            "brand":"Jaguar",
+            "year":2000,
+            "color":"Yellow"
+        },
+        {
+            "vin":"97207a61",
+            "brand":"VW",
+            "year":1976,
+            "color":"Blue"
+        },
+        {
+            "vin":"17680899",
+            "brand":"Mercedes",
+            "year":2006,
+            "color":"Silver"
+        },
+        {
+            "vin":"d8a98d30",
+            "brand":"Renault",
+            "year":1990,
+            "color":"Green"
+        },
+        {
+            "vin":"ff01ead0",
+            "brand":"Audi",
+            "year":1962,
+            "color":"Blue"
+        },
+        {
+            "vin":"38b30a61",
+            "brand":"Fiat",
+            "year":1977,
+            "color":"White"
+        },
+        {
+            "vin":"9a6793c1",
+            "brand":"Renault",
+            "year":1983,
+            "color":"Red"
+        },
+        {
+            "vin":"b1f27273",
+            "brand":"Mercedes",
+            "year":2007,
+            "color":"Brown"
+        },
+        {
+            "vin":"0fa8c1aa",
+            "brand":"Jaguar",
+            "year":1982,
+            "color":"Blue"
+        },
+        {
+            "vin":"a7520f42",
+            "brand":"Volvo",
+            "year":2008,
+            "color":"Maroon"
+        },
+        {
+            "vin":"494eba81",
+            "brand":"BMW",
+            "year":1966,
+            "color":"Silver"
+        },
+        {
+            "vin":"683535b8",
+            "brand":"Renault",
+            "year":2003,
+            "color":"White"
+        },
+        {
+            "vin":"62e5d216",
+            "brand":"Audi",
+            "year":1962,
+            "color":"Orange"
+        },
+        {
+            "vin":"16a65b56",
+            "brand":"Jaguar",
+            "year":2009,
+            "color":"Blue"
+        },
+        {
+            "vin":"d00250a3",
+            "brand":"BMW",
+            "year":1978,
+            "color":"Blue"
+        },
+        {
+            "vin":"f3c3909d",
+            "brand":"Renault",
+            "year":2003,
+            "color":"Green"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/public/demo/data/cars-medium.json b/public/demo/data/cars-medium.json
new file mode 100644
index 000000000..cf6869973
--- /dev/null
+++ b/public/demo/data/cars-medium.json
@@ -0,0 +1,54 @@
+{
+    "data":[
+        {"vin":"a1653d4d","brand":"VW","year":1998,"color":"White","price":10000},
+        {"vin":"ddeb9b10","brand":"Mercedes","year":1985,"color":"Green","price":25000},
+        {"vin":"d8ebe413","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
+        {"vin":"aab227b7","brand":"Audi","year":1970,"color":"Black","price":12000},
+        {"vin":"631f7412","brand":"Volvo","year":1992,"color":"Red","price":15500},
+        {"vin":"7d2d22b0","brand":"VW","year":1993,"color":"Maroon","price":40000},
+        {"vin":"50e900ca","brand":"Fiat","year":1964,"color":"Blue","price":25000},
+        {"vin":"4bbcd603","brand":"Renault","year":1983,"color":"Maroon","price":22000},
+        {"vin":"70214c7e","brand":"Renault","year":1961,"color":"Black","price":19000},
+        {"vin":"ec229a92","brand":"Audi","year":1984,"color":"Brown","price":36000},
+        {"vin":"1083ee40","brand":"VW","year":1984,"color":"Silver","price":215000},
+        {"vin":"6e0da3ab","brand":"Volvo","year":1987,"color":"Silver","price":32000},
+        {"vin":"5aee636b","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
+        {"vin":"7cc43997","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
+        {"vin":"88ec9f66","brand":"Honda","year":1989,"color":"Maroon","price":36000},
+        {"vin":"f5a4a5f5","brand":"BMW","year":1986,"color":"Blue","price":28000},
+        {"vin":"15b9a5c9","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
+        {"vin":"f7e18d01","brand":"Mercedes","year":1991,"color":"White","price":25000},
+        {"vin":"cec593d7","brand":"VW","year":1992,"color":"Blue","price":36000},
+        {"vin":"d5bac4f0","brand":"Renault","year":2001,"color":"Blue","price":25000},
+        {"vin":"56b527c8","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
+        {"vin":"1ac011ff","brand":"Audi","year":1966,"color":"Maroon","price":45000},
+        {"vin":"fc074185","brand":"BMW","year":1962,"color":"Blue","price":54000},
+        {"vin":"606ba663","brand":"Honda","year":1982,"color":"Blue","price":22000},
+        {"vin":"d05060b8","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
+        {"vin":"46e4bbe8","brand":"Mercedes","year":1986,"color":"White","price":18000},
+        {"vin":"c29da0d7","brand":"BMW","year":1983,"color":"Brown","price":32000},
+        {"vin":"24622f70","brand":"VW","year":1973,"color":"Maroon","price":36000},
+        {"vin":"7f573d2c","brand":"Mercedes","year":1991,"color":"Red","price":21000},
+        {"vin":"b69e6f5c","brand":"Jaguar","year":1993,"color":"Yellow","price":16000},
+        {"vin":"ead9bf1d","brand":"Fiat","year":1968,"color":"Maroon","price":43000},
+        {"vin":"bc58113e","brand":"Renault","year":1981,"color":"Silver","price":36000},
+        {"vin":"2989d5b1","brand":"Honda","year":2006,"color":"Blue","price":240000},
+        {"vin":"c243e3a0","brand":"Fiat","year":1990,"color":"Maroon","price":15000},
+        {"vin":"e3d3ebf3","brand":"Audi","year":1996,"color":"White","price":28000},
+        {"vin":"45337e7a","brand":"Mercedes","year":1982,"color":"Blue","price":14000},
+        {"vin":"36e9cf7e","brand":"Fiat","year":2000,"color":"Orange","price":26000},
+        {"vin":"036bf135","brand":"Mercedes","year":1973,"color":"Black","price":22000},
+        {"vin":"ad612e9f","brand":"Mercedes","year":1975,"color":"Red","price":45000},
+        {"vin":"97c6e1e9","brand":"Volvo","year":1967,"color":"Green","price":42000},
+        {"vin":"ae962274","brand":"Volvo","year":1982,"color":"Red","price":36000},
+        {"vin":"81f8972a","brand":"BMW","year":2007,"color":"Black","price":56000},
+        {"vin":"f8506743","brand":"Audi","year":1975,"color":"Blue","price":42000},
+        {"vin":"596859d1","brand":"Fiat","year":2002,"color":"Green","price":48000},
+        {"vin":"d83c1d9a","brand":"Volvo","year":1972,"color":"Black","price":29000},
+        {"vin":"32f41550","brand":"Mercedes","year":1978,"color":"Brown","price":17000},
+        {"vin":"c28cd2e4","brand":"Volvo","year":1982,"color":"Silver","price":24000},
+        {"vin":"80890dcc","brand":"Audi","year":1962,"color":"White","price":36000},
+        {"vin":"4bf1aeb5","brand":"VW","year":2000,"color":"Silver","price":24000},
+        {"vin":"45ca4786","brand":"BMW","year":1995,"color":"Maroon","price":50000}
+    ]
+}
\ No newline at end of file
diff --git a/public/demo/data/cars-small.json b/public/demo/data/cars-small.json
new file mode 100644
index 000000000..7a2bc59ef
--- /dev/null
+++ b/public/demo/data/cars-small.json
@@ -0,0 +1,14 @@
+{
+    "data": [
+        {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
+        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
+        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
+        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
+        {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
+        {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
+        {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
+        {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
+        {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
+        {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
+    ]
+}
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index be749747c..98b9b5c51 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -50,6 +50,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
                 <div>
+                    <router-link to="/dataview">&#9679; DataView</router-link>
                     <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
                     <router-link to="/paginator">&#9679; Paginator</router-link>
                 </div>
diff --git a/src/components/dataview/DataView.css b/src/components/dataview/DataView.css
new file mode 100644
index 000000000..c9ff59649
--- /dev/null
+++ b/src/components/dataview/DataView.css
@@ -0,0 +1,41 @@
+.p-dataview .p-paginator {
+	text-align: center;
+}
+
+.p-dataview-column {
+	padding: .25em;
+}
+
+.p-dataview-content-empty {
+	padding: .25em .625em;
+}
+
+.p-dataview .p-dataview-header,
+.p-dataview .p-dataview-footer {
+	text-align: center;
+	padding: .5em .75em;
+}
+
+.p-dataview .p-dataview-header {
+	border-bottom: 0 none;
+}
+
+.p-dataview .p-dataview-footer {
+	border-top: 0 none;
+}
+
+.p-dataview .p-paginator-top {
+	border-bottom: 0 none;
+}
+
+.p-dataview .p-paginator-bottom {
+	border-top: 0 none;
+}
+
+.p-dataview.p-dataview-list > .p-dataview-content > div.p-grid > div {
+	width: 100%;
+}
+
+.p-dataview-loading-icon {
+	font-size: 2em;
+}
\ No newline at end of file
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
new file mode 100644
index 000000000..2e2e3dbac
--- /dev/null
+++ b/src/components/dataview/DataView.vue
@@ -0,0 +1,168 @@
+<template>
+	<div :class="containerClass">
+		<div class="p-dataview-header" v-if="$scopedSlots.header">
+			<slot name="header"></slot>
+		</div>
+		<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}"></Paginator>
+		<div class="p-dataview-content">
+			<div class="p-grid">
+				<template v-for="(data,index) of (value)">
+					<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
+					<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :index="index"></slot>
+				</template>
+				<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
+			</div>
+		</div>
+		<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}"></Paginator>
+		<div class="p-dataview-footer" v-if="$scopedSlots.footer">
+			<slot name="footer"></slot>
+		</div>
+	</div>
+</template>
+<script>
+	import ObjectUtils from '../utils/ObjectUtils';
+	export default {
+		props: {
+			value: {
+				type: Array,
+				default: null
+			},
+			layout: {
+				type: String,
+				default: 'list'
+			},
+			rows: {
+				type: Number,
+				default: null
+			},
+			first: {
+				type: Number,
+				default: 0
+			},
+			totalRecords: {
+				type: Number,
+				default: null
+			},
+			paginator: {
+				type: Boolean,
+				default: false
+			},
+			paginatorPosition: {
+				type: String,
+				default: 'bottom'
+			},
+			alwaysShowPaginator: {
+				type: Boolean,
+				default: true
+			},
+			paginatorTemplate: {
+				type: String,
+				default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLinks'
+			},
+			pageLinkSize: {
+				type: Number,
+				default: 5
+			},
+			rowsPerPageOptions: {
+				type: Array,
+				default: null
+			},
+			currentPageReportTemplate: {
+				type: String,
+				default: '({currentPage} of {totalPages})'
+			},
+			emptyMessage: {
+				type: String,
+				default: 'No records found'
+			},
+			sortField: {
+				type: String,
+				default: null
+			},
+			sortOrder: {
+				type: Number,
+				default: null
+			},
+			lazy: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			sort() {
+				if (this.value) {
+					const value = [...this.value];
+
+					value.sort((data1, data2) => {
+						let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
+						let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
+						let result = null;
+
+						if (value1 == null && value2 != null)
+							result = -1;
+						else if (value1 != null && value2 == null)
+							result = 1;
+						else if (value1 == null && value2 == null)
+							result = 0;
+						else if (typeof value1 === 'string' && typeof value2 === 'string')
+							result = value1.localeCompare(value2, undefined, { numeric: true });
+						else
+							result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+
+						return (this.sortOrder * result);
+					});
+
+					return value;
+				}
+				else {
+					return null;
+				}
+			},
+			processData() {
+				let data = this.value;
+
+				if (data && data.length) {
+					if (this.sortField) {
+						data = this.sort();
+					}
+				}
+
+				return data;
+			}
+		},
+		computed: {
+			containerClass() {
+				return ['p-dataview p-component', {
+					'p-dataview-list': (this.layout === 'list'),
+					'p-dataview-grid': (this.layout === 'grid')
+				}
+				]
+			},
+			getTotalRecords() {
+				if (this.totalRecords)
+					return this.totalRecords;
+				else
+					return this.value ? this.value.length : 0;
+			},
+			isEmpty() {
+				return (!this.value || this.value.length === 0);
+			},
+			paginatorTop() {
+				if(this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
+					return true
+				}
+				else
+					return null;
+			},
+			paginatorBottom() {
+				if(this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
+					return true
+				}
+				else
+					return null;
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/components/dataview/DataViewLayoutOptions.vue b/src/components/dataview/DataViewLayoutOptions.vue
new file mode 100644
index 000000000..b486cef5b
--- /dev/null
+++ b/src/components/dataview/DataViewLayoutOptions.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="p-dataview-layout-options p-selectbutton p-buttonset">
+		<button :class="buttonListClass" @click="changeLayout($event,'list')">
+			<i class="pi pi-bars p-button-icon-left"></i>
+			<span class="p-button-text p-clickable">p-btn</span>
+		</button>
+		<button :class="buttonGridClass" @click="changeLayout($event,'grid')">
+			<i class="pi pi-th-large p-button-icon-left"></i>
+			<span class="p-button-text p-clickable">p-btn</span>
+		</button>
+	</div>
+</template>
+<script>
+	export default {
+		props: {
+			layout: {
+				type: String,
+				default: null
+			}
+		},
+		computed: {
+			buttonListClass(){
+				return [
+					'p-button p-button-icon-only',
+					{'p-highlight': this.layout === 'list'}
+				]
+			},
+			buttonGridClass(){
+				return [
+					'p-button p-button-icon-only',
+					{'p-highlight': this.layout === 'grid'}
+				]
+			}
+		},
+		methods: {
+			changeLayout(event, layoutMode){
+				this.$emit('change', {originalEvent: event, value: layoutMode});
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ce19b4443..a91d42289 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,8 @@ import Card from './components/card/Card';
 import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
+import DataView from './components/dataview/DataView';
+import DataViewLayoutOptions from './components/dataview/DataViewLayoutOptions';
 import Dialog from './components/dialog/Dialog';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
@@ -63,6 +65,8 @@ Vue.component('Card', Card);
 Vue.component('Chart', Chart);
 Vue.component('Checkbox', Checkbox);
 Vue.component('Chips', Chips);
+Vue.component('DataView', DataView);
+Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
 Vue.component('Dialog', Dialog);
 Vue.component('Dropdown', Dropdown);
 Vue.component('Editor', Editor);
diff --git a/src/router.js b/src/router.js
index cea779ab6..7ddd14a0d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -85,6 +85,11 @@ export default new Router({
         path: '/chips',
         name: 'chips',
         component: () => import('./views/chips/ChipsDemo.vue')
+    },
+	{
+		path: '/dataview',
+        name: 'dataview',
+        component: () => import('./views/dataview/DataViewDemo.vue')
     },
     {
         path: '/dialog',
diff --git a/src/service/CarService.js b/src/service/CarService.js
new file mode 100644
index 000000000..98a1dbb80
--- /dev/null
+++ b/src/service/CarService.js
@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+export default class CarService {
+
+	getCarsSmall() {
+		return axios.get('demo/data/cars-small.json').then(res => res.data.data);
+	}
+
+	getCarsMedium() {
+		return axios.get('demo/data/cars-medium.json').then(res => res.data.data);
+	}
+
+	getCarsLarge() {
+		return axios.get('demo/data/cars-large.json').then(res => res.data.data);
+	}
+}
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
new file mode 100644
index 000000000..715fa1f4a
--- /dev/null
+++ b/src/views/dataview/DataViewDemo.vue
@@ -0,0 +1,86 @@
+<template>
+	<div>
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataView</h1>
+				<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Default</h3>
+			<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
+				<template #header>
+					<div class="p-grid">
+						<div class="p-col-6" style="text-align: right"></div>
+						<div class="p-col-6" style="text-align: right">
+							<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
+						</div>
+					</div>
+				</template>
+				<template #listItem="slotProps" >
+					<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
+						<div class="p-grid">
+							<div class="p-col-12 p-md-3">
+								<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
+							</div>
+							<div class="p-col-12 p-md-8 car-data">
+								<div>Vin: <b>{{slotProps.data.vin}}</b></div>
+								<div>Year: <b>{{slotProps.data.year}}</b></div>
+								<div>Brand: <b>{{slotProps.data.brand}}</b></div>
+								<div>Color: <b>{{slotProps.data.color}}</b></div>
+							</div>
+
+							<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
+								<Button icon="pi pi-search"></Button>
+							</div>
+						</div>
+					</div>
+				</template>
+				<template #gridItem="slotProps">
+					<div style="padding: .5em" class="p-col-12 p-md-3">
+						<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
+						<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
+						<hr class="ui-widget-content" style="border-top: 0" />
+						<Button icon="pi pi-search"></Button>
+					</div>
+				</template>
+			</DataView>
+		</div>
+
+		<DataViewDoc />
+	</div>
+</template>
+
+<script>
+	import CarService from '../../service/CarService';
+	import DataViewDoc from './DataViewDoc';
+
+	export default {
+		data() {
+			return {
+				cars: null,
+				layout: 'list',
+			}
+		},
+		carService: null,
+		created() {
+			this.carService = new CarService();
+		},
+		mounted() {
+			this.carService.getCarsLarge().then(data => this.cars = data);
+		},
+		methods: {
+			changeMode(event) {
+				this.layout = event.value;
+			}
+		},
+		components: {
+			'DataViewDoc': DataViewDoc
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
new file mode 100644
index 000000000..cbe7a70ec
--- /dev/null
+++ b/src/views/dataview/DataViewDoc.vue
@@ -0,0 +1,297 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+				<CodeHighlight lang="javascript">
+import DataView from 'primevue/dataview';
+				</CodeHighlight>
+
+				<!--<h3>Getting Started</h3>
+				<p><i>first</i>, <i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
+				<CodeHighlight>
+					&lt;Paginator :first.sync="first" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
+				</CodeHighlight>
+
+				<h3>Start Offset</h3>
+				<p><i>first</i> property defines the index of the first item displayed by the paginator and should be used with the sync operator.
+					This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.</p>
+				<CodeHighlight>
+					&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
+				</CodeHighlight>
+
+				<h3>Rows Per Page</h3>
+				<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.
+					As <i>rows</i> also change when the dropdown changes, use the sync operator for two-way binding.</p>
+				<CodeHighlight>
+					&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
+				</CodeHighlight>
+
+				<h3>Template</h3>
+				<p>Paginator elements can be customized using the template property using the predefined keys, default value is
+					"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
+					can be placed inside a paginator in any order.</p>
+
+				<ul>
+					<li>FirstPageLink</li>
+					<li>PrevPageLink</li>
+					<li>PageLinks</li>
+					<li>NextPageLink</li>
+					<li>LastPageLink</li>
+					<li>RowsPerPageDropdown</li>
+					<li>CurrentPageReport</li>
+				</ul>
+
+				<CodeHighlight>
+					&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
+					template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;&lt;/Paginator&gt;
+				</CodeHighlight>
+
+				<h3>Custom Content</h3>
+				<p>There are two slots available named "left" and "right" to add custom content to these locations. Both slots get
+					a state object as a slot property to provide the current page, first index and the rows.
+				</p>
+				<CodeHighlight>
+					<template v-pre>
+						&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
+						&lt;template #left=&quot;slotProps&quot;&gt;
+						Page: {{slotProps.state.page}}
+						First: {{slotProps.state.first}}
+						Rows: {{slotProps.state.rows}}
+						&lt;/template&gt;
+						&lt;template #right&gt;
+						&lt;Button type=&quot;button&quot; icon=&quot;pi pi-search&quot; /&gt;
+						&lt;/template&gt;
+						&lt;/Paginator&gt;
+					</template>
+				</CodeHighlight>
+
+				<h3>Page Change Event</h3>
+				<p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
+				<CodeHighlight>
+					&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"  @page-change="onPage($event)"&gt;&lt;/Paginator&gt;
+				</CodeHighlight>
+
+				<CodeHighlight lang="javascript">
+					onPage(event) {
+					//event.page: New page number
+					//event.first: Index of first record
+					//event.rows: Number of rows to display in new page
+					//event.pageCount: Total number of pages
+					}
+				</CodeHighlight>
+
+				<h3>Properties</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Type</th>
+							<th>Default</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>totalRecords</td>
+							<td>number</td>
+							<td>0</td>
+							<td>Number of total records.</td>
+						</tr>
+						<tr>
+							<td>rows</td>
+							<td>number</td>
+							<td>0</td>
+							<td>Data count to display per page.</td>
+						</tr>
+						<tr>
+							<td>first</td>
+							<td>number</td>
+							<td>0</td>
+							<td>Zero-relative number of the first row to be displayed.</td>
+						</tr>
+						<tr>
+							<td>pageLinkSize</td>
+							<td>number</td>
+							<td>5</td>
+							<td>Number of page links to display.</td>
+						</tr>
+						<tr>
+							<td>rowsPerPageOptions</td>
+							<td>array</td>
+							<td>null</td>
+							<td>Array of integer values to display inside rows per page dropdown.</td>
+						</tr>
+						<tr>
+							<td>template</td>
+							<td>string</td>
+							<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
+							<td>Template of the paginator.</td>
+						</tr>
+						<tr>
+							<td>currentPageReportTemplate</td>
+							<td>string</td>
+							<td>({currentPage} of {totalPages})</td>
+							<td>Template of the current page report element.</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Events</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Parameters</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>page-change</td>
+							<td>event.page: New page number <br/>
+								event.first: Index of first record <br/>
+								event.rows: Number of rows to display in new page <br/>
+								event.pageCount: Total number of pages
+							</td>
+							<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>p-paginator</td>
+							<td>Container element.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-first</td>
+							<td>First page element.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-prev</td>
+							<td>Previous page element.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-pages</td>
+							<td>Container of page links.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-page</td>
+							<td>A page link.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-next</td>
+							<td>Next pge element.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-last</td>
+							<td>Last page element.</td>
+						</tr>
+						<tr>
+							<td>p-paginator-rpp-options</td>
+							<td>Rows per page dropdown.</td>
+						</tr>
+						</tbody>
+					</table>
+
+					<h3>Dependencies</h3>
+					<p>None.</p>
+				</div>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+				<CodeHighlight>
+					&lt;template&gt;
+					&lt;div&gt;
+					&lt;div class=&quot;content-section introduction&quot;&gt;
+					&lt;div class=&quot;feature-intro&quot;&gt;
+					&lt;h1&gt;Paginator&lt;/h1&gt;
+					&lt;p&gt;Paginator is a generic component to display content in paged format.&lt;/p&gt;
+					&lt;/div&gt;
+					&lt;/div&gt;
+
+					&lt;div class=&quot;content-section implementation&quot;&gt;
+					&lt;h3 class=&quot;first&quot;&gt;Default&lt;/h3&gt;
+					&lt;Paginator :first.sync=&quot;first&quot; :rows.sync=&quot;rows&quot; :totalRecords=&quot;totalRecords&quot; :rowsPerPageOptions=&quot;[10,20,30]&quot;&gt;&lt;/Paginator&gt;
+
+					&lt;h3&gt;Custom Template&lt;/h3&gt;
+					&lt;Paginator :first.sync=&quot;first2&quot; :rows=&quot;1&quot; :totalRecords=&quot;totalRecords2&quot; @page-change=&quot;onPageChangeCustom($event)&quot; template=&quot;FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink&quot;&gt;
+					&lt;template #left&gt;
+					&lt;Button type=&quot;button&quot; icon=&quot;pi pi-refresh&quot; @click=&quot;reset()&quot;/&gt;
+					&lt;/template&gt;
+					&lt;template #right&gt;
+					&lt;Button type=&quot;button&quot; icon=&quot;pi pi-search&quot; /&gt;
+					&lt;/template&gt;
+					&lt;/Paginator&gt;
+
+					&lt;div class=&quot;image-gallery&quot;&gt;
+					&lt;img :src=&quot;&#39;/demo/images/nature/&#39; + image + &#39;.jpg&#39;&quot; /&gt;
+					&lt;/div&gt;
+					&lt;/div&gt;
+
+					&lt;PaginatorDoc /&gt;
+					&lt;/div&gt;
+					&lt;/template&gt;
+				</CodeHighlight>
+
+				<CodeHighlight lang="javascript">
+					import PaginatorDoc from './PaginatorDoc';
+
+					export default {
+					data() {
+					return {
+					first: 0,
+					rows: 10,
+					totalRecords: 50,
+					first2: 0,
+					totalRecords2: 12,
+					image: 'nature1'
+					}
+					},
+					methods: {
+					onPageChangeCustom(event) {
+					this.image = 'nature' + (event.page + 1);
+					},
+					reset() {
+					this.first2 = 0;
+					this.image = 'nature1';
+					}
+					},
+					components: {
+					'PaginatorDoc': PaginatorDoc
+					}
+					}
+				</CodeHighlight>
+
+				<CodeHighlight lang="css">
+					.p-button.p-button-icon-only {
+					border-radius: 0;
+					}
+
+					.image-gallery {
+					text-align: center;
+					padding: 1em;
+					}
+				</CodeHighlight>-->
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file