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

<template>
	<table id="table">
		<thead>
			<tr>
				<th />
				<th class="nameColumn">
					Name
				</th>
				<th />
			</tr>
		</thead>
		<tbody v-if="stationData">
			<tr v-for="(station, idx) in stationData" :key="idx">
				<td @click="doPlay">
					<div class="stationIcon"
						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
				</td>
				<td class="filenameColumn" @click="doPlay(station)">
					<span class="innernametext">
						{{ station.name }}
					</span>
				</td>
				<td class="actionColumn">
					<Actions>
						<ActionButton icon="icon-star" :close-after-click="true">
							Add to favorites
						</ActionButton>
						<ActionButton icon="icon-info" :close-after-click="true">
							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 [] },
		},
	},
	methods: {
		doPlay(station) {
			this.$emit('doPlay', station)
		},
	},
}
</script>

<style lang="scss">

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

	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.nameColumn {
			width: 100%;
		}

	}

	tbody {

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

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

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

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

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

		.stationIcon {
			width: 32px;
			height: 32px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}

		.actionColumn {
			width: auto;
			padding-right: 40px;
		}

		.filenameColumn {
			width: 100%;
		}

	}

}

</style>