Star Rating

This tutorial shows you how to build an interactive SVG star rating cell using editorFactory and rendererFactory, with hover preview and keyboard shortcuts - no external libraries required.

1
/* file: app.component.ts */
2
import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';
3
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
4
import {
5
  GridSettings,
6
  HotCellEditorAdvancedComponent,
7
  HotCellRendererAdvancedComponent,
8
  KeyboardShortcutConfig,
9
  HotTableModule
10
} from '@handsontable/angular-wrapper';
11
import { RowObject } from 'handsontable/common';
12

13
/* start:skip-in-preview */
14
const starSvg =
15
  '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>';
16

17
const inputData = [
18
  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },
19
  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },
20
  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },
21
  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },
22
  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },
23
  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },
24
  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },
25
  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },
26
];
27
/* end:skip-in-preview */
28

29
@Component({
30
  standalone: true,
31
  selector: 'example1-star-renderer',
32
  changeDetection: ChangeDetectionStrategy.OnPush,
33
  template: `
34
    <div class="rating-cell">
35
      @for (star of stars; track $index) {
36
        <span class="rating-star" [class.active]="$index < value" [innerHTML]="starSvgMarkup"></span>
37
      }
38
    </div>`,
39
})
40
export class StarRendererComponent extends HotCellRendererAdvancedComponent<number> {
41
  readonly stars = Array(5);
42
  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);
43
}
44

45
@Component({
46
  standalone: true,
47
  selector: 'example1-star-editor',
48
  template: `
49
    <div class="rating-editor" (mouseover)="onMouseOver($event)" (mousedown)="onMouseDown()">
50
      @for (star of stars; track $index) {
51
        <span
52
          [attr.data-value]="$index + 1"
53
          class="rating-star"
54
          [class.active]="$index < getValue()"
55
          [class.current]="isCurrentStar($index)"
56
          [innerHTML]="starSvgMarkup"
57
        ></span>
58
      }
59
    </div>
60
  `,
61
})
62
export class StarEditorComponent extends HotCellEditorAdvancedComponent<number> {
63
  readonly stars = Array(5);
64
  readonly starSvgMarkup: SafeHtml = inject(DomSanitizer).bypassSecurityTrustHtml(starSvg);
65

66
  isCurrentStar(index: number): boolean {
67
    return (index + 1) === parseInt(this.getValue()?.toString() ?? '0', 10);
68
  }
69

70
  private readonly cdr = inject(ChangeDetectorRef);
71

72
  override shortcuts?: KeyboardShortcutConfig[] = [
73
    {
74
      keys: [['1'], ['2'], ['3'], ['4'], ['5']],
75
      callback: (_editor, event) => {
76
        this.setValue(parseInt((event as KeyboardEvent).key, 10));
77
        this.cdr.detectChanges();
78
      },
79
    },
80
    {
81
      keys: [['ArrowRight']],
82
      callback: (_editor, _event) => {
83
        if (parseInt(this.getValue()?.toString() ?? '0') < 5) {
84
          this.setValue(parseInt(this.getValue()?.toString() ?? '0') + 1);
85
          this.cdr.detectChanges();
86
        }
87
      },
88
    },
89
    {
90
      keys: [['ArrowLeft']],
91
      callback: (_editor, _event) => {
92
        if (parseInt(this.getValue()?.toString() ?? '0') > 1) {
93
          this.setValue(parseInt(this.getValue()?.toString() ?? '0') - 1);
94
          this.cdr.detectChanges();
95
        }
96
      },
97
    },
98
  ];
99

100
  onMouseOver(event: MouseEvent): void {
101
    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;
102

103
    if (
104
      star?.dataset['value'] &&
105
      parseInt(this.getValue()?.toString() ?? '0') !== parseInt(star.dataset['value'], 10)
106
    ) {
107
      this.setValue(parseInt(star.dataset['value'], 10));
108
      this.cdr.detectChanges();
109
    }
110
  }
111

112
  onMouseDown(): void {
113
    this.finishEdit.emit();
114
  }
115
}
116

