How to create a table with selectable rows and sort

Questions
1

Hi, I created a paged table into a my custom plugin. This table has a lots of rows and then pages. I wish to select sparse rows and then I’ve to do some operations on them.

I use U13 LTS.

How to?

Thanks.

2

How are you currently rendering your table (Angular, perhaps)?

As a side note, not sure if you have seen this site https://uui.umbraco.com/

3

Hey Biagio! Since , the cleanest approach is to use the built-in UUI library (uui.umbraco.com) as @EssCee mentioned +1 which ships with v13 no extra dependencies needed.

An example/

Use <uui-table-row selectable> for your rows it gives you checkboxes out of the box. But since your table is paged, the important thing is to never rely on DOM state for selections. When the page changes, those rows get re-rendered and you’ll lose track.

Instead, maintain a Set of selected IDs in your component:

js

selectedIds = new Set();

handleRowClick(e, id) {
  const isSelected = e.target.selected; // read the confirmed .selected property
  isSelected
    ? this.selectedIds.add(id)
    : this.selectedIds.delete(id);
  this.requestUpdate(); // if using Lit
}

Then when rendering each page, just check against that Set:

js

<uui-table-row
  selectable
  ?selected=${this.selectedIds.has(item.id)}
  @click=${e => this.handleRowClick(e, item.id)}>

This way selections persist across page changes since they live in memory, not the DOM.

For bulk operations, just iterate selectedIds when the user triggers an action — you’ll have all the IDs regardless of which page they were on.

For sorting, add click handlers to <uui-table-head-cell>, track sortBy + sortDir in state, and either pass those as query params to your API or sort locally before rendering the current page.

4

Thank you very much!

Il try.

Is the ID the row key?

How to lock the row so another Backoffice user cannot select it?

5

Yes it’s whatever unique identifier your data model has (a GUID or integer). As long as it’s stable and unique per row, it works perfectly as the key for your Set. If your rows come from Umbraco content, the node Id are both good choices.

i THINK Umbraco v13 doesn’t have built-in row-locking, so you’d need to roll your own.

for the row rendering, building on the earlier example:

<uui-table-row
  selectable
  ?selected=${this.selectedIds.has(item.id)}
  @click=${e => this.handleRowClick(e, item.id)}>

Inside handleRowClick, check if the row is locked by another user and bail out early if so don’t rely solely on a visual disabled state.

best,

Bishal

6

To check if locked by another user, I think that I’ve to create a shared data structure server side and not client side.

7

ah well , there u go! :slight_smile: