CoreUI Data Grid for Vue — the exposed table, CSV helpers and label defaults exported by @coreui/vue-data-grid.
On this page
<CDataGrid> has no imperative instance — data updates flow through reactive
props (change items and the grid re-renders) and teardown happens on unmount.
What the vanilla grid exposes as instance methods maps to the component’s
template ref and the package’s named exports.
Exposed on the template ref
<script setup>
import { ref } from 'vue'
const grid = ref(null)
</script>
<template>
<CDataGrid ref="grid" :columns="columns" :items="items" />
</template>| API | Description |
|---|---|
table | The underlying headless table instance — the headless escape hatch for building custom UI, e.g. grid.value?.table.setPageIndex(3). |
Read the current selection with grid.value?.table.getSelectedRowModel(), or
listen for the selection-change event.
CSV helpers
Both helpers take the exposed table and are re-exported from
@coreui/vue-data-grid (published at @coreui/data-grid/csv):
| Export | Description |
|---|---|
exportCsv(table, options?) | Returns the rows as an RFC-4180 CSV string. Options: scope, delimiter, bom, sanitize. See CSV export. |
downloadCsv(table, options?) | Downloads the CSV as a file. Same options plus filename. |
Other exports
| Export | Description |
|---|---|
DEFAULT_LABELS | The default UI strings — extend rather than replace them. See Localization. |