title: React: Render column component as a row component in a Table
body: <p>I'm creating a Table component in React. I'm looking in some Table components and they create an array of columns to pass to the Table. In this columns array you can put a function to render a component inside each row in tbody.  </p>
  
  <p><strong>First Example of Ant Design (<a href="https://ant.design/components/table/" rel="nofollow noreferrer">https://ant.design/components/table/</a>):</strong>  </p>
  
  <pre><code>const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: 'Action',
    key: 'action',
    render: (text, record) =&gt; ( &lt;&lt;-- THIS FUNCTION. IT RECEIVES THE ROW RECORD AS A PARAM TOO
      &lt;span&gt;
        This gonna be rendered in each row of the table
      &lt;/span&gt;
    ),
  }];  
  </code></pre>
  
  <p>I'm trying to figure it out a good way to create this mechanism to render a column in each row of the table body.  </p>
  
  <p>Is there a good example to study? I'm trying to read the source code in some components in NPM.. but it's hard to understand.</p>
  
  <p>Thanks devs!</p>