Update playground

Author: webdevnerdstuff

src/playground/configs/playground.ts

@@ -11,9 +11,7 @@ import { createVDrilldownTable } from '../../plugin/index';
 makeServer({ environment: 'playground' });
 
 const app = createApp(PlaygroundApp);
-app.use(createVDrilldownTable({
-
-}));
+app.use(createVDrilldownTable());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);

src/playground/configs/templates/ClientTable.vue

@@ -48,7 +48,6 @@
 			:search="tableSettings.search"
 			:search-container-cols="tableSettings.searchContainerCols"
 			:search-debounce="tableSettings.searchDebounce"
-			:search-events="tableSettings.searchEvents"
 			:search-max-wait="tableSettings.searchMaxWait"
 			:search-props="tableSettings.searchProps"
 			:select-strategy="tableSettings.selectStrategy"

src/playground/configs/templates/PlaygroundPage.vue

@@ -77,6 +77,7 @@ const defaultColorsExample = ref({
 });
 
 provide('defaultColors', defaultColors);
+provide('selectedColor', selectedColor);
 provide('density', density);
 
 function updateColor(val) {

src/playground/configs/templates/ServerTable.vue

@@ -16,8 +16,10 @@
 			:elevation="tableSettings.elevation"
 			:expand-on-click="tableSettings.expandOnClick"
 			:first-icon="tableSettings.firstIcon"
+			:fixed-header="tableSettings.fixedHeader"
 			:footers="footers.users"
 			:headers="headers.users"
+			:height="tableSettings.height"
 			:hover="tableSettings.hover"
 			:item-children-key="tableSettings.itemChildrenKey"
 			:item-props="tableSettings.itemProps"
@@ -120,7 +122,7 @@
 
 			<!-- <template #[`header.data-table-select`]>
 				<div class="d-flex justify-center">
-					<v-icon>mdi mdi-vuetify</v-icon>
+					<v-icon icon="$vuetify"></v-icon>
 				</div>
 			</template> -->
 
@@ -164,7 +166,7 @@
 			</template> -->
 
 			<!-- <template #[`item.data-table-select`]>
-				<v-icon>mdi mdi-vuetify</v-icon>
+				<v-icon icon="$vuetify"></v-icon>
 			</template> -->
 
 			<!-- <template #[`item.data-table-expand`]>
@@ -216,7 +218,6 @@ const props = defineProps({
 });
 
 const selected = ref([]);
-
 const classes = inject('classes');
 const defaultColors = inject('defaultColors');
 const density = inject('density');

src/playground/configs/templates/tableDefaults.ts

@@ -105,23 +105,6 @@ export default {
 		xxl: 2,
 	},
 	searchDebounce: 0,
-	searchEvents: {
-		// 'input': (e: InputEvent) => {
-		// 	console.log('input event triggered', e);
-		// },
-		// 'click': (e: MouseEvent) => {
-		// 	console.log('click event triggered', e);
-		// },
-		// 'click:control': (e: MouseEvent) => {
-		// 	console.log('click:control event triggered', e);
-		// },
-		// 'mousedown:control': (e: MouseEvent) => {
-		// 	console.log('mousedown:control event triggered', e);
-		// },
-		// 'update:modelValue': (val: string) => {
-		// 	console.log('update:modelValue event triggered', val);
-		// },
-	},
 	searchMaxWait: 1000,
 	searchProps: {
 		clearable: true,
@@ -136,7 +119,7 @@ export default {
 	showCurrentPage: false,
 	showDrilldownWhenLoading: true,
 	showExpand: false,
-	showFooterRow: false,
+	showFooterRow: true,
 	showSearch: true,
 	showSelect: true,
 	sortAscIcon: '$sortAsc',