You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.0 KiB
31 lines
1.0 KiB
import { Component } from '../../lib/vues6/vues6.js'
|
|
|
|
const template = `
|
|
<div>
|
|
<h2 class="mb-4" v-if="definition.title">{{ definition.title }}</h2>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col" v-for="col of definition.columns">{{ col.name }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row, index) of definition.data">
|
|
<th scope="row">{{ index + 1 }}</th>
|
|
<td v-for="col of definition.columns">
|
|
<span v-if="col.renderer === 'boolean'">{{ col.field ? 'Yes' : 'No' }}</span>
|
|
<span v-if="col.renderer !== 'boolean'">{{ col.field in row ? row[col.field] : '-' }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`
|
|
|
|
export default class ListingComponent extends Component {
|
|
static get selector() { return 'cobalt-listing' }
|
|
static get template() { return template }
|
|
static get props() { return ['definition'] }
|
|
}
|