tables in cards

src/App.vue

@@ -6,6 +6,7 @@ import axios from 'axios'
 import Button from 'primevue/button'
 import DataTable from "primevue/datatable"
 import Column from "primevue/column"
+import Card from "primevue/card"
 
 const allTables = ref()
 const activeTables = ref()
@@ -24,12 +25,27 @@ onMounted(() => {
 
 </script>
 
+<style>
+  .ActiveTables {
+    margin: 20px;
+    h2 {
+      padding-left: 15px;
+    }
+    .ATTables {
+      padding-left: 50px;
+    }
+  }
+</style>
+
 <template>
-  {{activeTables}}
-  {{allTables}}
-  <div>
 
-    <DataTable :exportable="false" :value="activeTables">
+  <Card class="ActiveTables">
+    <template #header>
+      <h2>Active Tables</h2>
+    </template>
+
+    <template #content>
+     <DataTable class="ATTables" style="" :exportable="false" :value="activeTables">
       <Column field="table_name" header="Table Name"/>
       <Column field="table_link" header="Table Link"/>
       <Column header="Close">
@@ -38,8 +54,16 @@ onMounted(() => {
         </template>
       </Column>
     </DataTable>
+    </template>
+  </Card>
 
-    <DataTable :exportable="false" :value="allTables">
+  <Card class="ActiveTables">
+    <template #header>
+      <h2>All Tables</h2>
+    </template>
+
+    <template #content>
+     <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
       <Column field="table_name" header="Table Name"/>
       <Column field="table_link" header="Table Link"/>
       <Column header="Close">
@@ -48,8 +72,8 @@ onMounted(() => {
         </template>
       </Column>
     </DataTable>
+    </template>
+  </Card>
 
-
-  </div>
 </template>