Angular 그리드 크기 조정

There are many different ways to size the IgxTreeGrid in order to accommodate a lot of scenarios that the users can have. While some are straight forward, others might be more complex and that is why we will take each one and look into them in more depth. We will go through setting width and height separately since there are some differences e.g. when using percentages for each.

​IgxTreeGrid의 테두리 및 패딩 크기는 너비/높이 크기 계산에 사용되거나 테두리 상자 크기 조정이라고도 합니다. 모든 시나리오에 적용됩니다.

Note

사용자가 테두리 상자 크기를 재정의하는 경우 IgxTreeGrid의 크기가 올바르게 지정된다고 보장할 수 없습니다.

Width

If the width input does not have value assigned, its default value is 100% and the IgxTreeGrid 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 IgxTreeGrid 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.

  

• If there are 6 columns with column width set to 200px they will fit in our window and all will be visible:

  

• If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of 300px. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:

  

• If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow auto or scroll, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.

  

Note

이러한 동작으로 인해 그리드 데이터에 너무 많은 열이 포함되어 있으면 모든 열이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

Pixels

When the IgxTreeGrid 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.

  

• 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 IgxTreeGrid width is still 1200px, it will look similar to the following illustrations:

  

Percentages

When the width of the IgxTreeGrid 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 IgxTreeGrid 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.

  

• If we set grid's width to 100% and there is a parent element that has specific width of 1200px, this will mean that the grid will size relative to that element and his final width will be 1200px.

  

• 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.

  

Height

By default if no height is defined for the IgxTreeGrid, 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 IgxTreeGrid itself will result in an unexpected behavior.

Null

The IgxTreeGrid 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.

• 이 경우 14개 행이 있는 데이터가 있는 경우 그리드는 14개 행을 모두 렌더링하고 그리드 내부에 빈 공간 없이 모두 표시되도록 그리드 크기를 조정합니다.

  

• 대신 24개의 행이 있는 경우 그리드는 여전히 모든 행을 렌더링하지만 행이 너무 많기 때문에 브라우저 경계를 초과합니다. 이것이 바로 브라우저 자체가 기본적으로 세로 스크롤 막대를 렌더링하여 사용자가 나머지 행까지 아래로 스크롤할 수 있게 하는 이유입니다.

  

• 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 he has overflow set to auto or scroll, it will render a vertical scrollbar but the grid will still be unaffected:

  

Note

이러한 동작으로 인해 그리드 데이터에 너무 많은 행이 포함되어 있으면 모든 행이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

Pixels

Setting the IgxTreeGrid 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.

• If we set, for example, the height 500px with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.

  

• 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:

  

• 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.

  

Percentages

When the height input is set to percentages the IgxTreeGrid 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.

상위 요소에 높이가 정의되어 있지 않으면 브라우저는 처음에 높이를 할당하지 않고 하위 요소와 해당 크기에 따라 크기를 지정합니다. 이것이 바로 그리드가 이를 기반으로 백분율 크기 조정을 적용하기 위해 사용할 기본 높이를 알 수 있는 방법이 없는 이유입니다. 이러한 이유로 최대 10개의 행을 렌더링하고 행이 더 많은 경우 세로 스크롤 막대가 렌더링됩니다. 그렇지 않으면 그리드가 렌더링된 행 수에 맞춰집니다. 다음 예에서 이 시나리오를 더 자세히 살펴보겠습니다.

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

