CoreUI Vue Data Grid

CoreUI Data Grid is a high-performance grid for displaying and interacting with large tabular datasets. It renders 100,000 rows in the browser with sorting, filtering, selection and pagination, and hands off to your API when the data outgrows the browser’s memory.

Why Data Grid

• Fast by default. Row virtualization keeps only the visible window in the DOM, so scrolling stays smooth at 100k rows.
• Headless core, styled shell. A proven headless table engine and row virtualization under a CoreUI-themed UI. Drop to the headless table any time.
• Complete feature set. Sorting, filtering, selection, pagination, server-side data, column sizing, pinning, ordering & visibility, a column menu and CSV export.
• Themeable. Every knob is a --cui-data-grid-* CSS variable resolving through CoreUI semantic tokens, so light/dark theming works with no extra CSS. See Styling & theming.
• Vue-native. Reactive props, emits and scoped slots — no wrappers around a DOM widget.
• Small. Around 48 KB gzipped for the underlying grid core.

How it’s built

The grid is a thin, styled layer over a headless table engine (state, sorting, filtering, pagination, pinning, ordering, visibility) and row virtualization (windowed rendering). Props are named after the features they control, emits are verbs, and event payloads carry the grid’s own state — a small, predictable API.

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

<template>
  <CDataGrid
    :columns="[
      { key: 'name', label: 'Name' },
      { key: 'role', label: 'Role' },
    ]"
    :items="items"
    :item-key="(item) => String(item.id)"
  />
</template>

Get started

1. Install the package.
2. Follow the Quickstart to render your first grid.
3. Browse the feature matrix to see what’s available.

Packages