Tabular format forms for clinical use

[BimalG]

Hello all,

I am trying to build a form in a tabular format with 4 columns, where the first column spans 2 rows. I am looking for some help is designing a form as follows for clinical purposes.

trauma-scf_form.pdf

[ashalugin]

Hi @BimalG,

You can do this using the Container component and some styles:

Example form:

{
  "version": "1",
  "tooltipType": "RsTooltip",
  "modalType": "RsModal",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "rsContainer1",
        "type": "RsContainer",
        "props": {},
        "css": {
          "any": {
            "object": {
              "flexDirection": "row"
            }
          }
        },
        "children": [
          {
            "key": "rsContainer2",
            "type": "RsContainer",
            "props": {},
            "css": {
              "any": {
                "object": {
                  "flexWrap": "wrap"
                }
              }
            },
            "children": [
              {
                "key": "rsInput1",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput2",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput3",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput4",
                "type": "RsInput",
                "props": {}
              }
            ]
          },
          {
            "key": "rsContainer3",
            "type": "RsContainer",
            "props": {},
            "css": {
              "any": {
                "object": {
                  "flexDirection": "row",
                  "flexWrap": "wrap"
                }
              }
            },
            "children": [
              {
                "key": "rsInput5",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput6",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput7",
                "type": "RsInput",
                "props": {}
              },
              {
                "key": "rsInput8",
                "type": "RsInput",
                "props": {}
              }
            ]
          }
        ]
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}