nextcloud-app-radio/src/components/Table.vue

<template>
	<table v-if="stationData" id="table">
		<thead>
			<tr>
				<th class="iconColumn" />
				<th class="nameColumn">
					{{ t('radio', 'Name') }}
				</th>
				<th class="actionColumn" />
			</tr>
		</thead>
		<tbody>
			<tr
				v-for="(station, idx) in stationData"
				:key="idx"
				:class="{ selected: idx === activeItem}">
				<td @click="doPlay(idx, station)">
					<blur-hash-image
						class="stationIcon"
						width="32"
						height="32"
						hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
						:src="station.favicon">
						<span :class="{ 'icon-starred': stationsFavored.includes(idx) }" />
					</blur-hash-image>
				</td>
				<td class="nameColumn" @click="doPlay(idx, station)">
					<span class="innernametext">
						{{ station.name }}
					</span>
				</td>
				<td class="actionColumn">
					<Actions>
						<ActionButton icon="icon-star" :close-after-click="true" @click="doFavor(idx, station)">
							{{ t('radio', 'Add to favorites') }}
						</ActionButton>
						<ActionButton icon="icon-info" :close-after-click="true">
							{{ t('radio', 'Details') }}
						</ActionButton>
					</Actions>
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'

export default {
	name: 'Table',
	components: {
		Actions,
		ActionButton,
	},
	props: {
		stationData: {
			type: Array,
			default() { return [] },
		},
	},
	data: () => ({
		activeItem: null,
		stationsFavored: [1, 2],
	}),
	methods: {
		doPlay(idx, station) {
			this.activeItem = idx
			this.$emit('doPlay', station)
		},
		doFavor(idx, station) {
			this.$emit('doFavor', station)
		},
	},
}
</script>

<style lang="scss">

table {
	width: 100%;
	min-width: 250px;
	table-layout:fixed;

	thead {
		background-color: var(--color-main-background-translucent);
		z-index: 60;
		position: sticky;
		position: -webkit-sticky;
		top: 99px;

		th {
			border-bottom: 1px solid var(--color-border);
			padding: 15px;
			height: 50px;
		}

		th, th a {
			color: var(--color-text-maxcontrast);
		}

		th.iconColumn {
			padding: 0px;
			width: 72px;
		}

		th.nameColumn {
			width: 100%;
		}

		th.actionColumn {
			width: 72px;
		}

	}

	tbody {

		td {
			padding: 0 15px;
			font-style: normal;
			background-position: 8px center;
			background-repeat: no-repeat;
			border-bottom: 1px solid var(--color-border);
			cursor: pointer;
		}

		tr {
			height: 51px;
			background-color: var(--color-background-light);

			tr:hover, tr:focus, tr.mouseOver td {
				background-color: var(--color-background-hover);
			}

		}

		tr.selected {
			background-color: var(--color-primary-light);
		}

		tr td:first-child {
			padding-left: 40px;
			width: 32px;
			padding-right: 0px;
		}

		td.nameColumn .innernametext {
			color: var(--color-main-text);
			text-overflow: ellipsis;
			overflow: hidden;
			position: relative;
			vertical-align: top;
			user-select: none;
			cursor: pointer;
		}

		.stationIcon {
			cursor: pointer;
		}

		.icon-starred {
			background-image: var(--icon-star-dark-fc0);
			vertical-align: middle;
			background-size: 16px 16px;
			display: inline-block;
			background-repeat: no-repeat;
			background-position: center;
			min-width: 16px;
			min-height: 16px;
			cursor: pointer;
			pointer-events: none;
			right: -7px;
			top: -7px;
			float: right;
			position: relative;
		}

	}

}

</style>