vectore datatable and few modifications

src/components/CodeSnippet.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="code-snippet-container">
+    <div class="button-container h-8 w-8 p-0 inline-flex items-center justify-center">
+      <!-- Button to copy code to clipboard -->
+      <Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
+    </div>
+    <!-- Code display area with syntax highlighting -->
+    <pre v-html="highlightedCode"></pre>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript'; // Import necessary languages
+import 'prismjs/components/prism-systemd'; // Import necessary languages
+import 'prismjs/themes/prism-tomorrow.css'; // Import a theme for syntax highlighting
+
+const toast = useToast();
+
+// Define the code snippet as a prop
+const props = defineProps({
+  code: {
+    type: String,
+    required: true
+  },
+  language: {
+    type: String,
+    default: 'systemd'
+  }
+});
+
+const highlightedCode = computed(() => {
+  return Prism.highlight(props.code, Prism.languages[props.language], props.language);
+});
+
+// Function to copy the code to the clipboard
+function copyToClipboard() {
+  navigator.clipboard.writeText(props.code).then(() => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Code copied to clipboard!', life: 10000 });
+  }).catch((error) => {
+    console.error('Failed to copy code:', error);
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to copy code.', life: 10000 });
+  });
+}
+</script>
+
+<style scoped>
+.code-snippet-container {
+  position: relative;
+  /* Enable positioning of child elements */
+}
+
+.class="button-container" {
+  position: sticky;
+  top: 10px;
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
+  z-index: 1000;
+}
+
+pre {
+  background-color: #2d2d2d;
+  color: #ccc;
+  padding: 1em;
+  border-radius: 5px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.button-container {
+  position: absolute;
+  top: 10px;
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
+}
+
+.p-mt-2 {
+  margin-top: 1em;
+}
+</style>