# Simple Column HTML

* [Gist demo with all enabled](https://gist.run/?id=fbd4e9f36d5eacd120dfac8184601f8d)

"Simple column HTML" is where we let the grid do the most of the work for us when it comes to adding css classes/markup. We only add `<v-grid-col>` inside the `<v-grid>` element with some attributes. Lets look on a small sample to get started.

First we will need to define the required variable in our class : \*v-collection

```javascript
//page.js

export class Page {


  //collection to display
  myCollection = [
    {index:1, name:"Leif"}, 
    {index:2, name:"Per"},
    {index:3, name:"John"},
    ];

}
```

For the HTML we :

* bind the variables we just created.
* set row & header height.
* add the `v-grid-col` with a `col-field` attribute for the field in collection we want.

To add filters/sorting to grid we will need to add more attributes.

```markup
//page.html

<v-grid
   style="height:350px;width:500px"
   v-row-height="25"
   v-header-height="50"
   v-collection.bind=myCollection>
     <v-grid-col col-field="index"></v-grid-col>
     <v-grid-col col-field="name"></v-grid-col>
</v-grid>
```

This will then produced the grid you see in the picture below Some features are enabled be default when using "simple column HTML"

* Drag drop headers
* re-size of columns
* Observing changes on from/to grid/current entity.

![sample grid](/files/-LA5FurBGUMzFG7AT5Bo)

## All attributes we have available :

* col-width
* col-type
* col-field (REQUIRED)
* col-sort
* col-header-name
* col-filter
* col-filter-top
* col-css
* col-add-row-attributes
* col-add-filter-attributes

## More details about the attibutes:

### col-width:

* default is 100
* sets the width of the column

```markup
<v-grid-col col-width="105" col-field="name" ></v-grid-col>
```

### col-type:

* default is "text"
* options are "selection", "checkbox" or "image"

```markup
//image
<v-grid-col col-type="image" col-field="name"></v-grid-col>

//checkbox
<v-grid-col col-type="checkbox" col-field="name"></v-grid-col>

//default text
<v-grid-col col-field="name"></v-grid-col>
```

### col-field: (REQUIRED)

* field/property of the data from collection

```markup
//simple
<v-grid-col col-field="name"></v-grid-col>

//with aurelia build in attributes/valueConverter
<v-grid-col col-field="date | dateFormat & updateTrigger:'blur':'paste'"></v-grid-col>
```

### col-sort:

* default is ""
* field name you want to do sorting on

```markup
<v-grid-col  col-field="date" sort="date"></v-grid-col>
```

### col-header-name:

* default is col-field where first letter is set to uppercase

```markup
//this produces "Date" as header
<v-grid-col  col-field="date"></v-grid-col>

//descriptive header
<v-grid-col col-field="date" col-header-name="Created"></v-grid-col>
```

### col-filter:

* see v-filter in chapter 04 for more details

```markup
//sort date, greater than, with a value converter
<v-grid-col col-field="date" col-filter="date|>|dateFormat" col-filter-top="true"></v-grid-col>
```

### col-filter-top:

* default is false
* use false/true to set filter above/under label in header

```markup
<v-grid-col col-field="date" col-filter="date|>|dateFormat" col-filter-top="true"></v-grid-col>

//these are the same...
<v-grid-col col-field="date" col-filter="date|>|dateFormat" col-filter-top="false"></v-grid-col>
<v-grid-col col-field="date" col-filter="date|>|dateFormat"></v-grid-col>
```

### col-css:

* css you want to add, usefull with on-row draw event for setting colors based on values

```markup
 <v-grid-col col-field="number" col-css="color:${tempRef.numberColor}"></v-grid-col>
```

### col-add-row-attributes:

* here you can put whatever you want and it gets added to row column, useful for own custom attributes

```markup
<v-grid-col col-field="date" col-add-row-attributes="v-row-menu='date' v-key-move"></v-grid-col>
```

### col-add-filter-attributes:

* here you can put whatever you want and it gets added header column, useful for own custom attributes

```markup
<v-grid-col col-field="date" col-add-filter-attributes="v-header-menu='date'"></v-grid-col>
```


---

# 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://aurelia-ui-toolkits-1.gitbook.io/aurelia-v-grid-docs/03.-how-to-use/simple-column-html.md?ask=<question>
```

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.