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',
}) => {
  const handlePageChange = (newPage) => {
    onPageChange(newPage);
  };

  return (
    <div className="bg-white rounded-lg border border-gray-200">
      <table className="min-w-full bg-white">
        <thead>
          <tr>
            {columns.map((column, index) => (
              <th
                key={index}
                className="py-2 px-4 border-b border-gray-200 bg-gray-100 text-center text-sm font-semibold text-gray-600"
              >
                {column.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data?.map((row, rowIndex) => (
            <tr
              key={rowIndex}
              className={`
                ${isSelectable ? 'cursor-pointer' : ''}
                ${selectedRows?.includes(row.id) ? 'bg-emerald-300 text-white' : rowIndex % 2 === 0 ? `${defaultTheme}` : ''}
                ${isSelectable ? 'hover:bg-emerald-200' : ''}
              `}
              onClick={() => {
                if (isSelectable && onRowClick) {
                  // Si la ligne est déjà sélectionnée, transmettre une indication explicite de désélection
                  if (selectedRows?.includes(row.id)) {
                    onRowClick({ deselected: true, row }); // Désélectionner
                  } else {
                    onRowClick(row); // Sélectionner
                  }
                }
              }}
            >
              {columns.map((column, colIndex) => (
                <td
                  key={colIndex}
                  className={`py-2 px-4 border-b border-gray-200 text-center text-sm ${selectedRows?.includes(row.id) ? 'text-white' : 'text-gray-700'}`}
                >
                  {renderCell
                    ? renderCell(row, column.name)
                    : column.transform(row)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      {itemsPerPage > 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;