create table using weex

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.