I created a function that adjusts the size of columns in a table.
When I navigate between pages, it doesn’t launch.
If I refresh the page, thanks to SSR, they execute correctly (because the dom is entirely constructed before the javascript is executed).
This is not the case for navigation between pages.
<script setup>
// Function to adjust column widths
const adjustTableColumnWidths = () => {
const tables = document.querySelectorAll('.prose table');
tables.forEach((table) => {
const totalWidth = table.offsetWidth;
const firstColWidth = totalWidth / 3; // Largeur de la première colonne
const otherColWidth = (totalWidth - firstColWidth) / (table.rows[0].cells.length - 1); // Width of other columns
// Go through all table rows to fit columns
Array.from(table.rows).forEach(row => {
// Ajuster la première colonne
const firstCell = row.cells[0];
if (firstCell) {
firstCell.style.width = `${firstColWidth}px`;
}
// Adjust the other columns
for (let i = 1; i < row.cells.length; i++) {
const cell = row.cells[i];
cell.style.width = `${otherColWidth}px`;
}
});
});
};
// Call the function after the content is loaded and rendered
onMounted(async () => {
await nextTick(); // Wait for the next 'tick' for the DOM rendering to complete
adjustTableColumnWidths();
// Add an event handler for window resizing
window.addEventListener('resize', adjustTableColumnWidths);
});
// Clean event listener when unmounting component
onUnmounted(() => {
window.removeEventListener('resize', adjustTableColumnWidths);
});
</script>