title: Reusable table component with Reactjs and material UI
body: <p>I came from <code>Vue.js</code> <code>Vuetify.js</code> background.<code>Vuetify.js</code> has  <a href="https://vuetifyjs.com/en/components/data-tables/#usage" rel="nofollow noreferrer">v-data-table</a> component.</p>
  <p>Simply we pass headers and items to generate a nice table.</p>
  <pre><code> &lt;v-data-table
      :headers=&quot;headers&quot;
      :items=&quot;desserts&quot;
    &gt;&lt;/v-data-table&gt;
  </code></pre>
  <p>If we want to add a button, image, or something like that to a table cell
  What we do is</p>
  <pre><code>&lt;v-data-table :headers=&quot;headers&quot; :items=&quot;items&quot; &gt;
              &lt;template v-slot:item.images=&quot;{ item }&quot;&gt;
                &lt;v-img
                  v-if=&quot;item.images&quot;
                  max-width=&quot;150px&quot;
                  :src=&quot;item.images&quot;
                  contain
                &gt;&lt;/v-img&gt;
              &lt;/template&gt;
             
              &lt;template v-slot:item.update=&quot;{ item }&quot;&gt;
                &lt;v-btn
                  @click=&quot;
                    $router.replace({
                      path: '/create-product',
                      query: { id: item.id },
                    })
                  &quot;
                &gt;
                  &lt;v-icon&gt;edit&lt;/v-icon&gt;
                &lt;/v-btn&gt;&lt;/template
              &gt;
            &lt;/v-data-table&gt;
  </code></pre>
  <p>This is very clean and easy.</p>
  <p>In React.js also I could achieve the first thing using this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function ReusableTable({ headers, items }) {
    return (
      &lt;Grid container&gt;
        &lt;Grid item&gt;
          &lt;Card&gt;
            &lt;CardContent&gt;
              &lt;TableContainer component={Paper}&gt;
                &lt;Table&gt;
                  &lt;TableHead&gt;
                    &lt;TableRow&gt;
                      {headers.map((header, i) =&gt; (
                        &lt;TableCell key={i}&gt;{header.text.toUpperCase()}&lt;/TableCell&gt;
                      ))}
                    &lt;/TableRow&gt;
                  &lt;/TableHead&gt;{' '}
                  &lt;TableBody&gt;
                    {items.map((item, i) =&gt; (
                      &lt;TableRow key={i}&gt;
                        {headers.map(({ value }) =&gt; (
                          &lt;TableCell key={value}&gt;{item[value]}&lt;/TableCell&gt;
                        ))}
                      &lt;/TableRow&gt;
                    ))}
                  &lt;/TableBody&gt;
                &lt;/Table&gt;
              &lt;/TableContainer&gt;
            &lt;/CardContent&gt;
          &lt;/Card&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Here also I pass the headers and items.
  <strong>I want to display buttons, links, images, chips (UI) for certain columns in the table. How do I achieve that in the React world?</strong></p>
  <p>If I further explain, I want to pass items array (array of object). Object's imageSRC property should render with an <code>img</code> tag. Something like that.</p>