Default
API Reference

In its most simple usage the DataGrid component can be used to render typed collections:

Which by default will display all public serializable properties:

Simple Customizations

Which columns are displayed and how they're formatted is customizable using <Column> definitions:

Date
Temp. (C)
Temp. (F)
Summary
06/05/2018133Freezing
07/05/20181457Bracing
08/05/2018-139Freezing
09/05/2018-164Balmy
10/05/2018-229Chilly

Responsive

A more advanced example showing how to implement a responsive datagrid defining what columns and Headers are visible at different responsive breakpoints and using <Template> to render a custom cell:

Id
Type
No
Cost
71Queen10¤100.00
72Double12¤120.00
73Suite13¤130.00

Table Styles

Behavior of the DataGrid can be customized with the HeaderSelected event to handle when column headers are selected to apply custom filtering to the Items data source whilst the RowSelected event can be used to apply custom behavior when a row is selected.

The appearance of DataGrids can use TableStyles to change to different Tailwind Table Styles with the TableStyle Enum Flags, e.g:

Default (Striped Rows)

Simple

Uppercase Headings

Vertical Lines

White Background

Full Width

Full Width, Uppercase with Vertical Lines