webappAIO/frontend/src/components/shared/DataTable.tsx

import type { ReactNode } from 'react'
import { Card } from '../desktop/Card'

export interface DataTableColumn<T> {
  key: string
  label: string
  sortable?: boolean
  render: (row: T) => ReactNode
}

interface DataTableProps<T> {
  columns: DataTableColumn<T>[]
  rows: T[]
  rowKey: (row: T) => string
  sort?: string
  direction?: 'asc' | 'desc'
  onSortChange?: (key: string) => void
  page: number
  lastPage: number
  onPageChange: (page: number) => void
  isLoading?: boolean
}

export function DataTable<T>({
  columns,
  rows,
  rowKey,
  sort,
  direction,
  onSortChange,
  page,
  lastPage,
  onPageChange,
  isLoading,
}: DataTableProps<T>) {
  const pages = Array.from({ length: lastPage }, (_, i) => i + 1)

  return (
    <Card>
      <div className="table-responsive">
        <table className="table table-striped table-hover align-middle mb-0">
          <thead>
            <tr>
              {columns.map((col) => (
                <th key={col.key}>
                  {col.sortable ? (
                    <button
                      onClick={() => onSortChange?.(col.key)}
                      className="btn btn-link p-0 text-decoration-none fw-semibold"
                    >
                      {col.label} {sort === col.key && <i className={`bi bi-caret-${direction === 'asc' ? 'up' : 'down'}-fill`}></i>}
                    </button>
                  ) : (
                    col.label
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr>
                <td colSpan={columns.length} className="text-center text-secondary py-4">
                  Loading…
                </td>
              </tr>
            ) : rows.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="text-center text-secondary py-4">
                  No results.
                </td>
              </tr>
            ) : (
              rows.map((row) => (
                <tr key={rowKey(row)}>
                  {columns.map((col) => (
                    <td key={col.key}>{col.render(row)}</td>
                  ))}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {lastPage > 1 && (
        <nav className="mt-3" aria-label="Table pagination">
          <ul className="pagination pagination-sm justify-content-end mb-0">
            <li className={`page-item ${page <= 1 ? 'disabled' : ''}`}>
              <button className="page-link" onClick={() => onPageChange(page - 1)}>
                Previous
              </button>
            </li>
            {pages.map((p) => (
              <li key={p} className={`page-item ${p === page ? 'active' : ''}`}>
                <button className="page-link" onClick={() => onPageChange(p)}>
                  {p}
                </button>
              </li>
            ))}
            <li className={`page-item ${page >= lastPage ? 'disabled' : ''}`}>
              <button className="page-link" onClick={() => onPageChange(page + 1)}>
                Next
              </button>
            </li>
          </ul>
        </nav>
      )}
    </Card>
  )
}