Untitled
import React from "react"; // Dummy JSON data with varying columns const logsData = [ { id: 1, name: "John Doe", email: "john.doe@example.com", phone: "+1-202-555-0176", address: "123 Elm Street", city: "Springfield", state: "IL", registrationDate: "2024-01-15T08:45:00Z", }, { id: 2, name: "Jane Smith", email: "jane.smith@example.com", phone: "+1-202-555-0145", address: "456 Maple Avenue", city: "Metropolis", state: "NY", registrationDate: "2024-02-22T09:30:00Z", }, { id: 3, name: "Alice Johnson", email: "alice.johnson@example.com", phone: "+1-202-555-0192", address: "789 Oak Lane", city: "Smallville", state: "KS", registrationDate: "2024-03-10T10:15:00Z", }, { id: 4, name: "Bob Brown", email: "bob.brown@example.com", phone: "+1-202-555-0187", address: "101 Pine Road", city: "Gotham", state: "NJ", registrationDate: "2024-04-05T11:00:00Z", }, { id: 5, name: "Carol White", email: "carol.white@example.com", phone: "+1-202-555-0123", address: "202 Birch Street", city: "Star City", state: "CA", registrationDate: "2024-05-20T12:45:00Z", }, { id: 6, name: "David Lee", email: "david.lee@example.com", phone: "+1-202-555-0164", address: "303 Cedar Boulevard", city: "Central City", state: "TX", registrationDate: "2024-06-18T13:30:00Z", }, { id: 7, name: "Emily Davis", email: "emily.davis@example.com", phone: "+1-202-555-0138", address: "404 Walnut Street", city: "Fictional City", state: "FL", registrationDate: "2024-07-25T14:15:00Z", }, { id: 8, name: "Frank Miller", email: "frank.miller@example.com", phone: "+1-202-555-0159", address: "505 Cherry Lane", city: "Dreamtown", state: "WA", registrationDate: "2024-08-30T15:00:00Z", }, ]; // Function to format the date const formatDate = (timestamp) => { const date = new Date(timestamp); return date.toLocaleString(); }; // Component to render the dynamic table const Logs = () => { // Get the unique keys from the first object of logsData to use as table headers const headers = Object.keys(logsData[0] || {}); return ( <div className="max-w-4xl mx-auto p-4"> <h1 className="text-2xl font-bold mb-4">User Activity Logs</h1> <div className="bg-white shadow-md rounded-md overflow-hidden"> <table className="min-w-full divide-y divide-gray-200"> <thead className="bg-blue-700"> <tr> {headers.map((header) => ( <th key={header} className="px-6 py-3 text-left text-xs font-medium text-gray-50 uppercase tracking-wider" > {header.charAt(0).toUpperCase() + header.slice(1)} </th> ))} <th className="px-6 py-3 text-left text-xs font-medium text-gray-50 uppercase tracking-wider" > Actions </th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200 "> {logsData.map((log) => ( <> <tr key={log.id} className="hover:bg-gray-50"> {headers.map((header) => ( <td key={header} className="px-6 py-4 whitespace-nowrap font-sans text-sm text-gray-500 " > {header === "timestamp" ? formatDate(log[header]) : log[header]} </td> ))} <td className="px-6 py-4 whitespace-nowrap font-sans text-sm text-gray-500 "> <button>edit</button> <button>delete</button> </td> </tr> </> ))} </tbody> </table> </div> </div> ); }; export default Logs;
Leave a Comment