Initiated new Table demo

src/components/datatable/DataTable.vue

@@ -499,7 +499,7 @@ export default {
             data.sort((data1, data2) => {
                 let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
                 let value2 = ObjectUtils.resolveFieldData(data2, this.d_sortField);
-                
+
                 let result = null;
 
                 if (value1 == null && value2 != null)

src/service/CustomerService.js

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+export default class CarService {
+
+	getCustomers() {
+		return axios.get('demo/data/customers.json').then(res => res.data.data);
+	}
+}

src/views/datatable/DataTableDemo.vue

@@ -12,69 +12,82 @@
 		<div class="content-section implementation">
             <div class="p-card">
                 <div class="p-card-body" style="padding:0">
-                    <DataTable :value="cars" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single"
+                    <DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10" 
-                        dataKey="vin" :paginator="true" :rows="10" :filters="filters">
+                        dataKey="id" :rowHover="true" :selection.sync="selectedCustomers"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]">
                         <template #header>
-                            List of Cars
+                            List of Customers
                             <div class="p-datatable-globalfilter-container">
                                 <InputText v-model="filters['global']" placeholder="Global Search" />
                             </div>
                         </template>
-                        <Column field="vin" header="Vin" :sortable="true">
+                        <Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
-                            <template #body="slotProps">
+                        <Column field="name" header="Name" :sortable="true">
-                                <span class="p-column-title">Vin</span>
-                                {{slotProps.data.vin}}
-                            </template>
                             <template #filter>
-                                <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
+                                <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
                             </template>
                         </Column>
-                        <Column field="year" header="Year" :sortable="true" filterMatchMode="contains">
+                        <Column field="country" header="Country" :sortable="true" sortField="country.name">
                             <template #body="slotProps">
-                                <span class="p-column-title">Year</span>
+                                <span class="p-column-title">Country</span>
-                                {{slotProps.data.year}}
+                                <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code"  />
+                                <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.country.name}}</span>
                             </template>
                             <template #filter>
-                                <InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
+                                <InputText type="text" v-model="filters['country']" class="p-column-filter" filterMatchMode="contains" placeholder="Search by country"/>
                             </template>
                         </Column>
-                        <Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals">
+                        <Column field="representative" header="Representative" :sortable="true" sortField="representative.name" filterMatchMode="in">
                             <template #body="slotProps">
-                                <span class="p-column-title">Brand</span>
+                                <span class="p-column-title">Representative</span>
-                                <img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/>
+                                <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
-                                <span style="vertical-align:middle">{{slotProps.data.brand}}</span>
+                                <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.representative.name}}</span>
                             </template>
-                            <template #filter>
+                             <template #filter>
-                                <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                                <MultiSelect v-model="filters['representative']" :options="representatives" optionLabel="name" placeholder="All" class="p-column-filter">
-                                    <template #option="brandSlotProps">
+                                    <template #option="slotProps">
-                                        <div class="p-clearfix p-dropdown-car-option">
+                                        <div class="p-multiselect-representative-option">
-                                            <img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" />
+                                            <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
-                                            <span>{{brandSlotProps.option.brand}}</span>
+                                            <span style="vertical-align: middle; margin-left: .5em">{{slotProps.option.name}}</span>
                                         </div>
                                     </template>
+                                </MultiSelect>
+                            </template>
+                        </Column>
+                        <Column field="date" header="Date" :sortable="true">
+                            <template #filter>
+                                <Calendar v-model="filters['date']" class="p-column-filter" filterMatchMode="equals" placeholder="Member since"/>
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
+                            <template #body="slotProps">
+                                <span class="p-column-title">Status</span>
+                                <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                            </template>
+                            <template #filter>
+                                <Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
+                                    <template #option="slotProps">
+                                        <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
+                                    </template>
                                 </Dropdown>
                             </template>
                         </Column>
