Table

A customizable table component for data storage

Galaxy Table

A default table for storing data in rows and column

Preview

ID	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	Editor
3	Sam Wilson	sam@example.com	Viewer

import React from "react";

const Table = () => {
  const tableData = [
    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor" },
    { id: 3, name: "Sam Wilson", email: "sam@example.com", role: "Viewer" }
  ];

  return (
    <div className="container mx-auto p-4">
      <div className="overflow-x-auto">
        <table className="min-w-full border-collapse text-sm">
          <thead>
            <tr className="bg-gray-100">
              <th className="px-4 py-2 text-left">ID</th>
              <th className="px-4 py-2 text-left">Name</th>
              <th className="px-4 py-2 text-left">Email</th>
              <th className="px-4 py-2 text-left">Role</th>
            </tr>
          </thead>
          <tbody>
            {tableData.map((row) => (
              <tr
                key={row.id}
                className="odd:bg-white even:bg-gray-50 text-nowrap"
              >
                <td className="px-4 py-2">{row.id}</td>
                <td className="px-4 py-2">{row.name}</td>
                <td className="px-4 py-2">{row.email}</td>
                <td className="px-4 py-2">{row.role}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Table;

Usage Example

import React from "react";
import Table from "./components/comp/Table/GalaxyTable";

const App = () => {
  return (
    <div>
      <Table />
    </div>
  );
};

export default App;