# Data Grid Installation

> Install CoreUI Data Grid via npm and load its stylesheet, or drop in the UMD bundle.

## npm

```sh
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.

```js
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`:

```html
<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](https://coreui.io/data-grid/docs/customization/styling/) for the full token reference.

Next: the [Quickstart](https://coreui.io/data-grid/docs/getting-started/quickstart/).