Skip to main content

Premium Inputs

OGrid's premium inputs are optional cell editor components distributed in a separate package. They are fully tree-shakeable and have zero bundle impact when not installed -- your grid stays lightweight until you explicitly opt in.

Double-click a cell — each column uses a different premium editor
Live

Installation​

npm install @alaarab/ogrid-react-inputs

Works with any OGrid React UI package (Radix, Fluent).

All premium input packages depend only on @alaarab/ogrid-core and their framework peer dependency. They share calendar utilities via @alaarab/ogrid-inputs (headless, zero deps).

DatePickerEditor​

A full calendar-based date picker that renders as a popover cell editor. Features include:

  • Month/year navigation with previous/next buttons
  • Direct text input (YYYY-MM-DD format) with live calendar sync
  • "Today" and "Clear" quick actions
  • Keyboard support: Enter to commit, Escape to cancel
  • Auto-commit on date selection

Usage​

import { OGrid } from '@alaarab/ogrid-react-radix';
import { DatePickerEditor } from '@alaarab/ogrid-react-inputs';

const columns = [
  { columnId: 'name', name: 'Name' },
  {
    columnId: 'dueDate',
    name: 'Due Date',
    editable: true,
    cellEditor: DatePickerEditor,
    cellEditorPopup: true,
  },
];

function App() {
  return (
    <OGrid
      columns={columns}
      data={data}
      getRowId={(item) => item.id}
      editable
    />
  );
}
Switching UI libraries

DatePickerEditor works with all React UI packages. Just change the OGrid import:

  • Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
  • Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent'

RatingEditor​

A star-based rating editor (1-5 stars) that renders as a popover cell editor. Features include:

  • Click stars to set rating (1-5)
  • Half-star support via allowHalf option
  • Hover preview shows rating before selection
  • Clear button to remove rating
  • Auto-commit on star click

Usage​

import { RatingEditor } from '@alaarab/ogrid-react-inputs';

const columns = [
  {
    columnId: 'rating',
    name: 'Rating',
    editable: true,
    cellEditor: RatingEditor,
    cellEditorPopup: true,
    cellEditorParams: { maxStars: 5, allowHalf: false },
  },
];

ColorPickerEditor​

A color swatch grid with hex input that renders as a popover cell editor. Features include:

  • Preset color swatch grid for quick selection
  • Hex color text input for custom values
  • allowCustom option to enable/disable arbitrary hex input
  • Configurable color palette via colors param
  • Auto-commit on swatch click or hex input Enter

Usage​

import { ColorPickerEditor } from '@alaarab/ogrid-react-inputs';

const columns = [
  {
    columnId: 'color',
    name: 'Color',
    editable: true,
    cellEditor: ColorPickerEditor,
    cellEditorPopup: true,
    cellEditorParams: { allowCustom: true },
  },
];

SliderEditor​

A range slider for numeric values that renders as a popover cell editor. Features include:

  • Drag handle to set value within a range
  • Direct numeric input for precise values
  • Configurable min, max, and step parameters
  • Real-time value preview while dragging
  • Auto-commit on drag end or input Enter

Usage​

import { SliderEditor } from '@alaarab/ogrid-react-inputs';

const columns = [
  {
    columnId: 'progress',
    name: 'Progress',
    editable: true,
    cellEditor: SliderEditor,
    cellEditorPopup: true,
    cellEditorParams: { min: 0, max: 100, step: 1 },
  },
];

TagsEditor​

A multi-value tag/chip editor with suggestions that renders as a popover cell editor. Features include:

  • Add tags by typing and pressing Enter or selecting from suggestions
  • Remove tags by clicking the X button or pressing Backspace
  • Searchable suggestion dropdown with fuzzy matching
  • allowCreate option to permit or restrict free-form tags
  • Comma-separated string storage for easy data handling
  • Auto-commit on popover close

Usage​

import { TagsEditor } from '@alaarab/ogrid-react-inputs';

const columns = [
  {
    columnId: 'skills',
    name: 'Skills',
    editable: true,
    cellEditor: TagsEditor,
    cellEditorPopup: true,
    cellEditorParams: {
      suggestions: ['React', 'Angular', 'Vue', 'TypeScript', 'Python'],
      allowCreate: true,
    },
  },
];

Default vs Premium Editing​

OGrid includes built-in cell editors out of the box. The premium input packages extend these with richer, more visual editors:

Default (built-in)Premium (add-on packages)
PackageIncluded in all OGrid packages@alaarab/ogrid-react-inputs
EditorsText, Select, Rich Select, Checkbox, Date (inline)DatePicker, Rating, ColorPicker, Slider, Tags
Bundle costZero (built-in)Only added when you npm install the package

You can use both in the same grid -- for example, a text-based date input on one column and the calendar picker on another:

const columns = [
  // Default: inline text input for dates
  { columnId: 'startDate', name: 'Start', editable: true, cellEditor: 'date' },

  // Premium: calendar popover
  {
    columnId: 'endDate',
    name: 'End',
    editable: true,
    cellEditor: DatePickerEditor,
    cellEditorPopup: true,
  },
];

Theming​

All premium editors use OGrid CSS variables for consistent theming across light and dark modes. No additional CSS imports are required -- styles are fully inlined.

CSS VariablePurposeUsed byDefault
--ogrid-accentSelected/active highlight, action buttonsAll editors#0078d4
--ogrid-bgPopover backgroundAll editors#fff
--ogrid-fgText colorAll editors#242424
--ogrid-borderPopover border and dividersAll editorsrgba(0,0,0,0.12)
--ogrid-shadowDrop shadow on the popoverAll editors0 4px 16px rgba(0,0,0,0.15)
--ogrid-mutedSecondary text, placeholdersDatePicker, Tags#888
--ogrid-bg-hoverHovered item backgroundAll editors#f0f0f0
--ogrid-dangerRemove/clear button hoverTags, Rating#d13438

If your app already sets OGrid theme variables, all premium editors will inherit them automatically.

Future Inputs​

The premium input packages are structured to host additional editors over time. Planned inputs include:

  • PeoplePickerEditor -- search and select users with avatar display

Each new editor will follow the same pattern: import the component, assign it to cellEditor, and optionally set cellEditorPopup: true. The package remains tree-shakeable, so unused editors are excluded from your bundle.