Use DataTable component for teams and projects tables

Consistent table styling across the app with:
- Row hover highlighting
- Clickable rows
- Standard cell padding and borders
- Proper header styling

frontend/src/pages/TeamDashboardPage.css

@@ -61,93 +61,18 @@
   font-size: 1.25rem;
 }
 
-/* Projects Table */
+/* Table utility classes */
-.projects-table-container {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.projects-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.projects-table th {
-  text-align: left;
-  padding: 0.75rem 1rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.projects-table th:last-child {
-  border-right: none;
-}
-
-.projects-table td {
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  vertical-align: middle;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.projects-table td:last-child {
-  border-right: none;
-}
-
-.projects-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.project-row {
-  cursor: pointer;
-  transition: background 0.1s ease;
-}
-
-.project-row:hover {
-  background: var(--color-bg-secondary);
-}
-
-.project-name-link {
-  font-weight: 500;
-  color: var(--color-text);
-  text-decoration: none;
-}
-
-.project-name-link:hover {
-  color: var(--color-primary);
-}
-
-.project-description-cell {
-  color: var(--color-text-secondary);
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .text-muted {
   color: var(--color-text-muted);
 }
 
-.actions-cell {
-  width: 48px;
-  text-align: right;
-}
-
 .btn-ghost {
   background: transparent;
   color: var(--color-text-muted);
   border: none;
   padding: 0.375rem;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
 }
 
 .btn-ghost:hover {

frontend/src/pages/TeamDashboardPage.tsx

@@ -5,6 +5,7 @@ import { getTeam, listTeamProjects, createProject } from '../api';
 import { useAuth } from '../contexts/AuthContext';
 import { Badge } from '../components/Badge';
 import { Breadcrumb } from '../components/Breadcrumb';
+import { DataTable } from '../components/DataTable';
 import './TeamDashboardPage.css';
 
 function TeamDashboardPage() {
@@ -202,64 +203,65 @@ function TeamDashboardPage() {
             )}
           </div>
         ) : (
-          <div className="projects-table-container">
+          <DataTable
-            <table className="projects-table">
+            data={projects?.items || []}
-              <thead>
+            keyExtractor={(project) => project.id}
-                <tr>
+            onRowClick={(project) => navigate(`/project/${project.name}`)}
-                  <th>Name</th>
+            columns={[
-                  <th>Description</th>
+              {
-                  <th>Visibility</th>
+                key: 'name',
-                  <th>Created By</th>
+                header: 'Name',
-                  {isAdminOrOwner && <th></th>}
+                render: (project) => (
-                </tr>
+                  <Link
-              </thead>
+                    to={`/project/${project.name}`}
-              <tbody>
+                    className="cell-name"
-                {projects?.items.map(project => (
+                    onClick={(e) => e.stopPropagation()}
-                  <tr
-                    key={project.id}
-                    className="project-row"
-                    onClick={() => navigate(`/project/${project.name}`)}
                   >
-                    <td>
+                    {project.name}
-                      <Link
+                  </Link>
-                        to={`/project/${project.name}`}
+                ),
-                        className="project-name-link"
+              },
-                        onClick={(e) => e.stopPropagation()}
+              {
-                      >
+                key: 'description',
-                        {project.name}
+                header: 'Description',
-                      </Link>
+                className: 'cell-description',
-                    </td>
+                render: (project) => project.description || <span className="text-muted">—</span>,
-                    <td className="project-description-cell">
+              },
-                      {project.description || <span className="text-muted">—</span>}
+              {
-                    </td>
+                key: 'visibility',
-                    <td>
+                header: 'Visibility',
-                      <Badge variant={project.is_public ? 'public' : 'private'}>
+                render: (project) => (
-                        {project.is_public ? 'Public' : 'Private'}
+                  <Badge variant={project.is_public ? 'public' : 'private'}>
-                      </Badge>
+                    {project.is_public ? 'Public' : 'Private'}
-                    </td>
+                  </Badge>
-                    <td className="text-muted">{project.created_by}</td>
+                ),
-                    {isAdminOrOwner && (
+              },
-                      <td className="actions-cell">
+              {
-                        <button
+                key: 'created_by',
-                          className="btn btn-sm btn-ghost"
+                header: 'Created By',
-                          onClick={(e) => {
+                render: (project) => <span className="text-muted">{project.created_by}</span>,
-                            e.stopPropagation();
+              },
-                            navigate(`/project/${project.name}/settings`);
+              ...(isAdminOrOwner ? [{
-                          }}
+                key: 'actions',
-                          title="Settings"
+                header: '',
-                        >
+                render: (project: Project) => (
-                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <button
-                            <circle cx="12" cy="12" r="3"/>
+                    className="btn btn-sm btn-ghost"
-                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                    onClick={(e) => {
-                          </svg>
+                      e.stopPropagation();
-                        </button>
+                      navigate(`/project/${project.name}/settings`);
-                      </td>
+                    }}
-                    )}
+                    title="Settings"
-                  </tr>
+                  >
-                ))}
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              </tbody>
+                      <circle cx="12" cy="12" r="3"/>
-            </table>
+                      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-          </div>
+                    </svg>
+                  </button>
+                ),
+              }] : []),
+            ]}
+          />
         )}
 
         {projects && projects.pagination.total > 10 && (

frontend/src/pages/TeamsPage.css

@@ -171,60 +171,7 @@
   color: var(--color-text-muted);
 }
 
-/* Table */
+/* Table cell styles */
-.teams-table-container {
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.teams-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.teams-table th {
-  text-align: left;
-  padding: 0.75rem 1rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.teams-table th:last-child {
-  border-right: none;
-}
-
-.teams-table td {
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  vertical-align: middle;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.teams-table td:last-child {
-  border-right: none;
-}
-
-.teams-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.team-row {
-  cursor: pointer;
-  transition: background 0.1s ease;
-}
-
-.team-row:hover {
-  background: var(--color-bg-secondary);
-}
 
 .team-name-cell {
   display: flex;

frontend/src/pages/TeamsPage.tsx

@@ -4,6 +4,7 @@ import { TeamDetail, TeamCreate, PaginatedResponse } from '../types';
 import { listTeams, createTeam } from '../api';
 import { useAuth } from '../contexts/AuthContext';
 import { Badge } from '../components/Badge';
+import { DataTable } from '../components/DataTable';
 import './TeamsPage.css';
 
 function TeamsPage() {
@@ -265,53 +266,54 @@ function TeamsPage() {
           )}
         </div>
       ) : (
-        <div className="teams-table-container">
+        <DataTable
-          <table className="teams-table">
+          data={filteredTeams}
-            <thead>
+          keyExtractor={(team) => team.id}
-              <tr>
+          onRowClick={(team) => navigate(`/teams/${team.slug}`)}
-                <th>Name</th>
+          columns={[
-                <th>Description</th>
+            {
-                <th>Role</th>
+              key: 'name',
-                <th>Members</th>
+              header: 'Name',
-                <th>Projects</th>
+              render: (team) => (
-              </tr>
+                <div className="team-name-cell">
-            </thead>
+                  <Link
-            <tbody>
+                    to={`/teams/${team.slug}`}
-              {filteredTeams.map(team => (
+                    className="cell-name"
-                <tr
+                    onClick={(e) => e.stopPropagation()}
-                  key={team.id}
+                  >
-                  className="team-row"
+                    {team.name}
-                  onClick={() => navigate(`/teams/${team.slug}`)}
+                  </Link>
-                >
+                  <span className="team-slug">@{team.slug}</span>
-                  <td>
+                </div>
-                    <div className="team-name-cell">
+              ),
-                      <Link
+            },
-                        to={`/teams/${team.slug}`}
+            {
-                        className="team-name-link"
+              key: 'description',
-                        onClick={(e) => e.stopPropagation()}
+              header: 'Description',
-                      >
+              className: 'cell-description',
-                        {team.name}
+              render: (team) => team.description || <span className="text-muted">—</span>,
-                      </Link>
+            },
-                      <span className="team-slug">@{team.slug}</span>
+            {
-                    </div>
+              key: 'role',
-                  </td>
+              header: 'Role',
-                  <td className="team-description-cell">
+              render: (team) => team.user_role ? (
-                    {team.description || <span className="text-muted">—</span>}
+                <Badge variant={roleConfig[team.user_role]?.variant || 'default'}>
-                  </td>
+                  {roleConfig[team.user_role]?.label || team.user_role}
-                  <td>
+                </Badge>
-                    {team.user_role && (
+              ) : null,
-                      <Badge variant={roleConfig[team.user_role]?.variant || 'default'}>
+            },
-                        {roleConfig[team.user_role]?.label || team.user_role}
+            {
-                      </Badge>
+              key: 'members',
-                    )}
+              header: 'Members',
-                  </td>
+              render: (team) => <span className="text-muted">{team.member_count}</span>,
-                  <td className="text-muted">{team.member_count}</td>
+            },
-                  <td className="text-muted">{team.project_count}</td>
+            {
-                </tr>
+              key: 'projects',
-              ))}
+              header: 'Projects',
-            </tbody>
+              render: (team) => <span className="text-muted">{team.project_count}</span>,
-          </table>
+            },
-        </div>
+          ]}
+        />
       )}
     </div>
   );