Need support to understand how I can use selectedIds from fd-table component

[dblinov]

Hello,

I found your UI Framework very interesting!

I know that it is still under development and documentation maybe not so detailed, but I need your support to understand how to use Table component with multiple selection mode.

I don't understand how to use seletedIds property. Could you please help to get to data() selected items array? How to get not only id, but entire object?

#row="{ canSelect, selectedIds, item, toggle, selected, setSelected }"

I know how to make it via pure Vue:

... :value="item.id" v-model="selectedRows" ...

But I don't understand how selectedIds and :model-value work

Could you please provide some examples?

Thank you very much in advance!

[ChristianKienle]

I am referring to this example here:

https://sap.github.io/fundamental-vue/#/example/table/selection-modes

Code:

<template>
  <div>
    <fd-field-set>
      <fd-legend>Selection Mode</fd-legend>
      <fd-select v-model="selectionMode">
        <option value="none">None</option>
        <option value="single">Single</option>
        <option value="multiple">Multiple</option>
      </fd-select>
    </fd-field-set>

    <fd-table
      :headers="['index', 'firstName', 'lastName', 'building']"
      :selectionMode="selectionMode"
      :items="items"
    >
      <template #row="{ canSelect, selectedIds, item, toggle, selected, setSelected }">
        <fd-table-row>
          <template #index>
            <fd-table-cell>
              <fd-checkbox :disabled="!canSelect" @update="setSelected" :model-value="selected" />
            </fd-table-cell>
          </template>

          <template #firstName>
            <fd-table-cell>{{ item.firstName }}</fd-table-cell>
          </template>

          <template #lastName>
            <fd-table-cell>{{ item.lastName }}</fd-table-cell>
          </template>

          <template #building>
            <fd-table-cell>{{ item.building }}</fd-table-cell>
          </template>
        </fd-table-row>
      </template>
    </fd-table>
  </div>
</template>

<script>
export default {
  data: () => ({
    selectionMode: "single",
    items: [
      { id: "1", firstName: "Chris", lastName: "Kienle", building: "WFD02" },
      { id: "2", firstName: "Andi", lastName: "Kienle", building: "WFD03" },
      { id: "3", firstName: "Sven", lastName: "Bacia", building: "WFD02" },
      { id: "4", firstName: "Artur", lastName: "Raess", building: "WFD02" }
    ]
  })
};
</script>

I don't really understand what you are trying to do but let's assume that you want to display the selected ids somewhere:

<template>
  <div>
    <fd-field-set>
      <fd-legend>Selection Mode</fd-legend>
      <fd-select v-model="selectionMode">
        <option value="none">None</option>
        <option value="single">Single</option>
        <option value="multiple">Multiple</option>
      </fd-select>
    </fd-field-set>

    <fd-table
      :headers="['index', 'firstName', 'lastName', 'building']"
      :selectionMode="selectionMode"
      :items="items"
++ :selectedIds.sync="selectedIds"
    >
      <template #row="{ canSelect, selectedIds, item, toggle, selected, setSelected }">
        <fd-table-row>
          <template #index>
            <fd-table-cell>
              <fd-checkbox :disabled="!canSelect" @update="setSelected" :model-value="selected" />
            </fd-table-cell>
          </template>

          <template #firstName>
            <fd-table-cell>{{ item.firstName }}</fd-table-cell>
          </template>

          <template #lastName>
            <fd-table-cell>{{ item.lastName }}</fd-table-cell>
          </template>

          <template #building>
            <fd-table-cell>{{ item.building }}</fd-table-cell>
          </template>
        </fd-table-row>
      </template>
    </fd-table>
  </div>
</template>

<script>
export default {
  data: () => ({
    selectionMode: "single",
++    selectedIds: [],
    items: [
      { id: "1", firstName: "Chris", lastName: "Kienle", building: "WFD02" },
      { id: "2", firstName: "Andi", lastName: "Kienle", building: "WFD03" },
      { id: "3", firstName: "Sven", lastName: "Bacia", building: "WFD02" },
      { id: "4", firstName: "Artur", lastName: "Raess", building: "WFD02" }
    ]
  })
};
</script>

selectedIds is kept in sync by using: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Now you have the selectedIds. You should now be able to get the selected items yourself. I mean – you are the one who is providing the ids for each and every item…

[dblinov]

Thank you very much!
Sorry, but I'm a bit puzzled... How can I get easily entire selected objects to new array without filter initial array based on selectedIds?

[dblinov]

Mone more question:
In case I have an array of objects (one of properties is activity.name) where I have the following header:
:headers="[{ label: 'Name', key: 'activity.name', sortable: true, sortBy: 'activity.name' }]

I put Table Template as following:

<template #row="{ item }">
  <fd-table-row>
    <template #activity.name>
      <fd-table-cell>
        {{ item.activity.name }}
      </fd-table-cell>
    </template>
  </fd-table-row>
</template>

What is correct way to handle this data?

[ChristianKienle]

Thank you very much!
Sorry, but I'm a bit puzzled... How can I get easily entire selected objects to new array without filter initial array based on selectedIds?

You don't. You have to filter your items by using selectedIds:

{
   computed: {
      selectedItems() { return this.items.filter(({id}) => this.selectedIds.includes(id)) }
   }
}

[dblinov]

Thank you very much, Christian! I thought that it may have integrated logic in framework.

Could you please help with the question related to table columns naming?

[MisherLiu]

Dear dev team,
What if I need to select all item?
How to implement this?

Thanks a lot
BR