• 행이 10개 미만인 경우 그리드는 마지막 행과 표시 영역 하단 사이에 빈 공간을 두지 않고 `표시 영역의 모든 행을 맞추려고 시도합니다. 예를 들어 7개의 행으로 구성된 그리드 데이터가 있다고 가정해 보겠습니다. 그리드는 세로 스크롤 막대 없이 그리드 내부에 빈 공간 없이 7개 행을 모두 렌더링합니다.

  

• 행이 10개보다 많으면 나머지 행에 대해 수직 스크롤 막대가 렌더링되며 언제든지 10개의 행만 표시될 수 있습니다. 다음 예에서는 행 번호만 14로 증가됩니다.

  

• If we set the parent element height to 800px and the IgxTreeGrid to 100% height this means that the grid will be sized to 100 percentages of 800px.

  

• If the IgxTreeGrid 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.

  

• If we want the grid to be sized to 100% from the browser window we would need to set both body and parent grid element heights to 100%. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.

  

Column Sizing

그리드 크기 자체에 따라 그 안에 있는 열의 크기도 다르게 조정될 수 있으며 이로 인해 그리드가 가로 스크롤 막대를 렌더링할지 여부가 발생할 수 있습니다. 열의 너비는 픽셀, 백분율로 설정될 수 있으며 아무것도 설정되지 않은 경우 자동 크기 조정이 가능합니다. 이 섹션에서는 이러한 시나리오에 대해 자세히 살펴보겠습니다.

Default

By default when a column doesn't have a specified width it will try to autosize, so that it fills if any empty space is available in the grid view area. Autosized columns have minimum width of 136px, so if the area available is less than 136px for that column, it will default to that size.

이러한 시나리오에서 표 크기를 조정하면 열 너비도 변경 사항을 반영하여 업데이트되므로 사용 가능한 새 빈 공간이 채워집니다.

• If a column does not have specified width and the IgxTreeGrid 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.

  

• When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of 1200px, each will size to 200px.

  

• 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.

  

• 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.

  

• 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.

  

Note

행 선택기 확인란 열 등과 같은 기능 열은 열 크기를 자동 조정할 때 고려되는 추가 공간을 채웁니다.

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 IgxTreeGrid width or exceed it.

• If the combined width of all columns is less than the IgxTreeGrid 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 IgxTreeGrid. In the next example the columns have 150px width.

  

• If the combined width of all columns is bigger than the actual IgxTreeGrid 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.

  

Auto

When columns are set to auto their size adjusts to fit the longest word in the column. Empty areas are possible if there are cells with very short values, while other cells have very long ones. In this scenario, all cells in the column would adjust to take the width of the cell with the longest value.

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.

• If the combined width of all columns is less than 100%, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.

  

• If the combined width is exactly 100%, the columns will fill all available space of the grid.

  

• If the combined width exceeds 100% in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.

  

• If columns are set in percentages and the grid width is set to null, it would applywidth 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%:

  

Grid Cell Spacing Control

​IgxTreeGrid는 크기 설정에 따라 내부 간격을 자동으로 조정합니다. 간격 제어를 위한 CSS 사용자 정의 속성을 사용하여 그리드 머리글 및 본문 셀의 여백과 여백을 추가로 사용자 정의할 수 있습니다.

Global Grid Spacing

응용 프로그램의 모든 그리드 셀에서 간격을 줄이거나 늘리려면:

/* Reduce all grid spacing by 20% */
igx-grid {
    --ig-spacing: 0.8;
}

/* Increase spacing for better touch accessibility */
igx-grid {
    --ig-spacing: 1.2;
}

Grid-Specific Spacing

특정 그리드 인스턴스의 간격을 조정하려면:

/* Make a particular grid more compact */
.my-compact-grid {
    --ig-spacing: 0.6;
}

/* Give a specific grid more breathing room */
.my-spacious-grid {
    --ig-spacing: 1.4;
}

Directional Spacing Control

수평 및 수직 간격을 독립적으로 제어할 수 있습니다.

/* Reduce only horizontal spacing (left/right padding) */
.my-grid {
    --ig-spacing-inline: 0.5;
    --ig-spacing-block: 1.0; /* Keep vertical spacing normal */
}

/* Adjust vertical spacing for tighter row spacing */
.my-grid {
    --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */
    --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */
}

Size-Specific Spacing

그리드의 디스플레이 밀도에 따라 다양한 간격 승수를 적용할 수 있습니다.

.my-grid {
    /* Compact density gets very tight spacing */
    --ig-spacing-small: 0.5;

    /* Medium density uses normal spacing */
    --ig-spacing-medium: 1.0;

    /* Comfortable density gets extra spacing */
    --ig-spacing-large: 1.3;
}

Header vs Body Cell Spacing

간격 속성은 헤더 및 본문 셀 모두에 영향을 주지만 필요한 경우 구체적으로 타겟팅할 수 있습니다.

/* Reduce padding in header cells specifically */
.my-grid igx-grid-header {
    --ig-spacing: 0.7;
}

/* Adjust spacing in data cells */
.my-grid igx-grid-cell {
    --ig-spacing: 0.9;
}

Note

이러한 간격 조정은 그리드의 디스플레이 밀도와 함께 작동합니다. 간격 승수는 그리드가 컴팩트, 아늑 또는 편안한 밀도 모드에 있는지 여부에 따라 이미 결정된 기본 간격 값에 적용됩니다.

API References

• IgxTreeGridComponent API_IgxTreeGridRow API
• IgxTreeGridComponent Styles

Additional Resources

• 트리 그리드 개요
• 가상화 및 성능

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular