mannyyang
commented
2 years ago hey @lionslair, thanks for PR but the docs are pretty outdated as that was for vuetable-2. I would recommend creating your own cell and not using the pre-built ones as they may be broken. Here's an example of how a custom cell can be used seen below.
You can also view the storybook docs: https://mannyyang.github.io/vuetable-3/storybook/?path=/docs/custom-cells--cell-component
<script>
export default {
name: 'CustomCell',
components: {},
props: {
/**
* Indicate whether Field Component should render the "header" or "data"
* template section.
*/
isHeader: {
type: Boolean,
default: false
},
/**
* The title option from field definition object is passed via title prop.
* You can simply use title prop to render column title if there is no
* special need other than display the column title.
*/
title: {
type: String,
default: ''
},
rowData: {
type: Object,
default: () => null
},
rowIndex: {
type: Number,
default: -1
},
/**
* The field definition object of this field. Remember that you can use
* field definition object to hold additional data, parameters, or results.
*/
rowField: {
type: Object,
default: () => null
}
},
methods: {
/**
* The click event needs to be bound on the header to have it bubble up for
* sorting purposes.
*/
onHeaderClick(event) {
this.$emit('click', event);
this.$emit('vuetable:header-event', event);
}
}
};
</script>
<template>
<th
v-if="isHeader"
@click="onHeaderClick"
>
<div class="flex justify-start">
{{ title }}
<slot />
</div>
</th>
<td v-else>
<div class="flex">
{{ rowData[rowField.sortField] }}
</div>
</td>
</template>
I am not sure how to use this new VuetableRowHeader.vue component.
If I use a slot or a component for the field this also seems to want to use the exact same component or slot in the header. This seems to be an odd outcome and I am unable to work out how to just use the normal header element when using a special field,
There is no documentation on the site as to how to use it but it does make one reference to it will be customised.
Until there is more information around the use of a special field as the header propose just use the normal header cell element.
I do notice that the component header template was missing
How ever even with this the style is different you loose the sort component also