Glide Data Grid
  • 👋Welcome to Glide Data Grid
  • 🚀Extended QuickStart Guide
    • ✏️Editing Data
    • 🖱️Working with selections
    • 🔨Grid Columns
    • 📎Copy and paste support
  • 📒FAQ
  • 📚API
    • DataEditor
      • Required Props
      • Important Props
      • Row Markers
      • Editing
      • Input Interaction
      • Selection Handling
      • Custom Cells
      • Drag and Drop
      • Search
      • Styling
    • DataEditorCore
    • Cells
      • BaseGridCell
      • TextCell
      • BooleanCell
      • NumberCell
      • UriCell
      • ProtectedCell
      • RowIDCell
      • LoadingCell
      • ImageCell
      • MarkdownCell
      • BubbleCell
      • DrilldownCell
    • Common Types
    • DataEditorRef
  • Guides
    • Implementing Custom Cells
Powered by GitBook
On this page

Was this helpful?

  1. Extended QuickStart Guide

Editing Data

Editing data is handled via callbacks. Taking the getting started example as a starting point, the getContent callback can be modified to allow editing.

const getCellContent = React.useCallback((cell: Item): GridCell => {
    const [col, row] = cell;
    const dataRow = data[row];
    const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
    const d = dataRow[indexes[col]];
    return {
        kind: GridCellKind.Text,
        allowOverlay: true,
        readonly: false,
        displayData: d,
        data: d,
    };
}, []);

💡 Where your data comes from does not matter. The getCellContent callback is a data fetcher. This is a fundamental difference from other libraries that expect you to pass data in a format they expect.

allowOverlay has been set to true. This allows the overlay to come up. For explanatory purposes the readonly field is being set to false. This is the default value, setting it to true would allow the overlay to come up but not allow editing.

Implementing the onCellEdited callback allows responding to cell edit events. Edit events pass back a mutated version of the original GridCell returned from getContent.

const onCellEdited = React.useCallback((cell: Item, newValue: EditableGridCell) => {
    if (newValue.kind !== GridCellKind.Text) {
        // we only have text cells, might as well just die here.
        return;
    }

    const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
    const [col, row] = cell;
    const key = indexes[col];
    data[row][key] = newValue.data;
}, []);
PreviousExtended QuickStart GuideNextWorking with selections

Last updated 1 year ago

Was this helpful?

🚀
✏️
The editor now works