# DataGrid Source: https://lumeo.nativ.sh/components/data-grid # DataGrid A powerful data grid with sorting, filtering, pagination, selection, inline editing, column pinning, resizable columns, row editing, layout persistence, context menus, and CSV/Excel/JSON export. **Dependencies & licensing — read carefully if you're shipping commercially.** - **ClosedXML** 0.104.2 (Excel `.xlsx` export) — MIT, fully free for any use. - **QuestPDF** 2024.12.3 (PDF export) — **dual-licensed**: - **Free** for individual developers and for organizations with annual gross revenue under $1M USD (Community License). - **Paid** ($699/dev/year as of writing) for everyone else — purchased direct from [questpdf.com](https://www.questpdf.com/license/). Lumeo doesn't take a cut. - CSV / JSON exports use built-in .NET serialization — no third-party dep, no licensing concern. If you don't use the PDF export feature, the QuestPDF dependency is still loaded as a transitive package but never invoked — only calling `ExportPdfAsync` triggers the licensing requirement. ## When to Use - Complex data grids with advanced features like sorting, filtering, and grouping - Enterprise table views with inline editing and cell-level validation - Column pinning and resizable columns for wide data sets - Scenarios requiring row selection, context menus, and data export (CSV/Excel/JSON) - Dashboards where the grid starts compact but the user can expand it to fullscreen for a full view Preview Code Basic DataGrid Name Department Salary Start Date Alice Johnson Engineering ¤95,000 2021-03-15 Bob Smith Marketing ¤72,000 2020-07-01 Carol White Engineering ¤105,000 2019-11-20 David Brown Sales ¤68,000 2022-01-10 Eve Davis Engineering ¤98,000 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next A simple data grid with sortable columns and pagination. Copy Code Preview Code Toolbar, Search & Filtering Columns Export Name Department Salary Status Start Date Alice Johnson Engineering ¤95,000 Active 2021-03-15 Bob Smith Marketing ¤72,000 Active 2020-07-01 Carol White Engineering ¤105,000 Active 2019-11-20 David Brown Sales ¤68,000 Inactive 2022-01-10 Eve Davis Engineering ¤98,000 Active 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Enable the toolbar for global search, column visibility, and CSV export. Column filters appear as inline popovers. Copy Code ## Toolbar customization The toolbar is composed of independent slots — Search, Columns, Export, and Expand — each togglable with its own parameter. Defaults preserve the full toolbar; opt-out by setting any of `ShowSearch`, `ShowColumnChooser`, `ShowExport`, or `Expandable` to `false`. For fine-grained control over which file formats appear in the Export dropdown, use the `ExportFormats` flags enum. This is especially useful in Blazor WebAssembly, where PDF generators like QuestPDF throw `PlatformNotSupportedException` — hide PDF by setting `ExportFormats="DataGridExportFormat.Csv | DataGridExportFormat.Excel"`. Preview Code Minimal toolbar (search only) Name Department Salary Alice Johnson Engineering ¤95,000 Bob Smith Marketing ¤72,000 Carol White Engineering ¤105,000 David Brown Sales ¤68,000 Eve Davis Engineering ¤98,000 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Hide the Columns and Export buttons to give users a cleaner toolbar with just global search. Copy Code Preview Code Export-only toolbar Export Name Department Salary Alice Johnson Engineering ¤95,000 Bob Smith Marketing ¤72,000 Carol White Engineering ¤105,000 David Brown Sales ¤68,000 Eve Davis Engineering ¤98,000 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Hide the search input and Columns button to keep only the Export dropdown — useful for read-only, report-style grids. Copy Code Preview Code CSV-only export (WASM-friendly) Columns Export Name Department Salary Alice Johnson Engineering ¤95,000 Bob Smith Marketing ¤72,000 Carol White Engineering ¤105,000 David Brown Sales ¤68,000 Eve Davis Engineering ¤98,000 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Restrict the Export dropdown to CSV. Use this pattern in Blazor WebAssembly where PDF export libraries aren't supported. Copy Code ## Filtering Extensibility Column filters pick sensible defaults from `FilterType`, but two extension points let you customize the experience per-column without forking the grid. ### Restricting operators per column Pass a `List` to the `Operators` parameter to limit which operators the built-in filter popover shows. The grid intersects this list with the defaults for the column's FilterType, so nonsensical combinations (e.g. `StartsWith` on a Number column) are filtered out automatically. ``` ``` ### Custom filter UI via FilterTemplate For columns that need a bespoke experience (range sliders, relative-date pickers, tag pickers, ...), supply a `FilterTemplate`. The render fragment receives a `DataGridFilterTemplateContext` exposing the field name, the currently-applied `FilterDescriptor` (or null), and an `Apply` callback. Invoke `Apply` with a descriptor to commit the filter, or with `null` to clear it. ``` ``` What is _not_ pluggable today (tracked for a future release): registering brand-new `FilterOperator` values, combining column filters with OR logic, and LINQ-expression compilation for server-side evaluation. Filters are always AND-combined across columns; within a column you get one operator + value at a time. Preview Code Multi-Select with Checkboxes Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Select multiple rows with checkboxes. The header checkbox toggles select all. Copy Code Preview Code Single Row Selection Name Department Salary Alice Johnson Engineering ¤95,000 Bob Smith Marketing ¤72,000 Carol White Engineering ¤105,000 David Brown Sales ¤68,000 Eve Davis Engineering ¤98,000 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Click a row to select it. Useful for master-detail views. Copy Code Preview Code Striped, Bordered & Compact Name Department Salary Status Start Date Alice Johnson Engineering ¤95,000 Active 2021-03-15 Bob Smith Marketing ¤72,000 Active 2020-07-01 Carol White Engineering ¤105,000 Active 2019-11-20 David Brown Sales ¤68,000 Inactive 2022-01-10 Eve Davis Engineering ¤98,000 Active 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Visual variants for different density needs. Copy Code Preview Code Custom Cell Templates Actions Salary Status ¤95,000 Active ¤72,000 Active ¤105,000 Active ¤68,000 Inactive ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Use CellTemplate to render custom content like avatars, badges, and action buttons. Copy Code Preview Code Expandable Detail Rows Name Department Status Alice Johnson Engineering Active Bob Smith Marketing Active Carol White Engineering Active David Brown Sales Inactive Eve Davis Engineering Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Use DetailTemplate to show additional information when a row is expanded. Copy Code Preview Code Column Pinning Actions Department Salary Status Start Date Engineering ¤95,000 Active 2021-03-15 Marketing ¤72,000 Active 2020-07-01 Engineering ¤105,000 Active 2019-11-20 Sales ¤68,000 Inactive 2022-01-10 Engineering ¤98,000 Active 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Pin columns to the left or right edge so they stay visible while scrolling horizontally. Copy Code Preview Code Resizable Columns Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Drag the column border to resize. All columns are resizable by default. Use MinWidth and MaxWidth to constrain sizing. Copy Code Preview Code Inline Cell Editing Name Department Status Alice Johnson Engineering Active Bob Smith Marketing Active Carol White Engineering Active David Brown Sales Inactive Eve Davis Engineering Active Rows per page 5 1–5 of 5 - Previous - 1 - Next Click a cell to edit it inline. Press Enter to commit, Escape to cancel. Copy Code Preview Code Row Editing Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 5 - Previous - 1 - Next Edit an entire row at once. Click the edit button to enter edit mode, then save or cancel. Copy Code Preview Code Footer Aggregation Name Department Salary Start Date Alice Johnson Engineering ¤95,000 2021-03-15 Bob Smith Marketing ¤72,000 2020-07-01 Carol White Engineering ¤105,000 2019-11-20 David Brown Sales ¤68,000 2022-01-10 Eve Davis Engineering ¤98,000 2020-05-05 Frank Wilson Marketing ¤75,000 2021-08-22 Grace Lee Sales ¤82,000 2019-06-30 Henry Taylor Engineering ¤110,000 2018-09-12 Ivy Martinez Marketing ¤71,000 2022-04-18 Jack Anderson Sales ¤88,000 2020-12-03 Kate Thomas Engineering ¤102,000 2021-02-14 Leo Jackson Sales ¤79,000 2019-10-08 Count: 12 Avg: 87,083.33 Rows per page 20 1–12 of 12 - Previous - 1 - Next Show computed summaries (Sum, Average, Count, Min, Max) in the table footer. Copy Code Preview Code Row Grouping Group by: Department Expanded by default Name Department Status Salary Start Date Engineering 5 items Alice Johnson Engineering Active ¤95,000 2021-03-15 Carol White Engineering Active ¤105,000 2019-11-20 Eve Davis Engineering Active ¤98,000 2020-05-05 Henry Taylor Engineering Active ¤110,000 2018-09-12 Kate Thomas Engineering Active ¤102,000 2021-02-14 Marketing 3 items Bob Smith Marketing Active ¤72,000 2020-07-01 Frank Wilson Marketing Active ¤75,000 2021-08-22 Ivy Martinez Marketing Inactive ¤71,000 2022-04-18 Sales 4 items David Brown Sales Inactive ¤68,000 2022-01-10 Grace Lee Sales Active ¤82,000 2019-06-30 Jack Anderson Sales Active ¤88,000 2020-12-03 Leo Jackson Sales Active ¤79,000 2019-10-08 Avg: 87,083.33 Rows per page 10 1–10 of 12 - Previous - 1 - 2 - Next Group rows by a field. Click the group header to expand or collapse each group. Set GroupsExpandedByDefault to control the initial state. Copy Code Preview Code Column Reordering Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Drag column headers to reorder them. Enable with the Reorderable property on the grid. Copy Code Preview Code Conditional Row Styling Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Apply dynamic CSS classes or inline styles to rows based on data. Useful for highlighting specific records. Copy Code Preview Code Context Menu Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Right-click a row to open a custom context menu with actions. Copy Code Preview Code Layout Persistence Columns Export Layouts Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Save and restore column widths, order, visibility, sorts, and filters to localStorage. The layout survives page refreshes. Use the Layouts dropdown in the toolbar to save named layouts under Personal, Global, or System Default scopes. Copy Code Preview Code Named Layout Manager Columns Export Layouts Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Pass GlobalLayouts to surface pre-built layouts in the Layouts dropdown. Users can also save their own Personal layouts which are stored in localStorage. The panel shows Personal / Global / System Default scopes. Copy Code ## Saving and loading layouts For full control over where layouts are stored (your own database, a REST API, cookies, etc.), use the programmatic JSON API. Capture a grid reference with `@ref`, then call `ExportLayout()` to get a JSON string and `ApplyLayoutJsonAsync(json)` to round-trip it later. The snapshot covers column order, widths, visibility, pin state, sorts, filters, global search, current page, page size, and group-by. ``` @code { private DataGrid? _grid; [Inject] MyAppDbContext Db { get; set; } = default!; private async Task SaveLayout() { if (_grid is null) return; var json = _grid.ExportLayout(); await Db.UserLayouts.AddAsync(new UserLayout { UserId = CurrentUserId, GridKey = "orders", Json = json, SavedAt = DateTime.UtcNow }); await Db.SaveChangesAsync(); } private async Task LoadLayout() { if (_grid is null) return; var latest = await Db.UserLayouts .Where(l => l.UserId == CurrentUserId && l.GridKey == "orders") .OrderByDescending(l => l.SavedAt) .FirstOrDefaultAsync(); if (latest is not null) await _grid.ApplyLayoutJsonAsync(latest.Json); } } ``` The JSON shape is the public `DataGridLayoutSnapshot` record. The snapshot is versioned (`Version: 1` today) so future breaking changes can be migrated. Columns referenced in a snapshot that no longer exist on the grid are silently ignored; columns present on the grid but missing from the snapshot are appended at the end. ## Reorder columns Set `Reorderable="true"` on the grid to enable column reordering. Users can reorder columns two ways: - **Drag-and-drop**: grab a column header and drag it left or right. A 2px vertical drop indicator renders at the nearest column boundary to show where the column will land when released. - **Keyboard / menu arrows**: open the Toggle Columns popover from the toolbar and use the up/down arrow buttons next to each column. This path is the accessible fallback for users who can't use pointer drag-and-drop. To pin an individual column so it cannot be reordered (for example, a required identifier column), set `Reorderable="false"` on that `DataGridColumnDef`. Both the drag handle and the menu arrows respect this flag. ``` ``` Preview Code Custom Toolbar Content Add Employee Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next The ToolbarContent component slots your custom buttons next to the toolbar's filter chips. Use the Class attribute to tweak the wrapper (gap, flex-wrap, etc.). Copy Code Preview Code Composing Toolbar Tools Refresh Columns Export Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Mix your own buttons with built-in tools. When you provide ToolbarContent, the default tool stack is suppressed — you pick exactly which tools to include and in what order. Each tool picks up the grid's state via a cascading context — no props needed. Copy Code Preview Code Server-Side Mode Columns Export Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next For large datasets, use ServerMode to handle sorting, filtering, and pagination on the server. Sorting, filtering, search, and pagination all trigger OnServerRequest. Loading state and request cancellation are managed automatically. Copy Code Preview Code Server-Side Error Handling Simulate server error Name Department Salary Status Alice Johnson Engineering ¤95,000 Active Bob Smith Marketing ¤72,000 Active Carol White Engineering ¤105,000 Active David Brown Sales ¤68,000 Inactive Eve Davis Engineering ¤98,000 Active Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Toggle the simulate error button to trigger a server failure. OnError receives the exception so you can display a message outside the grid. Copy Code Preview Code Multi-Sort Department Name Salary Start Date Engineering Alice Johnson ¤95,000 2021-03-15 Marketing Bob Smith ¤72,000 2020-07-01 Engineering Carol White ¤105,000 2019-11-20 Sales David Brown ¤68,000 2022-01-10 Engineering Eve Davis ¤98,000 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Click multiple column headers to sort by multiple fields. The grid applies sorts in the order they were added. Click a column again to cycle through ascending, descending, and unsorted. Copy Code Preview Code Fixed Height with Scroll Name Department Salary Status Start Date Alice Johnson Engineering ¤95,000 Active 2021-03-15 Bob Smith Marketing ¤72,000 Active 2020-07-01 Carol White Engineering ¤105,000 Active 2019-11-20 David Brown Sales ¤68,000 Inactive 2022-01-10 Eve Davis Engineering ¤98,000 Active 2020-05-05 Frank Wilson Marketing ¤75,000 Active 2021-08-22 Grace Lee Sales ¤82,000 Active 2019-06-30 Henry Taylor Engineering ¤110,000 Active 2018-09-12 Ivy Martinez Marketing ¤71,000 Inactive 2022-04-18 Jack Anderson Sales ¤88,000 Active 2020-12-03 Kate Thomas Engineering ¤102,000 Active 2021-02-14 Leo Jackson Sales ¤79,000 Active 2019-10-08 Set a fixed height on the grid to enable vertical scrolling for long lists. Copy Code Preview Code Loading State Name Department Salary Status Show skeleton rows while data is loading. Copy Code Preview Code Empty State Name Department No employees found. Try adjusting your filters. Rows per page 5 0–0 of 0 - Previous - 1 - Next Custom content when the grid has no data. Copy Code Preview Code Expandable (Fullscreen) Columns Export Name Department Salary Status Start Date Alice Johnson Engineering ¤95,000 Active 2021-03-15 Bob Smith Marketing ¤72,000 Active 2020-07-01 Carol White Engineering ¤105,000 Active 2019-11-20 David Brown Sales ¤68,000 Inactive 2022-01-10 Eve Davis Engineering ¤98,000 Active 2020-05-05 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next Enable the Expandable feature to add a fullscreen icon in the toolbar. Click it to pop the grid into a fullscreen modal overlay. Selection, filters, sorts, and pagination all survive the transition. Press Esc or click the close button to exit. Copy Code Preview Code Full-Featured DataGrid Columns Export Employee Department Salary Status Start Date AL Alice Johnson Engineering ¤95,000 Active 2021-03-15 BO Bob Smith Marketing ¤72,000 Active 2020-07-01 CA Carol White Engineering ¤105,000 Active 2019-11-20 DA David Brown Sales ¤68,000 Inactive 2022-01-10 EV Eve Davis Engineering ¤98,000 Active 2020-05-05 Avg: 87,083.33 Rows per page 5 1–5 of 12 - Previous - 1 - 2 - 3 - Next All features combined: toolbar, search, filtering, sorting, selection, column visibility, export, conditional styling, and aggregation. Copy Code ## API Reference ### DataGrid Property Type Default Description Items IEnumerable? \-- Data source for the grid. Columns List>? \-- Programmatic column definitions (alternative to DataGridColumnDef). PageSize int 10 Number of rows per page. ShowPagination bool true Show pagination controls. ShowToolbar bool false Show toolbar with search, export, and column visibility. ShowSearch bool true Show the global search box in the toolbar. Requires `ShowToolbar`. ShowColumnChooser bool true Show the Columns (visibility/reorder) button in the toolbar. ShowExport bool true Show the Export button and its format dropdown. Set `false` to hide export entirely; for per-format control see `ExportFormats`. ExportFormats DataGridExportFormat All Flags enum controlling which formats appear in the Export dropdown. Combine with bitwise OR, e.g. `DataGridExportFormat.Csv | DataGridExportFormat.Excel`. When no flags are set the Export button is hidden. SelectionMode DataGridSelectionMode None Row selection: None, Single, or Multiple. EditMode DataGridEditMode None Inline editing: None, Cell, or Row. Striped bool false Alternate row background colors. Bordered bool false Show cell borders. Compact bool false Smaller row height and text. Hoverable bool true Highlight rows on hover. Height string? \-- Fixed height with scrollable body (e.g., "400px"). Reorderable bool false Enable drag-and-drop column reordering. RowReorderable bool false Enable drag-and-drop row reordering. RowClass Func? \-- Function returning CSS class(es) for each row. RowStyle Func? \-- Function returning inline style for each row. VirtualizeThreshold int 500 Item count threshold above which virtualization kicks in automatically. ServerMode bool false Enable server-side sorting, filtering, and pagination. TotalCount int 0 Total item count for server-side pagination. IsLoading bool false Show loading skeleton overlay. EnableLayoutPersistence bool false Auto-save/restore column layout to localStorage. Enables the Layouts dropdown in the toolbar. LayoutStorageKey string? auto Custom localStorage key for layout persistence. SavedLayout DataGridLayout? \-- Externally provided layout to apply on load. GlobalLayouts List? \-- Pre-built named layouts shown in the Global scope of the Layouts panel. OnSaveNamedLayout EventCallback \-- Fires when the user saves a named layout. Personal layouts are also persisted to localStorage automatically. OnDeleteNamedLayout EventCallback \-- Fires when the user deletes a named layout. Receives the layout Id. DetailTemplate RenderFragment? \-- Template for expandable row details. EmptyContent RenderFragment? \-- Custom content when no data. component \-- Nested component placed inside ChildContent. Takes Class for wrapper styling and ChildContent for custom buttons / built-in toolbar tools. RowContextMenu RenderFragment? \-- Right-click context menu template for rows. OnRowClick EventCallback \-- Callback when a row is clicked. OnRowDoubleClick EventCallback \-- Callback when a row is double-clicked. OnCellEdit EventCallback> \-- Callback when a cell edit is committed. OnRowEdit EventCallback> \-- Callback when a row edit is committed with all changed values. OnColumnReorder EventCallback \-- Callback when columns are reordered via drag-and-drop. OnRowReorder EventCallback> \-- Callback when rows are reordered via drag-and-drop. OnLayoutSave EventCallback \-- Fires when the layout is saved (for external persistence). SelectedItems IReadOnlyList? \-- Two-way bindable selected items collection. SelectedItemsChanged EventCallback> \-- Callback when selection changes. OnServerRequest EventCallback \-- Server-side data request callback with sorts, filters, page info. OnError EventCallback \-- Fires when a server request throws an exception. GroupBy string? \-- Field name to group rows by (works in both client and server mode). Expandable bool false Adds an expand icon to the toolbar for toggling fullscreen mode. IsExpanded bool false Two-way bindable fullscreen state. Set from code to programmatically expand/collapse. IsExpandedChanged EventCallback \-- Fires whenever the fullscreen state toggles. FullscreenTitle string? \-- Optional title shown in the fullscreen header bar. Defaults to "Data Grid". Class string? \-- Additional CSS classes for the root element. ExportLayout() string method Serializes the current layout (column order, widths, visibility, pin state, sorts, filters, global search, page, page size, group-by) to a JSON string. Call via `@ref`. ApplyLayoutJsonAsync(json) Task method Deserializes a JSON layout produced by `ExportLayout` and applies it. Throws `JsonException` on malformed input; silently ignores columns that no longer exist. ### ToolbarContent Place inside `` of a DataGrid. Accepts custom buttons or built-in toolbar tool components (see below) that automatically pick up the grid's state via a cascading context. Property Type Default Description Class string? \-- CSS classes applied to the wrapper around ChildContent + the toolbar's filter chips. ChildContent RenderFragment? \-- Your custom buttons and any of the built-in toolbar tool components. ### Toolbar Tool Components Built-in tool components you can drop inside ``. Each takes only `TItem` and reads everything else (selection, columns, export formats, layout config, Interop, Localizer) from a cascading `DataGridToolbarContext`. Component Renders Visible when Fullscreen toggle icon button. `Expandable="true"` on the grid. Copy-to-clipboard button (tab-separated, selected rows). At least one row is selected. Column visibility + reorder dropdown. Always (gate on the grid via `ShowColumnChooser`). Export dropdown (CSV / Excel / PDF per `ExportFormats`). `ExportFormats != None`. Saved-layouts panel (personal + global). `EnableLayoutPersistence="true"`. Omit `` and all five tools auto-render in the default order (Fullscreen, CopySelected, Columns, Export, Layouts) gated by their `Show*` flags on the DataGrid. Provide `` and the default stack is suppressed entirely — you pick which tools to include and where, no duplicates. ### DataGridColumnDef Property Type Default Description Title string? \-- Column header text. Field string? \-- Property name to bind to on TItem. FieldSelector Func? \-- Custom value accessor (alternative to Field). Width double? \-- Column width in pixels. MinWidth double? \-- Minimum column width in pixels during resize. MaxWidth double? \-- Maximum column width in pixels during resize. Sortable bool false Enable sorting for this column. Filterable bool false Enable filtering for this column. Resizable bool true Allow column resizing via drag handle. Pin PinDirection None Pin column: None, Left, or Right. Pinnable bool false Whether column can be pinned/unpinned via the UI. Groupable bool false Whether column can be used for grouping. Reorderable bool true Whether this column can be reordered (via header drag-and-drop or the Toggle Columns menu arrows). Set to `false` to pin an individual column's position even when the grid-level `Reorderable` is true. FilterType DataGridFilterType Text Filter input type: Text, Number, Date, Select, Boolean. FilterOptions List? \-- Options for Select filter type (label + value pairs). Operators List? \-- Optional whitelist of operators to show in the filter UI for this column. When null, defaults for the FilterType are used. FilterTemplate RenderFragment? \-- Custom filter UI for this column. Replaces the built-in operator + value inputs when provided. Invoke the context's Apply callback with a FilterDescriptor to commit, or null to clear. Format string? \-- Format string (e.g., "C0", "yyyy-MM-dd", "N2"). Aggregate AggregateType None Footer aggregate: None, Sum, Average, Count, Min, Max. CustomSort Comparison? \-- Custom sort comparison function for this column. CellClass Func? \-- Function returning dynamic CSS class(es) for each cell. HeaderCssClass string? \-- Custom CSS class for the header cell. CellTemplate RenderFragment? \-- Custom render template for cell content. HeaderTemplate RenderFragment? \-- Custom render template for header. EditTemplate RenderFragment>? \-- Custom template for inline editing input. ### Event Args Type Properties Description CellEditEventArgs Item, Field, OldValue, NewValue Fired when a cell edit is committed. RowEditEventArgs Item, ChangedValues Fired when a row edit is committed. ChangedValues is a Dictionary. ColumnReorderEventArgs ColumnId, OldIndex, NewIndex Fired when a column is drag-reordered. RowReorderEventArgs Item, OldIndex, NewIndex Fired when a row is drag-reordered. DataGridServerRequest Page, PageSize, Sorts?, Filters?, GlobalSearch?, GroupBy?, CancellationToken Sent to OnServerRequest with current grid state. GroupBy contains the current group field if set. CancellationToken should be passed to your HTTP client to abort superseded requests. DataGridLayout Columns, Sorts?, Filters?, PageSize?, GlobalSearch? Serializable layout snapshot for persistence. DataGridNamedLayout Id, Name, Scope, Layout A named layout entry. Scope is "Personal", "Global", or "SystemDefault". DataGridLayoutSnapshot Version, Columns, Sorts, Filters, GlobalSearch?, CurrentPage, PageSize, GroupBy? Public, JSON-serializable shape used by `ExportLayout`/`ApplyLayoutJsonAsync`. Version is bumped on schema changes. DataGridColumnLayout Field, Order, Visible, Width?, Pin? Per-column entry inside a `DataGridLayoutSnapshot`. ### Enums DataGridSelectionMode None No selection. Single Select one row at a time. Multiple Select multiple rows with checkboxes. PinDirection None Column scrolls normally. Left Sticky to left edge. Right Sticky to right edge. DataGridEditMode None No editing. Cell Click a cell to edit inline. Row Edit entire row at once. AggregateType None No aggregation. Sum Sum of numeric values. Average Average of numeric values. Count Count of non-null values. Min Minimum value. Max Maximum value. ### DataGridFilterType Value Description Text Text filter with contains, starts with, equals operators. Number Numeric filter with comparison and between operators. Date Date filter with date picker and comparison operators. Select Multi-select checkbox filter from predefined options. Boolean True/false toggle filter. ## Related Components - [DataTable](/components/data-table) — A simpler table component for basic tabular data without advanced grid features - [Table](/components/table) — Low-level table building blocks for fully custom table layouts - [Pagination](/components/pagination) — Standalone pagination control for navigating through paged data