A
Anonymous

Table Component - Copy this React, Tailwind Component to your project

Import React from 'react'; const TableComponent = ({ data }) => { if (!data || data.length === 0) { return <div>No Data Available</div>; } const headers = Object.keys(data[0]); return ( <table> <thead> <tr> {headers.map((header) => ( <th key={header}>{header}</th> ))} </tr> </thead> <tbody> {data.map((row, index) => ( <tr key={index}> {headers.map((header) => ( <td key={header}>{row[header]}</td> ))} </tr> ))} </tbody> </table> ); }; export default TableComponent;

Prompt
Component Preview

About

TableComponent - A responsive table that displays data dynamically with headers and rows. Built with React and Tailwind. Get component free!

Share

Last updated 1 month ago