Welcome to quasar-qhierarchy Discussions!

[pratik227]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[tecnoactiva-it]

Hi Pattrik is ther any way to add footer slot to q-hierarchy?

[pratik227]

https://next-quasar-qhierarchy.netlify.app/example-qhierarchy-footer-slot-demo

Just Added Footer Slot.

It's available in new Version.

[tecnoactiva-it]

Great Patik new upgrades are taking it to another level.
I would like to suggest another add to it.
Can the nodes use a diferent class according to their deep? for example defining an array of classes like ['bg-deep-purple-10','bg-deep-purple-9','bg-deep-purple-5'] and relating classes element to deep level , node level 0 would be class="classes[level]" , or as the quasar color pallet is numbered from 1 to 14 (for example indigo-14 for the main class so next deeper node change to indigo-13 and and so forth substracting
some thig like "'indigo-' + 14-level"). It would be easer to read data.

[pratik227]

You can achieve this same using body slot.

<q-hierarchy dense :columns="columns" :data="data" @sort_column="test($event)" :classes="classes" :dark="dark"
                 :expand_on_row_click="true">
      <template v-slot:body="props">
        <td data-th="Name" :class="color_dict[props.item.level]">
          <div v-bind:style="props.setPadding(props.item)"
               :class="props.iconName(props.item)!='done'?'q-pl-lg':''">
            <q-btn @click="props.toggle(props.item)" v-if="props.iconName(props.item)!='done'"
                   :icon="props.iconName(props.item)" flat
                   dense>
            </q-btn>
            <span class="q-ml-sm">{{ props.item.label }}</span>
          </div>
        </td>
        <td class="text-center" :class="color_dict[props.item.level]">
          {{ props.item.description }}
          <q-popup-edit v-model="props.item.description" v-slot="scope">
            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"/>
          </q-popup-edit>
        </td>
        <td class="text-left" :class="color_dict[props.item.level]">
          <q-chip color="lime-9" v-if="props.item.note" square size="sm" class="text-white">
            {{ props.item.note }}

            <q-popup-edit v-model="props.item.note" v-slot="scope">
              <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"/>
            </q-popup-edit>
          </q-chip>
        </td>
      </template>

      <template v-slot:header="props">
        <th v-for="col in props.columns" @click="col.sortable?props.sortBy(col):null" :class="'text-'+col.align">
          {{ col.label }}
          <q-icon v-if="col.sorted" :name="col.sortDirection=='asc'?'arrow_upward':'arrow_downward'"></q-icon>
        </th>
      </template>
    </q-hierarchy>

<script>
import {defineComponent, ref} from 'vue'

const columns = [
  {
    name: 'label',
    label: 'Label',
    align: 'left',
    field: 'label',
    // (optional) tell QHierarchy you want this column sortable
    sortable: true
  },
  {
    name: 'Description',
    label: 'Description',
    sortable: true,
    field: 'description',
    align: 'center'
  },
  {
    name: 'note',
    label: 'Note',
    sortable: true,
    field: 'note',
    align: 'left'
  }
];
const data = ref([
  {
    label: "Node 1",
    description: "Node 1 description",
    note: "Node 1 note",
    // id: 1,
    children: [
      {
        label: "Node 1.1",
        description: "Node 1.1 description",
        note: "Node 1.1 note",
        // id: 2
      },
      {
        label: "Node 1.2",
        description: "Node 1.2 description",
        note: "Node 1.2 note",
        // id: 3,
        children: [
          {
            label: "Node 1.2.1",
            description: "Node 1.2.1 description",
            note: "Node 1.2.1 note",
            // id: 4
          },
          {
            label: "Node 1.2.2",
            description: "Node 1.2.2 description",
            note: "Node 1.2.2 note",
            // id: 5
          }
        ],
      }
    ],
  },
  {
    label: "Node 2",
    description: "Node 2 description",
    note: "Node 2 note",
    // id: 6,
    children: [
      {
        label: "Node 2.1",
        description: "Node 2.1 description",
        note: "Node 2.1 note",
        // id: 7,
        children: [
          {
            label: "Node 2.1.1",
            description: "Node 2.1.1 description",
            note: "Node 2.1.1 note",
            // id: 8
          },
          {
            label: "Node 2.1.2",
            description: "Node 2.1.2 description",
            note: "Node 2.1.2 note",
            // id: 9
          }
        ],
      },
      {
        label: "Node 2.2",
        description: "Node 2.2 description",
        note: "Node 2.2 note",
        // id: 10
      }
    ],
  }
]);
export default defineComponent({
  name: "Test6",
  setup() {
    return {
      columns,
      data,
      classes: ref('bg-deep-purple-10'),
      dense: ref(false),
      dark: ref(true),
      color_dict:{
        0: 'bg-red',
        1: 'bg-light-green-7',
        2: 'bg-cyan-13',
      }
    }
  },
})
</script>

[tecnoactiva-it]

Beatiful!!! Thanks a lot.

[pratik227]

🚀 🚀

JFI, It's better if you open new discussion for new issue next time.

Don't forget to check out my sponsorship page any support will be appreciated !!

Sponsor❤️ ❤️

Thanks,
Pratik Patel

[Erinov]

Hello. Does this component have lazy loading?

[pratik227]

No it doesn't support lazy loading