Dynamic reordering of v-data-table columns

[jason44107]

Hello. I'm using v-data-table and want to support dynamic reordering of the columns. I'm not asking for drag-and-drop of the headers (though I'll take it if I can get it) -- I can develop my own UI to allow users to move columns left or right. But this is a multi-user application, and that reordering will be specific to the user, so it'll need to be dynamic when the table is displayed.

Reordering the headers in the Typescript code is easy enough. The tricky part is reordering the <td> elements in the HTML. Is there anything that works kind of like v-if but for ordering instead of adding/removing? The table has too many columns to implement this practically using v-if alone.

[jason44107]

I figured this out. v-for through the headers, and using item[value] to get the column value.

<table-row :props="props">
  <table-cell v-for="headr in headers" :key="headr.value">
    <template v-if="headr.value === 'someParticularColumn'">{{ props.item.specialProcessingHere }}</template>
    <template v-else>{{ props.item[headr.value] }}</template>
  </table-cell>
</table-row>