Customization of Grid cell, to fit only the data we have, not any extra rows or columns

Hello,
 
Thank you for reaching out to us.
 

Hiding empty cells on the grid:

A quick solution is to hide empty cells on the grid via CSS, for example:

#fm-pivot-view .fm-grid-layout div.fm-cell.fm-empty {
   border-right: 1px solid transparent;
   border-bottom: 1px solid transparent;
}

Here is a JSFiddle for illustration: https://jsfiddle.net/flexmonster/2jswzt91/.
Also, it is possible to hide the sheet headers and remove cell borders altogether: https://jsfiddle.net/flexmonster/m44besj9/.
 
 
A way to adjust Flexmonster's dimensions to show only the filled part of the grid: 

Our team recommends the following approach:

1. Wrap the component's container with another HTML element. Its size will be used depending on the current component's configuration.
2. Specify both width and height parameters with the following value: 100%. It allows resizing the component according to the wrapper's size.
3. Define the maximum width and height of the wrapper. It is required to avoid falling out from a parent element.
4. Define the minimum width and height of the wrapper. It is required to avoid rendering problems. According to our system requirements, the minimum recommended size for the component is 400×300px.

 
We have prepared a sample that demonstrates the described approach: https://jsfiddle.net/flexmonster/bae4x237/.
 
Below are some additional details on the provided solution:
 

• The code block below shows the proper way to wrap the component's container:

  <div id="wrapper">
     <div id="pivotContainer"></div>
  </div>

• The following constants define the mentioned size constraints:

  const MIN_RECOMMENDED_WIDTH = 400;
  
  const MIN_RECOMMENDED_HEIGHT = 300;
  
  const MAX_CUSTOM_WIDTH = 800;
  
  const MAX_CUSTOM_HEIGHT = 800;

• Next, there is a subscription to the reportcomplete event. This event is called after the component is completely initialized on the page. Please note that you should unsubscribe to avoid further calling of the function after the event is dispatched:

  flexmonster.on("reportcomplete", () => {
  
     flexmonster.off("reportcomplete");
     ...
  
  });

• Afterward, we define constants that hold elements that affect the size of the component (see lines 24-28 in the provided JSFiddle). They will be used to calculate the required size of the wrapper correctly.

• Finally, there is a subscription on the aftergriddraw event, which is dispatched every time the component is redrawn. In the handler, all calculations are performed, and the size of the wrapper is updated (see lines 30-61 in the provided JSFiddle):

  flexmonster.on("aftergriddraw", () => {...});

 
 
Please let us know if this helps.
Looking forward to your response.
 
Kind regards,
Vera