Star Rating

This tutorial shows you how to build a star rating cell in React using Handsontable’s EditorComponent, a custom renderer, and a local React component for the stars.

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import './example1.css';
4

5
registerAllModules();
6

7
function StarRating({ name, value, editing = true, onStarHover, onStarClick }) {
8
  return (
9
    <div className="star-rating" aria-label={`Rating: ${value} out of 5`}>
10
      {[1, 2, 3, 4, 5].map((star) => (
11
        <span
12
          key={`${name}-${star}`}
13
          className={star <= value ? 'star filled' : 'star'}
14
          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}
15
          onClick={editing ? () => onStarClick?.(star) : undefined}
16
        >
17
          ★
18
        </span>
19
      ))}
20
    </div>
21
  );
22
}
23

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

37
const RatingCellRenderer = ({ value }) => (
38
  <div className="rating-cell">
39
    <StarRating
40
      name="rating-cell"
41
      value={Number(value) || 0}
42
      editing={false}
43
    />
44
  </div>
45
);
46

47
const ratingValidator = (value, callback) => {
48
  value = parseInt(value);
49
  callback(value >= 0 && value <= 100);
50
};
51

52
export const RatingEditor = () => {
53
  return (
54
    <EditorComponent>
55
      {({ value, setValue, finishEditing }) => (
56
        <div className="rating-editor">
57
          <StarRating
58
            name="rating"
59
            value={Number(value) || 0}
60
            onStarHover={(nextValue) => setValue(nextValue)}
61
            onStarClick={(nextValue) => {
62
              setValue(nextValue);
63
              finishEditing();
64
            }}
65
          />
66
        </div>
67
      )}
68
    </EditorComponent>
69
  );
70
};
71

72
const ExampleComponent = () => {
73
  return (
74
    <HotTable
75
      data={data}
76
      colHeaders={['Product', 'Category', 'Rating', 'Reviews', 'Price']}
77
      autoRowSize={true}
78
      rowHeaders={true}
79
      height="auto"
80
      width="100%"
81
      autoWrapRow={true}
82
      headerClassName="htLeft"
83
      licenseKey="non-commercial-and-evaluation"
84
    >
85
      <HotColumn data="product" type="text" width={200} />
86
      <HotColumn data="category" type="text" width={120} />
87
      <HotColumn
88
        data="rating"
89
        width={150}
90
        editor={RatingEditor}
91
        renderer={RatingCellRenderer}
92
        validator={ratingValidator}
93
      />
94
      <HotColumn data="reviews" type="numeric" width={80} />
95
      <HotColumn data="price" type="numeric" width={80} />
96
    </HotTable>
97
  );
98
};
99

100
export default ExampleComponent;

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import './example1.css';
4

5
registerAllModules();
6

7
interface StarRatingProps {
8
  name: string;
9
  value: number;
10
  editing?: boolean;
11
  onStarHover?: (value: number) => void;
12
  onStarClick?: (value: number) => void;
13
}
14

15
function StarRating({ name, value, editing = true, onStarHover, onStarClick }: StarRatingProps) {
16
  return (
17
    <div className="star-rating" aria-label={`Rating: ${value} out of 5`}>
18
      {[1, 2, 3, 4, 5].map((star) => (
19
        <span
20
          key={`${name}-${star}`}
21
          className={star <= value ? 'star filled' : 'star'}
22
          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}
23
          onClick={editing ? () => onStarClick?.(star) : undefined}
24
        >
25
          ★
26
        </span>
27
      ))}
28
    </div>
29
  );
30
}
31

32
/* start:skip-in-preview */
33

34
export const data = [
35
  { product: "Dashboard Pro", category: "Analytics", rating: 5, reviews: 342, price: 49 },
36
  { product: "Form Builder", category: "Tools", rating: 4, reviews: 218, price: 29 },
37
  { product: "Chart Engine", category: "Analytics", rating: 3, reviews: 156, price: 39 },
38
  { product: "Auth Module", category: "Security", rating: 5, reviews: 89, price: 19 },
39
  { product: "File Manager", category: "Storage", rating: 2, reviews: 64, price: 15 },
40
  { product: "Email Service", category: "Communication", rating: 4, reviews: 275, price: 25 },
41
  { product: "Search Index", category: "Tools", rating: 1, reviews: 31, price: 35 },
42
  { product: "Cache Layer", category: "Infra", rating: 4, reviews: 112, price: 20 },
43
];
44

45
/* end:skip-in-preview */
46

47
const RatingCellRenderer = ({ value }: { value: unknown }) => (
48
  <div className="rating-cell">
49
    <StarRating
50
      name="rating-cell"
51
      value={Number(value) || 0}
52
      editing={false}
53
    />
54
  </div>
55
);
56

