Style and appearance in Vue Grid component

16 Mar 20233 minutes to read

To modify the Grid appearance, you need to override the default CSS of grid. Please find the CSS structure that can be used to modify the Grid appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio.

Customizing the Grid root element

Use the below CSS to customize the Grid root element.

.e-grid {
      font-family: cursive;
}

You can modify the grid styling appearance by overriding the default CSS style of the Grid.

In the following sample, the font family of grid content is changed to cursive, and the background color of rows, selected rows, alternate rows, and row hovering color is modified using the below CSS styles.

app.vue

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging="true" :pageSettings='pageSettings' :selectionSettings='selectionOptions' height='272px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=120></e-column>
                <e-column field='Freight' headerText='Freight' type='number' format='C2' textAlign='Right' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' type='string' width=180></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      pageSettings: { pageSize: 8 },
      selectionOptions: { type: 'Multiple' }
    };
  },
  provide: {
      grid: [Page]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
.e-grid {
  font-family: cursive;
}
.e-grid .e-row:hover .e-rowcell {
  background-color: rgb(204, 229, 255) !important;
}
.e-grid .e-rowcell.e-selectionbackground {
  background-color: rgb(230, 230, 250);
}
.e-grid .e-row.e-altrow {
  background-color: rgb(150, 212, 212);
}
.e-grid .e-row {
  background-color: rgb(180, 180, 180);
}
</style>