QTable: simplify usage of bottom slot

[downace]

Currently we can't use this slot without overriding default pagination controls, so we have to implement them ourselves.
There is two years old open issue with same problem (#7208).

Suggested solutions:

• Add new slots, bottom-left (works with hide-selected-banner, or just overrides this banner unconditionally), bottom-right (overrides pagination and per-page options) and maybe bottom-middle (empty by default).
  This will allow us to add some content to the bottom slot while keeping default table controls (pagination, selected rows label).

• Extract pagination and per-page options into separate components (like QTr, QTd and QTh).
  This will allow us to fully customize bottom slot with ease (e.g. move pagination to the left), something like this:

  <QTable ...>
    <template #bottom={ pagination, perPageOptions }>
      ...
      <QTablePagination v-bind="pagination" />
      ...
      <QTablePerPageOptions v-bind="perPageOptions" />
      ...
    </template>
  </QTable>

[sullyD64]

I too am finding myself in need of bottom-left / bottom-right slots for the QTable. Are there any plans on supporting them?

[cohlar]

Sharing a little workaround I made using Teleport and JS MutationObserver. I haven't tested it extensively, it's probably a little shaky but so far it seems to be working for me.

<template>
  <QTable :id="`table-${props.tableId}`" v-bind="$attrs" />
  <Teleport v-if="shouldInjectBottomLeft" :to="`#bottom-left-${props.tableId}`">
    <div>Inject your content here</div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{ tableId: string }>();

const shouldInjectBottomLeft = ref(false);

const injectBottomLeft = (parentNode: Element) => {
  parentNode.innerHTML = `<div id="bottom-left-${props.tableId}"></div>${parentNode.innerHTML}`;
  shouldInjectBottomLeft.value = true;
};

onMounted(() => {
  const bottomNode = document.querySelector(`#table-${props.tableId} .q-table__bottom`);
  if (!bottomNode) return;
  if (document.querySelector(`#table-${props.tableId} .q-table__bottom > .q-table__separator`)) {
    injectBottomLeft(bottomNode);
    return;
  }
  const observer = new MutationObserver((mutationList, observer) => {
    const addedNodes = mutationList.flatMap((mutation) => Array.from(mutation.addedNodes)) as Element[];
    if (!addedNodes.some((node) => node.id === `bottom-left-${props.tableId}`) && addedNodes.some((node) => node.classList.contains('q-table__separator'))) {
      observer.disconnect();
      injectBottomLeft(bottomNode);
    }
  });
  observer.observe(bottomNode, { childList: true });
});
</script>

I guess the Teleport could wrap a bottom-left slot to give flexibility on the injected content - I haven't tried it though (I don't need it in my use case).