Using Table DOM Nodes

It can be helpful to access the inner elements of the <Table /> and <MiniTable /> components (e.g. accessing the height of the <thead>). However, as these components act as a sort of blackbox around their internal HTML elements, we need to use the ref key to access them.

TIP

You can learn more about using the ref key on child components here.

WARNING

The table, head, and body elements provided by the ref are inaccessible until the component has been mounted. As such, they can only be used inside Vue's onMounted hook, be it in a composable or setup function.

vue

<script setup>
import { Table, createClasses, createColumn, createConfig } from '@screaming/tables'
import data from '~/assets/data.json'

const classes = createClasses( ... )
const columns = [ ... ]
const config = createConfig({ ... })

// populated with { table: ..., head: ..., body: ... } on mount
const tableElements = ref(null)

onMounted(() => {
  // the <thead> DOM node
  // NOTE: you must use `.value` to access the contents of tableElements as
  //       it is a ref
  const tableHead = tableElements.value.head
})
</script>

<template>
  <Table
    ref="tableElements"
    :data="data"
    :classes="classes"
    :columns="columns"
    :config="config"
    init-key="..."
  />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Using Table DOM Nodes #

Using Table DOM Nodes