feat(Table): expand row

[EvertonWingert]

🔗 Linked issue

The linked issue is about nested tables, but I think this would also solve.

Resolves #746

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is my interpretation of #746

Implementation of a table that can be expanded.
Mainly used to show more details of a table row or related content.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Jan 25, 2024 10:30am

[DarkGhostHunter]

I second to this. I had to fallback to a Modal to show expanded info.

I also think I should be animated. Can Accordion be re-used?

[EvertonWingert]

I tried to implement it with animation, but I didn't get any good results

[richard-edwards]

Would love to see this soon :)

[shoaibsharif]

Any update on this?

[hoanghadu]

I would love to see this feature released

[zangetsu02]

any news about this?

[patrykskrzyniarz]

any progress?

[patrykskrzyniarz]

Suggested change

	</tr>
	</tr>
	<slot :name="after-row" :row="row" :index="index" is-opened="openedRows.includes(index)" />

or so, to add some more flexibility
for example: dynamically loaded content that renders subsequent table rows while maintaining the width of the original table's columns

currently we have only 'expand' slot which is content of single cell with 100% table width + don't have access to style that tr + td element

[husayt]

@benjamincanac would be great to have this merged. This feature is so missing in NuxtUi tables at the moment. PR has been here for some time. At least, feedback would be appreciated. Thank you

[benjamincanac]

I'm so sorry for the delay! I've made a few changes to make the button configurable and to animate the icon 😊

[AnthonyCVP]

This is great! Thanks!

[rmbakker88]

Great feature! However,

Not sure if I should post this here or as a separate bug, but if a table is set as expandable, and the table is empty at the same time, the emptyState will not take up the full width. See screenshot.

      <UTable
        :rows="selectedOrders"
        :columns="selectedOrdersColumns"
        class="w-full"
      >
        <template #id-data="{ row }">
          <span>{{ truncateUUID(row.id) }}</span>
        </template>
        <template #product-data="{ row }">
          <span>{{ row.product }}</span>
        </template>
        <template #expand="{ row }">
          <div class="p-4">
            <ul>
              <li>Bestelnummer: {{ row.id }}</li>
              <li>Aangemaakt op: {{ row.created_at }} door {{ row.created_by_full_name }}</li>
            </ul>
          </div>
        </template>
      </UTable>

simply removing the expand slot immediately solves it. any ui directives or making a custom empty state slot can not fix it.

[sandros94]

@rmbakker88 could I ask you to open up a new issue with a reproduction link?

[kpouters]

Expanding a row by clicking on it is currently not possible. That feature is definitely needed.
Please make the openedRows value accessible externally.