@opencorestack/opengridx 0.1.6 → 0.1.7

package/docs/roadmap.md

@@ -0,0 +1,71 @@
+# OpenGridX Roadmap & Feature Status
+
+This document tracks the current status of features in `OpenGridX` and outlines the roadmap for future development.
+
+## ✅ Implemented Features
+
+### Core
+*   **Virtualization**: High-performance row and column virtualization for handling large datasets.
+*   **Sorting**: Client-side and server-side multi-column sorting.
+*   **Filtering**: Client-side filtering with support for various operators.
+*   **Pagination**: Client-side and server-side pagination with customizable page sizes.
+*   **Selection**: Row selection (single/multiple) with checkbox support.
+
+### Advanced UI
+*   **Advanced Filtering**: Client-side complex filter builder (AND/OR logic, recursive groups).
+*   **Column Pinning**: Pin columns to the left or right.
+*   **Row Pinning**: Pin rows to the top or bottom.
+*   **Column Reordering**: Drag-and-drop column reordering.
+*   **Column Resizing**: Interactive column resizing.
+*   **Detail Panels**: Expandable rows to show custom detail views.
+*   **Row Reordering**: Drag-and-drop row reordering.
+
+### Data Management
+*   **Editing**: Inline cell editing with value parsing/formatting.
+*   **Tree Data**: Hierarchical data display (Client-side).
+*   **Row Grouping**: Grouping rows by column values (Client-side).
+*   **Spanning**: Row and Column spanning (Cell merging).
+*   **Export**: CSV, JSON, Print, basic Excel (HTML-table). **Advanced Excel Export** via ExcelJS — real `.xlsx` with styled headers, typed cells (number/date/boolean), column widths, frozen rows, auto-filter, alternating row colors, aggregation totals, and multi-sheet workbooks.
+*   **Pivot Mode**: Cross-tabulation of data — group rows into columns dynamically with aggregation (Sum, Avg, Count, Min, Max).
+
+### Server-Side Integration
+*   **Server-Side Data Source**: Hook-based integration for server-side sorting, filtering, and pagination.
+*   **Infinite Scroll**: Automatically load more rows as the user scrolls (`paginationMode='infinite'`).
+*   **Server-Side Tree Data**: Lazy loading children nodes, partial hierarchy fetching support.
+*   **Server-Side Aggregation**: Sum, Avg, Count, Min, Max — computed server-side over the full dataset, with a sticky footer row and toolbar Σ panel.
+
+### CSS & Theming *(completed 2026-02-19)*
+*   **CSS Barrel File** (`lib/styles/opengridx.css`): Single entry point — variables → reset → components.
+*   **Consistent Naming Convention**: `--ogx-*` CSS variables, `ogx__` BEM class prefix.
+*   **Theming API**: `<DataGridThemeProvider theme={myTheme}>` component mapping a `GridTheme` object to `--ogx-*` CSS variables, with built-in light/dark/compact presets.
+*   **Production Build Optimisation**: Code-split demo reduces initial bundle by 98.6% via React.lazy + manualChunks.
+
+### Accessibility & Clipboard *(completed 2026-03-03)*
+*   **ARIA roles**: `role="grid"`, `role="row"`, `role="gridcell"`, `role="columnheader"` on correct elements.
+*   **ARIA attributes**: `aria-sort`, `aria-selected`, `aria-label`, `aria-expanded`, `aria-readonly`, `aria-haspopup` throughout.
+*   **Keyboard navigation**: Tab / Enter / Escape / Arrow keys / Home / End / PageUp / PageDown.
+*   **`aria-rowcount` and `aria-colcount`**: Accurate counts including system columns.
+*   **Clipboard**: Full TSV-formatted copy support (Ctrl+C / Cmd+C) for seamless integration with Excel/Google Sheets.
+
+### Advanced Excel Export *(completed 2026-03-03)*
+*   **`exportToExcelAdvanced`**: Real `.xlsx` via ExcelJS (lazy-loaded — zero bundle cost unless used).
+*   **Features**: Styled headers, typed cells, column widths from `colDef.width`, frozen header row, auto-filter dropdowns, alternating row colors, aggregation totals rows, multi-sheet workbooks, standalone summary sheet.
+*   **API**: `ExcelAdvancedExportOptions`, `ExcelSheetDefinition`, `ExcelColumnStyle` — all exported and documented.
+*   **Demo**: `AdvancedExcelExportDemo` in demo app (`Data Management` category).
+*   **Docs**: `docs/features/export-guide.md` fully updated with feature comparison table and all options.
+
+---
+
+## 📅 Upcoming Features
+
+### Advanced Data Features
+*   **Interactive Pivot Builder**: Drag-and-drop UI for users to dynamically create pivot tables.
+*   **Native PDF Reporting**: Automated PDF generation with customizable layouts.
+*   **Advanced Charts Integration**: Inline sparklines and trend visualization.
+
+### DX & Publishing
+*   **npm publish**: Finalize `package.json` metadata, `README.md`, and publish to npm registry.
+
+## ✅ Implemented Features (Recent)
+*   **Storybook / Docs site**: Interactive component documentation with source code viewer and categorized navigation (implemented via `demo` app).
+*   **Quickstart & Installation Guides**: Comprehensive onboarding documentation for developers.

