有没有那种前端组件或者框架可以实现table表头的拖拽功能啊？

有没有那种前端组件或者框架可以实现table表头的拖拽功能啊？
左边是表头的名字，是多选框的格式。右边是表格，通过用户勾选或者取消勾选，table自动增添和减少列。

1、拖拽功能可以看下这个
https://www.jb51.net/article/232507.htm
2、自定义表头的话，先定义一个数组，也就是左边勾选的数据，再循环el-table-column

ag-grid
https://www.ag-grid.com/javascript-data-grid/drag-and-drop/
https://demos.telerik.com/aspnet-mvc/grid/drag-drop

ant- design-vue

<template>
  <div class="home">
    <div class="left">
      <el-table
      :data="tableData"
      style="width: 100%">
        <el-table-column
          v-for="(item,k) in tableColumns"
          :key="k"
          :prop="item.label"
          :label="item.label">
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="defaultProps"
        @check="handleCheck">
      </el-tree>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      data:[{
        id: 3,
        label: 'Participant',
        children: [{
          id: 7,
          label: 'Name'
        }, {
          id: 8,
          label: 'Language'
        }, {
          id: 9,
          label: 'Country'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData:[{
        Name:"Tony",
        Language: "English",
        Country: "Ireland"
      },{
        Name:"Andy",
        Language: "French",
        Country: "France"
      }],
      tableColumns: []
    }
  },
  methods:{
    handleCheck(node,{checkedNodes}){
      this.tableColumns = checkedNodes.filter(v=>!v.children);
    }
  }
}
</script>
<style scoped>
.home{
  display:flex;
}
.home .left{
  flex: 1;
  padding: 0 20px;
}
.home .right{
  width: 180px;
  flex-shrink: 0;
}
</style>

sortablejs可以实现拖拽，参考链接：https://blog.csdn.net/weixin_41897680/article/details/121464734
核心代码

import Sortable from "sortablejs";

//列拖拽
function columnDrop(dropCol) {
  //获取dom节点
  const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    onEnd: (evt) => {
      const oldItem = dropCol[evt.oldIndex - 1];
      dropCol.splice(evt.oldIndex - 1, 1);
      dropCol.splice(evt.newIndex - 1, 0, oldItem);
    },
  });
  return dropCol;
}

export default columnDrop;

vue的element ui可以实现https://element.eleme.cn/#/zh-CN/component/table