Hire Us Get CoreUI Data Grid →

Vue Data Grid Quickstart

Quickstart

Markdown ChatGPT Claude

Render your first CoreUI Data Grid for Vue in a few lines — columns, data, a stable row key, then your first feature.

On this page

This guide builds a working grid from scratch. It assumes you’ve installed @coreui/vue-data-grid and loaded the grid stylesheet.

1. The component

Import CDataGrid and the stylesheet in your component:

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

2. Columns and data

Define columns by key (the property to read from each item) and pass your items:

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

const items = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'editor' },
  { id: 3, name: 'Carol', role: 'viewer' },
]

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'role', label: 'Role' },
]
</script>

<template>
  <CDataGrid :columns="columns" :items="items" :item-key="(item) => String(item.id)" />
</template>

itemKey returns a stable id per row. It’s optional, but selection needs it to survive sorting and filtering — set it up front.

3. Turn on a feature

Every feature is a single prop. Add filtering and selection:

<template>
  <CDataGrid
    :columns="columns"
    :items="items"
    :item-key="(item) => String(item.id)"
    column-filters
    row-selection
  />
</template>

Sorting is on by default. From here, explore the feature matrix or jump to any feature page.

4. React to changes

The grid emits events with structured state:

<template>
  <CDataGrid
    :columns="columns"
    :items="items"
    :item-key="(item) => String(item.id)"
    row-selection
    @selection-change="(rowSelection, selectedItems) => console.log(selectedItems)"
  />
</template>

What’s next