RE: GridField Dynamic Column

Keshav Dadhich — Tue, 07 Jan 2025 09:20:56 GMT

Hi Dinesh,

I've made some updates to your code to dynamically group the data into columns based on a configurable number of columns (e.g., 2, 4, or 6). These changes should help render the grid as you need.

Here’s the updated code.

a!localVariables(
  local!data: {
    {lookupId: 1, displayLabel: "dove"},
    {lookupId: 2, displayLabel: "download"},
    {lookupId: 3, displayLabel: "drafting-compass"},
    {lookupId: 4, displayLabel: "dragon"},
    {lookupId: 5, displayLabel: "draw-polygon"},
    {lookupId: 6, displayLabel: "drum"},
    {lookupId: 7, displayLabel: "drum-steelpan"},
    {lookupId: 8, displayLabel: "drumstick-bite"},
    {lookupId: 9, displayLabel: "dumbbell"}
  },
  local!noOfCol: 3,
  local!groupedData: a!forEach(
    items: enumerate(
      ceiling(count(local!data) / local!noOfCol)
    ),
    expression: reduce(
      a!update,
      a!map(),
      merge(
        a!forEach(items: enumerate(local!noOfCol),expression: concat("item",fv!index)),
        index(
          local!data,
          enumerate(local!noOfCol) + (((fv!index - 1) * local!noOfCol) + 1),
          null
        )
      )
    )
  ),
  a!gridField(
    label: "Icons",
    labelPosition: "COLLAPSED",
    data: local!groupedData,
    columns: a!forEach(
      items: enumerate(local!noOfCol),
      expression: a!gridColumn(
        label: concat("Col ",fv!index),
        value: a!richTextDisplayField(
          label: "Lookup Icons",
          labelPosition: "COLLAPSED",
          value: a!richTextIcon(
            icon: index(
              index(fv!row,concat("item",fv!index),null),
              "displayLabel",
              null
            ),
            size: "MEDIUM"
          )
        ),
        align: "CENTER"
      )
    ),
    spacing: "DENSE",
    borderStyle: "STANDARD",
    shadeAlternateRows: false
  )
)

Let me know whether my understanding is correct!