57
const ratingValidator = (value: string | number, callback: (valid: boolean) => void) => {
58
  const parsed = parseInt(String(value));
59
  callback(parsed >= 0 && parsed <= 100);
60
};
61

62
export const RatingEditor = () => {
63
  return (
64
    <EditorComponent<number>>
65
      {({ value, setValue, finishEditing }) => (
66
        <div className="rating-editor">
67
          <StarRating
68
            name="rating"
69
            value={Number(value) || 0}
70
            onStarHover={(nextValue) => setValue(nextValue)}
71
            onStarClick={(nextValue) => {
72
              setValue(nextValue);
73
              finishEditing();
74
            }}
75
          />
76
        </div>
77
      )}
78
    </EditorComponent>
79
  );
80
};
81

82
const ExampleComponent = () => {
83
  return (
84
    <HotTable
85
      data={data}
86
      colHeaders={["Product", "Category", "Rating", "Reviews", "Price"]}
87
      autoRowSize={true}
88
      rowHeaders={true}
89
      height="auto"
90
      width="100%"
91
      autoWrapRow={true}
92
      headerClassName="htLeft"
93
      licenseKey="non-commercial-and-evaluation"
94
    >
95
      <HotColumn data="product" type="text" width={240} />
96
      <HotColumn data="category" type="text" width={120} />
97
      <HotColumn
98
        data="rating"
99
        width={150}
100
        editor={RatingEditor}
101
        renderer={RatingCellRenderer}
102
        validator={ratingValidator}
103
      />
104
      <HotColumn data="reviews" type="numeric" width={80} />
105
      <HotColumn data="price" type="numeric" width={80} />
106
    </HotTable>
107
  );
108
};
109

110
export default ExampleComponent;

1
.star-rating {
2
  display: inline-flex;
3
  gap: 1px;
4
}
5

6
.star-rating .star {
7
  font-size: 18px;
8
  color: #d3d3d3;
9
  line-height: 1;
10
  cursor: default;
11
  user-select: none;
12
  transition: color 0.1s;
13
}
14

15
.rating-editor .star-rating .star {
16
  cursor: pointer;
17
}
18

19
.star-rating .star.filled {
20
  color: #ffb400;
21
}
22

23
.rating-cell {
24
  display: flex;
25
  align-items: center;
26
  margin: 3px 0 0 -1px;
27
}
28

