diff --git a/src/components/ui/VnTable.vue b/src/components/ui/VnTable.vue
index 4f1a9ae0b..90e7e615e 100644
--- a/src/components/ui/VnTable.vue
+++ b/src/components/ui/VnTable.vue
@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
 const $props = defineProps({
     columns: { type: Object, require: true, default: null },
     rows: { type: Object, require: true, default: null },
+    hasSummary: { type: Boolean, require: true, default: false },
+    summary: { type: Object, require: true, default: null },
 });
 const { t } = useI18n();
 </script>
@@ -16,8 +18,12 @@ const { t } = useI18n();
                 </QTh>
             </QTr>
         </template>
-        <template #bottom-row>
-            <slot name="bottom-row"></slot>
+        <template #bottom-row v-if="hasSummary">
+            <QTr class="bg">
+                <QTd v-for="col in $props.columns" :key="col.name" :props="props">{{
+                    $props.summary[col.name]
+                }}</QTd>
+            </QTr>
         </template>
     </QTable>
 </template>