Table Layout Specifics

• Feb 17, 2022
• 6 minutes to read

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

The Data Grid uses the <table>...</table> tag to render its content. This tag has two layout modes. Each mode is based on one of the algorithms below that calculate the grid’s column widths:

Automatic (table-layout: auto)

The default layout. A web browser calculates column widths proportionally based on the table width and cell content.

Fixed (table-layout: fixed)

A column width depends on the table and other column widths and does not depend on cell content.

Automatic Table Layout

In this mode, the component uses an automatic table layout algorithm. This algorithm requires the column content to fit the minimum column width. The rendered column width depends on the following values:

• The column minimum and maximum widths based on the cell content (calculated by the web browser)
• The Data Grid width
• The column’s Width property value

The examples below demonstrate how the automatic table layout algorithm works in different scenarios.

Unspecified Column Widths

If you specify the Data Grid’s total width and omit column widths, the component automatically calculates column widths based on content.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" NewButtonVisible="true" />
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" />
        <DxDataGridColumn Field="@nameof(Product.ProductName)" />
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" />
    </Columns>
</DxDataGrid>

The Content Does Not Fit the Column Width

When the column’s Width property is set to a value smaller than the width of the longest column cell content, the latter can overflow its cell. To prevent this behavior, the Data Grid renders a column with the calculated minimum width based on the cell content. In the example below, the rendered width of the Unit Price column is 55 px, although the column’s Width property is set to 5px.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" NewButtonVisible="true" />
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" />
        <DxDataGridColumn Field="@nameof(Product.ProductName)" />
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" Width="5px" />
    </Columns>
</DxDataGrid>

A Column Width is Greater than the Maximum Calculated Width

If a column width (the Product Name column in the example below) exceeds the calculated maximum width, all column widths are set to the calculated minimum width values. The Product Name column’s width occupies the remaining space.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" NewButtonVisible="true" />
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" />
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Width="100%" /> @* The width is 365px *@
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" />
    </Columns>
</DxDataGrid>

Widths Are Specified in Relative Units

Columns whose widths are specified in relative units are calculated first. The web browser calculates other widths based on the remaining space. In the example below, the Product Name column width (50% of 550 px) is 275 px, the Unit Price (10% of 550 px) is 55 px by width. The remaining 220 px are proportionally divided between the ID and command columns.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" 
        DeleteButtonVisible="true" NewButtonVisible="true" /> @* width = 179 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" /> @* width = 41 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Width="50%" /> @* width = 275 px *@
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" Width="10%" /> @* width = 55 px *@
    </Columns>
</DxDataGrid>

Fixed Table Layout

Do any of the following to switch the Data Grid to the fixed table layout mode:

• Set the HorizontalScrollBarMode property to Auto or Visible.
• Use the VerticalScrollBarMode property to enable vertical scrolling.
• Set the ColumnResizeMode property to NextColumn or Component to allow users to resize columns.
• Anchor a Data Grid column.
• Set the DataNavigationMode property value to VirtualScrolling.

In this mode, the horizontal table layout depends on the Data Grid’s total width, column widths, borders, and cell spacing. The examples below demonstrate how the fixed table layout algorithm works in different scenarios.

All Column Widths Are Not Specified

If you do not specify column widths, the Data Grid renders columns with equal widths and truncates content if needed. In the following example, all widths are 550 px / 4 = 137 px.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            HorizontalScrollBarMode="ScrollBarMode.Visible"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" NewButtonVisible="true" />
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" />
        <DxDataGridColumn Field="@nameof(Product.ProductName)" />
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" />
    </Columns>
</DxDataGrid>

Several Column Widths Are Not Specified

If the Data Grid contains at least one column whose width is unspecified while other column widths are specified, the Data Grid renders columns with specified widths first. Columns without specified widths occupy the remaining grid width in equal shares. In the example below, the web browser calculates the Product Name and command column widths first. The remaining 165 px are divided between the ID and Unit Price columns equally.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            HorizontalScrollBarMode="ScrollBarMode.Visible"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" 
                                NewButtonVisible="true" Width="20%" /> @* width = 110 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" /> @* width = 82 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Width="50%" /> @* width = 275 px *@
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" /> @* width = 82 px *@
    </Columns>
</DxDataGrid>

The Total Column Width Exceeds the Data Grid’s Width

If the sum of all specified column widths is greater than or equal to the Data Grid width, the remaining columns (with unspecified widths) might not have enough available space to be rendered within the component. In the example below, the Product Name and ID columns occupy the entire Data Grid component so that the Unit Price and command columns become hidden. You can also scroll horizontally to see all content within the Data Grid component.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            HorizontalScrollBarMode="ScrollBarMode.Visible"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" NewButtonVisible="true" />
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" Width="350px" />
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Width="350px" />
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" />
    </Columns>
</DxDataGrid>

We recommend that you specify all column widths to avoid column loss.

The Total Column Width is Less than the Data Grid’s Width

If the sum of all specified column widths is less than the Data Grid’s width, the columns are expanded proportionally. In the following example, the sum of column widths is 500 px, which is less than the Data Grid’s total width of 550 px. The remaining 50 px are proportionally distributed between four columns. The Product Name column width (300 px) increases by 28 px. The Data Grid expands the narrowest columns (50 px) by 5 px each.

<style>
    .my-class {
        width: 550px;
    }
</style> 

<DxDataGrid T="Product"
            CustomData="@LoadProduct"
            ShowPager="true"
            KeyFieldName="@nameof(Product.ProductId)"
            HorizontalScrollBarMode="ScrollBarMode.Visible"
            CssClass="my-class">
    <Columns>
        <DxDataGridCommandColumn EditButtonVisible="true" DeleteButtonVisible="true" 
                                NewButtonVisible="true" Width="100px" /> @* width = 110 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductId)" Caption="ID" Width="50px" /> @* width = 55 px *@
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Width="300px" /> @* width = 328 px *@
        <DxDataGridColumn Field="@nameof(Product.UnitPrice)" Width="50px" /> @* width = 55 px *@
    </Columns>
</DxDataGrid>