Grid Components - Basic Examples

Simple Grid

100 rows

Basic 3-column grid with sortable columns displaying order data.

View Code

<Grid Items="@orders">
    <Columns>
        <GridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
        <GridColumn Field="Customer" Header="Customer" Sortable="true" />
        <GridColumn Field="Amount" Header="Amount" Sortable="true" Width="120px" />
    </Columns>
</Grid>

Paginated Grid

1000 rows

Client-side pagination with configurable page size.

View Code

<Grid Items="@orders" PagingMode="GridPagingMode.Client" PageSize="25">
    <Columns>
        <GridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
        <GridColumn Field="Customer" Header="Customer" Sortable="true" />
        <GridColumn Field="Status" Header="Status" Sortable="true" Width="120px" />
        <GridColumn Field="Amount" Header="Amount" Sortable="true" Width="120px" />
        <GridColumn Field="OrderDate" Header="Date" Sortable="true" Width="140px" />
    </Columns>
</Grid>

Fixed Height Grid

Virtualized

Grid with fixed 400px height and row virtualization for performance.

View Code

<Grid Items="@orders" Height="400px" VirtualizationMode="GridVirtualizationMode.Auto">
    <Columns>
        <GridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
        <GridColumn Field="Customer" Header="Customer" Sortable="true" />
        <GridColumn Field="Status" Header="Status" Sortable="true" Width="120px" />
        <GridColumn Field="Amount" Header="Amount" Sortable="true" Width="120px" />
        <GridColumn Field="ShipTo" Header="Ship To" Sortable="true" Width="150px" />
    </Columns>
</Grid>

Container-Filling Grid

100% Height

Grid that fills 100% of its parent container's height (50% viewport height in this example).

View Code

<div style="height: 600px;">
    <Grid Items="@orders" Height="100%" VirtualizationMode="GridVirtualizationMode.Auto">
        <Columns>
            <GridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
            <GridColumn Field="Customer" Header="Customer" Sortable="true" />
            <GridColumn Field="Status" Header="Status" Sortable="true" Width="120px" />
            <GridColumn Field="Amount" Header="Amount" Sortable="true" Width="120px" />
            <GridColumn Field="OrderDate" Header="Date" Sortable="true" Width="140px" />
        </Columns>
    </Grid>
</div>

Simple Grid

Paginated Grid

Fixed Height Grid

Container-Filling Grid

Visual Styles

Default Style

Striped Style

Bordered Style

Minimal Style

Density Variations

Compact Density

Comfortable Density (Default)

Spacious Density