React-Hooks: How to create reusable data table component with dynamic content

In my application, I have the following data table which I want to make reusable. I tried to make a component based on the following code, however, the thead & tbody content has several types and varieties.

How can I make this reusable component?

<table className="table table-hover">                 <thead>                     <tr>                         <th>#</th>                         <th> Title</th>                     </tr>                 </thead>                 <tbody>                     {posts &&                         posts.map(item => (                             <tr key={item.id}>                                 <td>{item.id}</td>                                 <td>{item.title}</td>                             </tr>                         ))}                 </tbody>             </table>  

https://stackoverflow.com/questions/65379889/react-hooks-how-to-create-reusable-data-table-component-with-dynamic-content December 20, 2020 at 08:32PM