Creating column headers and cell borders for Zebble Grid

Issue

How can I add column and row borders and headers for each columns in Zebble for Xamarin grid and use it like a ASP.NET GridView or html table?

For example in below sample snippet want to place id="col1" in first column and Id="col2" in second column

<Grid z-of="rowItem, Cell" Id="List" DataSource="Items" LazyLoad="true" EmptyText="Empty list">        
    <z-Component z-type="Cell" z-partial="true" z-base="GridCell[rowItem]" >
       <TextView Id="col1" CssClass="tableCell" Text="@Item.Col1" />
       <TextView Id="col2" CssClass="tableCell" Text="@Item.Col2" />
    </z-Component>
  </Grid>

I did not found any documentation regarding this requirement at zebble grid documentation page.

I am using Zebble 4.0.140

Solution

Zebble Grid is not a data grid. It's essentially a List where more than one item can be rendered in each row. But the nature of the cells in each row are the same, as opposed to representing different columns of data.

But in general in mobile UX best practices it's advised to avoid column headers when showing lists of data. Of course in some wire-frames you may see the column headers but they are often there for clarification only and don't need implementing.

If you definitely do have to implement columns headers though, you can achieve that by placing TextView objects in a row right before the ListView.

Answered By - Paymon