Blazor DataGrid Example - Row Height Customization
This sample demonstrates the DataGrid's row height feature.
Order ID | Customer ID | Order Date | Freight | Shipped Date | Ship Country |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 7/16/1996 | Denmark |
| 10002 | ANATR | 4/4/1990 | $3.30 | 9/11/1996 | Brazil |
| 10003 | ANTON | 11/30/1957 | $4.30 | 10/7/1996 | Germany |
| 10004 | BLONP | 10/22/1930 | $5.30 | 12/30/1996 | Austria |
| 10005 | BOLID | 2/18/1953 | $6.30 | 12/3/1997 | Switzerland |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 7/16/1996 | Denmark |
| 10007 | ANATR | 4/4/1990 | $6.60 | 9/11/1996 | Brazil |
| 10008 | ANTON | 11/30/1957 | $8.60 | 10/7/1996 | Germany |
| 10009 | BLONP | 10/22/1930 | $10.60 | 12/30/1996 | Austria |
| 10010 | BOLID | 2/18/1953 | $12.60 | 12/3/1997 | Switzerland |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 7/16/1996 | Denmark |
| 10012 | ANATR | 4/4/1990 | $9.90 | 9/11/1996 | Brazil |
| 10013 | ANTON | 11/30/1957 | $12.90 | 10/7/1996 | Germany |
| 10014 | BLONP | 10/22/1930 | $15.90 | 12/30/1996 | Austria |
| 10015 | BOLID | 2/18/1953 | $18.90 | 12/3/1997 | Switzerland |
| 10016 | ALFKI | 5/15/1991 | $9.20 | 7/16/1996 | Denmark |
| 10017 | ANATR | 4/4/1990 | $13.20 | 9/11/1996 | Brazil |
| 10018 | ANTON | 11/30/1957 | $17.20 | 10/7/1996 | Germany |
| 10019 | BLONP | 10/22/1930 | $21.20 | 12/30/1996 | Austria |
| 10020 | BOLID | 2/18/1953 | $25.20 | 12/3/1997 | Switzerland |
| 10021 | ALFKI | 5/15/1991 | $11.50 | 7/16/1996 | Denmark |
| 10022 | ANATR | 4/4/1990 | $16.50 | 9/11/1996 | Brazil |
| 10023 | ANTON | 11/30/1957 | $21.50 | 10/7/1996 | Germany |
| 10024 | BLONP | 10/22/1930 | $26.50 | 12/30/1996 | Austria |
| 10025 | BOLID | 2/18/1953 | $31.50 | 12/3/1997 | Switzerland |
| 10026 | ALFKI | 5/15/1991 | $13.80 | 7/16/1996 | Denmark |
| 10027 | ANATR | 4/4/1990 | $19.80 | 9/11/1996 | Brazil |
| 10028 | ANTON | 11/30/1957 | $25.80 | 10/7/1996 | Germany |
| 10029 | BLONP | 10/22/1930 | $31.80 | 12/30/1996 | Austria |
| 10030 | BOLID | 2/18/1953 | $37.80 | 12/3/1997 | Switzerland |
| 10031 | ALFKI | 5/15/1991 | $16.10 | 7/16/1996 | Denmark |
| 10032 | ANATR | 4/4/1990 | $23.10 | 9/11/1996 | Brazil |
| 10033 | ANTON | 11/30/1957 | $30.10 | 10/7/1996 | Germany |
| 10034 | BLONP | 10/22/1930 | $37.10 | 12/30/1996 | Austria |
| 10035 | BOLID | 2/18/1953 | $44.10 | 12/3/1997 | Switzerland |
| 10036 | ALFKI | 5/15/1991 | $18.40 | 7/16/1996 | Denmark |
| 10037 | ANATR | 4/4/1990 | $26.40 | 9/11/1996 | Brazil |
| 10038 | ANTON | 11/30/1957 | $34.40 | 10/7/1996 | Germany |
| 10039 | BLONP | 10/22/1930 | $42.40 | 12/30/1996 | Austria |
| 10040 | BOLID | 2/18/1953 | $50.40 | 12/3/1997 | Switzerland |
| 10041 | ALFKI | 5/15/1991 | $20.70 | 7/16/1996 | Denmark |
| 10042 | ANATR | 4/4/1990 | $29.70 | 9/11/1996 | Brazil |
| 10043 | ANTON | 11/30/1957 | $38.70 | 10/7/1996 | Germany |
| 10044 | BLONP | 10/22/1930 | $47.70 | 12/30/1996 | Austria |
| 10045 | BOLID | 2/18/1953 | $56.70 | 12/3/1997 | Switzerland |
| 10046 | ALFKI | 5/15/1991 | $23.00 | 7/16/1996 | Denmark |
| 10047 | ANATR | 4/4/1990 | $33.00 | 9/11/1996 | Brazil |
| 10048 | ANTON | 11/30/1957 | $43.00 | 10/7/1996 | Germany |
| 10049 | BLONP | 10/22/1930 | $53.00 | 12/30/1996 | Austria |
| 10050 | BOLID | 2/18/1953 | $63.00 | 12/3/1997 | Switzerland |
| 10051 | ALFKI | 5/15/1991 | $25.30 | 7/16/1996 | Denmark |
| 10052 | ANATR | 4/4/1990 | $36.30 | 9/11/1996 | Brazil |
| 10053 | ANTON | 11/30/1957 | $47.30 | 10/7/1996 | Germany |
| 10054 | BLONP | 10/22/1930 | $58.30 | 12/30/1996 | Austria |
| 10055 | BOLID | 2/18/1953 | $69.30 | 12/3/1997 | Switzerland |
| 10056 | ALFKI | 5/15/1991 | $27.60 | 7/16/1996 | Denmark |
| 10057 | ANATR | 4/4/1990 | $39.60 | 9/11/1996 | Brazil |
| 10058 | ANTON | 11/30/1957 | $51.60 | 10/7/1996 | Germany |
| 10059 | BLONP | 10/22/1930 | $63.60 | 12/30/1996 | Austria |
| 10060 | BOLID | 2/18/1953 | $75.60 | 12/3/1997 | Switzerland |
| 10061 | ALFKI | 5/15/1991 | $29.90 | 7/16/1996 | Denmark |
| 10062 | ANATR | 4/4/1990 | $42.90 | 9/11/1996 | Brazil |
| 10063 | ANTON | 11/30/1957 | $55.90 | 10/7/1996 | Germany |
| 10064 | BLONP | 10/22/1930 | $68.90 | 12/30/1996 | Austria |
| 10065 | BOLID | 2/18/1953 | $81.90 | 12/3/1997 | Switzerland |
| 10066 | ALFKI | 5/15/1991 | $32.20 | 7/16/1996 | Denmark |
| 10067 | ANATR | 4/4/1990 | $46.20 | 9/11/1996 | Brazil |
| 10068 | ANTON | 11/30/1957 | $60.20 | 10/7/1996 | Germany |
| 10069 | BLONP | 10/22/1930 | $74.20 | 12/30/1996 | Austria |
| 10070 | BOLID | 2/18/1953 | $88.20 | 12/3/1997 | Switzerland |
| 10071 | ALFKI | 5/15/1991 | $34.50 | 7/16/1996 | Denmark |
| 10072 | ANATR | 4/4/1990 | $49.50 | 9/11/1996 | Brazil |
| 10073 | ANTON | 11/30/1957 | $64.50 | 10/7/1996 | Germany |
| 10074 | BLONP | 10/22/1930 | $79.50 | 12/30/1996 | Austria |
| 10075 | BOLID | 2/18/1953 | $94.50 | 12/3/1997 | Switzerland |
The RowHeight property can be used to enable the Blazor DataGrid row height feature.
In this demo, the RowHeight for all DataGrid rows can be changed to 20px, 40px and 60px by clicking the toolbar button.
More information about the Row height feature can be found in this documentation section.