feat(table): allow selecting rows

[brc-dd]

API:

const data = shallowRef([...])
const selected = ref<string[]>([])

const table = useTable({
  // ...
  actions: computed(() => [
    {
      label: 'Delete selected',
      onClick: deleteSelected,
      labelMode: 'danger',
      show: selected.value.length > 0
    }
  ]),
  indexField: 'name'
})

function deleteSelected() {
  data.value = data.value.filter((i) => !selected.value.includes(i.name)) // dummy, delete from db or something
  selected.value = [] // clear selected after deletion
}

---

<STable :options="table" v-model:selected="selected" />

TODO:

• reset story before merging

---

Preview permalink: https://650952c866a4ec00081d0374--sefirot-story.netlify.app/story/stories-components-stable-01-playground-story-vue?variantId=_default

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	45086cd
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/650a7ad7b6bd98000858f511
😎 Deploy Preview	https://deploy-preview-344--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	45086cd
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/650a7ad7e9ea7b00083b20e1
😎 Deploy Preview	https://deploy-preview-344--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Patch coverage: 82.48% and project coverage change: -0.16% ⚠️

Comparison is base (f912564) 84.99% compared to head (45086cd) 84.84%.
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #344      +/-   ##
==========================================
- Coverage   84.99%   84.84%   -0.16%     
==========================================
  Files         139      142       +3     
  Lines       11192    11374     +182     
  Branches      640      515     -125     
==========================================
+ Hits         9513     9650     +137     
- Misses       1679     1724      +45     

Files Changed	Coverage Δ
lib/components/STableCell.vue	58.04% <16.66%> (-1.82%)	⬇️
lib/components/STable.vue	78.51% <70.00%> (-3.00%)	⬇️
lib/components/STableHeader.vue	92.63% <82.92%> (-4.34%)	⬇️
lib/components/SButton.vue	100.00% <100.00%> (ø)
lib/components/SButtonGroup.vue	100.00% <100.00%> (ø)
lib/components/SDropdownSectionFilter.vue	91.84% <100.00%> (-0.04%)	⬇️
lib/components/STableCellCustom.vue	100.00% <100.00%> (ø)
lib/components/STableColumn.vue	76.44% <100.00%> (+0.08%)	⬆️
lib/components/STableFooter.vue	100.00% <100.00%> (ø)
lib/components/STableHeaderActionItem.vue	100.00% <100.00%> (ø)
... and 5 more

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kiaking]

Made few comments, but overall, I love it! very simple to use with good API 🎉

[kiaking]

@brc-dd I've adjusted the style of the actions.

I wanted to make it look like this.

So I also made "Reset filters" a button look as well. Then I realized now we don't need divider since button acts like it 👀

So, I divided stats and actions array.

Also changed the text of total records. Removed records word when selected in not empty to reduce the overall text size.

Could you double check if I didn't break anything 🙏

The functionality is working really smooth!

[brc-dd]

Working fine for me 🙌

[brc-dd]

Should we deprecate the hasFilters + onReset? 👀 Like ignore that when actions is specified, so any new code should just pass that directly as action instead of passing through all those components? Might seem repetitive though, but would be more consistent.

[kiaking]

Should we deprecate the hasFilters + onReset? 👀 Like ignore that when actions is specified, so any new code should just pass that directly as action instead of passing through all those components? Might seem repetitive though, but would be more consistent.

Ah, Good point! You're right now we don't need it 👀 Let's mark it as deprecated 👍 Maybe adding comments to Table composable...?

[kiaking]

We would have isDirty check anyway on the user land in order to actually reset the condition, so, I don't think it would add that much of extra work even we disabled reset option 👍

[brc-dd]

note regarding the border fixes - https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/ (we have a border radius on .box and then we have nested border radius inside header/body/footer)

however, in our case due to 1px border width, it doesn't affect that much and one won't see the gap without zooming.

also, now everything respects that border-radius variable:

Before:

After:

PS: in button group, :slotted wasn't working for some reason, so fixed that too here instead of creating a separate pr:

[kiaking]

Ah, thanks!