Show total and filtered number of items in a table

 -The total number of items and the filtered items will be shown in the
   EventLogs, Sensors and HardwareStatus table.

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I0ee6410bf675038a350a71a02ec076f9e8baf004

1 files changed, 35 insertions, 0 deletions

diff --git a/src/components/Global/TableCellCount.vue b/src/components/Global/TableCellCount.vue
new file mode 100644
index 00000000..4f44ec29
--- /dev/null
+++ b/src/components/Global/TableCellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="mt-2 d-flex flex-column justify-content-end">
+    <p v-if="!filterActive">
+      {{ $t('global.table.items', { count: totalNumberOfCells }) }}
+    </p>
+    <p v-else>
+      {{
+        $t('global.table.selectedItems', {
+          count: totalNumberOfCells,
+          filterCount: filteredItemsCount
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    filteredItemsCount: {
+      type: Number,
+      required: true
+    },
+    totalNumberOfCells: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    filterActive() {
+      return this.filteredItemsCount !== this.totalNumberOfCells;
+    }
+  }
+};
+</script>