Using jsx in el-table-column's formatter function

[youthug]

Hi there. I defined a variable: columns in column-config.js :

const columns = [
    {
        label: 'First Name',
        prop: 'firstName',
        defaultShow: true,
        minWidth: '180px',
        // TODO return el-tag
        formatter(row, column, cellValue) {
            return (
                <el-tag>{ cellValue }</el-tag>
            )
        }
    },
    {
        label: 'Last Name',
        prop: 'lastName',
        defaultShow: true,
        minWidth: '180px'
    }
]

export {
    columns
}

And use it in App.vue:

<template>
    <div id="app">
        <el-table :data="tableData">
            <!-- bind all attrs -->
            <el-table-column v-for="(col, i) in columns" :key="i" v-bind="col"/>
        </el-table>
    </div>
</template>

<script>
import { columns } from "@/config/column-config";

...

Then I got errors in console: TypeError: h is not a function

Here is my code: jsx-demo

Is there any way to return templates in .js files outside render and data function?

Thx.