Inicialmente tenemos:

-una matriz que almacena todos los nombres de las columnas de la tabla

let theadShownColumns=[col1,col2...colX]

-una matriz vacía para ser utilizada

let theadHiddenColumns=[]

los elementos de la matriz theadShownColumns se representan en la tabla thead html:

 <table class="q-table__middle"> <thead> <tr> <th> col1 </th> <th> col2 </th> . . . <th> coX </th> </tr> </thead> </table>

Objetivo: en la verificación de cambio de tamaño de la ventana

• caso 1: si el tamaño de la pantalla se vuelve más angosto, verifique si el encabezado se desborda en caso afirmativo, elimine un elemento de la matriz de la matriz de columnas mostradas de anuncios y empuje el elemento de la matriz eliminado a las columnas ocultas de anuncios (hasta que no se produzca un desbordamiento)

-caso 2: si el tamaño de la pantalla aumenta, verifique si las columnas ocultas de anuncios no están vacías y empuje los elementos de la matriz hacia las columnas mostradas (mientras no se produzca un desbordamiento)

Mi implementación:

 async isOverflownX() { let element = document.getElementById('tasks-table')?.querySelector('.q-table__middle') if (element?.scrollWidth > element?.clientWidth) { await this.theadShownColumns?.length > 0 ? this.theadHiddenColumns?.unshift(this.theadShownColumns[this.theadShownColumns.length - 1]) : '' await this.theadShownColumns?.length > 0 ? this.theadShownColumns.pop() : '' await this.isOverflownX(element) } else if ((element?.scrollWidth <= element?.clientWidth) && this.theadHiddenColumns?.length > 0) { await this.theadShownColumns?.push(this.theadHiddenColumns[this.theadHiddenColumns?.length-1]) await this.theadHiddenColumns.shift() while (element?.scrollWidth > element?.clientWidth) { await this.theadShownColumns?.length > 0 ? this.theadShownColumns.pop() : '' await this.theadShownColumns?.length > 0 ? this.theadHiddenColumns?.unshift(this.columns[this.theadShownColumns.length - 1]) : '' await this.isOverflownX(element) } setTimeout(() => { this.isOverflownX(element)}, 0) return } else { return } },

Este código está haciendo el trabajo, pero algunas veces, al cambiar el tamaño de la ventana, entra en un ciclo infinito, alguien tiene sugerencias sobre cómo se puede mejorar esto