React Native Table / Grid Layout

[marqroldan]

Goal

• Cross-platform table layout similar to the web; tables with cells that support spanning: rowspan and colspan

---

Android

• https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/GridLayout.java
• https://data-flair.training/blogs/android-gridlayout/
• https://developer.android.com/reference/kotlin/androidx/gridlayout/widget/GridLayout

iOS

• https://developer.apple.com/documentation/appkit/nstexttableblock/1532894-init

React Native

• https://github.com/Gil2015/react-native-table-component

Mixed / Unrelated / Algorithm / Others

• https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/layouts/grid-layout/index.ios.ts
• https://snai.pe/posts/rendering-tables

[marqroldan]

2-span column

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

[marqroldan]

2-span row

<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>