build

frontend/src/components/DataTable.vue

@@ -0,0 +1,43 @@
+<template lang="">
+	<div id="paging-controls">
+		<p>Show rows:</p>
+		<button class="page-num-button">25</button>
+		<button class="page-num-button">50</button>
+		<button class="page-num-button">100</button>
+		<button class="page-turn-button">Prev</button>
+		<button class="page-turn-button">Next</button>
+	</div>
+	<div ref="dataTableContainer"></div>
+</template>
+<script setup>
+import { defineProps, ref, onMounted } from "vue";
+const dataTableContainer = ref(null);
+const props = defineProps({
+	columns: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Array,
+		required: true,
+	},
+});
+
+onMounted(() => {
+	console.log(dataTableContainer);
+	if (!dataTableContainer.value) {
+		console.error("Datatable container not found!");
+		return;
+	}
+
+	const columnsList = props.columns.map((col) => col.label);
+	const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
+
+	// Pass the actual DOM element
+	new frappe.DataTable(dataTableContainer.value, {
+		columns: columnsList,
+		data: dataList,
+	});
+});
+</script>
+<style lang=""></style>