Add item-append slot to v-table (#406)

src/components/v-table/table-header/table-header.vue

@@ -37,6 +37,7 @@
 			</th>
 
 			<th class="spacer cell" scope="col" />
+			<th v-if="hasItemAppendSlot" class="spacer cell" scope="col" />
 		</tr>
 	</thead>
 </template>
@@ -85,6 +86,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		hasItemAppendSlot: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const dragging = ref<boolean>(false);

src/components/v-table/table-row/table-row.vue

@@ -25,6 +25,9 @@
 		</td>
 
 		<td class="spacer cell" />
+		<td v-if="$scopedSlots['item-append']" class="append cell">
+			<slot name="item-append" />
+		</td>
 	</tr>
 </template>
 
@@ -139,5 +142,10 @@ export default defineComponent({
 			}
 		}
 	}
+
+	.append {
+		display: flex;
+		align-items: center;
+	}
 }
 </style>

src/components/v-table/v-table.story.ts

@@ -1060,3 +1060,52 @@ export const rowHeight = () => ({
 	</div>
 	`,
 });
+
+export const itemAppendSlot = () => ({
+	data() {
+		return {
+			headers: [
+				{
+					text: 'Name',
+					value: 'name',
+				},
+				{
+					text: 'Phone',
+					value: 'tel',
+				},
+			],
+			items: [
+				{
+					name: 'Amsterdam',
+					tel: '(020) 333-0987',
+				},
+				{
+					name: 'Beverly Hills',
+					tel: '(123) 333-0987',
+				},
+				{
+					name: 'New Haven',
+					tel: '(203) 687-9900',
+				},
+				{
+					name: 'Hong Kong',
+					tel: '(430) 709-4011',
+				},
+				{
+					name: 'Ahmedabad',
+					tel: '(330) 777-3240',
+				},
+			],
+		};
+	},
+	template: `
+	<v-table
+		:headers="headers"
+		:items="items"
+	>
+		<template #item-append="{ item }">
+			<v-button small>{{ item.name }}</v-button>
+		</template>
+	</v-table>
+	`,
+});

src/components/v-table/v-table.vue

@@ -16,6 +16,7 @@
 				:fixed="fixedHeader"
 				:show-manual-sort="showManualSort"
 				:must-sort="mustSort"
+				:has-item-append-slot="hasItemAppendSlot"
 				@toggle-select-all="onToggleSelectAll"
 			>
 				<template v-for="header in _headers" #[`header.${header.value}`]>
@@ -58,6 +59,10 @@
 					<template v-for="header in _headers" #[`item.${header.value}`]>
 						<slot :item="item" :name="`item.${header.value}`" />
 					</template>
+
+					<template v-if="hasItemAppendSlot" #item-append>
+						<slot name="item-append" :item="item" />
+					</template>
 				</table-row>
 			</draggable>
 		</table>
@@ -150,7 +155,7 @@ export default defineComponent({
 			default: 48,
 		},
 	},
-	setup(props, { emit, listeners }) {
+	setup(props, { emit, listeners, slots }) {
 		const _headers = computed({
 			get: () => {
 				return props.headers
@@ -203,10 +208,14 @@ export default defineComponent({
 			},
 		});
 
+		const hasItemAppendSlot = computed(() => slots['item-append'] !== undefined);
+
 		const loadingColSpan = computed<string>(() => {
 			let length = _headers.value.length + 1; // +1 account for spacer
-			if (props.showSelect) length = length + 1;
-			if (props.showManualSort) length = length + 1;
+			if (props.showSelect) length++;
+			if (props.showManualSort) length++;
+			if (hasItemAppendSlot.value) length++;
+
 			return `1 / span ${length}`;
 		});
 
@@ -248,6 +257,9 @@ export default defineComponent({
 			if (props.showManualSort) gridTemplateColumns = 'auto ' + gridTemplateColumns;
 
 			gridTemplateColumns = gridTemplateColumns + ' 1fr';
+
+			if (hasItemAppendSlot.value) gridTemplateColumns += ' auto';
+
 			return gridTemplateColumns;
 		});
 
@@ -264,6 +276,7 @@ export default defineComponent({
 			hasRowClick,
 			loadingColSpan,
 			columnStyle,
+			hasItemAppendSlot,
 		};
 
 		function onItemSelected(event: ItemSelectEvent) {