package/lib/components/Cell/Cell.css

@@ -0,0 +1,119 @@
+.ogx__cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
+  border-right: 1px solid var(--ogx-grid-border-color);
+  font-size: var(--ogx-grid-cell-font-size);
+  color: var(--ogx-grid-row-text);
+  line-height: var(--ogx-grid-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  background-color: inherit; 
+}
+.ogx__cell:focus {
+  outline: none;
+}
+.ogx__cell--focused {
+  /* position tracked internally; ring only shows in keyboard mode (ogx--kb on container) */
+  z-index: 10;
+}
+/* Show ring when keyboard navigation is active */
+.ogx--kb .ogx__cell--focused {
+  outline: 2px solid var(--ogx-color-primary, #2563eb);
+  outline-offset: -2px;
+}
+.ogx__cell--editable {
+  cursor: text;
+}
+.ogx__cell--editing {
+  padding: 0;
+  overflow: visible;
+  z-index: 20;
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: -2px;
+  background-color: var(--ogx-grid-background);
+}
+.ogx__cell--align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+.ogx__cell--align-center {
+  justify-content: center;
+  text-align: center;
+}
+.ogx__cell--align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+.ogx__cell--pinned-left,
+.ogx__cell--pinned-right {
+  position: sticky;
+  z-index: 2; 
+  background: inherit; 
+  background-color: var(--ogx-grid-background); 
+}
+.ogx__cell--pinned-right {
+  border-left: 1px solid var(--ogx-grid-border-color);
+}
+.ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-left,
+.ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--pinned-right {
+  background-color: var(--ogx-grid-row-hover-background);
+}
+.ogx__row--selected .ogx__cell--pinned-left,
+.ogx__row--selected .ogx__cell--pinned-right {
+  background-color: var(--ogx-grid-row-selected-background);
+}
+.ogx:not(.ogx--row-spanning) .ogx__row--selected:hover .ogx__cell--pinned-left,
+.ogx:not(.ogx--row-spanning) .ogx__row--selected:hover .ogx__cell--pinned-right {
+  background-color: var(--ogx-grid-row-selected-hover-background);
+}
+.ogx__cell--pinned-left-last::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__cell--pinned-right-first::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__cell--hidden {
+  visibility: hidden;
+  border: none;
+  background: transparent;
+}
+.ogx__cell-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.ogx__cell--spanned {
+  background-color: var(--ogx-grid-background);
+  z-index: 10; 
+}
+.ogx__row--even .ogx__cell--spanned {
+  background-color: var(--ogx-grid-row-alternate-background, var(--ogx-grid-background));
+}
+.ogx:not(.ogx--row-spanning) .ogx__row:hover .ogx__cell--spanned {
+  background-color: var(--ogx-grid-row-hover-background);
+}
+.ogx__row--selected .ogx__cell--spanned {
+  background-color: var(--ogx-grid-row-selected-background);
+}
+.ogx:not(.ogx--row-spanning) .ogx__row--selected:hover .ogx__cell--spanned {
+  background-color: var(--ogx-grid-row-selected-hover-background);
+}

package/lib/components/Cell/Cell.tsx

@@ -0,0 +1,264 @@
+
+import React from 'react';
+import type { GridColDef, GridRowModel, GridPinnedPosition, GridCellParams } from '../../types';
+import type { CellColSpanInfo } from '../../hooks/features/useGridSpanning';
+
+import { GridEditInputCell } from './GridEditInputCell';
+
+export interface CellProps<R extends GridRowModel = GridRowModel> {
+    onCellClick?: (params: GridCellParams<R>) => void;
+    onCellEditStart?: (field: string, value: any) => void;
+    onCellValueChange?: (field: string, newValue: any) => void;
+    value: any;
+    row: R;
+    colDef: GridColDef<R>;
+    rowIndex: number;
+    colIndex: number;
+    isSelected?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    width?: number;
+    pinnedPosition?: GridPinnedPosition | null;
+    pinnedOffset?: number;
+
+    isFocused?: boolean;
+    isFocusVisible?: boolean;
+
+    isEditable?: boolean;
+    isEditing?: boolean;
+    onEditStart?: () => void;
+    onEditStop?: (cancel?: boolean) => void;
+    onValueChange?: (newValue: any) => void;
+
+    colSpanInfo?: CellColSpanInfo;
+    rowSpan?: number;
+    isHiddenByRowSpan?: boolean;
+}
+
+function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
+    const {
+        onCellClick,
+        onCellEditStart,
+        onCellValueChange,
+        value,
+        row,
+        colDef,
+        rowIndex,
+        colIndex,
+        isSelected,
+        onClick,
+        width,
+        pinnedPosition,
+        pinnedOffset,
+        isFocused,
+        isFocusVisible,
+        isEditable,
+        isEditing,
+        onEditStart,
+        onEditStop,
+        onValueChange,
+
+        colSpanInfo,
+        rowSpan: rowSpanProp,
+        isHiddenByRowSpan
+    } = props;
+
+    if (colSpanInfo?.spannedByColSpan) {
+
+        return null;
+    }
+
+    if (isHiddenByRowSpan) {
+
+        return (
+            <div
+                className="ogx__cell ogx__cell--hidden"
+                style={{ width: width ?? colDef.width ?? 100 }}
+                role="presentation"
+                data-field={colDef.field}
+                data-colindex={colIndex}
+            />
+        );
+    }
+
+    const handleClick = (e: React.MouseEvent) => {
+        if (onCellClick) {
+            e.stopPropagation();
+            onCellClick({
+                row,
+                field: colDef.field,
+                value,
+                colDef,
+                rowIndex,
+                colIndex
+            });
+        }
+        onClick?.(e);
+    };
+
+    const handleValueChange = React.useCallback((newValue: any) => {
+        if (onCellValueChange) {
+            onCellValueChange(colDef.field, newValue);
+        } else {
+            onValueChange?.(newValue);
+        }
+    }, [onCellValueChange, onValueChange, colDef.field]);
+
+    const handleDoubleClick = (e: React.MouseEvent) => {
+        if (isEditable && (onEditStart || onCellEditStart)) {
+            e.stopPropagation();
+            if (onCellEditStart) {
+                onCellEditStart(colDef.field, value);
+            } else {
+                onEditStart?.();
+            }
+        }
+    };
+
+    const formattedValue = React.useMemo(() => {
+        if (colDef.valueFormatter) {
+            return colDef.valueFormatter({
+                value,
+                row,
+                field: colDef.field
+            });
+        }
+
+        if (value === null || value === undefined) {
+            return '';
+        }
+
+        return String(value);
+    }, [value, row, colDef]);
+
+    // Render custom cell content OR Edit Content
+    const cellContent = React.useMemo(() => {
+        if (isEditing && (onCellValueChange || onValueChange) && onEditStop) {
+            if (colDef.renderEditCell) {
+                return colDef.renderEditCell({
+                    value,
+                    row,
+                    field: colDef.field,
+                    colDef: colDef as any,
+                    rowIndex,
+                    colIndex
+                });
+            }
+            return (
+                <GridEditInputCell
+                    value={value}
+                    row={row}
+                    field={colDef.field}
+                    colDef={colDef as any}
+                    rowIndex={rowIndex}
+                    colIndex={colIndex}
+                    onValueChange={handleValueChange}
+                    onCommit={() => onEditStop()}
+                    onCancel={() => onEditStop(true)}
+                />
+            );
+        }
+
+        if (colDef.renderCell) {
+            return colDef.renderCell({
+                value,
+                row,
+                field: colDef.field,
+                colDef: colDef as any,
+                rowIndex,
+                colIndex
+            });
+        }
+
+        return formattedValue;
+    }, [value, row, colDef, rowIndex, colIndex, formattedValue, isEditing, handleValueChange, onEditStop, onCellValueChange, onValueChange]);
+
+    const isPinned = pinnedPosition !== null && pinnedPosition !== undefined;
+
+    const resolvedCellClassName = React.useMemo(() => {
+        if (!colDef.cellClassName) return '';
+        if (typeof colDef.cellClassName === 'function') {
+            return colDef.cellClassName({ value, row, field: colDef.field, colDef: colDef as any, rowIndex, colIndex }) || '';
+        }
+        return colDef.cellClassName;
+    }, [colDef, value, row, rowIndex, colIndex]);
+
+    const classNames = [
+        'ogx__cell',
+        `ogx__cell--align-${colDef.align || 'left'}`,
+        isSelected && 'ogx__cell--selected',
+        isFocused && 'ogx__cell--focused',
+        (isFocused && isFocusVisible) && 'ogx__cell--focus-visible',
+        colDef.type && `ogx__cell--type-${colDef.type}`,
+        isPinned && 'ogx__cell--pinned',
+        isPinned && `ogx__cell--pinned-${pinnedPosition}`,
+        isEditing && 'ogx__cell--editing',
+        (rowSpanProp && rowSpanProp > 1) && 'ogx__cell--spanned',
+        resolvedCellClassName
+    ].filter(Boolean).join(' ');
+
+    const colSpan = colSpanInfo?.cellProps?.colSpan || 1;
+    const rowSpan = rowSpanProp || 1;
+    const cellWidth = colSpanInfo?.cellProps?.width ?? width ?? colDef.width ?? 100;
+
+    const style: React.CSSProperties = {
+        width: 'var(--width)',
+        '--width': typeof cellWidth === 'number' ? `${cellWidth}px` : cellWidth,
+        flexGrow: colDef.flex ?? 0,
+        flexShrink: 0,
+        flexBasis: colDef.flex ? 'auto' : 'auto',
+        boxSizing: 'border-box',
+        minWidth: colDef.minWidth,
+        maxWidth: colDef.maxWidth,
+        position: isPinned ? 'sticky' : undefined,
+        zIndex: colDef.zIndex ?? (isPinned ? 3 : undefined),
+        padding: isEditing ? 0 : undefined
+    } as React.CSSProperties;
+
+    if (rowSpan > 1) {
+        style.height = `calc(var(--height) * ${rowSpan} - var(--border-width, 1px))`;
+        style.zIndex = 10;
+        if (isPinned) {
+            style.zIndex = 40;
+        }
+    }
+
+    if (isPinned && pinnedOffset !== undefined) {
+        if (pinnedPosition === 'left') {
+            style.left = pinnedOffset;
+        } else {
+            style.right = pinnedOffset;
+        }
+    }
+
+    const cellRef = React.useRef<HTMLDivElement>(null);
+
+    React.useLayoutEffect(() => {
+        if (isFocused && cellRef.current) {
+            cellRef.current.focus({ preventScroll: true });
+        }
+    }, [isFocused]);
+
+    return (
+        <div
+            ref={cellRef}
+            className={classNames}
+            style={style}
+            onClick={handleClick}
+            onDoubleClick={handleDoubleClick}
+            role="gridcell"
+            aria-colindex={colIndex + 1}
+            aria-readonly={!isEditable || undefined}
+            tabIndex={-1}
+            data-field={colDef.field}
+            data-colindex={colIndex}
+            {...(colSpan > 1 ? { 'aria-colspan': colSpan } : {})}
+            {...(rowSpan > 1 ? { 'aria-rowspan': rowSpan } : {})}
+        >
+            <div className="ogx__cell-content">
+                {cellContent}
+            </div>
+        </div>
+    );
+}
+
+export const Cell = React.memo(CellImpl) as typeof CellImpl;