117
@Component({
118
  standalone: true,
119
  imports: [HotTableModule],
120
  selector: 'example1-rating',
121
  template: `<div><hot-table [data]="data" [settings]="gridSettings"></hot-table></div>`,
122
})
123
export class AppComponent {
124
  readonly data = inputData;
125

126
  readonly gridSettings: GridSettings = {
127
    autoRowSize: true,
128
    rowHeaders: true,
129
    autoWrapRow: true,
130
    height: 'auto',
131
    width: '100%',
132
    headerClassName: 'htLeft',
133
    colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],
134
    columns: [
135
      { data: 'product', type: 'text', width: 240 },
136
      { data: 'category', type: 'text', width: 120 },
137
      {
138
        data: 'rating',
139
        width: 150,
140
        renderer: StarRendererComponent,
141
        editor: StarEditorComponent,
142
        validator: (value: unknown, callback: (valid: boolean) => void) => {
143
          const num = parseInt(String(value), 10);
144

145
          callback(num >= 1 && num <= 5);
146
        },
147
      },
148
      { data: 'reviews', type: 'numeric', width: 80 },
149
      { data: 'price', type: 'numeric', width: 80 },
150
    ],
151
  };
152
}
153
/* end-file */
154

155
/* file: app.config.ts */
156
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
157
import { registerAllModules } from 'handsontable/registry';
158
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
159

160
registerAllModules();
161

162
export const appConfig: ApplicationConfig = {
163
  providers: [
164
    provideZoneChangeDetection({ eventCoalescing: true }),
165
    {
166
      provide: HOT_GLOBAL_CONFIG,
167
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
168
    },
169
  ],
170
};
171
/* end-file */

1
<div>
2
  <example1-rating></example1-rating>
3
</div>

1
.rating-cell {
2
  display: flex;
3
  align-items: center;
4
  margin: 3px 0 0 -1px;
5
}
6

