Order Grid component

                        

Survey.ComponentCollection.Instance.add({
    name: "ordergrid",
    title: "Order Grid",
    questionJSON: {
        type: "matrixdynamic",
        defaultRowValue: { qty: 1 },
        rowCount: 1,
        addRowText: "Add Item",
        columns: [
        {
            name: "id",
            title: "Id",
            cellType: "expression",
            expression: "{rowIndex}",
        },
        {
            name: "item",
            title: "Item Name",
            cellType: "dropdown",
            isRequired: true,
            totalType: "count",
            totalFormat: "Items count: {0}",
        },
        {
            name: "price",
            title: "Price",
            cellType: "expression",
            displayStyle: "currency",
        },
        {
            name: "qty",
            title: "Qty",
            cellType: "text",
            inputType: "number",
        },
        {
            name: "total",
            title: "Total",
            cellType: "expression",
            displayStyle: "currency",
            expression: "{row.qty} * {row.price}",
            totalType: "sum",
            totalDisplayStyle: "currency",
        },
        ],
    },
    onInit() {
        //Add "price" property to base "itemvalue" class
        //It will allow us to set our order items into dropdown choices
        //without loosing the price property value
        Survey.Serializer.addProperty("itemvalue", {
          name: "price:number",
          visible: false
        });
        //Create a new class derived from Survey.ItemValue
        //It hides text, visibleIf and enableIf properties
        //and makes price property visible for "ordergriditem" class only.
        Survey.Serializer.addClass(
          "ordergriditem",
          [
              {
              name: "price:number",
              default: 0,
              visible: true,
              isSerializable: true,
              },
              { name: "text", visible: false },
              { name: "visibleIf", visible: false },
              { name: "enableIf", visible: false },
          ],
          //We create a standard Survey.ItemValue instance.
          //The third parameter said that the actual type is "ordergriditem"
          //SurveyJS will use properties definition from "ordergriditem" class
          //and it will define "price" property for every new instance
          function () {
              return new Survey.ItemValue(null, null, "ordergriditem");
          },
          "itemvalue"
        );
        //Add orderItems properties. It is an array of ordergriditem elements
        Survey.Serializer.addProperty("ordergrid", {
          name: "orderItems:ordergriditem[]",
          category: "general",
          visibleIndex: 3
        });
    },
    onCreated(question) {
        //The options parameter of this callback function is same as options property survey.onMatrixCellValueChanged event
        //We need to set price on changing the item
        question.contentQuestion.onCellValueChangedCallback = function (options) {
          //If cell in column 'item' is changed
          if (options.columnName == "item") {
              //get price question in this row
              var priceQuestion = options.row.getQuestionByColumnName("price");
              //get item question in this row
              var itemQuestion = options.row.getQuestionByColumnName("item");
              if (!!priceQuestion && !!itemQuestion) {
                //Set price to the price question value
                priceQuestion.value =
                    itemQuestion.selectedItem != null
                    ? itemQuestion.selectedItem.price
                    : 0;
              }
          }
        };
      //The options parameter of this callback function is same as options property survey.onMatrixCellCreated event
      //We need to set min/max properties for qty number question
      question.contentQuestion.onCellCreatedCallback = function (options) {
        if (options.columnName == "qty") {
            options.cellQuestion.min = 1;
            options.cellQuestion.max = 20;
        }
      };
    },
    onLoaded(question) {
        //Set choices to the 'item' column on first loading
        this.updateItemsColumn(question);
    },
    //Calls on property changed in component/root question
    onPropertyChanged(question, propertyName, newValue) {
      if (propertyName == "orderItems") {
        //Calls when orderItems array is changed:
        //new item is added or existing removed or elements order changed
        this.updateItemsColumn(question);
      }
    },
    //Calls when a property of ItemValue element is changed.
    onItemValuePropertyChanged(question, options) {
        //If the propertyName of the array is "orderItems"
        if (options.propertyName == "orderItems") {
          this.updateItemsColumn(question);
        }
    },
    //Set choices to the 'item' column
    updateItemsColumn(question) {
        question.contentQuestion.getColumnByName("item").choices =
        question.orderItems;
    },
});

const options = { questionTypes : ["text", "checkbox", "radiogroup", "dropdown"] };            
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
    elements: [
        {
            type: "ordergrid",
            name: "question1",
            orderItems: [
                {
                    value: "Steak",
                    price: 27,
                },
                {
                    value: "Salmon",
                    price: 22,
                },
                {
                    value: "Beer",
                    price: 5,
                }
            ]
        }
    ]
};
//Select the order table component
creator.selectedElement = creator.survey.getAllQuestions()[0];
//Show property grid
creator.rightContainerActiveItem("property-grid");
                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Order Grid component, Survey Creator Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
        <link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
        <script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <style>
            :root {
                --tab-min-height: 600px;
            }
        </style>
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
<div id="surveyContainer">
            <div id="creatorElement" style="height: 100vh;"></div>
</div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>