React Data Grid Feedback

React Data GridFeedback Cell Type - Step-by-Step Guide (React)

On this page

Overview

This guide shows how to create a feedback editor cell using emoji buttons (👍, 👎, 🤷) with React's EditorComponent. The example uses a feature-roadmap table with a Feedback column; the editor supports quick selection, keyboard navigation (Arrow keys, Tab), and per-column configuration via external CSS.

Difficulty: Beginner Time: ~15 minutes Libraries: None

What You'll Build

A cell that:

  • Displays emoji feedback buttons (👍, 👎, 🤷) when editing
  • Shows the selected emoji when viewing
  • Supports keyboard navigation (Arrow Left/Right and Tab to cycle options)
  • Provides click-to-select and closes the editor on choice
  • Uses React's EditorComponent with render prop and external CSS (e.g. feedback-editor class)
  • Reads per-column options from cellProperties.config in onPrepare

Complete Example

    Prerequisites

    npm install @handsontable/react-wrapper

    What you need:

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

    Step 1: Import Dependencies

    import { useState, useEffect, useCallback, ComponentProps } from 'react';
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

registerAllModules();

    What we're importing:

    • EditorComponent - React component for creating custom editors
    • HotTable and HotColumn - React wrapper components
    • React hooks for state management
    • Handsontable styles

    Step 2: Create the Editor Component

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

    type EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;

const FeedbackEditor = () => {
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);

  return (
    <EditorComponent<string>>
      {({ value, setValue, finishEditing }) => (
        <div className="editor">
          {config.map((item) => (
            <button
              key={item}
              className={`button ${value === item ? 'active' : ''}`}
              onClick={() => {
                setValue(item);
                finishEditing();
              }}
            >
              {item}
            </button>
          ))}
        </div>
      )}
    </EditorComponent>
  );
};

    What's happening:

    1. EditorComponent wraps your editor UI
    2. The children prop is a function that receives editor state
    3. value - Current editor value
    4. setValue - Function to update the value
    5. finishEditing - Function to save and close the editor
    6. Render buttons for each option in the config
    7. Highlight the active button based on current value

    Key concepts:

    • Render prop pattern: EditorComponent uses a function as children
    • State management: value and setValue are provided by EditorComponent
    • React components: Use standard React patterns (JSX, className, onClick)

    Step 3: Add Styling

    Style the editor container and buttons using CSS or inline styles.

    const FeedbackEditor = () => {
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);

  return (
    <EditorComponent<string>>
      {({ value, setValue, finishEditing }) => (
        <>
          <style>{`
            .editor {
              box-sizing: border-box;
              display: flex;
              gap: 3px;
              padding: 3px;
              background: rgb(238, 238, 238);
              border: 1px solid rgb(204, 204, 204);
              border-radius: 4px;
              height: 100%;
              width: 100%;
            }
            .button.active {
              background: #007bff;
              color: white;
            }
            .button:hover {
              background: #f0f0f0;
            }
            .button {
              background: #fff;
              color: black;
              border: none;
              padding: 0;
              margin: 0;
              height: 100%;
              width: 100%;
              font-size: 16px;
              font-weight: bold;
              text-align: center;
              cursor: pointer;
            }
          `}</style>
          <div className="editor">
            {config.map((item, _index, _array) => (
              <button
                key={item}
                className={`button ${value === item ? 'active' : ''}`}
                onClick={() => {
                  setValue(item);
                  finishEditing();
                }}
                style={{
                  width: `${100 / _array.length}%`
                }}
              >
                {item}
              </button>
            ))}
          </div>
        </>
      )}
    </EditorComponent>
  );
};

    What's happening:

    • Container uses flexbox for horizontal button layout
    • Buttons dynamically size based on config length
    • Active button has blue background
    • Hover effects for better UX

    Key styling:

    • display: flex - Horizontal button layout
    • gap: 3px - Space between buttons
    • width: ${100 / _array.length}% - Dynamic button width
    • .active class - Highlights selected button

    Step 4: Read Config from Cell Properties

    Use onPrepare to read per-column configuration.

    const FeedbackEditor = () => {
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);

  const onPrepare: EditorComponentProps['onPrepare'] = (
    _row,
    _column,
    _prop,
    _TD,
    _originalValue,
    cellProperties
  ) => {
    // Read config from column definition
    if (cellProperties.config) {
      setConfig(cellProperties.config as string[]);
    }
  };

  return (
    <EditorComponent<string> onPrepare={onPrepare}>
      {({ value, setValue, finishEditing }) => (
        // ... editor UI
      )}
    </EditorComponent>
  );
};

    What's happening:

    • onPrepare is called before the editor opens
    • cellProperties contains column-specific configuration
    • Read config from cellProperties.config
    • Update state to reflect column-specific options

    Why this matters:

    • Different columns can have different options
    • One editor component, multiple configurations
    • Dynamic options based on column settings

    Step 5: Add Keyboard Shortcuts

    Add keyboard navigation using the shortcuts prop.

    const FeedbackEditor = () => {
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);

  const getNextValue = useCallback((value: string) => {
    const index = config.indexOf(value);
    return index === config.length - 1 ? config[0] : config[index + 1];
  }, [config]);

  const getPrevValue = useCallback((value: string) => {
    const index = config.indexOf(value);
    return index === 0 ? config[config.length - 1] : config[index - 1];
  }, [config]);

  useEffect(() => {
    setShortcuts([
      {
        keys: [['ArrowRight'], ['Tab']],
        callback: ({ value, setValue }, _event) => {
          setValue(getNextValue(value));
          return false; // Prevent default Tab behavior
        }
      },
      {
        keys: [['ArrowLeft']],
        callback: ({ value, setValue }, _event) => {
          setValue(getPrevValue(value));
        }
      }
    ]);
  }, [config, getNextValue, getPrevValue]);

  return (
    <EditorComponent<string> shortcuts={shortcuts}>
      {({ value, setValue, finishEditing }) => (
        // ... editor UI
      )}
    </EditorComponent>
  );
};

    What's happening:

    • ArrowRight/Tab: Move to next option (wraps to first if at end)
    • ArrowLeft: Move to previous option (wraps to last if at start)
    • callback receives { value, setValue, finishEditing } as first parameter
    • Return false to prevent default behavior (e.g., Tab moving to next cell)

    Keyboard navigation benefits:

    • Fast selection without mouse
    • Accessible for keyboard-only users
    • Intuitive left/right navigation
    • Tab cycles through options instead of moving cells

    Step 6: Complete Editor Component

    Put it all together:

    type EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;

const FeedbackEditor = () => {
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);

  const onPrepare: EditorComponentProps['onPrepare'] = (
    _row,
    _column,
    _prop,
    _TD,
    _originalValue,
    cellProperties
  ) => {
    if (cellProperties.config) {
      setConfig(cellProperties.config as string[]);
    }
  };

  const getNextValue = useCallback((value: string) => {
    const index = config.indexOf(value);
    return index === config.length - 1 ? config[0] : config[index + 1];
  }, [config]);

  const getPrevValue = useCallback((value: string) => {
    const index = config.indexOf(value);
    return index === 0 ? config[config.length - 1] : config[index - 1];
  }, [config]);

  useEffect(() => {
    setShortcuts([
      {
        keys: [['ArrowRight'], ['Tab']],
        callback: ({ value, setValue }, _event) => {
          setValue(getNextValue(value));
          return false;
        }
      },
      {
        keys: [['ArrowLeft']],
        callback: ({ value, setValue }, _event) => {
          setValue(getPrevValue(value));
        }
      }
    ]);
  }, [config, getNextValue, getPrevValue]);

  return (
    <EditorComponent<string> onPrepare={onPrepare} shortcuts={shortcuts}>
      {({ value, setValue, finishEditing }) => (
        <>
          <style>{`
            .editor {
              box-sizing: border-box;
              display: flex;
              gap: 3px;
              padding: 3px;
              background: rgb(238, 238, 238);
              border: 1px solid rgb(204, 204, 204);
              border-radius: 4px;
              height: 100%;
              width: 100%;
            }
            .button.active:hover,
            .button.active {
              background: #007bff;
              color: white;
            }
            .button:hover {
              background: #f0f0f0;
            }
            .button {
              background: #fff;
              color: black;
              border: none;
              padding: 0;
              margin: 0;
              height: 100%;
              width: 100%;
              font-size: 16px;
              font-weight: bold;
              text-align: center;
              cursor: pointer;
            }
          `}</style>
          <div className="editor">
            {config.map((item, _index, _array) => (
              <button
                key={item}
                className={`button ${value === item ? 'active' : ''}`}
                onClick={() => {
                  setValue(item);
                  finishEditing();
                }}
                style={{
                  width: `${100 / _array.length}%`
                }}
              >
                {item}
              </button>
            ))}
          </div>
        </>
      )}
    </EditorComponent>
  );
};

    What's happening:

    • State management: config and shortcuts managed with React hooks
    • onPrepare: Reads column-specific config
    • shortcuts: Keyboard navigation handlers
    • Render prop: Renders buttons based on config
    • Styling: CSS-in-JS for editor appearance

    Step 7: Use in Handsontable

    Use the editor component in your HotTable:

    const ExampleComponent = () => {
  return (
    <HotTable
      autoRowSize={true}
      rowHeaders={true}
      autoWrapRow={true}
      licenseKey="non-commercial-and-evaluation"
      height="auto"
      data={data}
      colHeaders={true}
    >
      <HotColumn
        width={250}
        editor={FeedbackEditor}
        config={['👍', '👎', '🤷']}
        data="feedback"
        title="Feedback"
      />
      <HotColumn
        width={250}
        editor={FeedbackEditor}
        config={['1', '2', '3', '4', '5']}
        data="stars"
        title="Rating (1-5)"
      />
    </HotTable>
  );
};

    What's happening:

    • editor={FeedbackEditor} - Assigns the editor component to the column
    • config={['👍', '👎', '🤷']} - Column-specific options
    • Same editor component, different configurations per column

    Key features:

    • Reusable editor component
    • Per-column configuration
    • Type-safe with TypeScript

    How It Works - Complete Flow

    1. Initial Render: Cell displays the emoji value (👍, 👎, or 🤷)
    2. User Double-Clicks or Enter: Editor opens, onPrepare reads column config
    3. Editor Opens: EditorComponent positions container over cell
    4. Button Display: All options visible, current value highlighted
    5. User Interaction:
      • Click a button → setValue(item) and finishEditing() called
      • Press ArrowLeft/Right → Shortcut callback updates value
      • Press Tab → Cycles through options (prevents default cell navigation)
    6. Visual Feedback: Selected button highlighted in blue
    7. User Confirms: Press Enter, click button, or click away
    8. Save: Value saved to cell
    9. Editor Closes: Cell shows selected emoji

    Enhancements

    1. Custom Renderer with Styling

    Add a custom renderer to style the emoji display:

    import { rendererFactory } from 'handsontable/renderers';