7
.rating-star {
8
  color: var(--ht-background-secondary-color, #e0e0e0);
9
  cursor: default;
10
  display: inline-flex;
11
  align-items: center;
12
}
13

14
.rating-star.active {
15
  color: #facc15;
16
}
17

18
.rating-editor {
19
  display: flex;
20
  align-items: center;
21
  width: 100%;
22
  height: 100%;
23
  box-sizing: border-box !important;
24
  border: none;
25
  border-radius: 0;
26
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
27
    var(--ht-cell-editor-border-color, #1a42e8),
28
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
29
    var(--ht-cell-editor-shadow-color, transparent);
30
  background-color: var(--ht-cell-editor-background-color, #ffffff);
31
  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);
32
  font-family: inherit;
33
  font-size: inherit;
34
  line-height: inherit;
35
  cursor: pointer;
36
}
37

38
.rating-editor .rating-star {
39
  cursor: pointer;
40
}
41

42
.rating-editor .rating-star.current {
43
  color: var(--ht-accent-color, #1a42e8);
44
}

Overview

This guide shows how to create an interactive star rating cell using inline SVG stars. Perfect for product ratings, review scores, or any scenario where users need to provide a 1-5 star rating.

Difficulty: Beginner Time: ~15 minutes Libraries: None (pure HTML, SVG and JavaScript)

What You’ll Build

A cell that:

Displays 5 SVG stars both when editing and viewing
Shows filled stars (gold) and unfilled stars (gray)
Uses Handsontable CSS tokens for theme-aware editor styling
Supports mouse hover for preview
Allows keyboard input (1-5 keys, arrow keys)
Provides immediate visual feedback
Works without any external libraries

Prerequisites

None! This uses only native HTML, SVG and JavaScript features.

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { editorFactory } from 'handsontable/editors';
4
import { rendererFactory } from 'handsontable/renderers';
5

6
registerAllModules();

What we’re NOT importing:

No icon libraries
No UI component libraries
No external SVG sprite sheets
Handsontable only.

Define the Star SVG

Create an inline SVG string for the star shape. Using fill="currentColor" allows CSS to control the star color.
```
1
const starSvg =
2
  '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>';
```
What’s happening:
- width="1em" height="1em" - Stars scale with the font size
- viewBox="0 0 24 24" - Standard 24x24 coordinate space
- fill="currentColor" - Inherits the CSS color property, so active/inactive states are controlled via CSS
- The <path> draws a classic 5-pointed star shape
Why SVG instead of emoji?
- Consistent rendering across all browsers and operating systems
- Full control over color, size, and styling via CSS
- No platform-dependent emoji variations
- Crisp at any resolution
Add CSS Styling

Create a separate CSS file for the rating styles. This uses Handsontable CSS custom properties (tokens) so the editor automatically adapts to custom themes and dark mode.
```
1
.rating-cell {
2
  display: flex;
3
  align-items: center;
4
  margin: 3px 0 0 -1px;
5
}
6

7
.rating-star {
8
  color: var(--ht-background-secondary-color, #e0e0e0);
9
  cursor: default;
10
  display: inline-flex;
11
  align-items: center;
12
}
13

14
.rating-star.active {
15
  color: #facc15;
16
}
17

18
.rating-editor {
19
  display: flex;
20
  align-items: center;
21
  width: 100%;
22
  height: 100%;
23
  box-sizing: border-box !important;
24
  border: none;
25
  border-radius: 0;
26
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
27
    var(--ht-cell-editor-border-color, #1a42e8),
28
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
29
    var(--ht-cell-editor-shadow-color, transparent);
30
  background-color: var(--ht-cell-editor-background-color, #ffffff);
31
  padding: var(--ht-cell-vertical-padding, 4px)
32
    var(--ht-cell-horizontal-padding, 8px);
33
  font-family: inherit;
34
  font-size: inherit;
35
  line-height: inherit;
36
  cursor: pointer;
37
}
38

39
.rating-editor .rating-star {
40
  cursor: pointer;
41
}
42

43
.rating-editor .rating-star.current {
44
  color: var(--ht-accent-color, #1a42e8);
45
}
```
Cell container:
- .rating-cell wraps the stars in the renderer with display: flex to match the editor layout
- margin: 3px 0 0 -1px - Fine-tunes alignment between renderer and editor to prevent visual jump
Star colors:
- var(--ht-background-secondary-color, #e0e0e0) - Inactive/unfilled stars (adapts to theme)
- #facc15 (gold) - Active/filled stars
- Colors are applied via the CSS color property, which the SVG inherits through fill="currentColor"
Current star indicator:
- .rating-editor .rating-star.current highlights the last active star (the one matching the rating value) using --ht-accent-color
- Makes it clear which star is selected while editing — the current star turns blue (accent color) instead of gold
Handsontable tokens used:
- --ht-background-secondary-color - Inactive star color (adapts to theme)
- --ht-accent-color - Current star highlight in editor (blue)
- --ht-cell-editor-border-color / --ht-cell-editor-border-width - blue border matching native editors
- --ht-cell-editor-background-color - editor background
- --ht-cell-editor-shadow-blur-radius / --ht-cell-editor-shadow-color - editor shadow
- --ht-cell-vertical-padding / --ht-cell-horizontal-padding - consistent cell padding matching the renderer
Create the Renderer

The renderer displays 5 SVG stars wrapped in a flex container using CSS classes for color control.
```
1
renderer: rendererFactory(({ td, value }) => {
2
  td.innerHTML = `<div class="rating-cell">${Array.from(
3
    { length: 5 },
4
    (_, index) =>
5
      `<span class="rating-star ${index < value ? 'active' : ''}">${starSvg}</span>`
6
  ).join('')}</div>`;
7
})
```
What’s happening:
- Stars are wrapped in a <div class="rating-cell"> flex container to match the editor’s flex layout
- Array.from({ length: 5 }) - Creates an array with 5 elements (indices 0-4)
- index < value - Stars up to the rating value get the active class (gold color)
- index >= value - Stars beyond the rating stay gray via CSS
- Each span contains the inline SVG star
- join('') - Concatenates all star spans into a single string
Create the Validator

Ensure values are within the valid range.
```
1
validator: (value, callback) => {
2
  value = parseInt(value);
3

4
  callback(value >= 0 && value <= 100);
5
}
```
What’s happening:
- Convert value to integer (keyboard input returns strings)
- Validate the value is within the acceptable range
- Call callback(true) for valid, callback(false) for invalid
Editor - Initialize (init)

Create the container div for the star rating editor.
```
1
init(editor) {
2
  editor.input = editor.hot.rootDocument.createElement('DIV') as HTMLDivElement;
3
  editor.input.classList.add('rating-editor');
4
}
```
What’s happening:
1. Create a div container for the star buttons
2. Add the rating-editor CSS class (all styling is in the CSS file)
3. This container will hold the 5 SVG star elements
Key styling (from CSS):
- display: flex; align-items: center - Stars aligned vertically
- box-shadow with --ht-cell-editor-border-color - Blue border matching native editors
- padding with cell padding tokens - Matches renderer to prevent visual jump
- font-family/font-size/line-height: inherit - Consistent sizing with the cell
Editor - After Init Hook (afterInit)

Set up mouse events for hover preview and click selection.
```
1
afterInit(editor) {
2
  editor.input.addEventListener('mouseover', (event) => {
3
    const star = (event.target as HTMLElement).closest('.rating-star') as HTMLElement | null;
4

5
    if (
6
      star?.dataset.value &&
7
      parseInt(editor.value) !== parseInt(star.dataset.value)
8
    ) {
9
      editor.setValue(star.dataset.value);
10
    }
11
  });
12

13
  editor.input.addEventListener('mousedown', () => {
14
    editor.finishEditing();
15
  });
16
}
```
What’s happening:

Mouseover Event:
1. User hovers over a star (or its SVG child element)
2. Use closest('.rating-star') to find the parent span — this is important because the hover target may be the SVG <path> element inside the span
3. Get the hover rating from the span’s dataset.value
4. If different from current value, update it
5. This creates a “preview” effect as user hovers
Mousedown Event:
1. User clicks (mousedown) anywhere in the editor
2. Finish editing immediately
3. Value is saved to the cell
Why closest() instead of checking event.target directly?
- With inline SVGs, the actual hover/click target is often the <svg> or <path> element, not the parent <span>
- closest('.rating-star') walks up the DOM tree to find the span with the data-value attribute
- This ensures reliable star detection regardless of which SVG child element the user interacts with
Editor - Render Function (render)

Generate the HTML for the 5 star buttons based on current rating.
```
1
render(editor) {
2
  editor.input.innerHTML = Array.from(
3
    { length: 5 },
4
    (_, index) =>
5
      `<span data-value="${index + 1}" class="rating-star ${
6
        index < editor.value ? 'active' : ''
7
      }${index + 1 === parseInt(editor.value) ? ' current' : ''}">${starSvg}</span>`
8
  ).join('');
9
}
```
What’s happening:
1. Create 5 star spans (indices 0-4, values 1-5)
2. Each span has data-value attribute with rating (1-5)
3. Stars use the rating-star class for base styling (gray color)
4. Active stars get the active class (gold color)
5. The star matching the current value gets the current class (accent color) — this highlights the selected rating in the editor
6. Each span contains the inline SVG star
7. Join all spans into a single HTML string
Dynamic rendering:
- Updates whenever editor.setValue() is called
- Automatically called by editorFactory when value changes
- Provides live preview as user interacts

Editor - Keyboard Shortcuts

Add keyboard support for rating selection.

1
shortcuts: [
2
  {
3
    keys: [['1'], ['2'], ['3'], ['4'], ['5']],
4
    callback: (editor, _event) => {
5
      editor.setValue((_event as KeyboardEvent).key);
6
    }
7
  },
8
  {
9
    keys: [['ArrowRight']],
10
    callback: (editor, _event) => {
11
      if (parseInt(editor.value) < 5) {
12
        editor.setValue(parseInt(editor.value) + 1);
13
      }
14
    }
15
  },
16
  {
17
    keys: [['ArrowLeft']],
18
    callback: (editor, _event) => {
19
      if (parseInt(editor.value) > 1) {
20
        editor.setValue(parseInt(editor.value) - 1);
21
      }
22
    }
23
  }
24
]

What’s happening:

Number Keys (1-5):

Press 1-5 to set rating directly
Fastest way to select a specific rating
Gets key value from keyboard event

Arrow Keys:

ArrowRight: Increase rating (max 5)
ArrowLeft: Decrease rating (min 1)
Bounded within valid range
Smooth incremental adjustment

Keyboard navigation benefits:

Fast selection without mouse
Accessible for keyboard-only users
Number keys for direct selection, arrows for adjustment

Complete Cell Definition

1
const starSvg =
2
  '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>';
3

4
const cellDefinition = {
5
  renderer: rendererFactory(({ td, value }) => {
6
    td.innerHTML = `<div class="rating-cell">${Array.from(
7
      { length: 5 },
8
      (_, index) =>
9
        `<span class="rating-star ${index < value ? 'active' : ''}">${starSvg}</span>`
10
    ).join('')}</div>`;
11
  }),
12
  validator: (value, callback) => {
13
    value = parseInt(value);
14

15
    callback(value >= 0 && value <= 100);
16
  },
17
  editor: editorFactory<{ input: HTMLDivElement }>({
18
    shortcuts: [
19
      {
20
        keys: [['1'], ['2'], ['3'], ['4'], ['5']],
21
        callback: (editor, _event) => {
22
          editor.setValue((_event as KeyboardEvent).key);
23
        },
24
      },
25
      {
26
        keys: [['ArrowRight']],
27
        callback: (editor, _event) => {
28
          if (parseInt(editor.value) < 5) {
29
            editor.setValue(parseInt(editor.value) + 1);
30
          }
31
        },
32
      },
33
      {
34
        keys: [['ArrowLeft']],
35
        callback: (editor, _event) => {
36
          if (parseInt(editor.value) > 1) {
37
            editor.setValue(parseInt(editor.value) - 1);
38
          }
39
        },
40
      },
41
    ],
42
    init(editor) {
43
      editor.input = editor.hot.rootDocument.createElement(
44
        'DIV'
45
      ) as HTMLDivElement;
46
      editor.input.classList.add('rating-editor');
47
    },
48
    afterInit(editor) {
49
      editor.input.addEventListener('mouseover', (event) => {
50
        const star = (event.target as HTMLElement).closest(
51
          '.rating-star'
52
        ) as HTMLElement | null;
53

54
        if (
55
          star?.dataset.value &&
56
          parseInt(editor.value) !== parseInt(star.dataset.value)
57
        ) {
58
          editor.setValue(star.dataset.value);
59
        }
60
      });
61
      editor.input.addEventListener('mousedown', () => {
62
        editor.finishEditing();
63
      });
64
    },
65
    render(editor) {
66
      editor.input.innerHTML = Array.from(
67
        { length: 5 },
68
        (_, index) =>
69
          `<span data-value="${index + 1}" class="rating-star ${
70
            index < editor.value ? 'active' : ''
71
          }${index + 1 === parseInt(editor.value) ? ' current' : ''}">${starSvg}</span>`
