Matrix

Generates

A Matrix component

Unique Property Panel Tabs

• Matrix

  • Provides a UI to add Rows & Columns
  • Bulk Add Label/Values

• Style

  • Toggle style
  • Solid color
  • Fill Style
  • Animation

Example Definition

let options: BuilderOptions = {
  formDefinition: [
    {
      rows: [
        {
          rowID: 0,
          fields: [
            {
              componentName: "Matrix",
              htmlAttributes: {
                required: false,
                class: "",
                id: "Matrix-rdsGZCQi",
                name: "Matrix-rdsGZCQi",
                value: {},
              },
              labelAttributes: {
                label: "Matrix",
              },
              customAttribute: {
                rows: {
                  choices: [
                    {
                      label: "Snickers",
                      value: "0",
                    },
                    {
                      label: "Butterfingers",
                      value: "1",
                    },
                    {
                      label: "Baby Ruth",
                      value: "2",
                    },
                  ],
                },
                columns: {
                  choices: [
                    {
                      label: "Like",
                      value: "0",
                    },
                    {
                      label: "Indifferent",
                      value: "1",
                    },
                    {
                      label: "Dislike",
                      value: "2",
                    },
                  ],
                },
              },
              choiceConfiguration: {
                animation: "smooth",
                shape: "round",
              },
            },
          ],
        },
      ],
      tab: {
        tabOrder: 1,
        label: "Default",
        id: "default",
      },
    },
  ],
};

Demo