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
|
1827 | First Booking! | Queen | 10 | ¤100.00 | 12/04/2029 | Tuesday, 11 December 2029 | employee@email.com |
1828 | Booking 2 | Double | 12 | ¤120.00 | 12/05/2029 | Wednesday, 12 December 2029 | manager@email.com |
1829 | Booking the 3rd | Suite | 13 | ¤130.00 | 12/06/2029 | Thursday, 13 December 2029 | 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: