Merge pull request #35 from webdevnerdstuff/dev

Dev

Author: webdevnerdstuff

src/documentation/components/examples/ClientTable.vue

@@ -90,6 +90,7 @@ const props = defineProps({
 
 
 const classes = inject('classes');
+const colorsProp = ref(props.colors);
 const tableSettings = ref({ ...props.settings, ...props.colors });
 
 const headers = {
@@ -110,8 +111,9 @@ const headers = {
 		{
 			align: 'start',
 			key: 'id',
+			sortable: false,
 			title: 'Comment ID',
-			width: 150,
+			width: 130,
 		},
 		{
 			align: 'start',
@@ -135,7 +137,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 260,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -148,20 +150,30 @@ const headers = {
 		},
 	],
 	users: [
+		// {
+		// 	key: 'data-table-select',
+		// 	title: '',
+		// },
 		{
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 370,
+			width: 350,
 		},
 		{
 			align: 'start',
 			key: 'name',
+			renderer(value) {
+				return value;
+			},
 			title: 'Name',
 		},
 		{
 			align: 'start',
 			key: 'email',
+			renderItem(value) {
+				return `<a href="mailto:${value}">${value}</a>`;
+			},
 			title: 'Email',
 		},
 		{
@@ -225,18 +237,22 @@ const footers = {
 		},
 	],
 	users: [
+		// {
+		// 	key: 'data-table-select',
+		// 	title: '',
+		// },
 		{
 			align: 'start',
 			key: 'id',
+			renderFooter() {
+				return '&nbsp;';
+			},
 			title: 'User ID',
 			width: 350,
 		},
 		{
 			align: 'start',
 			key: 'name',
-			renderer() {
-				return 'Total';
-			},
 			title: 'Name',
 		},
 		{
@@ -287,7 +303,7 @@ function fetchClientData(drilldown = null) {
 		user.child = {};
 		user.child = {
 			...tableDefaults,
-			colors: null,
+			...colorsProp.value,
 			drilldownKey: 'id',
 			footers: footers.posts,
 			headers: headers.posts,
@@ -297,6 +313,7 @@ function fetchClientData(drilldown = null) {
 		};
 	}
 
+
 	// Comments Level 3 //
 	if (drilldown?.level === 2) {
 		userId = item.userId;
@@ -314,11 +331,11 @@ function fetchClientData(drilldown = null) {
 		post.child = {};
 		post.child = {
 			...tableDefaults,
-			colors: null,
+			...colorsProp.value,
 			drilldownKey: 'id',
 			footers: footers.comments,
 			headers: headers.comments,
-			itemsPerPage: 2,
+			itemsPerPage: tableSettings.value.itemsPerPage,
 			level: 3,
 			loading: true,
 			sortBy: [],

src/documentation/components/examples/ServerTable.vue

@@ -110,8 +110,9 @@ const headers = {
 		{
 			align: 'start',
 			key: 'id',
+			sortable: false,
 			title: 'Comment ID',
-			width: 150,
+			width: 130,
 		},
 		{
 			align: 'start',
@@ -135,7 +136,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 260,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -156,16 +157,22 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 370,
+			width: 350,
 		},
 		{
 			align: 'start',
 			key: 'name',
+			renderer(value) {
+				return value;
+			},
 			title: 'Name',
 		},
 		{
 			align: 'start',
 			key: 'email',
+			renderItem(value) {
+				return `<a href="mailto:${value}">${value}</a>`;
+			},
 			title: 'Email',
 		},
 		{
@@ -236,15 +243,15 @@ const footers = {
 		{
 			align: 'start',
 			key: 'id',
+			renderFooter() {
+				return '&nbsp;';
+			},
 			title: 'User ID',
 			width: 350,
 		},
 		{
 			align: 'start',
 			key: 'name',
-			renderer() {
-				return 'Total';
-			},
 			title: 'Name',
 		},
 		{
@@ -338,6 +345,7 @@ function getUserPosts(drilldown = null, updateCurrentLevel = false) {
 			itemsPerPage: drilldown?.itemsPerPage ?? 0,
 			level: 2,
 			loading: true,
+			server: true,
 			sortBy: [],
 		},
 	});
@@ -397,6 +405,7 @@ function getPostComments(drilldown = null, updateCurrentLevel = false) {
 			itemsPerPage: drilldown?.itemsPerPage ?? 0,
 			level: 3,
 			loading: true,
+			server: true,
 			sortBy: [],
 		},
 	});

src/documentation/sections/ExampleSection.vue

@@ -24,6 +24,7 @@
 
 
 		<ClientTable
+			:colors="{ colors: null }"
 			:settings="tableSettings"
 			title="Client Side Data Table"
 		/>

src/documentation/sections/PropsSection.vue

@@ -124,7 +124,7 @@ const classes = inject('classes');
 const codeBlockSettings = computed(() => props.codeBlockOptions);
 const propsStore = usePropsStore();
 const store = useCoreStore();
-const tableSettings = ref({ ...tableDefaults });
+
 
 const colorsProp = {
 	colors: {
@@ -158,6 +158,8 @@ const colorsProp = {
 	}
 };
 
+const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
+
 const colorsPropCode = `colors: {
   body: {
     base: '--v-theme-surface',

src/playground/configs/templates/ClientTable.vue

@@ -242,8 +242,9 @@ const headers = {
 		{
 			align: 'start',
 			key: 'id',
+			sortable: false,
 			title: 'Comment ID',
-			width: 150,
+			width: 130,
 		},
 		{
 			align: 'start',
@@ -267,7 +268,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'Post ID',
-			width: 260,
+			width: 240,
 		},
 		{
 			align: 'start',
@@ -288,7 +289,7 @@ const headers = {
 			align: 'start',
 			key: 'id',
 			title: 'User ID',
-			width: 370,
+			width: 350,
 		},
 		{
 			align: 'start',