## Style

#### Column Dynamic Style

Column dynamic style applies style based on value only to columns with styleCallback specified.

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false">
            <RDataField
                field-name="field1"
                :data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn
                field-name="field1"
                name="column1"
                :width="100"
                :style-callback="
                    (grid, cell) => {
                        const index = cell.index?.itemIndex as number
                        if ( index % 2 === 0) {
                            return {styleName: 'red-color'}
                        }
                    }
                "></RGDataColumn>
        </RealGridVue>
    </div>
</template>

<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";

const gridRef = ref<RealGridVue>();
.. 생략
</script>
<style>
.red-color {
    background-color: red;
}
</style>
```

Applying dynamic column style using js

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            style="width: 1000px; height: 400px"
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>

<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";

const gridRef = ref<RealGridVue>();

const onInitialized = (grid: RealGrid.GridView) => {
  //컬럼 동적 스타일
  grid.columnByName("column1").styleCallback = function(){
    const index = cell.index?.itemIndex as number
    if ( index % 2 === 0) {
        return {styleName: 'red-color'}
    }
  }
}

</script>
<style>
.red-color {
    background-color: red;
}
</style>
```
#### Row dynamic style

Row dynamic style is used when you want to apply style to the entire row based on a specific value.

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false"
            :row-style-callback="
                (grid: RealGrid.GridBase, item:RealGrid.GridItem, fixed: boolean) => {
                    return {styleName: 'red-color'};
                }
            ">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>

</template>

<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";

const gridRef = ref<RealGridVue>();

</script>
<style>
.red-color {
    background-color: red;
}
</style>

```

Applying row dynamic style in js method 

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>

<script setup lang="ts">
.. 생략

const onInitialized = (grid: RealGrid.GridView) => {
  //행 동적 스타일
   grid.setRowStyleCallback(function(grid, item, fixed) {
    return { styleName: 'red-color' };
  })
}

</script>
<style>
.red-color {
    background-color: red;
}
</style>
```

#### Cell Dynamic Style

Cell dynamic styles are used when you want to apply styles to individual cells.

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :auto-generate-field="false"
            :cell-style-callback="
                (grid: GridBase, model: GridCell) => {
                    return {styleName: 'red-color'};
                }
            ">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>

<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";

const gridRef = ref<RealGridVue>();

</script>
<style>
.red-color {
    background-color: red;
}
</style>
```

Applying dynamic cell style using js method 

```vue
<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue
            ref="gridRef"
            :rows="rows"
            :on-initialized="onInitialized"
            :auto-generate-field="false">
            <RGDataField
                field-name="field1"
                data-type="RealGrid.ValueType.TEXT"></RGDataField>
            <RGDataColumn  field-name="field1" name="column1" :width="100"></RGDataColumn>
        </RealGridVue>
    </div>
</template>

<script setup lang="ts">
import * as RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
import { rows } from "./realgrid-data";

const gridRef = ref<RealGridVue>();


const onInitialized = (grid: RealGrid.GridView) => {
  //행 동적 스타일
   grid.setCellStyleCallback(function(grid, model) {
    return { styleName: 'red-color' };
  })
}

</script>
<style>
.red-color {
    background-color: red;
}
</style>
```