# Change the color of the row

You can use the theme to change the row color.

<div class="sample1 demo-grid small"></div>

const records = generatePersons(100);

const materialDesignTheme = cheetahGrid.themes.MATERIAL_DESIGN;
const userTheme = materialDesignTheme.extends({
  defaultBgColor({ row, grid }) {
    // change the color of the checked row.
    if (row < grid.frozenRowCount) {
      return null;
    }
    const record = records[row - grid.frozenRowCount];
    if (record.check) {
      return "#DDF";
    }
    return null;
  },
});

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  theme: userTheme,
  header: [
    {
      field: "check",
      caption: "",
      width: 50,
      columnType: "check",
      action: "check",
    },
    { field: "personid", caption: "ID", width: 100 },
    { field: "fname", caption: "First Name", width: 200 },
    { field: "lname", caption: "Last Name", width: 200 },
    { field: "email", caption: "Email", width: 250 },
    {
      field: (rec) => new Intl.DateTimeFormat().format(rec.birthday),
      caption: "birthday",
      width: 250,
    },
    {
      caption: "button",
      width: 120,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "SHOW REC",
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec));
        },
      }),
    },
  ],
  records,
});

grid.listen(cheetahGrid.ListGrid.EVENT_TYPE.CHANGED_VALUE, () => {
  // Redraw when checkbox is changed. This is because cells other than checkboxes are not redrawn automatically.
  grid.invalidate();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

For the Vue component, do the following:

<div class="demo-grid middle">
  <c-grid
    ref="grid"
    :data="records"
    @changed-value="$refs.grid.invalidate()"
    :theme="userTheme"
  >
    <c-grid-check-column field="check" :width="50"/>
    <c-grid-column field="personid" width= "100">ID</c-grid-column>
    <c-grid-input-column field="fname" width="200" min-width="150">First Name</c-grid-input-column>
    <c-grid-input-column field="lname" width="200" min-width="150">Last Name</c-grid-input-column>
    <c-grid-column field="email" width= "250">Email</c-grid-column>
    <c-grid-column :field="(rec) => new Intl.DateTimeFormat().format(rec.birthday)" width= "250">birthday</c-grid-column>
    <c-grid-button-column caption="SHOW REC" width="120" @click="onClickRecord" />
  </c-grid>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const records = generatePersons(1000);

const materialDesignTheme = vueCheetahGrid.cheetahGrid.themes.MATERIAL_DESIGN;

export default {
  data() {
    return {
      records,
      userTheme: materialDesignTheme.extends({
        defaultBgColor({ row, grid }) {
          // change the color of the checked row.
          if (row < grid.frozenRowCount) {
            return null;
          }
          const record = records[row - grid.frozenRowCount];
          if (record.check) {
            return "#DDF";
          }
          return null;
        },
      }),
    };
  },
  methods: {
    onClickRecord(rec) {
      alert(JSON.stringify(rec));
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

In addition, it can be expanded as follows:

<div class="demo-grid middle">
  <c-grid
    ref="grid"
    :data="records"
    @changed-value="$refs.grid.invalidate()"
    @selected-cell="(e)=>{
      if (e.selected) {
        $refs.grid.invalidate()
      }
    }"
    :theme="userTheme"
  >
    <c-grid-check-column field="check" :width="50"/>
    <c-grid-column field="personid" width= "100">ID</c-grid-column>
    <c-grid-input-column field="fname" width="200" min-width="150">First Name</c-grid-input-column>
    <c-grid-input-column field="lname" width="200" min-width="150">Last Name</c-grid-input-column>
    <c-grid-column field="email" width= "250">Email</c-grid-column>
    <c-grid-column :field="(rec) => new Intl.DateTimeFormat().format(rec.birthday)" width= "250">birthday</c-grid-column>
    <c-grid-button-column caption="SHOW REC" width="120" @click="onClickRecord" />
  </c-grid>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const records = generatePersons(1000);

const materialDesignTheme = vueCheetahGrid.cheetahGrid.themes.MATERIAL_DESIGN;

export default {
  data() {
    return {
      records,
      userTheme: materialDesignTheme.extends({
        defaultBgColor({ col, row, grid }) {
          const { start, end } = grid.selection.range;
          if (end.row < grid.frozenRowCount) {
            // change the color of the selection cols.
            if (start.col <= col && col <= end.col) {
              return "#DEF";
            }
          }
          if (row < grid.frozenRowCount) {
            return null;
          }
          // change the color of the checked row.
          const record = records[row - grid.frozenRowCount];
          if (record.check) {
            return "#DDF";
          }
          return null;
        },
        borderColor({ col, row, grid }) {
          const { start, end } = grid.selection.range;
          if (end.row < grid.frozenRowCount) {
            // change the border of the selection cols.
            if (start.col === col || end.col === col) {
              return [
                "#ccc7c7",
                end.col === col ? "#BCF" : null,
                "#ccc7c7",
                start.col === col ? "#BCF" : null,
              ];
            }
          }
          return null;
        },
      }),
    };
  },
  methods: {
    onClickRecord(rec) {
      alert(JSON.stringify(rec));
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

← FAQ Checkbox on header →