From 9f7537b35d32569d989c68c30660c7939350860d Mon Sep 17 00:00:00 2001
From: Tom Searle <tom@cogstack.org>
Date: Tue, 19 May 2026 23:36:14 +0100
Subject: [PATCH] fix(medcat-trainer): CU-869808bru: project list fixes,
 filtering, sortging

---
 .../src/components/admin/ProjectsList.vue     | 274 +++++++++++-
 .../src/components/common/ProjectList.vue     | 420 ++++++++++++++++--
 .../src/styles/_project-list-filters.scss     |  69 +++
 .../frontend/src/utils/projectListFilters.js  |  59 +++
 4 files changed, 760 insertions(+), 62 deletions(-)
 create mode 100644 medcat-trainer/webapp/frontend/src/styles/_project-list-filters.scss
 create mode 100644 medcat-trainer/webapp/frontend/src/utils/projectListFilters.js

diff --git a/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue b/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
index bf41d3c79..ac63d4f83 100644
--- a/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/admin/ProjectsList.vue
@@ -2,27 +2,130 @@
   <div class="list-section">
     <div v-if="projects.length > 0" class="table-container">
       <v-data-table
-        :items="projects"
-        :headers="tableHeaders"
+        :items="filteredProjects"
+        :headers="alignedTableHeaders"
         :hover="true"
-        @click:row="handleRowClick"
-        hide-default-footer
+        :mobile="false"
         :items-per-page="-1"
+        hide-default-footer
+        @click:row="handleRowClick"
         class="admin-table"
         dense>
+        <template #header.name>
+          <div class="column-header">
+            <button
+              type="button"
+              class="column-header-sort"
+              :class="{ active: sortBy === 'name' }"
+              title="Sort by title"
+              @click="toggleSort('name')">
+              Title
+              <font-awesome-icon
+                class="sort-icon"
+                :icon="sortBy === 'name' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+              />
+            </button>
+            <input
+              v-model="searchQuery"
+              type="search"
+              class="form-control form-control-sm header-filter-input"
+              placeholder="Filter…"
+              aria-label="Filter by title"
+              @click.stop
+            />
+          </div>
+        </template>
+
+        <template #header.project_status>
+          <div class="column-header">
+            <span class="column-header-label">Status</span>
+            <select
+              v-model="statusFilter"
+              class="form-control form-control-sm header-filter-input"
+              aria-label="Filter by project status"
+              @click.stop>
+              <option
+                v-for="opt in statusFilterOptions"
+                :key="opt.value"
+                :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+          </div>
+        </template>
+
+        <template #header.require_entity_validation>
+          <div class="column-header">
+            <span class="column-header-label">Mode</span>
+            <select
+              v-model="modeFilter"
+              class="form-control form-control-sm header-filter-input"
+              aria-label="Filter by annotate or validate"
+              @click.stop>
+              <option
+                v-for="opt in modeFilterOptions"
+                :key="opt.value"
+                :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+          </div>
+        </template>
+
+        <template #header.create_time>
+          <button
+            type="button"
+            class="column-header-sort"
+            :class="{ active: sortBy === 'create_time' }"
+            title="Sort by create date"
+            @click="toggleSort('create_time')">
+            Created
+            <font-awesome-icon
+              class="sort-icon"
+              :icon="sortBy === 'create_time' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+            />
+          </button>
+        </template>
+
+        <template #header.last_modified>
+          <button
+            type="button"
+            class="column-header-sort"
+            :class="{ active: sortBy === 'last_modified' }"
+            title="Sort by last modified"
+            @click="toggleSort('last_modified')">
+            Modified
+            <font-awesome-icon
+              class="sort-icon"
+              :icon="sortBy === 'last_modified' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+            />
+          </button>
+        </template>
+
         <template #item.name="{ item }">
           <div class="project-name-cell">
             <strong class="project-name">{{ item.name }}</strong>
           </div>
         </template>
-        <template #item.status="{ item }">
+        <template #item.project_status="{ item }">
           <span class="badge" :class="getStatusClass(item.project_status)">
             {{ getStatusText(item.project_status) }}
           </span>
         </template>
