N
Nuxt•2mo ago
PETCH

Table

anyone have example about Table in nuxt ui v3 i confuse about columns resizing i try it but don't work or will have this future soon
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @PETCH. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't a built-in column resizing feature specifically mentioned for the Nuxt UI Table component. The documentation shows various features like sorting, filtering, and customizing columns, but doesn't explicitly mention column resizing capabilities. However, I found a relevant Stack Overflow post that might help with your use case. The post discusses a function to adjust table column widths in Nuxt: 
const adjustTableColumnWidths = () => {
    const tables = document.querySelectorAll('.prose table');

    tables.forEach((table) => {
        const totalWidth = table.offsetWidth;
        const firstColWidth = totalWidth / 3; // Width of first column
        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 => {
            // Adjust first column
            const firstCell = row.cells[0];
            if (firstCell) {
                firstCell.style.width = `${firstColWidth}px`;
            }

            // Adjust other columns
            for (let i = 1; i < row.cells.length; i++) {
                const cell = row.cells[i];
                cell.style.width = `${otherColWidth}px`;
            }
        });
    });
};
const adjustTableColumnWidths = () => {
    const tables = document.querySelectorAll('.prose table');

    tables.forEach((table) => {
        const totalWidth = table.offsetWidth;
        const firstColWidth = totalWidth / 3; // Width of first column
        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 => {
            // Adjust first column
            const firstCell = row.cells[0];
            if (firstCell) {
                firstCell.style.width = `${firstColWidth}px`;
            }

            // Adjust other columns
            for (let i = 1; i < row.cells.length; i++) {
                const cell = row.cells[i];
                cell.style.width = `${otherColWidth}px`;
            }
        });
    });
};
To ensure this function runs after DOM is loaded and during page navigation, you can use Nuxt hooks: 
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event
nuxtApp.hook('page:finish', adjustTableColumnWidths);

// After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', adjustTableColumnWidths);
const nuxtApp = useNuxtApp();

// Called on Suspense resolved event
nuxtApp.hook('page:finish', adjustTableColumnWidths);

// After page transition onAfterLeave event
nuxtApp.hook('page:transition:finish', adjustTableColumnWidths);
You can also call this function in the onMounted lifecycle hook: 
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);
});
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);
});
For more information about available hooks, you can check Nuxt hooks documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1210521560234987577> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?