App.razor

@using IgniteUI.Blazor.Controls
@inject IJSRuntime JSRuntime;

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbDataGridToolbar ToolbarTitle="Global Sales" ColumnChooser="true" TargetGrid="@DataGridRef"/>

            <IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
                      DefaultColumnMinWidth="120"
                      DataSource="Data"
                      AutoGenerateColumns="false"
                      IsColumnOptionsEnabled="true">
                <IgbTextColumn Field="ID" HeaderText="ID" IsHidden="true" Width="90" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbTextColumn Field="ProductName" HeaderText="Product" IsHidden="true" Width="@("*>120")" />
                <IgbImageColumn IsColumnOptionsEnabled="false" IsEditable="false" Field="CountryFlag" HeaderText="Country" Width="@("*>120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="ProductPrice" HeaderText="Price" IsHidden="true" Width="@("*>110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" />
                <IgbNumericColumn Field="OrderItems" HeaderText="Orders" Width="@("*>110")" />
                <IgbNumericColumn Field="OrderValue" HeaderText="Order Value" Width="@("*>150")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" Width="@("*>150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" />
                <IgbNumericColumn Field="Margin" HeaderText="Margin" Width="@("*>120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="Profit" HeaderText="Profit" Width="@("*>120")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbTextColumn Field="Status" HeaderText="Status" Width="@("*>110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
            </IgbDataGrid>
        }
    </div>
</div>

@code {

    private IgbDataGrid _grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return _grid;
        }
        set
        {
            _grid = value;
            StateHasChanged();
        }
    }

    private List<SaleInfo> Data;

    protected override void OnInitialized()
    {
        Data = SalesDataService.Create(100);
    }
}