Home Docs

QuickGrid




BitQuickGrid is a robust way to display an information-rich collection of items, and allow people to sort, and filter the content. Use a data-grid when information density is critical.

Notes

To use this component, you need to install the
Bit.BlazorUI.Extras
 NuGet package, as described in the Optional steps of the Getting started page.

Usage

Basic
Argentina0123
Armenia0224
Australia1772246
Austria1157
Azerbaijan0347
Bahamas2002
Bahrain0101
82 items

Customized

Flag
Action
ArgentinaAR012
ArmeniaAM022
AustraliaAU17722
AustriaAT115
AzerbaijanAZ034
BahamasBS200
BahrainBH010
Total: 82

Virtualize

EventId
State
City
Company
Status

OData

LoadingTemplate
1Product 164
2Product 261
3Product 358
4Product 496
5Product 56
6Product 630
7Product 773
Total: 500,000

Responsive

The BitQuickGrid does not have the Responsive feature built-in, but you can achieve some level of responsiveness like what we did in this sample:

Name
Gold
Silver
Bronze
Total
Argentina0123
Armenia0224
Australia1772246
Austria1157
Azerbaijan0347
Bahamas2002
Bahrain0101
82 items

RowTemplate

See the RowTemplate parameter in action:

Name
Gold
Silver
Bronze
Total
Argentina0123
Armenia0224
Australia1772246
Austria1157
Azerbaijan0347
Bahamas2002
Bahrain0101
82 items

API

BitQuickGrid parameters

Name Type Default value Description
ChildContent RenderFragment? null Defines the child components of this instance. For example, you may define columns by adding components derived from the BitQuickGridColumnBase<TGridItem>.
Class string? null An optional CSS class name. If given, this will be included in the class attribute of the rendered table.
Columns RenderFragment? null Alias of the ChildContent parameter.
ItemKey Func<TGridItem, object> x => x! Optionally defines a value for @key on each rendered row. Typically this should be used to specify a unique identifier, such as a primary key value, for each data item. This allows the grid to preserve the association between row elements and data items based on their unique identifiers, even when the TGridItem instances are replaced by new copies (for example, after a new query against the underlying data store). If not set, the @key will be the TGridItem instance itself.
Items IQueryable<TGridItem>? null A queryable source of data for the grid. This could be in-memory data converted to queryable using the System.Linq.Queryable.AsQueryable(System.Collections.IEnumerable) extension method, or an EntityFramework DataSet or an IQueryable derived from it. You should supply either Items or ItemsProvider, but not both.
ItemSize float 50 This is applicable only when using Virtualize. It defines an expected height in pixels for each row, allowing the virtualization mechanism to fetch the correct number of items to match the display size and to ensure accurate scrolling.
ItemsProvider BitQuickGridItemsProvider<TGridItem>? null A callback that supplies data for the grid. You should supply either Items or ItemsProvider, but not both.
LoadingTemplate RenderFragment? null The custom template to render while loading the new items.
Pagination BitQuickGridPaginationState? null Optionally links this BitQuickGrid<TGridItem> instance with a BitQuickGridPaginationState model, causing the grid to fetch and render only the current page of data. This is normally used in conjunction with a Paginator component or some other UI logic that displays and updates the supplied BitQuickGridPaginationState instance.
ResizableColumns bool false If true, renders draggable handles around the column headers, allowing the user to resize the columns manually. Size changes are not persisted.
RowClass string? null The CSS class of all rows of the BitQuickGrid.
RowClassSelector Func<TGridItem, string>? null The function to generate the CSS class of each row of the BitQuickGrid.
RowStyle string? null The CSS style of all rows of the BitQuickGrid.
RowStyleSelector Func<TGridItem, string>? null The function to generate the CSS style of each row of the BitQuickGrid.
RowTemplate RenderFragment<BitQuickGridRowTemplateArgs<TGridItem>>? null Optional template to customize row rendering. Receives BitQuickGridRowTemplateArgs with OriginalRow set to the default row content; render it to include the original row, or omit to replace entirely.
Theme string? default A theme name, with default value "default". This affects which styling rules match the table.
Virtualize bool false If true, the grid will be rendered with virtualization. This is normally used in conjunction with scrolling and causes the grid to fetch and render only the data around the current scroll viewport. This can greatly improve the performance when scrolling through large data sets.

BitQuickGridColumnBase properties

BitQuickGrid has two built-in column types, BitQuickGridPropertyColumn and BitQuickGridTemplateColumn. You can also create your own column types by subclassing the BitQuickGridColumnBase type, which all columns must derive from. It offers some common parameters.

Name Type Default value Description
Title string? null Title text for the column. This is rendered automatically if HeaderTemplate is not used.
Class string? null An optional CSS class name. If specified, this is included in the class attribute of table header and body cells for this column.
Align BitQuickGridAlign? null If specified, controls the justification of table header and body cells for this column.
HeaderTemplate RenderFragment<BitQuickGridColumnBase<TGridItem>>? null An optional template for this column's header cell. If not specified, the default header template includes the Title along with any applicable sort indicators and options buttons.
ColumnOptions RenderFragment<BitQuickGridColumnBase<TGridItem>>? null If specified, indicates that this column has this associated options UI. A button to display this UI will be included in the header cell by default. If HeaderTemplate is used, it is left up to that template to render any relevant "show options" UI and invoke the grid's BitQuickGrid<TGridItem>.ShowColumnOptions(BitQuickGridColumnBase<TGridItem>).
Sortable bool? null Indicates whether the data should be sortable by this column. The default value may vary according to the column type (for example, a BitQuickGridTemplateColumn<TGridItem> is sortable by default if any BitQuickGridTemplateColumn<TGridItem>.SortBy parameter is specified).
IsDefaultSort BitQuickGridSortDirection? null If specified and not null, indicates that this column represents the initial sort order for the grid. The supplied value controls the default sort direction.
PlaceholderTemplate RenderFragment<PlaceholderContext>? null If specified, virtualized grids will use this template to render cells whose data has not yet been loaded.

BitQuickGridPropertyColumn properties

It 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.

Name Type Default value Description
Property Expression<Func<TGridItem, TProp>> Defines the value to be displayed in this column's cells.
Format string? null Optionally specifies a format string for the value. Using this requires the TProp type to implement IFormattable.

BitQuickGridTemplateColumn properties

It uses arbitrary Razor fragments to supply contents for its cells. It can't infer the column's title or sort order automatically. Also, 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.

Name Type Default value Description
ChildContent RenderFragment<TGridItem> Specifies the content to be rendered for each row in the table.
SortBy BitQuickGridSort<TGridItem>? null Optionally specifies sorting rules for this column.

BitQuickGridPaginator properties

A component that provides a user interface for pagination.

Name Type Default value Description
GoToFirstButtonTitle string Go to first page The title of the go to first page button.
GoToPrevButtonTitle string Go to previous page The title of the go to previous page button.
GoToNextButtonTitle string Go to next page The title of the go to next page button.
GoToLastButtonTitle string Go to last page The title of the go to last page button.
SummaryFormat Func<BitQuickGridPaginationState, string>? null Optionally supplies a format for rendering the page count summary.
SummaryTemplate RenderFragment<BitQuickGridPaginationState>? null Optionally supplies a template for rendering the page count summary.
TextFormat Func<BitQuickGridPaginationState, string>? null The optional custom format for the main text of the paginator in the middle of it.
TextTemplate RenderFragment<BitQuickGridPaginationState>? null The optional custom template for the main text of the paginator in the middle of it.
Value BitQuickGridPaginationState Specifies the associated pagination state. This parameter is required.

BitQuickGridPaginationState properties

Holds state to represent the pagination of a BitQuickGrid. Tracks the current page index, the number of items per page, and the total item count so a paginator UI and the grid stay in sync.

Name Type Default value Description
CurrentPageIndex int 0 Gets the current zero-based page index.
ItemsPerPage int 10 Gets or sets the number of items on each page.
LastPageIndex int? null Gets the zero-based index of the last page, if known. The value will be null until TotalItemCount is known.
TotalItemCount int? null Gets the total number of items across all pages, if known. The value will be null until an associated BitQuickGrid assigns a value after loading data.
TotalItemCountChanged EventHandler<int?>? null An event that is raised when the total item count has changed.

BitQuickGridRowTemplateArgs<TGridItem> properties

Arguments passed to the RowTemplate render fragment.

Name Type Default value Description
OriginalRow RenderFragment A render fragment that produces the original row markup (the default <tr> with all column cells). Render this to include the default row, or omit to replace entirely.
RowIndex int 0 The 1-based row index used for accessibility (e.g. aria-rowindex).
RowItem TGridItem The data item for this row.

BitQuickGridAlign enum

Name Value Description
Left 0 Justifies the content against the start of the container.
Center 1 Justifies the content at the center of the container.
Right 2 Justifies the content at the end of the container.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.

  • On this page