[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Horizontal Scrolling

    The Ignite UI for Blazor Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the Blazor data grid.

    Blazor Horizontal Scrolling Example

    Setting Default Column Width

    <IgbDataGrid Height="100%" Width="100%"
    DataSource="DataSource"
    DefaultColumnMinWidth="300" />

    Setting Individual Column Widths

    <IgbDataGrid Height="100%" Width="100%"
    DataSource="DataSource"
    AutoGenerateColumns="false">
    <IgbTextColumn Field="FirstName" Width="300" />
    <IgbTextColumn Field="LastName" Width="300" />
    <IgbNumericColumn Field="Age" Width="300" />
    <IgbDateTimeColumn Field="Birthday" Width="300" />
    <IgbTextColumn Field="Street" Width="300" />
    <IgbTextColumn Field="City" Width="300" />
    <IgbNumericColumn Field="Salary" Width="300" />
    <IgbNumericColumn Field="Sales" Width="300" />
</IgbDataGrid>

    API References