Dynamically Adjust Layout Based on null Values

I’m working on a JavaScript project where I need to dynamically adjust a layout configuration based on certain values being null. The layout consists of rows with items positioned either on the left or the right. When a value is null, the corresponding item should be removed and other items should shift up to fill the space, maintaining their left or right positions.

Default Layout Structure:

const defaultLayout = [
  [{
    label: 'Material Type:',
    key: item.materialType || 'N/A',
    position: 'left',
    multiline: false,
  }, {
    label: 'Project Location:',
    key: project.location.city || 'Unknown',
    position: 'right',
    multiline: false,
  }, ],
  [{
    label: 'Condition:',
    key: item.condition || 'Unspecified',
    position: 'left',
    multiline: false,
  }, {
    label: 'Availability Dates:',
    key: `From ${formatDate(item.availableFrom)} To ${formatDate(item.availableTo)}`,
    position: 'right',
    multiline: true,
    fixedY: 246,
  }, ],
  [{
    label: 'Dimensions:',
    key: item.dimensions || 'Standard',
    position: 'left',
    wrap: true,
    multiline: true,
  }, ],
  [{
    label: 'Product Description:',
    key: item.description || 'No description available.',
    position: 'left',
    wrap: true,
    multiline: true,
    maxLines: 2,
  }, ],
  [{
      label: 'Reusable Quantity:',
      key: item.reusableQuantity !== undefined ? `${item.reusableQuantity} units` : 'N/A',
      position: 'left',
      multiline: false,
    },
    {
      label: 'Unit Price (Excl. Tax):',
      key: item.unitPrice ? `$${item.unitPrice.toFixed(2)}` : 'Contact for price',
      position: 'right',
      multiline: false,
    },
  ],
  [{
    label: 'Minimum Order Quantity:',
    key: item.minOrderQty || '1',
    position: 'left',
    multiline: false,
  }, ],
];

Also, for example, lets say we have ‘material condition’ and a ‘dimension’ property that are null so the ‘description’ will end up at the ‘material’ position the ‘reusable quantity’ will be in the ‘state’ position and ‘minim order quantity’ will be in the same row as ‘price’

Note that description, project location and availability will never be null

What I want it to do is split left and right in to to arrays then I looped. This works until ‘description’ then everything will mess up the constrains that if i was in the current row that had in the default table 2 values and that i will be switching to a position where they was one value like description i take the whole row if im in single row and ill move on to single row like (description moving to dimension) i take the whole row 2

adjustLayout(layout) {
  // Flatten the layout to make it easier to work with
  const flatLayout = layout.flat()

  // Filter out fields with null or undefined keys
  const filteredLayout = flatLayout.filter(field => field.key != null)
  
  // Reassign positions
  const leftFields = filteredLayout.filter(field => field.position === 'left')
  const rightFields = filteredLayout.filter(field => field.position === 'right')

  // Reconstruct the layout
  const newLayout = []
  let leftIndex = 0,
    rightIndex = 0

  while (leftIndex < leftFields.length || rightIndex < rightFields.length) {
    const row = []
    console.log('check default row length', layout[newLayout.length].length)
    console.log('check default row value', layout[newLayout.length])

    if (leftIndex < leftFields.length) {
      row.push(leftFields[leftIndex])
      leftIndex++
    }
    if (
      rightIndex < rightFields.length &&
      (newLayout.length === 0 ||
        layout[newLayout.length].length !== layout[newLayout.length - 1].length) //thisd is causing a problem ccause 0-1
    ) {
      row.push(rightFields[rightIndex])
      rightIndex++
    }
    if (row.length > 0) {
      newLayout.push(row)
    }
  }

  return newLayout
}