title: React-Hooks: How to create reusable data table component?
body: <p>In my application, I need to reuseable data table component. Where I can change table-header &amp;  table-body with dynamic content.</p>
  <pre><code> &lt;table className=&quot;table table-hover&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;Image&lt;/th&gt;
                          &lt;th&gt;Title&lt;/th&gt;
                          &lt;th&gt;Publish Date&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {data &amp;&amp;
                          data.map(item =&gt; (
                              &lt;tr key={item.id}&gt;
                                  &lt;td&gt;{item.id}&lt;/td&gt;
                                  &lt;td&gt;{item.image}&lt;/td&gt;
                                  &lt;td&gt;{item.title}&lt;/td&gt;
                                  &lt;td&gt;{item.publishDate}&lt;/td&gt;
                              &lt;/tr&gt;
                          ))}
                  &lt;/tbody&gt;
              &lt;/table&gt;
  </code></pre>