n3wt-school/Front-End/src/components/Table.js

import React from 'react';
import PropTypes from 'prop-types';
import Pagination from '@/components/Pagination'; // Correction du chemin d'importation

const Table = ({
  data,
  columns,
  renderCell,
  itemsPerPage = 0,
  currentPage,
  totalPages,
  onPageChange,
  onRowClick,
  selectedRows,
  isSelectable = false,
  defaultTheme = 'bg-emerald-50', // Blanc cassé pour les lignes paires
  emptyMessage = null,
}) => {
  const handlePageChange = (newPage) => {
    onPageChange(newPage);
  };

  return (
    <div className="bg-stone-50 rounded-lg border border-gray-300 shadow-md">
      <table className="min-w-full bg-stone-50">
        <thead>
          <tr>
            {columns.map((column, index) => (
              <th
                key={index}
                className="py-2 px-4 border-b border-gray-300 bg-gray-100 text-center text-sm font-semibold text-gray-700"
              >
                {column.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data && data.length > 0 ? (
            data.map((row, rowIndex) => (
              <tr
                key={rowIndex}
                className={`
                  ${isSelectable ? 'cursor-pointer' : ''}
                  ${
                    selectedRows?.includes(row.id)
                      ? 'bg-emerald-200 text-white'
                      : rowIndex % 2 === 0
                        ? `${defaultTheme}`
                        : 'bg-stone-50'
                  }
                  ${isSelectable ? 'hover:bg-emerald-100' : ''}
                `}
                onClick={() => {
                  if (isSelectable && onRowClick) {
                    if (selectedRows?.includes(row.id)) {
                      onRowClick({ deselected: true, row });
                    } else {
                      onRowClick(row);
                    }
                  }
                }}
              >
                {columns.map((column, colIndex) => (
                  <td
                    key={colIndex}
                    className={`py-2 px-4 border-b border-gray-300 text-center text-sm ${
                      selectedRows?.includes(row.id)
                        ? 'text-white'
                        : 'text-gray-700'
                    }`}
                  >
                    {renderCell
                      ? renderCell(row, column.name)
                      : column.transform(row)}
                  </td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={columns.length}>{emptyMessage}</td>
            </tr>
          )}
        </tbody>
      </table>
      {itemsPerPage > 0 && data && data.length > 0 && (
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={handlePageChange}
        />
      )}
    </div>
  );
};

Table.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      transform: PropTypes.func.isRequired,
    })
  ).isRequired,
  renderCell: PropTypes.func,
  itemsPerPage: PropTypes.number,
  currentPage: PropTypes.number.isRequired,
  totalPages: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
  onRowClick: PropTypes.func,
  selectedRows: PropTypes.arrayOf(PropTypes.any),
  isSelectable: PropTypes.bool,
  defaultTheme: PropTypes.string,
};

export default Table;