# Change the color of the row

You can use the theme to change the row color.

<div class="sample1 demo-grid small"></div>
1
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

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

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