Angular Data Grid Installation

npm

npm install @coreui/angular-data-grid

Data Grid builds on the .table, .btn and form styles from @coreui/coreui or @coreui/coreui-pro (≥ 5) when one of them is on the page, and ships its own copy of them when it is not — see Stylesheet below. The grid’s own stylesheet ships in the @coreui/data-grid package, installed automatically as a dependency.

ng add

If you want Angular to wire the package into your app automatically, use:

ng add @coreui/angular-data-grid

That schematic installs the data grid package, adds @coreui/data-grid and the matching CoreUI stylesheet dependency when needed, and updates your Angular workspace so the grid stylesheet is loaded in angular.json for the selected project.

The DataGridComponent is standalone — import it straight into your component:

import { DataGridComponent } from '@coreui/angular-data-grid'

@Component({
  imports: [DataGridComponent],
  // ...
})

Add the grid stylesheet to your global styles (e.g. angular.json styles or styles.scss):

@use "@coreui/data-grid/dist/css/data-grid.css";

Stylesheet

Two builds ship in the package — load exactly one:

data-grid.standalone.css carries the slice of CoreUI the grid’s markup relies on — .table, .btn, the form controls, .pagination, .spinner-border and .visually-hidden. Those rules are scoped to .data-grid and emitted into a data-grid-base cascade layer, so they never restyle the rest of your page, and an unlayered CoreUI stylesheet always overrides them.

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.