Ok, after a few hours of brainstorming I found pretty nice solution. I'm putting it here for others - I hope this helps somebody.
Value displayed in custom column can be:
simple string (prop)
formatted string (safe, without any html or components, via original formatter)
customized value (html, component, also safe!)
In order to achieve this, I had to create custom formatter components, which I put in folder i.e. /TableFormatters/
For this purpose, there is simple functional component DatetimeFormatter that display date-time with icon.
TableFormatters/DatetimeFormatter.vue
{{ props.row[props.column] }}
export default {
name: 'DatetimeFormatter',
}
Here come's columns configuration:
import DatetimeFormatter from './TableFormatters/DatetimeFormatter'
// ...
data() {
return {
data: [/*...*/],
columns: [
name: {
label: 'Name',
},
state: {
label: 'State',
formatter: row => {
return 'State: '+row.state__label
}
},
created_at: {
label: 'Created at',
formatter: DatetimeFormatter
}
]
}
}
Now it's time to define :
v-for="(column, index) in columns"
:key="index"
:label="columns[column] ? columns[column].label : column"
:prop="column"
:formatter="typeof columns[column].formatter === 'function' ? columns[column].formatter : null">
:is="columns[column].formatter"
:row="row"
:column="column">
{{ row[column] }}
This works like a charm. What's going on here with formatter?
First we check if the formatter is set as a function. If so, the native formatter takes the control, because will not be created. Otherwise formatter component will be created (via :is attribute). However, it there is no formatter, the plain value for a row will be shown.