Columns

The Columns columns is a layout field, it can be used to create a better fields layout and can contain one or more fields or layout components like Group, Array, Tabs or Steps.

Fields are defined in fields key like below

Example


{
  "component": "columns",
  "name": "field_1",
  "columns": [
    {
      "name": "one",
      "size": 1
    },
    {
      "name": "two",
      "size": 1
    }
  ],
  "fields": {
    "one": [
      {
        "component": "input-text",
        "label": "Field 1",
        "name": "field_1",
        "react-rsuite5": {
          "fullWidth": true
        }
      }
    ],
    "two": [
      {
        "component": "rate",
        "label": "Field 2",
        "name": "field_2",
        "count": 5,
        "fractions": 1,
        "react-rsuite5": {
          "max": 5
        }
      }
    ]
  }
}

LetsForm DSL

The above example can also be defined with LetsForm DSL


<LfColumns
  name="field_column"
>
  <LfColumn>
    <LfField
      component="input-text"
      label="Field 1"
      name="field_1"
      fullWidth={true}
    />
  </LfColumn>
  <LfColumn>
    <LfField
      component="rate"
      label="Field 2"
      name="field_2"
      count={5}
      fractions={1}
      max={5}
    />
  </LfColumn>
</LfColumns>

Reference

Property	Type	Description
component	string	= "columns"
name	string	The name of the field and the key of the JSON
columns	[column]	Array of objects that defines the columns.
hidden	boolean	Hides the layout component and all components inside it
className	string	CSS class name to assign to the field container
fields	Object	Object, each keys (name of column) is an array of fields for the column

Properties for column object

Property	Type	Description
name	string	Name or id of the column, the same name must be present as a key in the fields property
alignment	string	Vertical alignment of the fields of the column. Values: "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset".
size	number	Flex-like size of the column (a column with size 2 will occupy twice the space of a column with size 1)
hidden	boolean	Hide the column. Default: false