const cellDefinition = {
  renderer: rendererFactory(({ td, value }) => {
    td.innerHTML = `
      <div style="text-align: center; font-size: 1.5em; padding: 4px;">
        ${value || '🤷'}
      </div>
    `;
  })
};

// Use in HotColumn
<HotColumn
  editor={FeedbackEditor}
  renderer={cellDefinition.renderer}
  config={['👍', '👎', '🤷']}
  data="feedback"
/>

    What's happening:

    • Center-aligns the emoji
    • Increases font size for better visibility
    • Adds padding for spacing

    2. More Feedback Options

    Add more emoji options:

    <HotColumn
  editor={FeedbackEditor}
  config={['👍', '👎', '🤷', '❤️', '🔥', '⭐']}
  data="feedback"
/>

    The editor automatically adjusts button widths based on config length.

    3. Custom Button Styling

    Enhanced button appearance with CSS:

    <style>{`
  .button {
    padding: 8px;
    border: 2px solid #ddd;
    background: white;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
    transition: all 0.2s;
  }
  .button.active {
    border-color: #007bff;
    background: #007bff;
    color: white;
  }
  .button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
`}</style>

    4. Dynamic Config from Cell Properties

    The onPrepare hook already handles this! Just pass different configs:

    <HotColumn
  editor={FeedbackEditor}
  config={['👍', '👎', '❤️', '🔥']}
  data="feedback"
