DataGrid

DataGrid.tsx

import React, { useState } from "react";
import { DataGridProps } from "./types";

const DataGrid = ({ data, pageSize = 10 }: DataGridProps) => {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(data.length / pageSize);
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const currentData = data.slice(start, end);

  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div className="datagrid">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {currentData.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="pagination">
        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
        >
          Prev
        </button>
        {Array.from({ length: totalPages }, (_, i) => (
          <button
            key={i + 1}
            onClick={() => handlePageChange(i + 1)}
            disabled={currentPage === i + 1}
          >
            {i + 1}
          </button>
        ))}
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default DataGrid;

Usage

import React from "react";
import DataGrid from "./DataGrid";

const data = [
  { id: 1, name: "John Doe", email: "johndoe@example.com" },
  { id: 2, name: "Jane Doe", email: "janedoe@example.com" },
  // ...more data
];

const App = () => {
  return <DataGrid data={data} pageSize={5} />;
};

export default App;

DataGrid.module.css

.datagrid {
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.datagrid th,
.datagrid td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

.datagrid th {
  background-color: #f2f2f2;
}

.datagrid tr:nth-child(even) {
  background-color: #f2f2f2;
}

.datagrid .pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.datagrid .pagination button {
  margin: 0 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
}

.datagrid .pagination button:hover:not([disabled]) {
  background-color: #f2f2f2;
}