Data Grid Installation

npm

npm install @coreui/data-grid

Data Grid ships its own stylesheet and layers on the .table styles from @coreui/coreui or @coreui/coreui-pro (≥ 5), so make sure one of them is loaded on the page.

import { DataGrid } from '@coreui/data-grid'
import '@coreui/data-grid/dist/css/data-grid.css'

UMD bundle

Without a bundler, include the script and stylesheet and use the global coreui.DataGrid:

<link rel="stylesheet" href="/path/to/@coreui/data-grid/dist/css/data-grid.css" />
<script src="/path/to/@coreui/data-grid/dist/js/data-grid.min.js"></script>
<script>
  const grid = new coreui.DataGrid(element, options)
</script>

Stylesheet

The grid’s CSS defines --cui-data-grid-* custom properties that resolve through CoreUI’s semantic variables, so it inherits your theme (including data-coreui-theme="dark") automatically. See Styling & theming for the full token reference.

Next: the Quickstart.