DataGrid - bit BlazorUI

- bit BlazorUI

DataGrid

BitDataGrid 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


Argentina	0	1	2	3
Armenia	0	2	2	4
Australia	17	7	22	46
Austria	1	1	5	7
Azerbaijan	0	3	4	7
Bahamas	2	0	0	2
Bahrain	0	1	0	1

82 items

Customized

	Flag				Action
Argentina		0	1	2
Armenia		0	2	2
Australia		17	7	22
Austria		1	1	5
Azerbaijan		0	3	4
Bahamas		2	0	0
Bahrain		0	1	0

Total: 82

Virtualizing

EventId	State	City	Company	Status

OData

API

BitDataGrid parameters

Name	Type	Default value	Description
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.
ItemsProvider	BitDataGridItemsProvider<TGridItem>?	null	A callback that supplies data for the rid. You should supply either Items or ItemsProvider, but not both.
Class	string?	null	An optional CSS class name. If given, this will be included in the class attribute of the rendered table.
Theme	string?	default	A theme name, with default value "default". This affects which styling rules match the table.
ChildContent	RenderFragment?	null	Defines the child components of this instance. For example, you may define columns by adding components derived from the BitDataGridColumnBase<TGridItem>
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.
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.
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.
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.
Pagination	BitDataGridPaginationState?	null	Optionally links this BitDataGrid<TGridItem> instance with a BitDataGridPaginationState 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 BitDataGridPaginationState instance.

BitDataGridColumnBase properties

BitDataGrid has two built-in column types, BitDataGridPropertyColumn and BitDataGridTemplateColumn. You can also create your own column types by subclassing ColumnBase he BitDataGridColumnBase type, which all column must derive from, 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	BitDataGridAlign?	null	If specified, controls the justification of table header and body cells for this column.
HeaderTemplate	RenderFragment<BitDataGridColumnBase<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<BitDataGridColumnBase<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 BitDataGrid<TGridItem>.ShowColumnOptions(BitDataGridColumnBase<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 BitDataGridTemplateColumn<TGridItem> is sortable by default if any BitDataGridTemplateColumn<TGridItem>.SortBy parameter is specified).
IsDefaultSort	BitDataGridSortDirection?	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.

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

BitDataGridTemplateColumn 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	BitDataGridSort<TGridItem>?	null	Optionally specifies sorting rules for this column.

BitDataGridPaginator 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<BitDataGridPaginationState, string>?	null	Optionally supplies a format for rendering the page count summary.
SummaryTemplate	RenderFragment<BitDataGridPaginationState>?	null	Optionally supplies a template for rendering the page count summary.
TextFormat	Func<BitDataGridPaginationState, string>?	null	The optional custom format for the main text of the paginator in the middle of it.
TextTemplate	RenderFragment<BitDataGridPaginationState>?	null	The optional custom template for the main text of the paginator in the middle of it.
Value	BitDataGridPaginationState		Specifies the associated pagination state. This parameter is required.

BitDataGridPaginationState properties

A component that provides a user interface for pagination.

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 BitDataGrid assigns a value after loading data.
TotalItemCountChanged	EventHandler<int?>?	null	An event that is raised when the total item count has changed.

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

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

On this page