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/2018 | 1 | 33 | Freezing |
| 07/05/2018 | 14 | 57 | Bracing |
| 08/05/2018 | -13 | 9 | Freezing |
| 09/05/2018 | -16 | 4 | Balmy |
| 10/05/2018 | -2 | 29 | Chilly |
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
| Name
| Room Type
| Room No
| Cost
|
Start Date
|
End Date
| Employee
|
| 846 | First Booking! | Queen | 10 | $100.00 | 3/17/2027 | Wednesday, March 24, 2027 | employee@email.com |
| 847 | Booking 2 | Double | 12 | $120.00 | 3/18/2027 | Thursday, March 25, 2027 | manager@email.com |
| 848 | Booking the 3rd | Suite | 13 | $130.00 | 3/19/2027 | Friday, March 26, 2027 | employee@email.com |
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: