JavaScript Data Grid Star Rating

JavaScript Data GridStar Rating Cell Type - Step-by-Step Guide (React)

On this page

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

Complete Example

Prerequisites

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)

Step 1: Import Dependencies

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

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)

Step 2: Create the Editor Component

Create a React component that uses EditorComponent with the render prop pattern.

export const RatingEditor = () => {
  return (
    <EditorComponent<number>>
      {({ value, setValue, finishEditing }) => (
        <div className="rating-editor">
          <StarRatingComponent
            name="rating"
            value={Number(value) || 0}
            onStarHover={(nextValue: number) => setValue(nextValue)}
            onStarClick={(nextValue: number) => {
              setValue(nextValue);
              finishEditing();
            }}
          />
        </div>
      )}
    </EditorComponent>
  );
};

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

Step 3: Add a Custom Renderer for View Mode

Use a React component as the cell renderer so stars are shown when not editing.

const RatingCellRenderer = ({ value }: { value: unknown }) => (
  <div className="rating-cell">
    <StarRatingComponent
      name="rating-cell"
      value={Number(value) || 0}
      editing={false}
    />
  </div>
);

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

Step 4: Add a Validator (Optional)

Validate that the rating is within an allowed range (e.g., 0–100):

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

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

Step 5: Add Styling

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

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

.rating-editor {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box !important;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
    var(--ht-cell-editor-border-color, #1a42e8),
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
    var(--ht-cell-editor-shadow-color, transparent);
  background-color: var(--ht-cell-editor-background-color, #ffffff);
  padding: var(--ht-cell-vertical-padding, 4px)
    var(--ht-cell-horizontal-padding, 8px);
  font-family: var(--ht-font-family, inherit);
  font-size: var(--ht-font-size, 14px);
  line-height: var(--ht-line-height, 1.5);
}

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

Step 6: Prepare Sample Data

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

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

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

Step 7: Use in Handsontable

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

const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colHeaders={["Product", "Category", "Rating", "Reviews", "Price"]}
      autoRowSize={true}
      rowHeaders={true}
      height="auto"
      width="100%"
      autoWrapRow={true}
      headerClassName="htLeft"
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn data="product" type="text" width={240} />
      <HotColumn data="category" type="text" width={120} />
      <HotColumn
        data="rating"
        width={150}
        editor={RatingEditor}
        renderer={RatingCellRenderer}
        validator={ratingValidator}
      />
      <HotColumn data="reviews" type="numeric" width={80} />
      <HotColumn data="price" type="numeric" width={80} />
    </HotTable>
  );
};

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

  1. Initial Render: RatingCellRenderer displays stars for the current rating (e.g., 3 filled stars).
  2. User Double-Clicks or Enter: Editor opens.
  3. Editor Opens: EditorComponent shows the star picker in the cell.
  4. Star Rating Display: Stars show current value; empty stars show remaining.
  5. User Interaction:
    • Hover over stars → onStarHover updates preview via setValue
    • Click a star → onStarClick saves value and calls finishEditing()
  6. Validation: ratingValidator runs (e.g., value must be 0–100).
  7. Save: Numeric value is saved to the cell.
  8. Editor Closes: RatingCellRenderer shows the updated stars in view mode.

Enhancements

1. Custom Star Count

Change the number of stars (e.g., 10-point scale):

<StarRatingComponent
  name="rating"
  starCount={10}
  value={Number(value) || 0}
  onStarHover={(nextValue) => setValue(nextValue)}
  onStarClick={(nextValue) => {
    setValue(nextValue);
    finishEditing();
  }}
/>

2. Custom Star Colors

Customize the appearance:

<StarRatingComponent
  name="rating"
  value={Number(value) || 0}
  starColor="#ffd700"
  emptyStarColor="#e0e0e0"
  onStarHover={(nextValue) => setValue(nextValue)}
  onStarClick={(nextValue) => {
    setValue(nextValue);
    finishEditing();
  }}
/>

3. 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:

import { rendererFactory } from 'handsontable/renderers';

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

// Use in HotColumn
<HotColumn
  data="rating"
  width={150}
  editor={RatingEditor}
  renderer={starRenderer}
/>

4. Read Config from Cell Properties (Advanced)

Use onPrepare for per-column configuration (e.g., star count):

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

  const onPrepare = (_row, _column, _prop, _TD, _originalValue, cellProperties) => {
    if (cellProperties.starCount != null) {
      setStarCount(cellProperties.starCount);
    }
  };

  return (
    <div className="rating-editor">
      <EditorComponent<number> onPrepare={onPrepare}>
        {({ value, setValue, finishEditing }) => (
          <StarRatingComponent
            name="rating"
            starCount={starCount}
            value={Number(value) || 0}
            onStarHover={(nextValue) => setValue(nextValue)}
            onStarClick={(nextValue) => {
              setValue(nextValue);
              finishEditing();
            }}
          />
        )}
      </EditorComponent>
    </div>
  );
};

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

5. Handle Empty Values

Ensure the component handles undefined or null:

value={Number(value) || 0}

This displays empty stars when the cell has no value.

Accessibility

The StarRatingComponent uses radio inputs. Enhance with ARIA:

<StarRatingComponent
  name="rating"
  value={Number(value) || 0}
  onStarHover={(nextValue) => setValue(nextValue)}
  onStarClick={(nextValue) => {
    setValue(nextValue);
    finishEditing();
  }}
  aria-label="Select rating"
/>

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

  1. Lightweight library: react-star-rating-component is small and focused
  2. React Virtual DOM: Efficient updates only when value changes
  3. Simple callbacks: onStarHover and onStarClick are straightforward
  4. No unnecessary re-renders: Editor unmounts when closed

TypeScript Support

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

<EditorComponent<number>>
  {({ value, setValue, finishEditing }) => {
    // TypeScript knows value is number | undefined
    // TypeScript knows setValue accepts number
    return (
      <StarRatingComponent
        name="rating"
        value={Number(value) || 0}
        onStarHover={(nextValue: number) => setValue(nextValue)}
        onStarClick={(nextValue: number) => {
          setValue(nextValue);
          finishEditing();
        }}
      />
    );
  }}
</EditorComponent>

Best Practices

  1. Coerce value to number - Use Number(value) || 0 since cell values may be strings.
  2. 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.
  3. Call finishEditing() on click - Star click confirms the selection and closes the editor.
  4. Use onStarHover for preview - Improves UX by showing the selection before commit.
  5. Use a custom renderer - RatingCellRenderer with editing={false} shows stars in view mode and keeps the UI consistent.
  6. 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!