use new table

resources/js/views/dashboard/MediaList.vue

@@ -1,8 +1,8 @@
 <template>
-    <SMPage permission="admin/media">
-        <template #container>
-            <h1>Media</h1>
-
+    <SMMastHead
+        title="Media"
+        :back-link="{ name: 'dashboard' }"
+        back-title="Return to Dashboard" />
     <SMMessage
         v-if="formMessage.message"
         :type="formMessage.type"
@@ -25,6 +25,13 @@
         </template>
     </SMToolbar>
 
+    <SMTable :headers="headers" :items="items" @row-click="handleRowClick">
+        <template #item-size="item">
+            {{ bytesReadable(item.size) }}
+        </template>
+        <template #item-actions="item">THE ACTIONS</template>
+    </SMTable>
+
     <!-- @click-row="handleClickRow" -->
     <EasyDataTable
         v-model:server-options="serverOptions"
@@ -47,12 +54,11 @@
                         download: 'Download',
                         delete: 'Delete',
                     }"
+                    size="medium"
                     @click="handleClick(item, $event)"></SMButton>
             </div>
         </template>
     </EasyDataTable>
-        </template>
-    </SMPage>
 </template>
 
 <script setup lang="ts">
@@ -74,6 +80,8 @@ import { bytesReadable } from "../../helpers/types";
 import { useUserStore } from "../../store/UserStore";
 import { useToastStore } from "../../store/ToastStore";
 import SMInput from "../../depreciated/SMInput-old.vue";
+import SMMastHead from "../../components/SMMastHead.vue";
+import SMTable from "../../components/SMTable.vue";
 
 const router = useRouter();
 const search = ref("");
@@ -106,6 +114,10 @@ const serverOptions = ref({
     sortType: null,
 });
 
+const handleRowClick = (item) => {
+    alert(JSON.stringify(item));
+};
+
 const handleClick = (item, extra: string): void => {
     if (extra.length == 0) {
         handleEdit(item);