maui - tabel view not align properly

Question

Hi,

Please see the screen shoot the header are in small letter +the content not align properly

• no border line outside and inside the table

 <DataTemplate>

                    <Grid RowDefinitions="auto" ColumnDefinitions="auto,auto,auto,auto,auto,auto,auto" ColumnSpacing="10"  BackgroundColor="Azure" HorizontalOptions="Start">
                        <TableView Grid.Row ="0" Grid.Column="0" Intent="Menu" >
                            <TableRoot >
                                <TableSection Title="Job ID">
                                    <TextCell Text="{Binding Group.Key}" />
                                 </TableSection>
                            </TableRoot>
                        </TableView>
                        <TableView Grid.Row ="0" Grid.Column="1" Intent="Menu" >
                            <TableRoot>
                                <TableSection Title="Destination">
                                    <TextCell Text="{Binding Group.Items[0].Alias}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>
                        <TableView Grid.Row ="0" Grid.Column="2"    Intent="Menu">
                            <TableRoot>
                                <TableSection Title="Start Date Time">
                                    <TextCell Text="{Binding Group.Items[0].CreatedTimeStamp}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>
                        <!--<TableView Grid.Row ="0" Grid.Column="3" Intent="Menu">
                            <TableRoot>
                                <TableSection Title="End End Time">
                                    <TextCell Text="{Binding Group.Items[n-1].CreatedTimeStamp}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>-->
                        <TableView Grid.Row ="0" Grid.Column="4"  Intent="Menu">
                            <TableRoot>
                                <TableSection Title="Total Files">
                                    <TextCell Text="{Binding Group.Items[0].TotalFiles}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>
                        <TableView Grid.Row ="0" Grid.Column="5"  Intent="Menu">
                            <TableRoot>
                                <TableSection Title="Cnt Clean">
                                    <TextCell Text="{Binding Group.Items[0].CntClean}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>
                        <TableView Grid.Row ="0" Grid.Column="6"  Intent="Menu">
                            <TableRoot>
                                <TableSection Title="Cnt Infected">
                                    <TextCell Text="{Binding Group.Items[0].CntInfected}"/>
                                </TableSection>
                            </TableRoot>
                        </TableView>

                    </Grid>

                 </DataTemplate>

Answer 1

Hello,

You can do this by using ViewCell and Label that set 5 for margin left to replace the <TextCell Text="{Binding Group.Key}" />

Here is my tested code. You can change other TextCell as well.

<TableRoot >
     <TableSection Title="Job ID">

     <ViewCell>
         <Label FontAttributes="Bold" Margin="{OnPlatform 0, WinUI='5,0,0,0'}" Text="{Binding Group.Key}"></Label>
     </ViewCell>

     </TableSection>
</TableRoot>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.