diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index d37b0ac5c..736e41078 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -281,7 +281,7 @@ const classes = {
     thead: 'p-datatable-thead',
     // headercell
     headerCell: ({ instance, props, column }) =>
-        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
+        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
             ? [
                   'p-filter-column',
                   {
diff --git a/doc/card/BasicDoc.vue b/doc/card/BasicDoc.vue
index a47632890..0124b3de4 100644
--- a/doc/card/BasicDoc.vue
+++ b/doc/card/BasicDoc.vue
@@ -1,72 +1,79 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
-    </DocSectionText>
-    <div class="card">
-        <Card>
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
-            </template>
-        </Card>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<Card>
-    <template #title> Simple Card </template>
-    <template #content>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-            quas!
-        </p>
-    </template>
-</Card>`,
-                options: `
 <template>
     <div class="card">
-        <Card>
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
+        <DataTable filterDisplay="row" :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex align-items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <template #groupheader="slotProps">
+                <div class="flex align-items-center gap-2">
+                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
+                    <span>{{ slotProps.data.representative.name }}</span>
+                </div>
             </template>
-        </Card>
-    </div>
-</template>
-
-<script>
-<\/script>`,
-                composition: `
-<template>
-    <div class="card">
-        <Card>
-            <template #title> Simple Card </template>
-            <template #content>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
-                    quas!
-                </p>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-content-end font-bold w-full">
+                    Total Customers:
+                    {{ calculateCustomerTotal(slotProps.data.representative.name) }}
+                </div>
             </template>
-        </Card>
+        </DataTable>
     </div>
 </template>
 
 <script setup>
-<\/script>`
+import { CustomerService } from '@/service/CustomerService';
+import { onMounted, ref } from 'vue';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+
+    if (customers.value) {
+        for (let customer of customers.value) {
+            if (customer.representative.name === name) {
+                total++;
             }
-        };
+        }
+    }
+
+    return total;
+};
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warning';
+
+        case 'renewal':
+            return null;
     }
 };
 </script>