title: Set column width dynamically according to content in table
body: <p>I'm trying to replicate the default logic behind the  component from HTML in my react-native application, meaning that given the content of a cell it should expand its width accordingly and the set of cells in the same column and reduce the witdh of the other columns, something like this:</p>
  
  <pre><code>+-------+-------+----------------------------+-------+-------+
  |  HEAD |  HEAD |            HEAD            |  HEAD |  HEAD |
  +-------+-------+----------------------------+-------+-------+
  | short | short | short                      | short | short |
  +-------+-------+----------------------------+-------+-------+
  | short | short | very long text in one cell | short | short |
  +-------+-------+----------------------------+-------+-------+
  | short | short | short                      | short | short |
  +-------+-------+----------------------------+-------+-------+
  </code></pre>
  
  <p>And since at first I don't know the number of columns that the table is going to have I should only guarantee that the whole table will fit in the screen of the device (without horizontal scroll) and that each column will have a width to contain the contents of the longest string given by the dataset.</p>
  
  <p>I've tried using the property <code>alignSelf: 'stretch'</code> in each cell but the result is not as expected as it only grows accordingly the content of that specific cell, like in the screenshot provided.</p>
  
  <pre><code>{data.map(d =&gt; {
      return (
          &lt;View key={d} style={{ flexDirection: 'row' }}&gt;
              &lt;View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}&gt;
                  &lt;Text&gt;{d}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}&gt;
                  &lt;Text&gt;{d}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}&gt;
                  &lt;Text&gt;{d}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={{ alignSelf: 'stretch', borderRightColor: 'red', borderRightWidth: 1, padding: 8 }}&gt;
                  &lt;Text&gt;{d}&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  })}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VgfZG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VgfZG.png" alt="Current status"></a></p>
  
  <p>Any help will be appreciated.</p>