72
      ).join('');
73
    },
74
  }),
75
};

What’s happening:

starSvg: Inline SVG star with fill="currentColor" for CSS color control
renderer: Displays 5 SVG stars wrapped in a .rating-cell flex container with CSS class-based coloring (gold/gray)
validator: Ensures rating is within valid range
editor: Uses editorFactory helper with:
- Keyboard shortcuts for 1-5 keys and arrow keys
- Container initialization with rating-editor CSS class
- Mouse events using closest() for reliable SVG hover detection
- Render function with current class to highlight the selected star using accent color

Use in Handsontable

1
const container = document.querySelector('#example1')!;
2

3
const hotOptions: Handsontable.GridSettings = {
4
  data,
5
  colHeaders: ['Product', 'Category', 'Rating', 'Reviews', 'Price'],
6
  autoRowSize: true,
7
  rowHeaders: true,
8
  height: 'auto',
9
  width: '100%',
10
  autoWrapRow: true,
11
  headerClassName: 'htLeft',
12
  columns: [
13
    { data: 'product', type: 'text', width: 240 },
14
    { data: 'category', type: 'text', width: 120 },
15
    { data: 'rating', width: 150, ...cellDefinition },
16
    { data: 'reviews', type: 'numeric', width: 80 },
17
    { data: 'price', type: 'numeric', width: 80 },
18
  ],
19
  licenseKey: 'non-commercial-and-evaluation',
20
};
21

