Star Rating

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import StarRatingComponent from 'react-star-rating-component';
4

5
registerAllModules();
6

7
/* start:skip-in-preview */
8
export const data = [
9
  { product: 'Dashboard Pro', category: 'Analytics', rating: 5, reviews: 342, price: 49 },
10
  { product: 'Form Builder', category: 'Tools', rating: 4, reviews: 218, price: 29 },
11
  { product: 'Chart Engine', category: 'Analytics', rating: 3, reviews: 156, price: 39 },
12
  { product: 'Auth Module', category: 'Security', rating: 5, reviews: 89, price: 19 },
13
  { product: 'File Manager', category: 'Storage', rating: 2, reviews: 64, price: 15 },
14
  { product: 'Email Service', category: 'Communication', rating: 4, reviews: 275, price: 25 },
15
  { product: 'Search Index', category: 'Tools', rating: 1, reviews: 31, price: 35 },
16
  { product: 'Cache Layer', category: 'Infra', rating: 4, reviews: 112, price: 20 },
17
];
18
/* end:skip-in-preview */
19

20
const RatingCellRenderer = ({ value }) => (
21
  <div className="rating-cell">
22
    <StarRatingComponent
23
      name="rating-cell"
24
      value={Number(value) || 0}
25
      editing={false}
26
    />
27
  </div>
28
);
29

30
const ratingValidator = (value, callback) => {
31
  value = parseInt(value);
32
  callback(value >= 0 && value <= 100);
33
};
34

35
export const RatingEditor = () => {
36
  return (
37
    <EditorComponent>
38
      {({ value, setValue, finishEditing }) => (
39
        <div className="rating-editor">
40
          <StarRatingComponent
41
            name="rating"
42
            value={Number(value) || 0}
43
            onStarHover={(nextValue) => setValue(nextValue)}
44
            onStarClick={(nextValue) => {
45
              setValue(nextValue);
46
              finishEditing();
47
            }}
48
          />
49
        </div>
50
      )}
51
    </EditorComponent>
52
  );
53
};
54

55
const ExampleComponent = () => {
56
  return (
57
    <HotTable
58
      data={data}
59
      colHeaders={['Product', 'Category', 'Rating', 'Reviews', 'Price']}
60
      autoRowSize={true}
61
      rowHeaders={true}
62
      height="auto"
63
      width="100%"
64
      autoWrapRow={true}
65
      headerClassName="htLeft"
66
      licenseKey="non-commercial-and-evaluation"
67
    >
68
      <HotColumn data="product" type="text" width={200} />
69
      <HotColumn data="category" type="text" width={120} />
70
      <HotColumn
71
        data="rating"
72
        width={150}
73
        editor={RatingEditor}
74
        renderer={RatingCellRenderer}
75
        validator={ratingValidator}
76
      />
77
      <HotColumn data="reviews" type="numeric" width={80} />
78
      <HotColumn data="price" type="numeric" width={80} />
79
    </HotTable>
80
  );
81
};
82

83
export default ExampleComponent;

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import StarRatingComponent from 'react-star-rating-component';
4

5
registerAllModules();
6

7
/* start:skip-in-preview */
8

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

20
/* end:skip-in-preview */
21

22
const RatingCellRenderer = ({ value }: { value: unknown }) => (
23
  <div className="rating-cell">
24
    <StarRatingComponent
25
      name="rating-cell"
26
      value={Number(value) || 0}
27
      editing={false}
28
    />
29
  </div>
30
);
31

32
const ratingValidator = (value: string | number, callback: (valid: boolean) => void) => {
33
  const parsed = parseInt(String(value));
34
  callback(parsed >= 0 && parsed <= 100);
35
};
36

37
export const RatingEditor = () => {
38
  return (
39
    <EditorComponent<number>>
40
      {({ value, setValue, finishEditing }) => (
41
        <div className="rating-editor">
42
          <StarRatingComponent
43
            name="rating"
44
            value={Number(value) || 0}
45
            onStarHover={(nextValue: number) => setValue(nextValue)}
46
            onStarClick={(nextValue: number) => {
47
              setValue(nextValue);
48
              finishEditing();
49
            }}
50
          />
51
        </div>
52
      )}
53
    </EditorComponent>
54
  );
55
};
56

57
const ExampleComponent = () => {
58
  return (
59
    <HotTable
60
      data={data}
61
      colHeaders={["Product", "Category", "Rating", "Reviews", "Price"]}
62
      autoRowSize={true}
63
      rowHeaders={true}
64
      height="auto"
65
      width="100%"
66
      autoWrapRow={true}
67
      headerClassName="htLeft"
68
      licenseKey="non-commercial-and-evaluation"
69
    >
70
      <HotColumn data="product" type="text" width={240} />
71
      <HotColumn data="category" type="text" width={120} />
72
      <HotColumn
73
        data="rating"
74
        width={150}
75
        editor={RatingEditor}
76
        renderer={RatingCellRenderer}
77
        validator={ratingValidator}
78
      />
79
      <HotColumn data="reviews" type="numeric" width={80} />
80
      <HotColumn data="price" type="numeric" width={80} />
81
    </HotTable>
82
  );
83
};
84

85
export default ExampleComponent;

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

