Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blazor QuickGrid Razor component #26628

Merged
merged 1 commit into from
Aug 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion aspnetcore/blazor/components/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ uid: blazor/components/built-in-components

This article lists the Razor components that are provided by the Blazor framework.

:::moniker range=">= aspnetcore-6.0"
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"

The following built-in Razor components are provided by the Blazor framework:

Expand Down Expand Up @@ -96,3 +96,39 @@ The following built-in Razor components are provided by the Blazor framework:
* [`RouteView`](xref:blazor/fundamentals/routing#route-templates)

:::moniker-end

:::moniker range=">= aspnetcore-7.0"

The following built-in Razor components are provided by the Blazor framework:

* [`App`](xref:blazor/project-structure)
* [`Authentication`](xref:blazor/security/webassembly/index#authentication-component)
* [`AuthorizeView`](xref:blazor/security/index#authorizeview-component)
* [`CascadingValue`](xref:blazor/components/cascading-values-and-parameters#cascadingvalue-component)
* [`DynamicComponent`](xref:blazor/components/dynamiccomponent)
* [`ErrorBoundary`](xref:blazor/fundamentals/handle-errors#error-boundaries)
* [`FocusOnNavigate`](xref:blazor/fundamentals/routing#focus-an-element-on-navigation)
* [`HeadContent`](xref:blazor/components/control-head-content)
* [`HeadOutlet`](xref:blazor/components/control-head-content)
* [`InputCheckbox`](xref:blazor/forms-validation#built-in-form-components)
* [`InputDate`](xref:blazor/forms-validation#built-in-form-components)
* [`InputFile`](xref:blazor/file-uploads)
* [`InputNumber`](xref:blazor/forms-validation#built-in-form-components)
* [`InputRadio`](xref:blazor/forms-validation#built-in-form-components)
* [`InputRadioGroup`](xref:blazor/forms-validation#built-in-form-components)
* [`InputSelect`](xref:blazor/forms-validation#built-in-form-components)
* [`InputText`](xref:blazor/forms-validation#built-in-form-components)
* [`InputTextArea`](xref:blazor/forms-validation#built-in-form-components)
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
* [`MainLayout`](xref:blazor/components/layouts#mainlayout-component)
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
* [`NavMenu`](xref:blazor/fundamentals/routing#navlink-and-navmenu-components)
* [`PageTitle`](xref:blazor/components/control-head-content)
* [`QuickGrid`&dagger;](xref:blazor/components/index#quickgrid-component)
* [`Router`](xref:blazor/fundamentals/routing#route-templates)
* [`RouteView`](xref:blazor/fundamentals/routing#route-templates)
* [`Virtualize`](xref:blazor/components/virtualization)

&dagger;Currently, the component is prerelease, experimental, unsupported, and not recommended for production apps.

:::moniker-end
48 changes: 48 additions & 0 deletions aspnetcore/blazor/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5040,6 +5040,54 @@ Generate framework-specific JavaScript (JS) components from Razor components for
> [!WARNING]
> The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements.

## `QuickGrid` component

The `QuickGrid` component is an experimental Razor component for quickly and efficiently displaying data in tabular form. `QuickGrid` provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. `QuickGrid` is highly optimized and uses advanced techniques to achieve optimal rendering performance.

To get started with `QuickGrid`:

1. Add package reference for [`Microsoft.AspNetCore.Components.QuickGrid`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.QuickGrid). If using the .NET CLI to add the package reference, include the `--prerelease` option when you execute the [`dotnet add package` command](/dotnet/core/tools/dotnet-add-package).
[!INCLUDE[](~/includes/package-reference.md)]

1. Add the following component to render a grid.

`Pages/QuickGridExample.razor`:

```razor
@page "/quickgrid-example"
@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Items="@people">
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
<PropertyColumn Property="@(p => p.Name)" Sortable="true" />
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
private record Person(int PersonId, string Name, DateOnly BirthDate);

private IQueryable<Person> people = new[]
{
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
}.AsQueryable();
}
```

1. Access the component in a browser at the relative path `/quickgrid-example`.

For various `QuickGrid` demonstrations, see the [**QuickGrid for Blazor** app](https://aspnet.github.io/quickgridsamples/). The demo site is built using Blazor WebAssembly and is hosted on GitHub Pages. The site loads fast thanks to static prerendering using the community-maintained [`BlazorWasmPrerendering.Build` GitHub project](https://github.com/jsakamoto/BlazorWasmPreRendering.Build).
There aren't current plans to extend `QuickGrid` with features that full-blown commercial grids tend to offer, for example, hierarchical rows, drag-to-reorder columns, or Excel-like range selections. If you require advanced features that you don't wish to develop on your own, continue using third-party grids.

> [!WARNING]
> `QuickGrid` is currently **prerelease**, **experimental**, and **unsupported** by Microsoft. `QuickGrid` is ***not*** recommended for use in production apps.

:::moniker-end

<!--Reference links in article-->
Expand Down