22
const hot = new Handsontable(container, hotOptions);

Key configuration:

...cellDefinition - Spreads the renderer, validator, and editor onto the Rating column
headerClassName: 'htLeft' - Left-aligns all column headers
width: '100%' - Table fills the container width

How It Works - Complete Flow

Initial Render: Cell displays 5 SVG stars — gold for filled, gray for unfilled
User Double-Clicks or Enter: Editor opens over cell showing interactive stars with Handsontable blue border
Current Star Indicator: The last active star turns blue (accent color) to clearly show the selected rating
Mouse Hover: User hovers over stars → preview rating updates in real-time (detected via closest())
Click Selection: User clicks → rating selected and editor closes
Keyboard Input: User presses 1-5 keys → rating set directly
Arrow Navigation: User presses ArrowLeft/ArrowRight → rating increments/decrements
Validation: Validator checks the value is valid
Save: Valid value saved to cell
Editor Closes: Cell shows updated star rating

Enhancements

Show Numeric Value

Display the numeric rating alongside stars:

1
renderer: rendererFactory(({ td, value }) => {
2
  const stars = Array.from({ length: 5 }, (_, index) =>
3
    `<span class="rating-star ${index < value ? 'active' : ''}">${starSvg}</span>`
4
  ).join('');
5

6
  td.innerHTML = `
7
    <div style="display: flex; align-items: center; gap: 8px;">
8
      <span>${stars}</span>
9
      <span style="font-weight: bold; color: #666;">${value}/5</span>
10
    </div>
11
  `;
12
})

