React Grid Sizing

    The Ignite UI for React Sizing feature in React Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Grid Sizing feature enables users to adjust the width and height of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the IgrGrid, they are taken into its width/height size calculations or also known as Border box sizing. It is applied in all scenarios.

    [!Note] If the Border box sizing is overridden by the user we cannot guarantee that the IgrGrid will size correctly.

    React Grid Width

    If the width input does not have value assigned, its default value is 100% and the IgrGrid tries to fill the available space. You can check how the grid reacts to it in the Percentages section.

    [!Note] Setting manually the width style of the IgrGrid itself will result in an unexpected behavior.

    Null

    The grid's width can accepts value of null, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied.

    • If there are 6 columns and none of them has width defined, the grid will have width of 816px, because each column by default have assigned width of 136px in this scenario. Same will happen if the columns have width in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also.
    columns-default-gridWidth-null-v2
    • Si hay 6 columnas con el ancho de columna configurado a200px, cabrán en nuestra ventana y todas serán visibles:
    width-null-no-scroll-v2
    • Si hay más columnas o otras de mayor ancho que salen de la vista del navegador, todas seguirán renderizándose. Pongamos la misma cantidad de columnas pero cada una con un ancho de columna de300px. Como no todos caben en el área de vista del navegador, se creará una barra de desplazamiento de forma nativa. El siguiente ejemplo muestra exactamente este escenario:
    width-null-scroll-v2
    • Si la cuadrícula tiene un elemento padre de cualquier tipo y no tiene ningún overflow activado, seguirá mostrando todas las columnas visibles. De lo contrario, si el elemento padre tiene desbordamientoauto oscroll se renderizará nativamente una barra de desplazamiento para ese elemento padre. El padre tiene mayor altura para facilitar la visualización en el siguiente ejemplo.
    width-null-parent-scroll-v2

    [!Note] Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization.

    Pixels

    When the IgrGrid has its width input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content:

    • When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid width. Let's, for example, have the combined width of the columns exceed 1200px. In this case a horizontal scrollbar will be rendered.
    width-cols-scrollbar-v2
    • For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to auto or scroll, it will render scrollbar natively. For example, if the parent has width set to 1000px and the IgrGrid width is still 1200px, it will look similar to the following illustrations:
    width-cols-scroll-parent-noscroll-v2 width-cols-scroll-parent-scroll-v2

    Percentages

    When the width of the IgrGrid is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the IgrGrid will size relative to the browser window.

    • For example, if we set the grid width input to 100% and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
    Porcentaje de ancho-100p-v2
    • Si establecemos el ancho de la cuadrícula en100% y hay un elemento padre que tiene un ancho específico de1200px, esto significará que la cuadrícula tendrá un tamaño relativo a ese elemento y su ancho final será1200px.
    Ancho-porcentaje-padre-100p-v2
    • If we have a parent element with width of 1000px and have the grid's width set to 150%, the calculated grid width will be 1500px. In this case the grid will still render fully visible but if we set overflow: auto of the parent, that parent will render scrollbar on its own.
    width-percentage-150p-parent-noscroll-v2 width-percentage-150p-parent-scroll-v2

    React Grid Height

    By default if no height is defined for the IgrGrid, it will be set to 100%. You can check how the grid reacts depending on the DOM structure in the Percentages section.

    [!Note] Setting manually the height style of the IgrGrid itself will result in an unexpected behavior.

    Null

    The IgrGrid height input can accept null value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.

    • Si tenemos datos con 14 filas, en este caso la cuadrícula representará las 14 y ajustará el tamaño de la cuadrícula para que todas sean visibles sin ningún espacio vacío dentro de la cuadrícula.
    altura-nulo-14rows-v2
    • Si en cambio tenemos 24 filas, la cuadrícula seguirá representando todas las filas, pero como son demasiadas, exceden los límites del navegador. Es por eso que el navegador mostrará una barra de desplazamiento vertical de forma predeterminada para que el usuario pueda desplazarse hacia abajo al resto de las filas.
    altura-nulo-24rows-v2
    • If there is a parent element with defined height, the grid will still render all rows and not be affected. Let's say the parent has height of 650px. If it has overflow set to auto or scroll, it will render a vertical scrollbar but the grid will still be unaffected:
    height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2

    [!Note] Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization.

    Pixels

    Setting the IgrGrid height in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how width is set in pixels.

    • Si establecemos, por ejemplo, la altura500px con 4 filas para nuestros datos, la cuadrícula se mantendrá a ese tamaño y, dado que 4 filas no son suficientes para llenar el área visible, se espera que haya algo de área vacía.
    Altura-500px-4Rows-V2
    • If the number of rows exceeds the visible area of the grid when height is set to pixels a vertical scrollbar will be rendered. For example, a grid with 500px height set and 14 rows will be rendered the following way:
    Altura-500px-14rows-v2
    • If there is a parent element with height defined, unless it has overflow set to auto or scroll, the grid will still be fully visible. Otherwise it will render a scrollbar.
    height-700px-14rows-parent-noscroll-v2 altura-700px-14filas-padre-scroll-v2

    Percentages

    When the height input is set to percentages, the IgrGrid will size based on the parent element height. If the parent element has its height set in pixels or percentages, the grid will size relative to the size of the parent.

    Cuando el elemento principal no tiene una altura definida, el navegador no le asigna altura inicialmente y lo dimensiona en función de sus elementos secundarios y su tamaño. Es por eso que no hay forma de que la cuadrícula sepa qué altura de base usar para aplicar el tamaño porcentual en función de ella. Por esta razón renderizará un máximo de 10 filas y si son más filas se renderizará una barra de desplazamiento vertical. De lo contrario, la cuadrícula se ajustará al número de filas representadas. Analizaremos este escenario con más detalle en los siguientes ejemplos.

    Let's have width set to 1200px and the parent element not having any size applied to it:

    • Si hay menos de 10 filas, la cuadrícula intentará ajustar todas las filas en el área visible sin dejar un espacio vacío entre la última fila y la parte inferior del área visible. Por ejemplo, hagamos que los datos de la cuadrícula consten de 7 filas. La cuadrícula representará las 7 filas sin barra de desplazamiento vertical y sin espacios vacíos dentro de la cuadrícula.
    altura-indefinida-7rows-v2
    • Si hay más de 10 filas, se mostrará una barra de desplazamiento vertical para el resto de las filas y solo 10 filas podrán ser visibles en cualquier momento. En el siguiente ejemplo, solo el número de fila aumenta a 14.
    altura-indefinida-14rows-v2
    • If we set the parent element height to 800px and the IgrGrid to 100% height this means that the grid will be sized to 100 percentages of 800px.
    altura-porcentaje-100-padre-800px-v2
    • If the IgrGrid height is set to a number bigger than 100% and the parent element has height, for the parent to render scrollbar it again needs to have overflow set to auto or scroll. Otherwise the grid will be fully visibly and size relative to the parent size.
    altura-porcentaje-130p-padre-noscroll-v2 altura-porcentaje-130p-padre-scroll-v2
    • Si queremos que la cuadrícula tenga un tamaño desde100% la ventana del navegador, tendríamos que establecer tantobody la altura de los elementos de la cuadrícula como la de los padres100%. En este caso, el elemento padre puede dimensionarse y la cuadrícula se dimensionará en consecuencia si el navegador se redimensiona.
    altura-porcentaje-100-padre-100-v2

    React Grid Column Sizing

    Dependiendo del tamaño de la cuadrícula en sí, las columnas dentro de ella también pueden tener un tamaño diferente, lo que podría dar lugar a escenarios en los que la cuadrícula muestre una barra de desplazamiento horizontal o no. Las columnas pueden tener el ancho establecido en píxeles, porcentajes o tamaño automático cuando no hay nada configurado. Analizaremos más profundamente estos escenarios en esta sección.

    Default

    Por defecto, cuando una columna no tiene un ancho especificado, intentará autodimensionarse, para que se llene si hay espacio vacío disponible en el área de vista de cuadrícula. Las columnas de tamaño automático tienen un ancho mínimo de136px, así que si el área disponible es menor que136px para esa columna, por defecto será ese tamaño.

    Cuando se cambia el tamaño de la cuadrícula en estos escenarios, el ancho de la columna también se actualiza para reflejar los cambios, de modo que llene cualquier nuevo espacio vacío disponible.

    • If a column does not have specified width and the IgrGrid has width set to null, it will be sized to the minimum of 136px. This means that for a grid with width null and 6 columns that don't have width, each column will be sized to 136px.
    columns-default-gridWidth-null-v2
    • Cuando hay varias columnas autodimensionadas, estas dividirán el espacio disponible entre sí por igual. Esto significa que si tenemos 6 columnas y hay un área vacía de1200px, cada una tendrá un tamaño a200px.
    columns-default-all-row-selectors-v2
    • If there is available empty space, so that each autosized column will be less than 136px, all autosized columns will default to 136px and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid width set to 1000px.
    columns-default-all-min-136px-v2
    • If a column does not have width specified, but all other columns have either width in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have width of 100px, the first will fill the rest.
    columns-default-first-rest-100px-v2
    • Same applies if multiple columns does not have width specified, all will divide the available space between each other equally. In the next illustration the first column has width set to 100px.
    columns-default-all-first-100px-v2

    [!Note] Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns.

    Pixels

    When columns have set specific width in pixels, they stick to that size, unless they are resized manually. Since the combined width of the columns is static, it can be less than the IgrGrid width or exceed it.

    • If the combined width of all columns is less than the IgrGrid width, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the IgrGrid. In the next example the columns have 150px width.
    columns-150px-área vacía-v2
    • If the combined width of all columns is bigger than the actual IgrGrid width, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of 300px and grid has width of 1200px, which means that the columns combined have excess of 600px that goes out of bounds.
    columnas-150px-extra-área-v2

    Percentages

    When columns have set width in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly.

    • Si el ancho combinado de todas las columnas es menor,100% de forma similar a cuando están en píxeles, podría haber un área vacía en la cuadrícula que las columnas no cubren.
    columnas-porcentaje-menos-100p-v2
    • Si el ancho combinado es exacto100%, las columnas llenarán todo el espacio disponible de la cuadrícula.
    columnas-porcentaje-100p-v2
    • Si el ancho combinado supera100% el tamaño para que el usuario pueda ver las columnas fuera de la vista, se renderiza una barra de desplazamiento horizontal.
    columnas-porcentaje-más grande-100p-v2
    • If columns are set in percentages and the grid width is set to null, it would apply width of 136px to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have width itself and relies on its content to be sized when its width is null. In the following example all 6 columns have width set to 50%:
    columns-percent-gridWidth-null-v2

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.