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="station.blurHash"
						:src="station.favicon" />
					<span :class="{ 'icon-starred': favorites.flat().includes(station.stationuuid) }" />
				</td>
				<td class="nameColumn" @click="doPlay(idx, station)">
					<span class="innernametext">
						{{ station.name }}
					</span>
				</td>
				<td class="actionColumn">
					<Actions>
						<ActionButton
							v-if="!favorites.flat().includes(station.stationuuid)"
							icon="icon-star"
							:close-after-click="true"
							@click="doFavor(idx, station)">
							{{ t('radio', 'Add to favorites') }}
						</ActionButton>
						<ActionButton
							v-if="favorites.flat().includes(station.stationuuid)"
							icon="icon-star"
							:close-after-click="true"
							@click="doFavor(idx, station)">
							{{ t('radio', 'Remove from favorites') }}
						</ActionButton>
						<ActionButton
							icon="icon-info"
							:close-after-click="true"
							@click="toggleSidebar(station)">
							{{ 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: {
		favorites: {
			type: Array,
			default() { return [] },
		},
		stationData: {
			type: Array,
			default() { return [] },
		},
	},
	data: () => ({
		activeItem: null,
	}),
	methods: {
		doPlay(idx, station) {
			this.activeItem = idx
			this.$emit('doPlay', station)
		},
		doFavor(idx, station) {
			this.$emit('doFavor', station)
		},
		toggleSidebar(station) {
			this.$emit('toggleSidebar', station)
		},
	},
}
</script>

<style lang="scss">

/* Workaround wrong positioning
   actions popover menu
	  https://github.com/nextcloud/nextcloud-vue/issues/1384 */
body {
	min-height: 100%;
	height: auto;
}

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

	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);
			transition: opacity 500ms ease 0s;

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

		}

		tr td * {
			cursor: pointer;
		}

		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;
		}

		.icon-starred {
			background-image: var(--icon-star-dark-fc0);
			background-size: 16px 16px;
			background-repeat: no-repeat;
			background-position: center;
			min-width: 16px;
			min-height: 16px;
			right: -7px;
			top: -38px;
			margin-bottom: -38px;
			float: right;
			position: relative;
			pointer-events: none;
		}

	}

}

</style>