+        <template #item.require_entity_validation="{ item }">
+          <span class="badge" :class="getModeClass(item.require_entity_validation)">
+            {{ getModeText(item.require_entity_validation) }}
+          </span>
+        </template>
         <template #item.dataset="{ item }">
           <span>{{ getDatasetName(item.dataset) }}</span>
         </template>
+        <template #item.create_time="{ item }">
+          <span class="date-cell">{{ formatDate(item.create_time) }}</span>
+        </template>
+        <template #item.last_modified="{ item }">
+          <span class="date-cell">{{ formatDate(item.last_modified) }}</span>
+        </template>
         <template #item.actions="{ item }">
           <div class="action-buttons" @click.stop>
             <button
@@ -45,6 +148,16 @@
             </button>
           </div>
         </template>
+
+        <template #no-data>
+          <div class="empty-state empty-state-filtered">
+            <h4>No Matching Projects</h4>
+            <p>No projects match the current filters.</p>
+            <button type="button" class="btn btn-outline-primary" @click="clearFilters">
+              Clear filters
+            </button>
+          </div>
+        </template>
       </v-data-table>
     </div>
 
@@ -60,6 +173,13 @@
 </template>
 
 <script>
+import {
+  ALL_FILTER,
+  STATUS_FILTER_OPTIONS,
+  MODE_FILTER_OPTIONS,
+  filterAndSortProjects
+} from '@/utils/projectListFilters'
+
 export default {
   name: 'ProjectsList',
   props: {
@@ -75,36 +195,102 @@ export default {
   emits: ['select-project', 'clone-project', 'confirm-reset', 'confirm-delete', 'create-project'],
   data() {
     return {
+      searchQuery: '',
+      debouncedSearchQuery: '',
+      searchDebounceTimer: null,
+      statusFilter: ALL_FILTER,
+      modeFilter: ALL_FILTER,
+      sortBy: 'last_modified',
+      sortOrder: 'desc',
+      statusFilterOptions: STATUS_FILTER_OPTIONS,
+      modeFilterOptions: MODE_FILTER_OPTIONS,
       tableHeaders: [
-        { title: 'Name', value: 'name' },
-        { title: 'Description', value: 'description' },
-        { title: 'Status', value: 'status' },
-        { title: 'Dataset', value: 'dataset' },
-        { title: 'Actions', value: 'actions', sortable: false }
+        { title: 'Title', value: 'name', sortable: false, width: '14%' },
+        {
+          title: 'Description',
+          value: 'description',
+          sortable: false,
+          headerProps: { class: 'col-hide-narrow' },
+          cellProps: { class: 'col-hide-narrow' }
+        },
+        { title: 'Status', value: 'project_status', sortable: false, width: '5.5rem' },
+        { title: 'Mode', value: 'require_entity_validation', sortable: false, width: '5rem' },
+        { title: 'Dataset', value: 'dataset', sortable: false, width: '10%' },
+        { title: 'Created', value: 'create_time', sortable: false, width: '5.5rem' },
+        { title: 'Modified', value: 'last_modified', sortable: false, width: '6.5rem' },
+        { title: 'Actions', value: 'actions', sortable: false, width: '6.5rem' }
       ]
     }
   },
+  computed: {
+    alignedTableHeaders() {
+      return this.tableHeaders.map(h => ({ align: 'start', ...h }))
+    },
+    filteredProjects() {
+      return filterAndSortProjects(this.projects, {
+        searchQuery: this.debouncedSearchQuery,
+        statusFilter: this.statusFilter,
+        modeFilter: this.modeFilter,
+        sortBy: this.sortBy,
+        sortOrder: this.sortOrder
+      })
+    },
+  },
+  watch: {
+    searchQuery(val) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.debouncedSearchQuery = val
+      }, 200)
+    }
+  },
+  beforeUnmount() {
+    clearTimeout(this.searchDebounceTimer)
+  },
   methods: {
+    toggleSort(key) {
+      if (this.sortBy === key) {
+        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
+      } else {
+        this.sortBy = key
+        this.sortOrder = key === 'name' ? 'asc' : 'desc'
+      }
+    },
+    clearFilters() {
+      this.searchQuery = ''
+      this.debouncedSearchQuery = ''
+      this.statusFilter = ALL_FILTER
+      this.modeFilter = ALL_FILTER
+    },
     handleRowClick(event, { item }) {
-      // v-data-table click:row passes (event, { item })
       this.$emit('select-project', event, { item })
     },
+    formatDate(value) {
+      if (!value) return '—'
+      return new Date(value).toLocaleDateString()
+    },
     getStatusClass(status) {
       const classes = {
-        'A': 'badge-primary',
-        'C': 'badge-success',
-        'D': 'badge-danger'
+        A: 'badge-primary',
+        C: 'badge-success',
+        D: 'badge-danger'
       }
       return classes[status] || 'badge-secondary'
     },
     getStatusText(status) {
       const texts = {
-        'A': 'Annotating',
-        'C': 'Complete',
-        'D': 'Discontinued'
+        A: 'Annotating',
+        C: 'Complete',
+        D: 'Discontinued'
       }
       return texts[status] || status
     },
+    getModeClass(requireEntityValidation) {
+      return requireEntityValidation ? 'badge-primary' : 'badge-secondary'
+    },
+    getModeText(requireEntityValidation) {
+      return requireEntityValidation ? 'Annotate' : 'Validate'
+    },
     getDatasetName(datasetId) {
       const dataset = this.datasets.find(ds => ds.id === datasetId)
       return dataset ? dataset.name : 'N/A'
@@ -115,17 +301,71 @@ export default {
 
 <style scoped lang="scss">
 @import '@/styles/admin.scss';
+@import '@/styles/project-list-filters';
 
 .list-section {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
   .admin-table {
+    :deep(.v-table__wrapper) {
+      overflow-x: hidden;
+    }
+
+    :deep(table) {
+      table-layout: fixed;
+      width: 100%;
+    }
+
     :deep(tbody tr) {
       cursor: pointer;
     }
+
+    :deep(thead th),
+    :deep(tbody td) {
+      text-align: left !important;
+    }
+
+    :deep(thead th) {
+      vertical-align: bottom;
+      padding: 4px 6px;
+      font-size: 0.8rem;
+    }
+
+    :deep(tbody td) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.85rem;
+      padding: 4px 6px !important;
+      vertical-align: middle;
+    }
+
+    :deep(.action-buttons) {
+      justify-content: flex-start;
+    }
+
+    :deep(.col-hide-narrow) {
+      @media (max-width: 1200px) {
+        display: none !important;
+      }
+    }
   }
 
   .project-name {
     font-size: 0.95rem;
     color: var(--color-heading);
   }
+
+  .date-cell {
+    font-size: 0.85rem;
+    white-space: nowrap;
+  }
+
+  .empty-state-filtered {
+    padding: 40px 20px;
+    text-align: center;
+  }
 }
 </style>
diff --git a/medcat-trainer/webapp/frontend/src/components/common/ProjectList.vue b/medcat-trainer/webapp/frontend/src/components/common/ProjectList.vue
index e6152b7e8..4ae92b798 100644
--- a/medcat-trainer/webapp/frontend/src/components/common/ProjectList.vue
+++ b/medcat-trainer/webapp/frontend/src/components/common/ProjectList.vue
@@ -12,14 +12,129 @@
       </v-overlay>
       <v-data-table id="projectTable"
                     :key="tableKey"
-                    :headers="isAdmin ? projects.headers : projects.headers.filter(f => projects.adminOnlyFields.indexOf(f.value) === -1)"
-                    :items="projectItems"
+                    :headers="visibleHeaders"
+                    :items="filteredProjectItems"
                     :hover="true"
+                    :mobile="false"
                     :items-per-page="-1"
+                    hide-default-footer
                     :row-props="availableProjectForMetrics"
                     v-if="!loadingProjects"
-                    @click:row="select"
-                    hide-default-footer>
+                    @click:row="select">
+        <template #header.name>
+          <div class="column-header">
+            <button
+              type="button"
+              class="column-header-sort"
+              :class="{ active: sortBy === 'name' }"
+              title="Sort by title"
+              @click="toggleSort('name')">
+              Title
+              <font-awesome-icon
+                class="sort-icon"
+                :icon="sortBy === 'name' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+              />
+            </button>
+            <input
+              v-model="searchQuery"
+              type="search"
+              class="form-control form-control-sm header-filter-input"
+              placeholder="Filter…"
+              aria-label="Filter by title"
+              @click.stop
+            />
+          </div>
+        </template>
+
+        <template #header.require_entity_validation>
+          <div class="column-header">
+            <span class="column-header-label">Mode</span>
+            <select
+              v-model="modeFilter"
+              class="form-control form-control-sm header-filter-input"
+              aria-label="Filter by annotate or validate"
+              @click.stop>
+              <option
+                v-for="opt in modeFilterOptions"
+                :key="opt.value"
+                :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+          </div>
+        </template>
+
+        <template #header.status>
+          <div class="column-header">
+            <span class="column-header-label">
+              Status
+              <v-tooltip activator="parent">
+                <div>
+                  <font-awesome-icon class="status-cell" icon="pen"></font-awesome-icon> - project is actively annotating
+                </div>
+                <div>
+                  <font-awesome-icon class="status-cell danger" icon="times"></font-awesome-icon> - project marked as discontinued (failed)
+                </div>
+                <div>
+                  <font-awesome-icon class="status-cell complete-project success" icon="check"></font-awesome-icon> - project is complete
+                </div>
+              </v-tooltip>
+            </span>
+            <select
+              v-model="statusFilter"
+              class="form-control form-control-sm header-filter-input"
+              aria-label="Filter by project status"
+              @click.stop>
+              <option
+                v-for="opt in statusFilterOptions"
+                :key="opt.value"
+                :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+          </div>
+        </template>
+
+        <template #header.create_time>
+          <button
+            type="button"
+            class="column-header-sort"
+            :class="{ active: sortBy === 'create_time' }"
+            title="Sort by create date"
+            @click="toggleSort('create_time')">
+            Created
+            <font-awesome-icon
+              class="sort-icon"
+              :icon="sortBy === 'create_time' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+            />
+          </button>
+        </template>
+
+        <template #header.last_modified>
+          <button
+            type="button"
+            class="column-header-sort"
+            :class="{ active: sortBy === 'last_modified' }"
+            title="Sort by last modified"
+            @click="toggleSort('last_modified')">
+            Modified
+            <font-awesome-icon
+              class="sort-icon"
+              :icon="sortBy === 'last_modified' ? (sortOrder === 'asc' ? 'sort-up' : 'sort-down') : 'sort'"
+            />
+          </button>
+        </template>
+
+        <template #header.locked>
+          <span class="header-label-wrap">
+            <span>Project</span>
+            <span>Locked</span>
+          </span>
+          <v-tooltip activator="parent">
+            Whether the project is locked from further annotation
+          </v-tooltip>
+        </template>
+
         <template #header.metrics>
           Metrics
           <v-tooltip activator="parent">
@@ -33,22 +148,11 @@
             <div>'All' indicates there is no filter</div>
           </v-tooltip>
         </template>
-        <template #header.status>
-          Project Status
-          <v-tooltip activator="parent">
-            <div>
-              <font-awesome-icon class="status-cell" icon="pen"></font-awesome-icon> - project is actively annotating
-            </div>
-            <div>
-              <font-awesome-icon class="status-cell danger" icon="times"></font-awesome-icon> - project marked as discontinued (failed)
-            </div>
-            <div>
-              <font-awesome-icon class="status-cell complete-project success" icon="check"></font-awesome-icon> - project is complete
-            </div>
-          </v-tooltip>
-        </template>
         <template #header.anno_class>
-          Annotation Dataset
+          <span class="header-label-wrap">
+            <span>Annotation</span>
+            <span>Classification</span>
+          </span>
           <v-tooltip activator="parent">
             Annotation set classification.
             <div>
@@ -74,7 +178,7 @@
           {{new Date(item.create_time).toLocaleDateString()}}
         </template>
         <template #item.last_modified="{ item }">
-          {{new Date(item.last_modified).toLocaleString()}}
+          <span class="date-cell">{{ formatShortDate(item.last_modified) }}</span>
         </template>
         <template #item.cuis="{ item }">
           <div class="term-list">{{item.cuis.slice(0, 40) || 'All'}}</div>
@@ -154,11 +258,20 @@
           <v-progress-linear
             v-model="item.progress"
             color="#32ab60"
-            height="30px"
+            height="22px"
             :max="item.progress_max">
              <span>{{item.progress}}</span> / <span>{{item.progress_max}}</span>
           </v-progress-linear>
         </template>
+
+        <template #no-data>
+          <div class="project-list-no-data">
+            <p>No projects match the current filters.</p>
+            <button type="button" class="btn btn-outline-primary btn-sm" @click="clearFilters">
+              Clear filters
+            </button>
+          </div>
+        </template>
       </v-data-table>
     </div>
     <div>
@@ -233,6 +346,12 @@
 
 <script>
 import Modal from "@/components/common/Modal.vue"
+import {
+  ALL_FILTER,
+  STATUS_FILTER_OPTIONS,
+  MODE_FILTER_OPTIONS,
+  filterAndSortProjects
+} from '@/utils/projectListFilters'
 
 export default {
   name: "ProjectList",
@@ -244,26 +363,99 @@ export default {
   },
   data () {
     return {
+      searchQuery: '',
+      debouncedSearchQuery: '',
+      searchDebounceTimer: null,
+      statusFilter: ALL_FILTER,
+      modeFilter: ALL_FILTER,
+      sortBy: 'last_modified',
+      sortOrder: 'desc',
+      statusFilterOptions: STATUS_FILTER_OPTIONS,
+      modeFilterOptions: MODE_FILTER_OPTIONS,
       tableKey: 0,
       modelLoaded: {},
       projects: {
         headers: [
-          { value: 'locked', title: ''},
-          { value: 'id', title: 'ID' },
-          { value: 'name', title: 'Title' },
-          { value: 'description', title: 'Description' },
-          { value: 'create_time', title: 'Create Time',},
-          { value: 'last_modified', title: 'Last Modified' },
-          { value: 'cuis', title: 'Concepts' },
-          { value: 'require_entity_validation', title: 'Annotate / Validate' },
-          { value: 'status', title: 'Status' },
-          { value: 'progress', title: 'Progress' },
-          { value: 'anno_class', title: 'Annotation Classification' },
-          { value: 'cdb_search_filter', title: 'Concepts Imported' },
-          { value: 'run_model', title: 'Run Model' },
-          { value: 'model_loaded', title: 'Model Loaded' },
-          { value: 'metrics', title: 'Metrics' },
-          { value: 'save_model', title: 'Save Model' }
+          {
+            value: 'locked',
+            title: 'Project Locked',
+            width: '4rem',
+            headerProps: { class: 'icon-cell header-wrap-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          { value: 'id', title: 'ID', width: '3.25rem' },
+          { value: 'name', title: 'Title', width: '14%' },
+          {
+            value: 'description',
+            title: 'Description',
+            headerProps: { class: 'col-hide-narrow' },
+            cellProps: { class: 'col-hide-narrow' }
+          },
+          {
+            value: 'create_time',
+            title: 'Created',
+            width: '5.5rem',
+            headerProps: { class: 'col-hide-medium' },
+            cellProps: { class: 'col-hide-medium' }
+          },
+          { value: 'last_modified', title: 'Modified', width: '6.5rem' },
+          {
+            value: 'cuis',
+            title: 'CUIs',
+            headerProps: { class: 'col-hide-narrow' },
+            cellProps: { class: 'col-hide-narrow' }
+          },
+          { value: 'require_entity_validation', title: 'Mode', width: '6rem' },
+          {
+            value: 'status',
+            title: 'Status',
+            width: '3.25rem',
+            headerProps: { class: 'icon-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          { value: 'progress', title: 'Progress', width: '7.5rem', cellProps: { class: 'progress-cell' } },
+          {
+            value: 'anno_class',
+            title: 'Annotation Classification',
+            width: '5rem',
+            headerProps: { class: 'icon-cell header-wrap-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          {
+            value: 'cdb_search_filter',
+            title: 'CDB Import',
+            width: '3.5rem',
+            headerProps: { class: 'icon-cell header-wrap-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          {
+            value: 'run_model',
+            title: 'Run',
+            width: '4rem',
+            headerProps: { class: 'icon-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          {
+            value: 'model_loaded',
+            title: 'Model',
+            width: '4rem',
+            headerProps: { class: 'icon-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          {
+            value: 'metrics',
+            title: 'Metrics',
+            width: '4rem',
+            headerProps: { class: 'icon-cell' },
+            cellProps: { class: 'icon-cell' }
+          },
+          {
+            value: 'save_model',
+            title: 'Save',
+            width: '3.75rem',
+            headerProps: { class: 'icon-cell' },
+            cellProps: { class: 'icon-cell' }
+          }
         ],
         adminOnlyFields: [
           'anno_class',
@@ -289,11 +481,57 @@ export default {
       cancelRunningBgTaskModal: null
     }
   },
+  computed: {
+    visibleHeaders() {
+      const headers = this.isAdmin
+        ? this.projects.headers
+        : this.projects.headers.filter(f => this.projects.adminOnlyFields.indexOf(f.value) === -1)
+      return headers.map(h => ({ align: 'start', ...h }))
+    },
+    filteredProjectItems() {
+      return filterAndSortProjects(this.projectItems, {
+        searchQuery: this.debouncedSearchQuery,
+        statusFilter: this.statusFilter,
+        modeFilter: this.modeFilter,
+        sortBy: this.sortBy,
+        sortOrder: this.sortOrder
+      })
+    },
+  },
+  watch: {
+    searchQuery(val) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.debouncedSearchQuery = val
+      }, 200)
+    }
+  },
+  beforeUnmount() {
+    clearTimeout(this.searchDebounceTimer)
+  },
   created () {
     this.pollDocPrepStatus()
     this.fetchModelsLoaded()
   },
   methods: {
+    toggleSort(key) {
+      if (this.sortBy === key) {
+        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
+      } else {
+        this.sortBy = key
+        this.sortOrder = key === 'name' ? 'asc' : 'desc'
+      }
+    },
+    clearFilters() {
+      this.searchQuery = ''
+      this.debouncedSearchQuery = ''
+      this.statusFilter = ALL_FILTER
+      this.modeFilter = ALL_FILTER
+    },
+    formatShortDate(value) {
+      if (!value) return '—'
+      return new Date(value).toLocaleDateString()
+    },
     clearLoadedModel (projectId) {
       this.clearModelModal = projectId
     },
@@ -452,15 +690,98 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/project-list-filters';
 
-.status-cell {
+.project-list-no-data {
+  padding: 24px;
   text-align: center;
+
+  p {
+    margin-bottom: 12px;
+  }
+}
+
+#projectTable {
+  :deep(.v-table__wrapper) {
+    overflow-x: hidden;
+  }
+
+  :deep(table) {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  :deep(thead th),
+  :deep(tbody td) {
+    text-align: left !important;
+  }
+
+  :deep(thead th) {
+    vertical-align: bottom;
+    padding: 4px 6px;
+    font-size: 0.8rem;
+    overflow: hidden;
+  }
+
+  :deep(tbody td) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.85rem;
+    padding: 4px 6px !important;
+    vertical-align: middle;
+  }
+
+  :deep(td.progress-cell) {
+    white-space: normal;
+    overflow: visible;
+  }
+
+  :deep(th.icon-cell),
+  :deep(td.icon-cell) {
+    overflow: visible;
+    text-overflow: clip;
+    text-align: left !important;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  :deep(th.header-wrap-cell) {
+    overflow: visible;
+    white-space: normal;
+    vertical-align: bottom;
+  }
+
+  :deep(td.icon-cell .btn) {
+    padding: 2px 8px;
+    line-height: 1.2;
+  }
+
+  :deep(.col-hide-narrow) {
+    @media (max-width: 1400px) {
+      display: none !important;
+    }
+  }
+
+  :deep(.col-hide-medium) {
+    @media (max-width: 1100px) {
+      display: none !important;
+    }
+  }
+}
+
+.date-cell {
+  font-size: 0.8rem;
+}
+
+.status-cell {
+  text-align: left;
 }
 
 .status-unlocked {
-  text-align: center;
+  text-align: left;
   color: $color-1;
-  padding: 0 5px;
+  padding: 0;
   opacity: .5;
 }
 
@@ -473,23 +794,32 @@ export default {
 .project-table {
   height: calc(100% - 30px);
   padding: 10px 0;
-  width: 95%;
-  margin: auto;
+  width: 96%;
+  max-width: 96%;
+  margin: 0 auto;
 }
 
 .table-container {
   height: calc(100% - 125px);
   overflow-y: auto;
+  overflow-x: hidden;
+  max-width: 100%;
+  margin: 0 auto;
 }
 
 .complete-project, .success {
   color: $success;
-  font-size: 20px;
+  font-size: 1.1rem;
 }
 
 .danger {
   color: $danger;
-  font-size: 20px;
+  font-size: 1.1rem;
+}
+
+#projectTable :deep(td.icon-cell .status-cell) {
+  font-size: 1.1rem;
+  display: inline-block;
 }
 
 .model-up {
@@ -528,7 +858,7 @@ export default {
 
 .term-list {
   display: block;
-  max-width: 20vw;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/medcat-trainer/webapp/frontend/src/styles/_project-list-filters.scss b/medcat-trainer/webapp/frontend/src/styles/_project-list-filters.scss
new file mode 100644
index 000000000..97c2947a4
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/styles/_project-list-filters.scss
@@ -0,0 +1,69 @@
+@import './variables.scss';
+
+// Shared table header filter controls (ProjectList, ProjectsList)
+.column-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+}
+
+.column-header-label {
+  font-size: 0.75rem;
+  font-weight: inherit;
+  white-space: nowrap;
+}
+
+.column-header-sort {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-weight: 600;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  text-align: left;
+
+  .sort-icon {
+    font-size: 0.65rem;
+    opacity: 0.35;
+  }
+
+  &.active {
+    color: $primary;
+
+    .sort-icon {
+      opacity: 1;
+    }
+  }
+
+  &:hover .sort-icon {
+    opacity: 0.7;
+  }
+}
+
+.header-label-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1.15;
+  white-space: normal;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-align: left;
+}
+
+.header-filter-input {
+  min-height: 24px;
+  height: 24px;
+  padding: 1px 4px;
+  font-size: 0.75rem;
+  width: 100%;
+  max-width: 100%;
+}
+
diff --git a/medcat-trainer/webapp/frontend/src/utils/projectListFilters.js b/medcat-trainer/webapp/frontend/src/utils/projectListFilters.js
new file mode 100644
index 000000000..92f02be6a
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/utils/projectListFilters.js
@@ -0,0 +1,59 @@
+export const ALL_FILTER = ''
+
+export const STATUS_FILTER_OPTIONS = [
+  { label: 'All', value: ALL_FILTER },
+  { label: 'Annotating', value: 'A' },
+  { label: 'Complete', value: 'C' },
+  { label: 'Discontinued', value: 'D' }
+]
+
+export const MODE_FILTER_OPTIONS = [
+  { label: 'All', value: ALL_FILTER },
+  { label: 'Annotate', value: 'annotate' },
+  { label: 'Validate', value: 'validate' }
+]
+
+export const SORT_OPTIONS = [
+  { label: 'Last modified', value: 'last_modified' },
+  { label: 'Create time', value: 'create_time' },
+  { label: 'Title', value: 'name' }
+]
+
+const customKeySort = {
+  name: (a, b) => String(a || '').localeCompare(String(b || ''), undefined, { sensitivity: 'base' }),
+  create_time: (a, b) => new Date(a || 0) - new Date(b || 0),
+  last_modified: (a, b) => new Date(a || 0) - new Date(b || 0)
+}
+
+export function hasActiveProjectFilters({ searchQuery, statusFilter, modeFilter }) {
+  return Boolean(
+    searchQuery?.trim() ||
+    statusFilter !== ALL_FILTER ||
+    modeFilter !== ALL_FILTER
+  )
+}
+
+export function filterAndSortProjects(items, { searchQuery, statusFilter, modeFilter, sortBy, sortOrder }) {
+  let result = [...(items || [])]
+  const query = searchQuery?.trim().toLowerCase()
+
+  if (query) {
+    result = result.filter(p => (p.name || '').toLowerCase().includes(query))
+  }
+  if (statusFilter !== ALL_FILTER) {
+    result = result.filter(p => p.project_status === statusFilter)
+  }
+  if (modeFilter === 'annotate') {
+    result = result.filter(p => p.require_entity_validation === true)
+  } else if (modeFilter === 'validate') {
+    result = result.filter(p => p.require_entity_validation === false)
+  }
+
+  const direction = sortOrder === 'asc' ? 1 : -1
+  const sorter = customKeySort[sortBy]
+  if (sorter) {
+    result.sort((a, b) => sorter(a[sortBy], b[sortBy]) * direction)
+  }
+
+  return result
+}