Custom Star Count

Configurable number of stars per column:

1
renderer: rendererFactory(({ td, value, cellProperties }) => {
2
  const maxStars = cellProperties.maxStars || 5;
3

4
  td.innerHTML = Array.from({ length: maxStars }, (_, index) =>
5
    `<span class="rating-star ${index < value ? 'active' : ''}">${starSvg}</span>`
6
  ).join('');
7
})
8

9
// Usage
10
columns: [{
11
  data: 'rating',
12
  ...cellDefinition,
13
  maxStars: 10 // 10-star rating
14
}]

Text Labels

Add text labels like “Excellent”, “Good”, etc.:

1
renderer: rendererFactory(({ td, value }) => {
2
  const labels = ['', 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];
3
  const label = labels[value] || '';
4

5
  const stars = Array.from({ length: 5 }, (_, index) =>
6
    `<span class="rating-star ${index < value ? 'active' : ''}">${starSvg}</span>`
7
  ).join('');
8

9
  td.innerHTML = `
10
    <div style="display: flex; align-items: center; gap: 8px;">
11
      <span>${stars}</span>
12
      <span style="font-size: 0.9em; color: #666;">${label}</span>
13
    </div>
14
  `;
15
})

Custom Star Colors

Change colors by overriding CSS for specific columns:

1
/* Red/green rating */
2
.custom-rating .rating-star {
3
  color: #e5e7eb;
4
}
5

6
.custom-rating .rating-star.active {
7
  color: #22c55e;
8
}

Accessibility

Keyboard navigation:

Number keys (1-5): Direct rating selection
ArrowRight: Increase rating (max 5)
ArrowLeft: Decrease rating (min 1)
Enter: Confirm selection and finish editing
Escape: Cancel editing

What you learned

You built an SVG star rating cell using editorFactory and rendererFactory. You used Handsontable CSS tokens for theme-aware styling, closest() for reliable hover detection on inline SVG elements, and keyboard shortcuts for direct number-key and arrow-key selection.

Next steps

Star Rating (React) - The same concept using React’s EditorComponent and react-star-rating-component.
Star Rating Editor (Angular) - The Angular version using HotCellEditorAdvancedComponent.
Feedback - Another no-library custom editor using editorFactory and CSS tokens.

Star Rating

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define the Star SVG

Add CSS Styling

Create the Renderer

Create the Validator

Editor - Initialize (`init`)

Editor - After Init Hook (`afterInit`)

Mouseover Event:

Mousedown Event:

Editor - Render Function (`render`)

Editor - Keyboard Shortcuts

Number Keys (1-5):

Arrow Keys:

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Enhancements

Show Numeric Value

Custom Star Count

Text Labels

Custom Star Colors

Accessibility

What you learned

Next steps

Star Rating

Overview

What You’ll Build

Prerequisites

Import Dependencies

Define the Star SVG

Add CSS Styling

Create the Renderer

Create the Validator

Editor - Initialize (init)

Editor - After Init Hook (afterInit)

Mouseover Event:

Mousedown Event:

Editor - Render Function (render)

Editor - Keyboard Shortcuts

Number Keys (1-5):

Arrow Keys:

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Enhancements

Show Numeric Value

Custom Star Count

Text Labels

Custom Star Colors

Accessibility

What you learned

Next steps

Editor - Initialize (`init`)

Editor - After Init Hook (`afterInit`)

Editor - Render Function (`render`)