-                        <Column field="color" header="Color" :sortable="true" filterMatchMode="in">
+                        <Column field="activity" header="Activity" :sortable="true">
                             <template #body="slotProps">
-                                <span class="p-column-title">Color</span>
+                                <span class="p-column-title">Activity</span>
-                                {{slotProps.data.color}}
+                                <ProgressBar :value="slotProps.data.activity" :showValue="false" />
                             </template>
                             <template #filter>
-                                <MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" />
+                                <InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/>
                             </template>
                         </Column>
-                        <Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center">
+                        <Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible">
-                            <template #body="slotProps">
-                                <span class="p-column-title">Color</span>
-                                {{slotProps.data.color}}
-                            </template>
                             <template #header>
-                                <Button type="button" icon="pi pi-cog"></Button>
+                                <span class="p-column-title">Options</span>
+                                <Button type="button" icon="pi pi-cog" class="p-column-filter p-button-secondary" style="width:auto"></Button>
                             </template>
                             <template #body>
-                                <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
+                                <Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
-                                <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
                             </template>
                         </Column>
                     </DataTable>
@@ -87,46 +100,47 @@
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
 import DataTableSubMenu from './DataTableSubMenu';
 import DataTableDoc from './DataTableDoc';
+import '../../assets/styles/flags.css';
 
 export default {
     data() {
         return {
-            cars: null,
+            customers: null,
-            selectedCar: null,
+            selectedCustomers: null,
             filters: {},
-            brands: [
+            representatives: [
-                {brand: 'Audi', value: 'Audi'},
+                {name: "Amy Elsner", image: 'amyelsner.png'},
-                {brand: 'BMW', value: 'BMW'},
+                {name: "Anna Fali", image: 'annafali.png'},
-                {brand: 'Fiat', value: 'Fiat'},
+                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
-                {brand: 'Honda', value: 'Honda'},
+                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
-                {brand: 'Jaguar', value: 'Jaguar'},
+                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
-                {brand: 'Mercedes', value: 'Mercedes'},
+                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
-                {brand: 'Renault', value: 'Renault'},
+                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
-                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {name: "Onyama Limba", image: 'onyamalimba.png'},
-                {brand: 'Volvo', value: 'Volvo'}
+                {name: "Stephen Shaw", image: 'stephenshaw.png'},
+                {name: "XuXue Feng", image: 'xuxuefeng.png'}
             ],
-            colors: [
+            statuses: [
-                {name: 'White', value: 'White'},
+                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
-                {name: 'Green', value: 'Green'},
-                {name: 'Silver', value: 'Silver'},
-                {name: 'Black', value: 'Black'},
-                {name: 'Red', value: 'Red'},
-                {name: 'Maroon', value: 'Maroon'},
-                {name: 'Brown', value: 'Brown'},
-                {name: 'Orange', value: 'Orange'},
-                {name: 'Blue', value: 'Blue'}
             ]
         }
     },
-    carService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
-        this.carService.getCarsLarge().then(data => this.cars = data);
+        this.customerService.getCustomers().then(data => this.customers = data);
+    },
+    methods: {
+        toggle(event, menu) {
+            menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
     },
     components: {
         'DataTableDoc': DataTableDoc,
@@ -136,6 +150,78 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5em;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
+    }
+}
+
+.p-multiselect-representative-option {
+    display: inline-block;
+    vertical-align: middle;
+
+    img {
+        vertical-align: middle;
+        width: 24px;
+    }
+
+    span {
+        margin-top: .125em;
+    }
+}
+
+/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;
+    }
+}
+
 .p-column-filter {
     margin-top: 1em;
 }
@@ -163,7 +249,15 @@ export default {
     }
 }
 
-/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;
@@ -181,12 +275,9 @@ export default {
         text-align: left;
     }
 
-    .p-column-title {
-        font-size: 16px;
-    }
-
     .p-datatable-tbody > tr > td {
         border: 0 none;
+        cursor: auto;
     }
 }
 </style>