dttbl.vue

<template>
	<div>

		<sui-grid v-if="filter">
			<sui-grid-column>
				<input-plus placeholder="Search..." icon="search" v-model="query" />
			</sui-grid-column>
		</sui-grid>

		<sui-table>

			<sui-table-header>
				<sui-table-row>
					<sui-table-header-cell
						v-for="(field, _index) in fields"
						:collapsing="true"
						:key="_index">{{ field.colName | trans }}

						<SortArrow v-if="sortable && field.key" 
							:current="isCurrentSorting(field.key)" 
							:name="field.key"
							:direction="getArrowDirection(field)" 
							@changed="setOrderBy"
						></SortArrow>

					</sui-table-header-cell>
				</sui-table-row>
			</sui-table-header>

			<sui-table-body>
				<sui-table-row v-for="(feedRow, _rowIndex) in projectData" :key="_rowIndex">
					<sui-table-cell v-for="(field, _index) in fields" :key="_index">
						<DataCellView :data="getCellData(feedRow, field.path)" :meta="field.meta" />
					</sui-table-cell>
				</sui-table-row>
			</sui-table-body>

		</sui-table>

	</div>

</template>


<script>
	import SortArrow from './SortArrow'
	import InputPlus from './InputPlus'
	import DataCellView from './DataCellView'
	import _get from 'lodash/get'
	import _orderBy from 'lodash/orderBy'

	export default {
		name: 'DataTable',
		props: {
			data: {
				type: Array,
				required: true,
				default: null
			},
			fields: {
				type: Array,
				default: () => ['name']
			},
			filter: {
				type: Boolean,
				default: false
			},
			sortable: {
				type: Boolean,
				default: false,
			},
			orderBy: {
				type: Object,
				default: () => ({name: 'name', direction: 'ASC'})				
			},
			celled: Boolean, 
			selectable: Boolean,
			striped: Boolean,
		},
		components: {
			InputPlus,
			SortArrow,
			DataCellView
		},
		data() {
			return {
				query: '',
				localOrderBy: null
			}
		},

		created() {
			this.setOrderBy();
		},

		computed: {
			projectData() {
				const {name, direction} = this.localOrderBy;
				let list = this.data.slice();
				let fields = this.fields.filter(field => field.key)

				if (this.query && fields) {
					const query = this.query.toLowerCase();

					list = list.filter(row => fields.some(field =>
							String(this.getCellText(row, field)).toLowerCase().indexOf(query) !== -1
						)
					)
				}

				return _orderBy(list, [name], [direction.toLowerCase()])
			},

		},
		methods: {
			getCellData(row = {}, path = '') {
				return path ? _get(row, path) : row;
			},
			getCellText(row = {}, field) {
				if (!field || !field.key) { 
					return ''; 
				}
				const cellData = this.getCellData(row, field.path);
				
				return _get(cellData, field.key, '');
			},
			setOrderBy(val = this.orderBy) {
				this.localOrderBy = {...val};
				// console.log(' * setOrderBy ', this.localOrderBy);
			},
			isCurrentSorting(name) {
				return _get(this.localOrderBy, 'name') === name;
			},
			getArrowDirection(name) {
				return this.isCurrentSorting(name) ? _get(this.localOrderBy, 'direction', '') : '';
			}
		}
	};
</script>

<style scoped>
	.ui.celled.table tr td,
	.ui.celled.table tr td pre
	{
		word-break: break-word;
		white-space: unset;
	}
</style>