package/lib/components/Cell/GridEditInputCell.css

@@ -0,0 +1,62 @@
+/* ── Edit cell wrapper ───────────────────────────────────────────────── */
+.ogx__edit-cell {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0;
+}
+
+/* ── Shared input base ───────────────────────────────────────────────── */
+.ogx__edit-input,
+.ogx__edit-select {
+    width: 100%;
+    height: 100%;
+    padding: 0 10px;
+    border: none;
+    border-radius: 0;
+    font-family: var(--ogx-font-family, inherit);
+    font-size: var(--ogx-grid-cell-font-size, 14px);
+    color: var(--ogx-grid-row-text, #1e293b);
+    background: var(--ogx-grid-background, #fff);
+    box-sizing: border-box;
+    outline: none;
+}
+
+.ogx__edit-input:focus,
+.ogx__edit-select:focus {
+    outline: none;
+}
+
+/* ── Number input — hide spinners ────────────────────────────────────── */
+.ogx__edit-input--number::-webkit-inner-spin-button,
+.ogx__edit-input--number::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.ogx__edit-input--number { -moz-appearance: textfield; appearance: textfield; }
+
+/* ── Select ─────────────────────────────────────────────────────────── */
+.ogx__edit-select {
+    padding: 0 6px;
+    cursor: pointer;
+    -webkit-appearance: auto;
+    appearance: auto;
+}
+
+/* ── Boolean checkbox ────────────────────────────────────────────────── */
+.ogx__edit-boolean {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: 2px solid var(--ogx-color-primary, #2563eb);
+    outline-offset: -2px;
+}
+.ogx__edit-checkbox {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--ogx-color-primary, #2563eb);
+}

package/lib/components/Cell/GridEditInputCell.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'react';
+import type { GridRenderCellParams } from '../../types';
+
+export interface GridEditInputCellProps extends GridRenderCellParams {
+    onValueChange: (value: any) => void;
+    onCommit: () => void;
+    onCancel: () => void;
+}
+
+// ─── Text / String ────────────────────────────────────────────────────────────
+function TextEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    const [local, setLocal] = useState(String(value ?? ''));
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
+
+    return (
+        <input
+            ref={ref}
+            type="text"
+            className="ogx__edit-input"
+            value={local}
+            onChange={e => { setLocal(e.target.value); onValueChange(e.target.value); }}
+            onBlur={onCommit}
+            onKeyDown={e => {
+                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
+                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+            }}
+        />
+    );
+}
+
+// ─── Number ───────────────────────────────────────────────────────────────────
+function NumberEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    const [local, setLocal] = useState(value ?? '');
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
+
+    return (
+        <input
+            ref={ref}
+            type="number"
+            className="ogx__edit-input ogx__edit-input--number"
+            value={local}
+            onChange={e => {
+                const v = e.target.value === '' ? '' : Number(e.target.value);
+                setLocal(v);
+                onValueChange(v === '' ? null : v);
+            }}
+            onBlur={onCommit}
+            onKeyDown={e => {
+                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
+                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+            }}
+        />
+    );
+}
+
+// ─── Boolean ──────────────────────────────────────────────────────────────────
+function BooleanEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => { ref.current?.focus(); }, []);
+
+    const handleChange = () => {
+        const next = !value;
+        onValueChange(next);
+        // Commit immediately on toggle
+        setTimeout(onCommit, 0);
+    };
+
+    return (
+        <div className="ogx__edit-boolean">
+            <input
+                ref={ref}
+                type="checkbox"
+                className="ogx__edit-checkbox"
+                checked={!!value}
+                onChange={handleChange}
+                onKeyDown={e => {
+                    if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+                }}
+            />
+        </div>
+    );
+}
+
+// ─── SingleSelect / Enum ──────────────────────────────────────────────────────
+function SelectEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    const ref = useRef<HTMLSelectElement>(null);
+    useEffect(() => { ref.current?.focus(); }, []);
+
+    const options = colDef.valueOptions ?? [];
+
+    return (
+        <select
+            ref={ref}
+            className="ogx__edit-select"
+            value={value ?? ''}
+            onChange={e => { onValueChange(e.target.value); }}
+            onBlur={onCommit}
+            onKeyDown={e => {
+                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
+                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+            }}
+        >
+            {options.map(opt => {
+                const v = typeof opt === 'object' ? opt.value : opt;
+                const l = typeof opt === 'object' ? opt.label : String(opt);
+                return <option key={String(v)} value={String(v)}>{l}</option>;
+            })}
+        </select>
+    );
+}
+
+// ─── Date ─────────────────────────────────────────────────────────────────────
+function DateEditor({ value, onValueChange, onCommit, onCancel }: GridEditInputCellProps) {
+    const [local, setLocal] = useState(value ?? '');
+    const ref = useRef<HTMLInputElement>(null);
+    useEffect(() => { ref.current?.focus(); }, []);
+
+    return (
+        <input
+            ref={ref}
+            type="date"
+            className="ogx__edit-input"
+            value={local}
+            onChange={e => { setLocal(e.target.value); onValueChange(e.target.value); }}
+            onBlur={onCommit}
+            onKeyDown={e => {
+                if (e.key === 'Enter') { e.stopPropagation(); onCommit(); }
+                if (e.key === 'Escape') { e.stopPropagation(); onCancel(); }
+            }}
+        />
+    );
+}
+
+// ─── Router ───────────────────────────────────────────────────────────────────
+export function GridEditInputCell(props: GridEditInputCellProps) {
+    const { colDef } = props;
+
+    switch (colDef.type) {
+        case 'number':
+            return <div className="ogx__edit-cell"><NumberEditor {...props} /></div>;
+        case 'boolean':
+            return <div className="ogx__edit-cell"><BooleanEditor {...props} /></div>;
+        case 'singleSelect':
+            return <div className="ogx__edit-cell"><SelectEditor {...props} /></div>;
+        case 'date':
+            return <div className="ogx__edit-cell"><DateEditor {...props} /></div>;
+        default:
+            return <div className="ogx__edit-cell"><TextEditor {...props} /></div>;
+    }
+}