Grid:
Grid is an element used to render tables with columns and rows by the @uteamjs/react <Grid> element.
   - Grid:
    props:
        <properties>: <properties values>
        ....
        ....
         
      col:
        - <column label>
        - label: <column label>
          id: <column id>
          <ag-grid properties>: <properties values>
          ....
          ....
      row:
        - <row1col1 value>, <row1col2 value>, <row1col3 value>, ...
        - <row2col1 value>, <row2col2 value>, <row2col3 value>, ...
          ....

props:

#
Properties for <Grid> element.

col:

#
List of column items with the following properties:
<column label>
Label displayed on column heading.
label
Column label displayed on the column heading. It is only used if a simple <column label> is not specified
id
Unique column id. Generated automatically using the label as reference
<ag-grid properties>
Properties supported by ag-grid.

row:

#
Initial data sets are specified under row in this format:
        - <row1col1 value>, <row1col2 value>, <row1col3 value>, ...
        - <row2col1 value>, <row2col2 value>, <row2col3 value>, ...
          ....

Example

#
   - Grid:
      col:
        - label: Order No.
          filter: agTextColumnFilter

        - Order Date
        - Order Value

      row:
        - MO20200100123, 26 Jul 2024, 210
        - MO20210200012, 11 Aug 2024, 350
        - MO20210500031, 6 Feb 2026, 480
The above YAML code will generate the following table.

The line filter: agTextColumnFilter, generates a filter in the first column as shown below..

Visit example.u.team/yamlgrid to try out the live examples.