# Vanilla Installation
> **NOTE** these instructions are for the latest v5.x and might differ from earlier versions of the lib.
### 1. Install NPM Package
Install the `Slickgrid-Vue`, and other external packages like `Bootstrap` and `Font-Awesome` (Bootstrap, Font-Awesome are optional, you can choose other lib if you wish)
```bash
npm install --save @slickgrid-universal/common
# install whichever UI framework you want to use like Bootstrap, Bulma, ...
npm install bootstrap
```
### 2. Create a basic grid
And finally, you are now ready to use it in your project, for example let's create both html/ts files for a basic example.
**1. define a grid container in your View**
```html
My First Grid
```
**2. configure the Column Definitions, Grid Options and pass a Dataset to the grid**
below we use `mounted`, but it could be totally different dependending on what framework you use (it could be `mounted`, `attached`, `onRender`, ...)
```ts
import { Column, GridOption, Slicker } from '@slickgrid-universal/common';
export class GridBasicComponent {
columns: Column[] = [];
gridOptions: GridOption = {};
constructor() {
this.prepareGrid();
}
mounted() {
const container = document.querySelector(`.grid1`) as HTMLDivElement;
this.sgb = new Slicker.GridBundle(container, this.columns, this.getData());
}
getData() {
// ...
}
prepareGrid() {
this.columns = [
{ id: 'title', name: 'Title', field: 'title', sortable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
{ id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
{ id: 'start', name: 'Start', field: 'start' },
{ id: 'finish', name: 'Finish', field: 'finish' },
];
this.gridOptions = {
enableAutoResize: true,
enableSorting: true
};
// fill the dataset with your data (or read it from the DB)
this.dataset = [
{ id: 0, title: 'Task 1', duration: 45, percentComplete: 5, start: '2001-01-01', finish: '2001-01-31' },
{ id: 1, title: 'Task 2', duration: 33, percentComplete: 34, start: '2001-01-11', finish: '2001-02-04' },
];
}
}
```
### 3. CSS / SASS Styles
Load your prefered theme, choose between Bootstrap (default), Material or Salesforce themes. You can also customize them to your taste (either by using SASS or CSS variables).
#### CSS
Default compiled `css`, you can load it through HTML or import it in your JS code depending on your project.
```html
# Bootstrap Theme
```
> **Note** to use a different theme, simply replace the theme suffix, for example `"slickgrid-theme-material.css"` for the Material Theme.
#### SASS (scss)
You could also compile the SASS files with your own customization, for that, you can simply override any of the SASS [\_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) (without the `!default` flag) variable file and make sure to import the Bootstrap Theme afterward. For example, you could modify your `style.scss` with the following changes:
```scss
/* for example, let's change the mouse hover color */
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-default.scss' with (
$cell-odd-background-color: lightyellow,
$row-mouse-hover-color: lightgreen
);
```
### 4. Explore the Documentation
The last step is really to explore all the pages that are available on the documentation website which are often updated. For example a good starter is to look at the following
* all the `Grid Options` you can take a look at, [Slickgrid-Universal - Grid Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/gridOption.interface.ts) interface
* [Formatters](https://github.com/ghiscoding/slickgrid-universal/blob/master/docs/column-functionalities/Formatters.md)
* [Editors](/slickgrid-universal/column-functionalities/editors.md)
* [Filters](https://github.com/ghiscoding/slickgrid-universal/blob/master/docs/column-functionalities/filters/Select-Filter.md)
* [Grid Menu](/slickgrid-universal/grid-functionalities/grid-menu.md) ... and much more, just explorer the Documentation through the table of content (on your left)
### 5. Get Started
The best way to get started is to clone either the [Slickgrid-Universal Vite Demo](https://github.com/ghiscoding/slickgrid-universal-vite-demo) or [Slickgrid-Universal WebPack Demo](https://github.com/ghiscoding/slickgrid-universal-webpack-demo).
### 6. CSP Compliance
The project supports Content Security Policy (CSP) as long as you provide an optional `sanitizer` in your grid options (we recommend DOMPurify). Review the [CSP Compliance](/slickgrid-universal/developer-guides/csp-compliance.md) documentation for more info.
**All Live Demo Examples have links to the actual code**
If you would like to see the code to a particular Example. Just click on the "see code" that is available in every live examples.
... and that should cover it, now let's code!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ghiscoding.gitbook.io/slickgrid-universal/getting-started/installation-vanilla.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.