Placeholders for new features

src/router.js

@@ -141,6 +141,26 @@ export default new Router({
 			name: 'datatableselection',
 			component: () => import('./views/datatable/DataTableSelectionDemo.vue')
         },
+        {
+			path: '/datatable/coltoggle',
+			name: 'datatablecoltoggle',
+			component: () => import('./views/datatable/DataTableColToggleDemo.vue')
+        },
+        {
+			path: '/datatable/responsive',
+			name: 'datatableresponsive',
+			component: () => import('./views/datatable/DataTableResponsiveDemo.vue')
+        },
+        {
+			path: '/datatable/export',
+			name: 'datatableexport',
+			component: () => import('./views/datatable/DataTableExportDemo.vue')
+        },
+        {
+			path: '/datatable/crud',
+			name: 'datatablecrud',
+			component: () => import('./views/datatable/DataTableCrudDemo.vue')
+		},
 		{
 			path: '/dataview',
 			name: 'dataview',

src/views/datatable/DataTableColToggleDemo.vue

@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Column Toggle</h1>
+				<p>MultiSelect component can be used to implement column toggle functionality.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Basic</h3>
+			<DataTable :value="cars">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>

src/views/datatable/DataTableCrudDemo.vue

@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Crud</h1>
+				<p>This samples demonstrates a CRUD implementation using various PrimeReact components.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Basic</h3>
+			<DataTable :value="cars">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>

src/views/datatable/DataTableExportDemo.vue

@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Export</h1>
+				<p>DataTable can export its data to CSV format..</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Basic</h3>
+			<DataTable :value="cars">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>

src/views/datatable/DataTableResponsiveDemo.vue

@@ -0,0 +1,45 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+        
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Responsive</h1>
+				<p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Basic</h3>
+			<DataTable :value="cars">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>

src/views/datatable/DataTableSubMenu.vue

@@ -8,6 +8,10 @@
             <li><router-link to="/datatable/filter">&#9679; Filter</router-link></li>
             <li><router-link to="/datatable/selection">&#9679; Selection</router-link></li>
             <li><router-link to="/datatable/lazy">&#9679; Lazy</router-link></li>
+            <li><router-link to="/datatable/coltoggle">&#9679; ColToggle</router-link></li>
+            <li><router-link to="/datatable/responsive">&#9679; Responsive</router-link></li>
+            <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
+            <li><router-link to="/datatable/crud">&#9679; Crud</router-link></li>
         </ul>
     </div>    
 </template>