create table using weex - css

Question

I need to build an app that has a table. I tried using html <table> tags to build a table. Even though it shows the table as i require when i run using npm run serve when i build an apk and run it on my android device the output is messed up.
Does anyone know how to build a table in weex.
And does anyone have any good documentations or tutorials regarding weex.
thanks

Answer 1

It looks like HTML but Weex does not render actual HTML on native. The <div>s you write are Weex components that get translated to the target platform.
So while running on a browser may render tables, until Weex has a default <table> component, it won't render on native as you expect.
You can create your own component and lay it out using flexbox.

Answer 2

As others have commented, Weex doesn't use HTML but rather has a XML syntax which looks alike. So you need to implement something akin to a using only <div>s. I had to do exacly that, so I might as well post it here.
<template>
<div class="table">
<div class="row heading">
<div class="cell headingColumn">Table</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell headingColumn">Row 2</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</template>
<style scoped>
.table {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 60px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
/*width: 100px;*/
padding: 20px;
}
.heading {
background-color: grey;
font-weight: bold;
}
.headingColumn {
width: 120px;
}
</style>
Copy and paste it into dotwe.org and it will work and be rendered as expected in Android & the web.
As a side note, if you specify fixed widths (or min-widths) for the columns, styling will be much easier. That's why I've specified a .headingColumn class and there's a commented width:100px value inside .cell.
BTW, you might need to edit the and add a tag inside them with the text content you want.