QuickGrid for Blazor


QuickGrid has two built-in column types, PropertyColumn and TemplateColumn. You can also create your own column types by subclassing ColumnBase.

Property column

PropertyColumn is for displaying a single value specified by the parameter Property. This column infers sorting rules automatically, and uses the property's name as its title if not otherwise set.

Optionally, use the Format parameter to give a format string to control how the value is displayed. For example, the format "c" displays numeric values as currency.

It's also possible to use PropertyColumn with a computed expression, like in the "Age in years" example below. In this case the column title can't be inferred automatically so you must specify it.


Template column

TemplateColumn uses arbitrary Razor fragments to supply contents for its cells. It can't infer the column's title or sort order automatically.

Martin, Jean
Langa, António
Smith, Julie
Sari, Nur
Hernandez, Jose
Sato, Kenji

Using TemplateColumn, it's possible to add arbitrary Blazor components to your table cells. Remember that rendering many components, or many event handlers, can impact the performance of your grid. One way to mitigate this issue is by paginating or virtualizing your grid, since in those cases fewer components will be present at once.

Standard column parameters

The ColumnBase type, which all column must derive from, offers some common parameters:

  • Title, to set the column title. Not applicable if you're using HeaderTemplate.
  • Class, to set a CSS class name on the header and body cells for this column.
  • Align, to align the column left/center/right.
  • HeaderTemplate, to supply a Razor fragment that completely replaces the default header cell contents. If you use this, it's your responsibility to render any sort indicators you may want, and to call the grid's SortByColumnAsync if the header is clicked.
  • ColumnOptions, to supply a Razor fragment that will appear in a popover if a "column options" button is clicked. There are examples of this on the Filtering page.
  • Sortable, to indicate whether the grid should be sortable by this column. The default value varies based on the column type and other column-specific options.
  • IsDefaultSort, to indicate that the grid should be sorted by this column by default. The parameter's value indicates the default sort direction.
  • PlaceholderTemplate, to supply a Razor fragment that will be used while the data load is pending. This is only applicable for virtualized grids.

Column resizing

You can set the parameter ResizableColumn on the grid itself. This causes the grid to render draggable handles between each column header, so the user can resize columns.

Any column resizing is not persisted. Column resizing works by assigning a width style in pixels to the column. The exact visual effect of this depends on the CSS rules you have applied to the grid as a whole.

Dynamic columns

You can make columns appear conditionally using normal Razor logic such as @if. Example:


1Martin, Jean
2Langa, António
3Smith, Julie
4Sari, Nur
5Hernandez, Jose
6Sato, Kenji
An unhandled error has occurred. Reload 🗙