7
.rating-editor {
8
  display: flex;
9
  align-items: center;
10
  height: 100%;
11
  box-sizing: border-box !important;
12
  border: none;
13
  border-radius: 0;
14
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
15
    var(--ht-cell-editor-border-color, #1a42e8),
16
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
17
    var(--ht-cell-editor-shadow-color, transparent);
18
  background-color: var(--ht-cell-editor-background-color, #ffffff);
19
  padding: var(--ht-cell-vertical-padding, 4px)
20
    var(--ht-cell-horizontal-padding, 8px);
21
  font-family: var(--ht-font-family, inherit);
22
  font-size: var(--ht-font-size, 14px);
23
  line-height: var(--ht-line-height, 1.5);
24
}

Overview

This guide shows how to create a star rating editor cell using react-star-rating-component with React’s EditorComponent. Perfect for product reviews, feedback forms, or any scenario where users need to select a numeric rating (e.g., 1–5 stars).

Difficulty: Beginner Time: ~15 minutes Libraries: react-star-rating-component

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 (e.g., 0–100)
Provides click-to-select functionality
Works with React’s component-based architecture

Prerequisites

1
npm install @handsontable/react-wrapper react-star-rating-component

What you need:

React 16.8+ (hooks support)
@handsontable/react-wrapper package
react-star-rating-component package for the star rating UI
Basic React knowledge (hooks, JSX)

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

5
registerAllModules();
```
What we’re importing:
- EditorComponent - React component for creating custom editors
- HotTable and HotColumn - React wrapper components
- StarRatingComponent - Star rating UI from react-star-rating-component
- registerAllModules() - Registers Handsontable modules (required when using the wrapper)
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
          <StarRatingComponent
7
            name="rating"
8
            value={Number(value) || 0}
9
            onStarHover={(nextValue: number) => setValue(nextValue)}
10
            onStarClick={(nextValue: number) => {
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. onStarHover - Updates preview as user hovers over stars
6. onStarClick - Saves the selected rating and closes the editor
7. 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
    <StarRatingComponent
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 StarRatingComponent
- editing={false} keeps the stars non-interactive in view mode
- Use a unique name (e.g. "rating-cell") to avoid conflicts with the editor instance

Add a Validator (Optional)

Validate that the rating is within an allowed range (e.g., 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
.rating-cell {
2
  display: flex;
3
  align-items: center;
4
  margin: 3px 0 0 -1px;
5
}
6

7
.rating-editor {
8
  display: flex;
9
  align-items: center;
10
  height: 100%;
11
  box-sizing: border-box !important;
12
  border: none;
13
  border-radius: 0;
14
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
15
    var(--ht-cell-editor-border-color, #1a42e8),
16
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
17
    var(--ht-cell-editor-shadow-color, transparent);
18
  background-color: var(--ht-cell-editor-background-color, #ffffff);
19
  padding: var(--ht-cell-vertical-padding, 4px)
20
    var(--ht-cell-horizontal-padding, 8px);
21
  font-family: var(--ht-font-family, inherit);
22
  font-size: var(--ht-font-size, 14px);
23
  line-height: var(--ht-line-height, 1.5);
24
}

What’s happening:

.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 (e.g., 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 (e.g., 3 filled stars).
User Double-Clicks or Enter: Editor opens.
Editor Opens: EditorComponent shows the star picker in the cell.
Star Rating Display: Stars show current value; empty stars show remaining.
User Interaction:
- Hover over stars → onStarHover updates preview via setValue
- Click a star → onStarClick saves value and calls finishEditing()
Validation: ratingValidator runs (e.g., value must be 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 (e.g., 10-point scale):

1
<StarRatingComponent
2
  name="rating"
3
  starCount={10}
4
  value={Number(value) || 0}
5
  onStarHover={(nextValue) => setValue(nextValue)}
6
  onStarClick={(nextValue) => {
7
    setValue(nextValue);
8
    finishEditing();
9
  }}
10
/>

Custom Star Colors

Customize the appearance:

1
<StarRatingComponent
2
  name="rating"
3
  value={Number(value) || 0}
4
  starColor="#ffd700"
5
  emptyStarColor="#e0e0e0"
6
  onStarHover={(nextValue) => setValue(nextValue)}
7
  onStarClick={(nextValue) => {
8
    setValue(nextValue);
9
    finishEditing();
10
  }}
11
/>

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 (e.g., 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
          <StarRatingComponent
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 StarRatingComponent uses radio inputs. Enhance with ARIA:

1
<StarRatingComponent
2
  name="rating"
3
  value={Number(value) || 0}
4
  onStarHover={(nextValue) => setValue(nextValue)}
5
  onStarClick={(nextValue) => {
6
    setValue(nextValue);
7
    finishEditing();
8
  }}
9
  aria-label="Select rating"
10
/>

Keyboard navigation:

Tab: Navigate to editor
Arrow keys: Navigate between stars (if supported by library)
Enter/Space: Select star
Escape: Cancel editing

Performance Considerations

Why This Is Fast

Lightweight library: react-star-rating-component is small and focused
React Virtual DOM: Efficient updates only when value changes
Simple callbacks: onStarHover and onStarClick are straightforward
No unnecessary re-renders: 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
      <StarRatingComponent
7
        name="rating"
8
        value={Number(value) || 0}
9
        onStarHover={(nextValue: number) => setValue(nextValue)}
10
        onStarClick={(nextValue: number) => {
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 - Required by react-star-rating-component for radio inputs; use different names for editor and renderer (e.g. "rating" and "rating-cell") to avoid conflicts.
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 (e.g., 0–100 or 1–5) and give immediate feedback.

Congratulations! You’ve created a star rating editor using React’s EditorComponent and react-star-rating-component, perfect for rating selection in your data grid!

Star Rating

Overview

What You’ll Build

Prerequisites

Import Dependencies

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