Example of Editing in React Pivot Table Component


This sample demonstrates CRUD operations performed over the raw items of any value cell in a pivot table. Different types of cell editing options are provided to make editing simpler.

More Details...


In the sample, the raw items of any value cell can be viewed in a drill-through dialog by double-clicking the cell. CRUD operations can be performed by double-clicking the cells or using toolbar options. The following CRUD operations can be performed through toolbar operations for normal and batch edits:

  • Add - To add new record, click Add in the toolbar.
  • Edit - To edit record, double click a cell.
  • Delete - To delete a record, click Delete in the toolbar after selected a row.
  • Update,Cancel - You can save or discard changes by clicking Update or Cancel in the toolbar, respectively.

This CRUD operations can be configured in a pivot table using editSettings in code behind. There are also different modes to manipulate the data source.

The available modes are:

  • Normal - Editing by row.
  • Batch - Editing individual cells and bulk updating.
  • Dialog - Editing by row with a dialog option.
  • Command Columns - An additional column appends to the data grid with icons to perform CRUD operations. Editing using cell double-click is restricted here.

More information on the editing can be found in this documentation section.