29
.rating-editor {
30
  display: flex;
31
  align-items: center;
32
  height: 100%;
33
  box-sizing: border-box !important;
34
  border: none;
35
  border-radius: 0;
36
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
37
    var(--ht-cell-editor-border-color, #1a42e8),
38
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
39
    var(--ht-cell-editor-shadow-color, transparent);
40
  background-color: var(--ht-cell-editor-background-color, #ffffff);
41
  padding: var(--ht-cell-vertical-padding, 4px)
42
    var(--ht-cell-horizontal-padding, 8px);
43
  font-family: var(--ht-font-family, inherit);
44
  font-size: var(--ht-font-size, 14px);
45
  line-height: var(--ht-line-height, 1.5);
46
}

Overview

This guide shows how to create a star rating editor cell using React’s EditorComponent. Use this pattern for product reviews, feedback forms, or any scenario where users select a numeric rating, such as 1-5 stars.

Difficulty: Beginner Time: ~15 minutes Libraries: No external rating library.

What You’ll Build

A cell that:

Displays interactive star rating when editing
Shows stars in view mode via a custom React renderer
Supports hover preview before selection
Stores values as numbers (1-5)
Validates rating range, such as 0-100
Provides click-to-select functionality
Works with React’s component-based architecture

Prerequisites

1
npm install handsontable @handsontable/react-wrapper

What you need:

React 16.8+ (hooks support)
@handsontable/react-wrapper package
Basic React knowledge (hooks, JSX)

Import Dependencies
```
1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();
```
What we’re importing:
- EditorComponent - React component for creating custom editors
- HotTable and HotColumn - React wrapper components
- registerAllModules() - Registers Handsontable modules (required when using the wrapper)

Create the Star Rating Component

Create a local component that renders five stars and reports hover and click events.

1
interface StarRatingProps {
2
  name: string;
3
  value: number;
4
  editing?: boolean;
5
  onStarHover?: (value: number) => void;
6
  onStarClick?: (value: number) => void;
7
}
8

9
function StarRating({ name, value, editing = true, onStarHover, onStarClick }: StarRatingProps) {
10
  return (
11
    <div className="star-rating" aria-label={`Rating: ${value} out of 5`}>
12
      {[1, 2, 3, 4, 5].map((star) => (
13
        <span
14
          key={`${name}-${star}`}
15
          className={star <= value ? 'star filled' : 'star'}
16
          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}
17
          onClick={editing ? () => onStarClick?.(star) : undefined}
18
        >
19
          ★
20
        </span>
21
      ))}
22
    </div>
23
  );
24
}

What’s happening:

The name prop creates stable keys for each star.
The editing prop disables hover and click handlers in view mode.
onStarHover previews the value before the user commits it.
onStarClick commits the selected value.

Create the Editor Component

Create a React component that uses EditorComponent with the render prop pattern.
```
1
export const RatingEditor = () => {
2
  return (
3
    <EditorComponent<number>>
4
      {({ value, setValue, finishEditing }) => (
5
        <div className="rating-editor">
6
          <StarRating
7
            name="rating"
8
            value={Number(value) || 0}
9
            onStarHover={(nextValue) => setValue(nextValue)}
10
            onStarClick={(nextValue) => {
11
              setValue(nextValue);
12
              finishEditing();
13
            }}
14
          />
15
        </div>
16
      )}
17
    </EditorComponent>
18
  );
19
};
```
What’s happening:
1. EditorComponent wraps your editor UI; the children prop is a function that receives editor state.
2. value - Current cell value (numeric rating)
3. setValue - Function to update the value
4. finishEditing - Function to save and close the editor
5. StarRating - Renders the local star picker
6. onStarHover - Updates preview as the user hovers over stars
7. onStarClick - Saves the selected rating and closes the editor
8. The rating-editor div is inside the render prop so styling applies to the visible editor area.
Key concepts:
- Render prop pattern: EditorComponent uses a function as children
- Hover preview: onStarHover lets users preview before committing
- Click to confirm: onStarClick saves and closes the editor
Add a Custom Renderer for View Mode

Use a React component as the cell renderer so stars are shown when not editing.
```
1
const RatingCellRenderer = ({ value }: { value: unknown }) => (
2
  <div className="rating-cell">
3
    <StarRating
4
      name="rating-cell"
5
      value={Number(value) || 0}
6
      editing={false}
7
    />
8
  </div>
9
);
```
What’s happening:
- The renderer receives value and displays it with StarRating
- editing={false} keeps the stars non-interactive in view mode
- Use a unique name (for example, "rating-cell") to keep stable React keys for the renderer

Add a Validator (Optional)

Validate that the rating is within an allowed range, such as 0-100:

1
const ratingValidator = (value: string | number, callback: (valid: boolean) => void) => {
2
  const parsed = parseInt(String(value));
3
  callback(parsed >= 0 && parsed <= 100);
4
};

For a strict 1-5 star scale, use parsed >= 1 && parsed <= 5 instead.

Add Styling

Style the cell and editor so the star rating fits and matches the grid.

1
.star-rating {
2
  display: inline-flex;
3
  gap: 1px;
4
}
5

6
.star-rating .star {
7
  font-size: 18px;
8
  color: #d3d3d3;
9
  line-height: 1;
10
  cursor: default;
11
  user-select: none;
12
  transition: color 0.1s;
13
}
14

15
.rating-editor .star-rating .star {
16
  cursor: pointer;
17
}
18

19
.star-rating .star.filled {
20
  color: #ffb400;
21
}
22

23
.rating-cell {
24
  display: flex;
25
  align-items: center;
26
  margin: 3px 0 0 -1px;
27
}
28

29
.rating-editor {
30
  display: flex;
31
  align-items: center;
32
  height: 100%;
33
  box-sizing: border-box !important;
34
  border: none;
35
  border-radius: 0;
36
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
37
    var(--ht-cell-editor-border-color, #1a42e8),
38
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
39
    var(--ht-cell-editor-shadow-color, transparent);
40
  background-color: var(--ht-cell-editor-background-color, #ffffff);
41
  padding: var(--ht-cell-vertical-padding, 4px)
42
    var(--ht-cell-horizontal-padding, 8px);
43
  font-family: var(--ht-font-family, inherit);
44
  font-size: var(--ht-font-size, 14px);
45
  line-height: var(--ht-line-height, 1.5);
46
}

What’s happening:

.star-rating lays out the local star component
.star-rating .star.filled colors the selected stars
.rating-cell aligns the stars in the cell when not editing
.rating-editor uses Handsontable CSS variables for focus border, background, and padding so the editor matches the grid theme

Prepare Sample Data

Use data with a rating property (and any other columns you need). Example for a product table:

1
export const data = [
2
  { product: "Dashboard Pro", category: "Analytics", rating: 5, reviews: 342, price: 49 },
3
  { product: "Form Builder", category: "Tools", rating: 4, reviews: 218, price: 29 },
4
  { product: "Chart Engine", category: "Analytics", rating: 3, reviews: 156, price: 39 },
5
  { product: "Auth Module", category: "Security", rating: 5, reviews: 89, price: 19 },
6
  { product: "File Manager", category: "Storage", rating: 2, reviews: 64, price: 15 },
7
  { product: "Email Service", category: "Communication", rating: 4, reviews: 275, price: 25 },
8
  { product: "Search Index", category: "Tools", rating: 1, reviews: 31, price: 35 },
9
  { product: "Cache Layer", category: "Infra", rating: 4, reviews: 112, price: 20 },
10
];

What’s happening:

Each row has product, category, rating, reviews, and price
The rating column uses the star editor and renderer; other columns can be text or numeric

Use in Handsontable

Wire the editor, renderer, and validator to the rating column:

1
const ExampleComponent = () => {
2
  return (
3
    <HotTable
4
      data={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
      licenseKey="non-commercial-and-evaluation"
13
    >
14
      <HotColumn data="product" type="text" width={240} />
15
      <HotColumn data="category" type="text" width={120} />
16
      <HotColumn
17
        data="rating"
18
        width={150}
19
        editor={RatingEditor}
20
        renderer={RatingCellRenderer}
21
        validator={ratingValidator}
22
      />
23
      <HotColumn data="reviews" type="numeric" width={80} />
24
      <HotColumn data="price" type="numeric" width={80} />
25
    </HotTable>
26
  );
27
};

What’s happening:

editor={RatingEditor} - Star rating editor when the cell is active
renderer={RatingCellRenderer} - Shows stars in view mode
validator={ratingValidator} - Ensures rating is within the allowed range, such as 0-100
data="rating" - Binds to the rating property in each row

Key features:

Stars in both view and edit mode
Values stored as numbers (1-5)
Validation and type-safe setup with TypeScript

How It Works - Complete Flow

Initial Render: RatingCellRenderer displays stars for the current rating, such as 3 filled stars.
User Double-Clicks or Enter: Editor opens.
Editor Opens: EditorComponent shows the star picker in the cell.
Star Rating Display: StarRating shows the current value; empty stars show the remaining scale.
User Interaction:
- Hover over stars → onStarHover updates preview via setValue
- Click a star → onStarClick saves value and calls finishEditing()
Validation: ratingValidator runs, such as checking that the value is 0-100.
Save: Numeric value is saved to the cell.
Editor Closes: RatingCellRenderer shows the updated stars in view mode.

Enhancements

Custom Star Count

Change the number of stars, such as a 10-point scale:

1
interface StarRatingProps {
2
  name: string;
3
  value: number;
4
  starCount?: number;
5
  editing?: boolean;
6
  onStarHover?: (value: number) => void;
7
  onStarClick?: (value: number) => void;
8
}
9

10
function StarRating({ name, value, starCount = 5, editing = true, onStarHover, onStarClick }: StarRatingProps) {
11
  const stars = Array.from({ length: starCount }, (_, index) => index + 1);
12

13
  return (
14
    <div className="star-rating" aria-label={`Rating: ${value} out of ${starCount}`}>
15
      {stars.map((star) => (
16
        <span
17
          key={`${name}-${star}`}
18
          className={star <= value ? 'star filled' : 'star'}
19
          onMouseEnter={editing ? () => onStarHover?.(star) : undefined}
20
          onClick={editing ? () => onStarClick?.(star) : undefined}
21
        >
22
          ★
23
        </span>
24
      ))}
25
    </div>
26
  );
27
}

Custom Star Colors

Customize the appearance:

1
.star-rating .star {
2
  color: #e0e0e0;
3
}
4

5
.star-rating .star.filled {
6
  color: #ffd700;
7
}

Alternative: HTML-Based Renderer

The main example uses a React component (RatingCellRenderer) for view mode. If you prefer a non-React renderer, you can use rendererFactory:

1
import { rendererFactory } from 'handsontable/renderers';
2

3
const starRenderer = rendererFactory(({ td, value }) => {
4
  const rating = Number(value) || 0;
5
  const stars = '★'.repeat(rating) + '☆'.repeat(5 - rating);
6
  td.innerHTML = `
7
    <div style="
8
      font-size: 1.2em;
9
      color: #ffb400;
10
      letter-spacing: 2px;
11
    ">${stars}</div>
12
  `;
13
});
14

15
// Use in HotColumn
16
<HotColumn
17
  data="rating"
18
  width={150}
19
  editor={RatingEditor}
20
  renderer={starRenderer}
21
/>

Read Config from Cell Properties (Advanced)

Use onPrepare for per-column configuration, such as star count:

1
const RatingEditor = () => {
2
  const [starCount, setStarCount] = useState(5);
3

4
  const onPrepare = (_row, _column, _prop, _TD, _originalValue, cellProperties) => {
5
    if (cellProperties.starCount != null) {
6
      setStarCount(cellProperties.starCount);
7
    }
8
  };
9

10
  return (
11
    <div className="rating-editor">
12
      <EditorComponent<number> onPrepare={onPrepare}>
13
        {({ value, setValue, finishEditing }) => (
14
          <StarRating
15
            name="rating"
16
            starCount={starCount}
17
            value={Number(value) || 0}
18
            onStarHover={(nextValue) => setValue(nextValue)}
19
            onStarClick={(nextValue) => {
20
              setValue(nextValue);
21
              finishEditing();
22
            }}
23
          />
24
        )}
25
      </EditorComponent>
26
    </div>
27
  );
28
};
29

30
// Use with different star counts per column
31
<HotColumn editor={RatingEditor} starCount={5} data="rating" title="Rating (1-5)" />
32
<HotColumn editor={RatingEditor} starCount={10} data="score" title="Score (1-10)" />

Handle Empty Values

Ensure the component handles undefined or null:
```
1
value={Number(value) || 0}
```
This displays empty stars when the cell has no value.

Accessibility

The local StarRating component sets aria-label on the rating container. To add keyboard support, render each star as a button:

1
<button
2
  type="button"
3
  className={star <= value ? 'star filled' : 'star'}
4
  onMouseEnter={editing ? () => onStarHover?.(star) : undefined}
5
  onClick={editing ? () => onStarClick?.(star) : undefined}
6
  aria-label={`Set rating to ${star}`}
7
>
8
  ★
9
</button>

Keyboard navigation:

Tab: Navigate to editor
Arrow keys: Navigate between stars after you add key handlers
Enter/Space: Select star
Escape: Cancel editing

Performance Considerations

Why This Is Fast

No external rating package: The star UI uses a small local component.
React Virtual DOM: Updates happen only when the value changes.
Focused callbacks: onStarHover and onStarClick each do one thing.
No unnecessary re-renders: The editor unmounts when closed.

TypeScript Support

EditorComponent is fully typed. Specify the value type for numeric ratings:

1
<EditorComponent<number>>
2
  {({ value, setValue, finishEditing }) => {
3
    // TypeScript knows value is number | undefined
4
    // TypeScript knows setValue accepts number
5
    return (
6
      <StarRating
7
        name="rating"
8
        value={Number(value) || 0}
9
        onStarHover={(nextValue) => setValue(nextValue)}
10
        onStarClick={(nextValue) => {
11
          setValue(nextValue);
12
          finishEditing();
13
        }}
14
      />
15
    );
16
  }}
17
</EditorComponent>

Best Practices

Coerce value to number - Use Number(value) || 0 since cell values may be strings.
Provide name prop - Use different names for editor and renderer, such as "rating" and "rating-cell", to keep stable React keys.
Call finishEditing() on click - Star click confirms the selection and closes the editor.
Use onStarHover for preview - Improves UX by showing the selection before commit.
Use a custom renderer - RatingCellRenderer with editing={false} shows stars in view mode and keeps the UI consistent.
Add a validator - Use ratingValidator to restrict values, such as 0-100 or 1-5, and give immediate feedback.

What you learned

You created a local StarRating component and integrated it as a Handsontable cell editor in React. You used EditorComponent with the render prop pattern to manage hover preview and click-to-confirm selection, and a React component renderer to display stars in view mode.

Next steps

Star Rating (JavaScript) - The same concept using editorFactory and SVG stars with no external library.
Star Rating Editor (Angular) - The Angular version using HotCellEditorAdvancedComponent.
Colorful Picker (React) - Another React EditorComponent example for color selection.

Star Rating

Overview

What You’ll Build

Prerequisites

Import Dependencies

Create the Star Rating Component

Create the Editor Component

Add a Custom Renderer for View Mode

Add a Validator (Optional)

Add Styling

Prepare Sample Data

Use in Handsontable

How It Works - Complete Flow

Enhancements

Custom Star Count

Custom Star Colors

Alternative: HTML-Based Renderer

Read Config from Cell Properties (Advanced)

Handle Empty Values

Accessibility

Performance Considerations

Why This Is Fast

TypeScript Support

Best Practices

What you learned

Next steps