Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to add/remove columns and rows dynamically?

Ravi asked on May 13, 2019

Hi Team,
I’m a Premium licensed user.
We’re in need of adding/removing both columns and rows dynamically in pivot grid ?

  • Should input-data for these columns/rows at runtime.
  • This newly created columns should also apply pivot functionalities like format, filters etc.,
  • Also, to enable edit-mode for the existing columns/rows. 
    How can we achieve this?. Please guide via an fiddle sample.

1 answer

Vera Didenko Flexmonster May 13, 2019

Hello, Ravi,
Thank you for writing to us.
The described functionality can be achieved in the following way:
1. Adding a new field (column)
A new field can be added via the getReport() and setReport() API calls:

// 1. Get new column name:
var columnName = "New Data";

// 2. Get new column name data type:
var columnType = "string";

// 3. Get the current report object:
var report = pivot.getReport();

// 4. Get the data object from the report:
var currentData =;

// 5. Add the new column to the meta object of currentData:
(currentData[0])[columnName] = {"type": columnType};

// 6. Update the report: = currentData;


2. Adding new record (row)
A new record can be added via the updateData() API call:

var dataForUpdate = [{
"Category": "Cars",
"Price": 51844,
"RowId": 4
flexmonster.updateData({data: dataForUpdate}, {partial: true});

An important remark is that the newly created columns will apply pivot functionalities like format, filters, etc. by default.
3. Enabling edit-mode for columns/rows
This can be achieved by setting the editing parameter in the options object to true:

options: {
editing: true

This way data can be edited in the drill-through pop-up window and in flat form for CSV, OCSV, and JSON data sources.
The user will be able to double-click the cell and enter a new value into it.
We have prepared a JSFiddle example for illustration.
Please let us know if everything works and if you have any questions.
We are looking forward to hearing from you.
Best Regards,

Please login or Register to Submit Answer