@coreui/vue-data-grid

High-performance Vue data grid for CoreUI, built on @tanstack/vue-table and @tanstack/vue-virtual.

Requires the CoreUI stylesheet (@coreui/coreui or @coreui/coreui-pro ≥ 5) for the base .table styles plus the shared grid stylesheet from @coreui/data-grid.

Usage

<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' },
      { key: 'actions', label: '', sortable: false },
    ]"
    :items="items"
    :item-key="(item) => String(item.id)"
    column-filters
    global-filter
    row-selection
    @selection-change="(rowSelection, selectedItems) => console.log(selectedItems)"
  >
    <template #cell-actions>
      <button>Edit</button>
    </template>
  </CDataGrid>
</template>

License

Commercial — see LICENSE.