Vue Data Grid Headless Table

The Data Grid is a thin, styled layer over a headless table engine. When the built-in chrome isn’t enough, turn it off and drive the grid from your own UI through the exposed table — the same instance the grid renders from, available on the component’s template ref.

<script setup>
import { ref } from 'vue'
import { CDataGrid } from '@coreui/vue-data-grid'

const grid = ref(null)

const jumpToPage = () => {
  // Drive state imperatively through the underlying table instance:
  grid.value?.table.setPageIndex(3)
  grid.value?.table.getFilteredRowModel()
  grid.value?.table.setColumnPinning({ left: ['name'] })
  grid.value?.table.store.state.sorting
}
</script>

<template>
  <CDataGrid ref="grid" :columns="columns" :items="items" />
</template>

When to reach for it

• Custom chrome. Build your own toolbar, pager or column chooser and wire it to grid.value?.table.*. The slots receive the same table as slot props — prefer slots when you only need to replace one module.
• Reading state. table.store.state exposes sorting, filters, selection, pagination, pinning, order and visibility as structured state.
• Imperative actions. Set the page, toggle a column, change pinning or apply a filter without waiting for user interaction.

Rows and cells in the DOM

Every data cell carries its column key in data-coreui-column, and with itemKey set every data row carries its id in data-coreui-row-id, so closest('[data-coreui-row-id]') in your own handlers and selectors in tests reach a row without the grid. getRowElement(id) and getCellElement(id, columnId) on the template ref return the rendered row and cell of this grid, never of a grid nested in one of its cells. They return null when the row is not rendered (outside the virtualized window, on another page, filtered out, or not loaded yet with dataProvider, where the previous page stays rendered until the next one arrives), when the column is hidden, and without itemKey, whose absence makes row ids plain indexes.

An element is valid until the next render: sorting, filtering, paging and scrolling can give the same element to another row or remove it, so ask again instead of keeping it. A cell takes focus only with cellNavigation, where the grid follows the focus with its own tab stop; do not add tabindex to cells yourself, or every cell becomes a stop of its own.

Notes

Everything the built-in UI does routes through this same table, so your imperative calls and the built-in controls stay in sync. Grid events fire for headless-driven changes too.