Nuxt•3mo ago

Nuxt UI Table Expand - Programmatic/API Access

I'm using the table expandable feature - https://ui.nuxt.com/components/table#expandable But I need a way to close this when something happens, i.e. the table results change, etc.. I'm not seeing a way to access this though, is it possible with the current implementation?

Nuxt UI

Table - Nuxt UI

Display data in a table.

2 Replies

Dunowen•3mo ago

You could do something like this:

<UTable :rows="people" ref="my-table">
            <template #expand="{ row }">
                <div class="p-4">
                    <pre>{{ row }}</pre>
                </div>
            </template>
      </UTable>

<UTable :rows="people" ref="my-table">
            <template #expand="{ row }">
                <div class="p-4">
                    <pre>{{ row }}</pre>
                </div>
            </template>
      </UTable>

Script:

    const input = useTemplateRef("my-table");
    input.value?.toggleOpened(2);

    const input = useTemplateRef("my-table");
    input.value?.toggleOpened(2);

I'm not sure if this is the intended way to use the toggleOpened(index) function though, I've just looked into the source code of the Table component and that's what I found.

PatrityOP•3mo ago

Is it meant to be called on the table component or the template for the expansion? Also would there be any way to individually access each instance? Either way - thank you so much for taking the time to dig into this. Oh I overlooked where you called the index, my apologies Outstanding. You rock. Hopefully they choose to expose this more natively in the future.

Gaming

Programming

Nuxt UI Table Expand - Programmatic/API Access