/>

    5. Tooltip on Hover

    Add tooltips to buttons:

    {config.map((item) => {
  const tooltips: Record<string, string> = {
    '👍': 'Positive feedback',
    '👎': 'Negative feedback',
    '🤷': 'Neutral feedback'
  };

  return (
    <button
      key={item}
      className={`button ${value === item ? 'active' : ''}`}
      onClick={() => {
        setValue(item);
        finishEditing();
      }}
      title={tooltips[item] || ''}
    >
      {item}
    </button>
  );
})}

    6. Text Labels Instead of Emojis

    Use text buttons for clarity:

    <HotColumn
  editor={FeedbackEditor}
  config={['Positive', 'Negative', 'Neutral']}
  data="feedback"
/>

    The editor works with any string values, not just emojis.

    7. Using External CSS File

    Move styles to a separate CSS file:

    /* feedback-editor.css */
.editor {
  box-sizing: border-box;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgb(238, 238, 238);
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

.button.active {
  background: #007bff;
  color: white;
}

.button:hover {
  background: #f0f0f0;
}

.button {
  background: #fff;
  color: black;
  border: none;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

    import './feedback-editor.css';

const FeedbackEditor = () => {
  // ... component code without <style> tag
};

    Accessibility

    React buttons are inherently accessible, but you can enhance them:

    {config.map((item, index) => (
  <button
    key={item}
    className={`button ${value === item ? 'active' : ''}`}
    onClick={() => {
      setValue(item);
      finishEditing();
    }}
    aria-label={`${item} feedback option`}
    aria-pressed={value === item}
    tabIndex={value === item ? 0 : -1}
  >
    {item}
  </button>
))}

    Keyboard navigation:

    • Tab: Navigate to editor (focuses active button)
    • Arrow Left/Right: Cycle through options (via shortcuts)
    • Enter: Select current option and finish editing
    • Escape: Cancel editing
    • Click: Direct selection

    ARIA attributes:

    • aria-label: Describes each button
    • aria-pressed: Indicates selected state
    • tabIndex: Controls keyboard focus order

    Performance Considerations

    Why This Is Fast

    1. React Virtual DOM: Efficient updates only when value changes
    2. No External Libraries: Zero overhead beyond React
    3. Efficient Re-renders: Only re-renders when config or value changes
    4. Native Events: Browser-optimized click handlers

    React Hooks Optimization

    The useCallback and useEffect hooks ensure shortcuts are only recreated when config changes:

    const getNextValue = useCallback((value: string) => {
  const index = config.indexOf(value);
  return index === config.length - 1 ? config[0] : config[index + 1];
}, [config]); // Only recreate if config changes

useEffect(() => {
  setShortcuts([...]);
}, [config, getNextValue, getPrevValue]); // Only update when dependencies change

    TypeScript Support

    EditorComponent is fully typed. You can specify the value type:

    <EditorComponent<string>>
  {({ value, setValue, finishEditing }) => {
    // TypeScript knows value is string | undefined
    // TypeScript knows setValue accepts string
    return (
      // ... editor UI
    );
  }}
</EditorComponent>

    For number-based feedback:

    <EditorComponent<number>>
  {({ value, setValue, finishEditing }) => {
    // TypeScript knows value is number | undefined
    return (
      // ... editor UI
    );
  }}
</EditorComponent>

    Best Practices

    1. Use onPrepare for per-cell configuration - Access cellProperties to read custom options
    2. Handle keyboard events properly - Use shortcuts for navigation
    3. Call finishEditing() appropriately - When user confirms changes (Enter, blur, button click)
    4. Keep render prop function simple - Extract complex logic into separate components or hooks
    5. Use useCallback for helper functions - Prevents unnecessary re-renders
    6. Update shortcuts in useEffect - Ensures shortcuts match current config

    Congratulations! You've created a simple feedback editor with emoji buttons using React's EditorComponent, perfect for quick feedback selection in your data grid!