diff --git a/aspnetcore/blazor/components/built-in-components.md b/aspnetcore/blazor/components/built-in-components.md index 90de442ad1c7..f9045d297ab9 100644 --- a/aspnetcore/blazor/components/built-in-components.md +++ b/aspnetcore/blazor/components/built-in-components.md @@ -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: @@ -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`†](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) + +†Currently, the component is prerelease, experimental, unsupported, and not recommended for production apps. + +:::moniker-end diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md index 0aac2c523f2d..635073966467 100644 --- a/aspnetcore/blazor/components/index.md +++ b/aspnetcore/blazor/components/index.md @@ -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 + + + + + + + + @code { + private record Person(int PersonId, string Name, DateOnly BirthDate); + + private IQueryable 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