Vue element-ui table columns draggable

Question

I'm using that for table now, but the header of the table is able to drag for now. How can I drag the table's columns?

<el-table
ref="tableRef"
class="table-responsive table-flush"
:data=tableData"
row-key="id"
header-row-class-name="thead"
@sort-change="sortChange"

<el-table-column label="Address" min-width="200px" prop="address">
    <template #default="{ row }">
          <span>{{ row.address }}</span>
    </template>
</el-table-column>

<el-table-column label="Amount" min-width="150px" prop="commitment">
    <template #default="{ row }">
        <span>{{ row.amount }} {{ shortCurrency }}</span>
    </template>
</el-table-column>

<el-table-column
    label="Claimable"
    min-width="130px"
    prop="total"
    >
    <template #default="{ row }">
        <span>
            {{ row.amount / currentPrice }}
        </span>
    </template>

</el-table-column>

</el-table>

    mounted() {
        this.initializeTable()
    },
    
    method: {
    initializeTable() {
        const theadColumn = this.$refs.tableRef.$el.querySelector(
        '.el-table__header-wrapper .el-table__header thead tr'
        )
    Sortable.create(theadColumn, {
        draggable: 'th',
        onEnd: this.dragReorderColumn,
    })
    },
}

I'm using vue element-ui. I want to make to move that header and body of table in same time when I drag the table's header. Is it possible?