refactor table sorting to composables and shared SortableTableHeaderCell

e2e/clients.spec.ts

@@ -8,7 +8,7 @@ import {
     createProjectViaApi,
     createPublicProjectViaApi,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToClientsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
@@ -210,18 +210,12 @@ test('test that client context menu delete deletes the client', async ({ page, c
 // Sorting Tests
 // =============================================
 
-async function clearClientTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('client-table-state');
-    });
-}
-
 test('test that sorting clients by name and status works', async ({ page, ctx }) => {
     await createClientViaApi(ctx, { name: 'AAA SortClient' });
     await createClientViaApi(ctx, { name: 'ZZZ SortClient' });
 
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -253,7 +247,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
     await createProjectViaApi(ctx, { name: 'Proj2', client_id: clientWithMany.id });
 
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -274,7 +268,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
 
 test('test that client sort state persists after page reload', async ({ page }) => {
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -397,7 +391,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         // Default sort is name asc; first 15 clients (00–14) on page 1.
@@ -450,7 +444,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         await expect(page.getByTestId('client_table')).toBeVisible();
@@ -470,7 +464,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });

e2e/members.spec.ts

@@ -11,7 +11,7 @@ import {
     updateMemberBillableRateViaApi,
     updateOrganizationSettingViaApi,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 // Tests that invite + accept members need more time
 test.describe.configure({ timeout: 45000 });
@@ -779,20 +779,18 @@ test('test that accepted invitation disappears from invitations tab', async ({ p
 // Sorting Tests
 // =============================================
 
-// Helper to clear localStorage before tests that check sorting
-async function clearMemberTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('member-table-state');
-    });
-}
-
 test('test that sorting members by name, role, and status works', async ({ page, ctx }) => {
-    // Create two placeholder members with names that sort predictably around "John Doe"
+    // Create two placeholder members with names that sort predictably around "John Doe".
+    // Seeded alphabetically a second apart: created_at only has second precision and
+    // same-second rows fall back to a random UUID order. The spacing is what makes the
+    // API order (created_at desc: ZZZ, AAA, John) deterministic, so the tie-break
+    // assertions below are testing the tie-break rather than a coin flip.
     await createPlaceholderMemberViaImportApi(ctx, 'AAA SortFirst');
+    await page.waitForTimeout(1100);
     await createPlaceholderMemberViaImportApi(ctx, 'ZZZ SortLast');
 
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');
@@ -814,20 +812,24 @@ test('test that sorting members by name, role, and status works', async ({ page,
     const ownerIdx = names.indexOf('John Doe');
     const placeholderIdx = names.indexOf('AAA SortFirst');
     expect(ownerIdx).toBeLessThan(placeholderIdx);
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     await roleHeader.click(); // desc: Placeholder first
     names = await getTableRowNames(table);
     expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     // -- Status sorting --
     const statusHeader = table.getByText('Status').first();
     await statusHeader.click(); // asc: Active(0) < Inactive(1)
     names = await getTableRowNames(table);
     expect(names.indexOf('John Doe')).toBeLessThan(names.indexOf('AAA SortFirst'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     await statusHeader.click(); // desc: Inactive first
     names = await getTableRowNames(table);
     expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     // -- Email: just verify sort indicator appears --
     const emailHeader = table.getByText('Email').first();
@@ -837,7 +839,7 @@ test('test that sorting members by name, role, and status works', async ({ page,
 
 test('test that member sort state persists after page reload', async ({ page }) => {
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');
@@ -875,7 +877,7 @@ test('test that sorting members by billable rate works', async ({ page, ctx }) =
     await updateMemberBillableRateViaApi(ctx, lowRateMember!.id, 5000);
 
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');

e2e/projects.spec.ts

@@ -13,18 +13,12 @@ import {
     archiveProjectViaApi,
     updateOrganizationSettingViaApi,
 } from './utils/api';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
 }
 
-// Helper to clear localStorage before tests that check persistence
-async function clearProjectTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('project-table-state');
-    });
-}
-
 // Create new project via modal
 test('test that creating and deleting a new project via the modal works', async ({ page }) => {
     const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
@@ -84,7 +78,7 @@ test('test that archiving and unarchiving projects works', async ({ page, ctx })
     await createProjectViaApi(ctx, { name: newProjectName });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
 
@@ -480,7 +474,7 @@ test('test that sorting projects by all columns works', async ({ page, ctx }) =>
     });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByTestId('project_table')).toBeVisible();
     await expect(page.getByText('AAA Project')).toBeVisible();
@@ -609,7 +603,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
     await createProjectViaApi(ctx, { name: newProjectName });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
 
@@ -640,7 +634,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
 
 test('test that filter state persists after page reload', async ({ page }) => {
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
 
     // Apply Active status filter
@@ -656,9 +650,108 @@ test('test that filter state persists after page reload', async ({ page }) => {
     await expect(page.getByTestId('status-filter-badge')).toBeVisible();
 });
 
+test('test that projects without a client or estimate are ordered by name at the bottom', async ({
+    page,
+    ctx,
+}) => {
+    // The seeding below has to cross two second boundaries, which eats into the default
+    // per-test budget.
+    test.slow();
+
+    await createProjectViaApi(ctx, { name: 'AAA Tiebreak Project' });
+    await page.waitForTimeout(1100);
+    await createProjectViaApi(ctx, { name: 'BBB Tiebreak Project' });
+    await page.waitForTimeout(1100);
+    await createProjectViaApi(ctx, { name: 'ZZZ Tiebreak Project' });
+
+    const clientAardvark = await createClientViaApi(ctx, { name: 'Aardvark Co' });
+    const clientZulu = await createClientViaApi(ctx, { name: 'Zulu Co' });
+    const projectM = await createProjectViaApi(ctx, {
+        name: 'MMM Tiebreak Project',
+        client_id: clientAardvark.id,
+        estimated_time: 36000, // 10h, 1h tracked below = 10%
+    });
+    await createTimeEntryViaApi(ctx, { duration: '1h', projectId: projectM.id });
+    const projectN = await createProjectViaApi(ctx, {
+        name: 'NNN Tiebreak Project',
+        client_id: clientZulu.id,
+        estimated_time: 14400, // 4h, 2h tracked below = 50%
+    });
+    await createTimeEntryViaApi(ctx, { duration: '2h', projectId: projectN.id });
+
+    await goToProjectsOverview(page);
+    await clearTableState(page, 'project-table-state');
+    await page.reload();
+
+    const table = page.getByTestId('project_table');
+    await expect(table).toBeVisible();
+
+    const seeded = [
+        'AAA Tiebreak Project',
+        'BBB Tiebreak Project',
+        'MMM Tiebreak Project',
+        'NNN Tiebreak Project',
+        'ZZZ Tiebreak Project',
+    ];
+    const getOrder = async () => {
+        const rowNames = await getTableRowNames(table);
+        return rowNames
+            .map((rowName) => seeded.find((name) => rowName.includes(name)))
+            .filter((name): name is string => Boolean(name));
+    };
+
+    // -- Client: empty rows last in both directions, alphabetical among themselves --
+    const clientHeader = table.locator('.select-none', { hasText: 'Client' }).first();
+    await clientHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'MMM Tiebreak Project',
+            'NNN Tiebreak Project',
+            'AAA Tiebreak Project',
+            'BBB Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    await clientHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'NNN Tiebreak Project',
+            'MMM Tiebreak Project',
+            'AAA Tiebreak Project',
+            'BBB Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    // -- Progress: same, and the first click sorts highest first --
+    const progressHeader = table.locator('.select-none', { hasText: 'Progress' }).first();
+    await progressHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'NNN Tiebreak Project',
+            'MMM Tiebreak Project',
+            'AAA Tiebreak Project',
+            'BBB Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    await progressHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'MMM Tiebreak Project',
+            'NNN Tiebreak Project',
+            'AAA Tiebreak Project',
+            'BBB Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+});
+
 test('test that sort state persists after page reload', async ({ page }) => {
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
 
     // Click on Name header twice to sort descending
@@ -1114,7 +1207,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         // Default sort is name asc; first 15 projects (00–14) should be on page 1.
@@ -1168,7 +1261,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         await expect(page.getByTestId('project_table')).toBeVisible();
@@ -1185,7 +1278,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });

e2e/tags.spec.ts

@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
 import { createTagViaApi } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToTagsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
@@ -147,18 +147,12 @@ test('test that tag context menu delete deletes the tag', async ({ page, ctx })
 // Sorting Tests
 // =============================================
 
-async function clearTagTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('tag-table-state');
-    });
-}
-
 test('test that sorting tags by name works', async ({ page, ctx }) => {
     await createTagViaApi(ctx, { name: 'AAA SortTag' });
     await createTagViaApi(ctx, { name: 'ZZZ SortTag' });
 
     await goToTagsOverview(page);
-    await clearTagTableState(page);
+    await clearTableState(page, 'tag-table-state');
     await page.reload();
 
     const table = page.getByTestId('tag_table');
@@ -176,7 +170,7 @@ test('test that sorting tags by name works', async ({ page, ctx }) => {
 
 test('test that tag sort state persists after page reload', async ({ page }) => {
     await goToTagsOverview(page);
-    await clearTagTableState(page);
+    await clearTableState(page, 'tag-table-state');
     await page.reload();
 
     const table = page.getByTestId('tag_table');

e2e/tasks.spec.ts

@@ -11,18 +11,12 @@ import {
     updateOrganizationSettingViaApi,
     type TestContext,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
 }
 
-async function clearTaskTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('task-table-state');
-    });
-}
-
 async function createSortableTasks(ctx: TestContext) {
     const project = await createProjectViaApi(ctx, { name: 'Task Sorting Project' });
     const taskA = await createTaskViaApi(ctx, {
@@ -357,7 +351,7 @@ test('test that creating a new project from the task create modal project dropdo
 test('test that sorting tasks by name, total time and progress works', async ({ page, ctx }) => {
     const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
     await goToProjectsOverview(page);
-    await clearTaskTableState(page);
+    await clearTableState(page, 'task-table-state');
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
     const table = page.getByTestId('task_table');
     await expect(table).toBeVisible();
@@ -390,7 +384,7 @@ test('test that sorting tasks by name, total time and progress works', async ({
 test('test that task sort state persists after page reload', async ({ page, ctx }) => {
     const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
     await goToProjectsOverview(page);
-    await clearTaskTableState(page);
+    await clearTableState(page, 'task-table-state');
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
     const table = page.getByTestId('task_table');
     await expect(table).toBeVisible();

e2e/utils/table.ts

@@ -1,4 +1,4 @@
-import type { Locator } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 
 /**
  * Extract the first cell's text content from each row in a table.
@@ -14,3 +14,12 @@ export async function getTableRowNames(table: Locator): Promise<string[]> {
     }
     return names;
 }
+
+/**
+ * Drop a table's persisted sort/filter state so a test starts from the defaults.
+ */
+export async function clearTableState(page: Page, key: string) {
+    await page.evaluate((storageKey) => {
+        localStorage.removeItem(storageKey);
+    }, key);
+}

resources/js/Components/Common/Client/ClientTable.vue

@@ -11,14 +11,13 @@ import Pagination from '@/Components/Common/Pagination.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name' | 'projects_count' | 'status';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     clients: Client[];
@@ -44,17 +43,7 @@ const projectCountMap = computed(() => {
     return map;
 });
 
-// Name is always the secondary sort so rows with equal values render
+const columns = computed<SortableColumnDef<Client, SortColumn>[]>(() => [
-// alphabetically instead of in API (created_at) order.
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-    ...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
-]);
-
-const columns = computed(() => [
     {
         id: 'name',
         accessorFn: (row: Client) => row.name.toLowerCase(),
@@ -70,41 +59,22 @@ const columns = computed(() => [
     },
 ]);
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.value
+    sortedRows: sortedClients,
-        .filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
+    descFirstColumns,
-        .map((c) => c.id as SortColumn)
+    nextDirection,
-);
+} = useSortableTable({
+    data: () => props.clients,
+    columns: () => columns.value,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
 }
 
-const table = useVueTable({
-    get data() {
-        return props.clients;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedClients = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
-
 // Client-side pagination: the full list is in memory, only one page is mounted at a time.
 const PAGE_SIZE = 15;
 const currentPage = ref(1);

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
 
 const props = defineProps<{
@@ -13,53 +14,33 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="projects_count" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('projects_count')">
             Projects
-            <ChevronDownIcon v-if="isChevronDown('projects_count')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('projects_count')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Member/MemberTable.vue

@@ -3,16 +3,14 @@ import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vu
 import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
 import { useMembersQuery } from '@/utils/useMembersQuery';
 import type { Member } from '@/packages/api/src';
-import { computed } from 'vue';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     sortColumn: SortColumn;
@@ -33,14 +31,7 @@ const roleOrder: Record<string, number> = {
     placeholder: 4,
 };
 
-const sorting = computed<SortingState>(() => [
+const columns: SortableColumnDef<Member, SortColumn>[] = [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
     {
         id: 'name',
         accessorFn: (row: Member) => row.name.toLowerCase(),
@@ -56,7 +47,6 @@ const columns = [
     {
         id: 'billable_rate',
         sortDescFirst: true,
-        sortUndefined: 'last' as const,
         accessorFn: (row: Member) => {
             if (row.billable_rate === null) return undefined;
             return row.billable_rate;
@@ -68,36 +58,21 @@ const columns = [
     },
 ];
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+    sortedRows: sortedMembers,
-);
+    descFirstColumns,
+    nextDirection,
+} = useSortableTable({
+    data: () => members.value,
+    columns: () => columns,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
 }
-
-const table = useVueTable({
-    get data() {
-        return members.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedMembers = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
 
 const props = defineProps<{
@@ -13,69 +14,39 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="email" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('email')">
             Email
-            <ChevronDownIcon v-if="isChevronDown('email')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('email')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="role" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('role')">
             Role
-            <ChevronDownIcon v-if="isChevronDown('role')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('role')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="billable_rate" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('billable_rate')">
             Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -16,7 +16,7 @@ export type SortColumn =
     | 'billable_rate'
     | 'status'
     | 'visibility';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 import { canCreateProjects } from '@/utils/permissions';
 import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
 import { useProjectsStore } from '@/utils/useProjects';
@@ -27,11 +27,10 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 
@@ -57,28 +56,16 @@ const clientNameMap = computed(() => {
     return map;
 });
 
-// Convert sort props to TanStack Table format.
-// Name is always the secondary sort so rows with equal values render
-// alphabetically instead of in API (created_at) order.
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-    ...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
-]);
-
 // Define column accessors for sorting.
 // Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
 // while text columns default to ascending (A-Z) on first click (chevron down).
-const columns = computed(() => [
+const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
     {
         id: 'name',
         accessorFn: (row: Project) => row.name.toLowerCase(),
     },
     {
         id: 'client_name',
-        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
             if (!row.client_id) return undefined;
             return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
@@ -87,12 +74,11 @@ const columns = computed(() => [
     {
         id: 'spent_time',
         sortDescFirst: true,
-        accessorFn: (row: Project) => row.spent_time ?? 0,
+        accessorFn: (row: Project) => row.spent_time,
     },
     {
         id: 'progress',
         sortDescFirst: true,
-        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
             if (!row.estimated_time) return undefined;
             return (row.spent_time / row.estimated_time) * 100;
@@ -113,40 +99,22 @@ const columns = computed(() => [
     },
 ]);
 
-// Columns with sortDescFirst get desc as default direction on first click.
+const {
-const descFirstColumns = new Set<SortColumn>(
+    sortedRows: sortedProjects,
-    columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+    descFirstColumns,
-);
+    nextDirection,
+} = useSortableTable({
+    data: () => props.projects,
+    columns: () => columns.value,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
 }
 
-const table = useVueTable({
-    get data() {
-        return props.projects;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedProjects = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
-
 // Client-side pagination: the full list is in memory, only one page is mounted at a time.
 const PAGE_SIZE = 15;
 const currentPage = ref(1);

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
 
 const props = defineProps<{
@@ -14,90 +15,51 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="client_name" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('client_name')">
             Client
-            <ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('client_name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('spent_time')">
             Total Time
-            <ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('progress')">
             Progress
-            <ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
+        <SortableTableHeaderCell
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
             v-if="showBillableRate"
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            column="billable_rate"
-            @click="handleSort('billable_rate')">
+            v-bind="sortState"
+            @sort="handleSort">
             Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="visibility" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('visibility')">
             Visibility
-            <ChevronDownIcon v-if="isChevronDown('visibility')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('visibility')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
-
-<style scoped></style>

resources/js/Components/Common/SortableTableHeaderCell.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts" generic="TColumn extends string">
+import { computed, useAttrs } from 'vue';
+import { twMerge } from 'tailwind-merge';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import type { SortDirection } from '@/utils/useSortableTable';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+    column: TColumn;
+    sortColumn: TColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<TColumn>;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: TColumn];
+}>();
+
+const attrs = useAttrs();
+
+const isSorted = computed(() => props.sortColumn === props.column);
+
+const isChevronDown = computed(() => {
+    if (!isSorted.value) return false;
+    return props.descFirstColumns.has(props.column)
+        ? props.sortDirection === 'desc'
+        : props.sortDirection === 'asc';
+});
+
+const cellClass = computed(() =>
+    twMerge(
+        'px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1',
+        attrs.class as string | undefined
+    )
+);
+
+const passthroughAttrs = computed(() => {
+    const { class: _class, ...rest } = attrs;
+    return rest;
+});
+</script>
+
+<template>
+    <button
+        v-bind="passthroughAttrs"
+        type="button"
+        :class="cellClass"
+        @click="emit('sort', column)">
+        <slot></slot>
+        <span class="sr-only">
+            {{
+                isSorted
+                    ? `sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}`
+                    : 'not sorted'
+            }}
+        </span>
+        <ChevronDownIcon v-if="isChevronDown" aria-hidden="true" class="w-4 h-4" />
+        <ChevronUpIcon v-else-if="isSorted" aria-hidden="true" class="w-4 h-4" />
+        <span v-else aria-hidden="true" class="w-4 h-4"></span>
+    </button>
+</template>

resources/js/Components/Common/Tag/TagTable.vue

@@ -2,7 +2,7 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useTagsQuery } from '@/utils/useTagsQuery';
 import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
 import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
@@ -10,14 +10,13 @@ import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
 import { canCreateTags } from '@/utils/permissions';
 import type { Tag } from '@/packages/api/src';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     createTag: (name: string) => Promise<Tag | undefined>;
@@ -32,50 +31,27 @@ const emit = defineEmits<{
 const { tags } = useTagsQuery();
 const showCreateTagModal = ref(false);
 
-const sorting = computed<SortingState>(() => [
+const columns: SortableColumnDef<Tag, SortColumn>[] = [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
     {
         id: 'name',
         accessorFn: (row: Tag) => row.name.toLowerCase(),
     },
 ];
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
+    sortedRows: sortedTags,
-);
+    descFirstColumns,
+    nextDirection,
+} = useSortableTable({
+    data: () => tags.value,
+    columns: () => columns,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
 }
-
-const table = useVueTable({
-    get data() {
-        return tags.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedTags = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>

resources/js/Components/Common/Tag/TagTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
 
 const props = defineProps<{
@@ -13,37 +14,27 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Task/TaskTable.vue

@@ -2,21 +2,20 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { PlusCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
 import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import { canCreateTasks } from '@/utils/permissions';
 import type { Task } from '@/packages/api/src';
 import {
-    getCoreRowModel,
+    useSortableTable,
-    getSortedRowModel,
+    type SortableColumnDef,
-    type SortingState,
+    type SortDirection,
-    useVueTable,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name' | 'spent_time' | 'progress';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     projectId: string;
@@ -29,15 +28,7 @@ const emit = defineEmits<{
     sort: [column: SortColumn, direction: SortDirection];
 }>();
 
-const sorting = computed<SortingState>(() => [
+const columns: SortableColumnDef<Task, SortColumn>[] = [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-    ...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
-]);
-
-const columns = computed(() => [
     {
         id: 'name',
         accessorFn: (row: Task) => row.name.toLowerCase(),
@@ -45,49 +36,33 @@ const columns = computed(() => [
     {
         id: 'spent_time',
         sortDescFirst: true,
-        accessorFn: (row: Task) => row.spent_time ?? 0,
+        accessorFn: (row: Task) => row.spent_time,
     },
     {
         id: 'progress',
         sortDescFirst: true,
-        sortUndefined: 'last' as const,
         accessorFn: (row: Task) => {
             if (!row.estimated_time) return undefined;
             return (row.spent_time / row.estimated_time) * 100;
         },
     },
-]);
+];
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.value.filter((column) => column.sortDescFirst).map((column) => column.id as SortColumn)
+    sortedRows: sortedTasks,
-);
+    descFirstColumns,
-
+    nextDirection,
-function handleSort(column: SortColumn) {
+} = useSortableTable({
-    if (props.sortColumn === column) {
+    data: () => props.tasks,
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
+    columns: () => columns,
-    } else {
+    sortColumn: () => props.sortColumn,
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
+    sortDirection: () => props.sortDirection,
-    }
+    tieBreakColumn: 'name',
-}
-
-const table = useVueTable({
-    get data() {
-        return props.tasks;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
 });
 
-const sortedTasks = computed(() => table.getRowModel().rows.map((row) => row.original));
+function handleSort(column: SortColumn) {
+    emit('sort', column, nextDirection(column));
+}
 
 const createTask = ref(false);
 </script>
@@ -98,7 +73,6 @@ const createTask = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="task_table"
-                role="table"
                 class="grid min-w-full"
                 style="
                     grid-template-columns:

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
 
 const props = defineProps<{
@@ -13,58 +14,36 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Task Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('spent_time')">
             Total Time
-            <ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('progress')">
             Progress
-            <ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
-
-<style scoped></style>

resources/js/Pages/Clients.vue

@@ -11,8 +11,8 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { TabBar, TabBarItem } from '@/packages/ui/src';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
+import type { SortColumn } from '@/Components/Common/Client/ClientTable.vue';
 
 const { clients } = useClientsQuery();
 
@@ -20,25 +20,10 @@ const activeTab = ref<'active' | 'archived'>('active');
 
 const createClient = ref(false);
 
-interface ClientTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('client-table-state', {
-    sortColumn: SortColumn;
+    sortColumn: 'name',
-    sortDirection: SortDirection;
+    sortDirection: 'asc',
-}
+});
-
-const tableState = useStorage<ClientTableState>(
-    'client-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 
 const shownClients = computed(() => {
     return clients.value.filter((client) => {

resources/js/Pages/Members.vue

@@ -12,8 +12,8 @@ import type { Role } from '@/types/jetstream';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
 import { canCreateInvitations } from '@/utils/permissions';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
+import type { SortColumn } from '@/Components/Common/Member/MemberTable.vue';
 
 const inviteMember = ref(false);
 
@@ -23,25 +23,10 @@ defineProps<{
 
 const activeTab = ref<'all' | 'invitations'>('all');
 
-interface MemberTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('member-table-state', {
-    sortColumn: SortColumn;
+    sortColumn: 'name',
-    sortDirection: SortDirection;
+    sortDirection: 'asc',
-}
+});
-
-const tableState = useStorage<MemberTableState>(
-    'member-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 </script>
 
 <template>

resources/js/Pages/ProjectShow.vue

@@ -15,7 +15,7 @@ import {
 import { Link } from '@inertiajs/vue3';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import TaskTable from '@/Components/Common/Task/TaskTable.vue';
-import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
+import type { SortColumn } from '@/Components/Common/Task/TaskTable.vue';
 import CardTitle from '@/packages/ui/src/CardTitle.vue';
 import Card from '@/Components/Common/Card.vue';
 import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
@@ -30,7 +30,7 @@ import { formatCents } from '../packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '../utils/money';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
 
 const { projects } = useProjectsQuery();
 
@@ -67,25 +67,10 @@ const activeTab = ref<'active' | 'done'>('active');
 
 const { tasks } = useTasksQuery();
 
-interface TaskTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('task-table-state', {
-    sortColumn: SortColumn;
+    sortColumn: 'name',
-    sortDirection: SortDirection;
+    sortDirection: 'asc',
-}
+});
-
-const tableState = useStorage<TaskTableState>(
-    'task-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 
 const shownTasks = computed(() => {
     return tasks.value.filter((task) => {

resources/js/Pages/Projects.vue

@@ -18,6 +18,7 @@ import { getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
 import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDropdown.vue';
 import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
 import ProjectVisibilityFilterBadge from '@/Components/Common/Project/ProjectVisibilityFilterBadge.vue';
@@ -41,7 +42,7 @@ interface ProjectTableState {
     };
 }
 
-const tableState = useStorage<ProjectTableState>(
+const { tableState, handleSort } = useTableSortState<SortColumn, ProjectTableState>(
     'project-table-state',
     {
         sortColumn: 'name',
@@ -52,21 +53,15 @@ const tableState = useStorage<ProjectTableState>(
             visibility: 'all',
         },
     },
-    undefined,
+    // The filters are merged key by key so a stored value missing a newer filter still
-    {
+    // picks up its default instead of the whole object falling back.
-        mergeDefaults: (storage, defaults) => ({
+    (storage, defaults) => ({
-            ...defaults,
+        ...defaults,
-            ...storage,
+        ...storage,
-            filters: { ...defaults.filters, ...storage.filters },
+        filters: { ...defaults.filters, ...storage.filters },
-        }),
+    })
-    }
 );
 
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
-
 // Filter projects based on current filters
 const filteredProjects = computed(() => {
     return projects.value.filter((project) => {

resources/js/Pages/Tags.vue

@@ -9,30 +9,15 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateTags } from '@/utils/permissions';
 import { useTagsStore } from '@/utils/useTags';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
+import type { SortColumn } from '@/Components/Common/Tag/TagTable.vue';
 
 const showCreateTagModal = ref(false);
 
-interface TagTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('tag-table-state', {
-    sortColumn: SortColumn;
+    sortColumn: 'name',
-    sortDirection: SortDirection;
+    sortDirection: 'asc',
-}
+});
-
-const tableState = useStorage<TagTableState>(
-    'tag-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);

resources/js/utils/useSortableTable.ts

@@ -0,0 +1,123 @@
+import {
+    getCoreRowModel,
+    getSortedRowModel,
+    sortingFns,
+    type ColumnDef,
+    type Row,
+    type SortingFn,
+    type SortingState,
+    useVueTable,
+} from '@tanstack/vue-table';
+import { computed, type ComputedRef } from 'vue';
+
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * The comparator every sortable column gets: a row whose accessor returns `undefined`
+ * sorts to the bottom in both directions, and two such rows compare as equal so the
+ * tie-break decides their order.
+ *
+ * TanStack cannot express that combination. Its `sortUndefined: 'last'` keeps empty rows
+ * at the bottom but returns a non-zero result even when both rows are empty, which
+ * swallows the tie-break and leaves those rows in API (created_at) order; its default of
+ * `1` returns zero for that case but flips empty rows to the top when descending.
+ */
+function sortEmptyLast<TData>(getDirection: () => SortDirection): SortingFn<TData> {
+    return (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => {
+        const a = rowA.getValue(columnId);
+        const b = rowB.getValue(columnId);
+
+        if (a === undefined && b === undefined) {
+            return 0;
+        }
+        if (a === undefined || b === undefined) {
+            const emptyLast = a === undefined ? 1 : -1;
+            return getDirection() === 'desc' ? -emptyLast : emptyLast;
+        }
+        return typeof a === 'string' || typeof b === 'string'
+            ? sortingFns.alphanumeric(rowA, rowB, columnId)
+            : sortingFns.basic(rowA, rowB, columnId);
+    };
+}
+
+/**
+ * A column definition whose `id` has to be one of the table's sortable columns, so a
+ * renamed or mistyped id is a compile error rather than a column that silently stops
+ * sorting: TanStack drops sort entries for ids it cannot resolve, leaving the rows in
+ * their original order with no chevron and no error.
+ */
+export type SortableColumnDef<TData, TColumn extends string> = ColumnDef<TData, unknown> & {
+    id: TColumn;
+};
+
+export function useSortableTable<TData, TColumn extends string>(options: {
+    data: () => TData[];
+    columns: () => SortableColumnDef<TData, TColumn>[];
+    sortColumn: () => TColumn;
+    sortDirection: () => SortDirection;
+    tieBreakColumn?: TColumn;
+}): {
+    sortedRows: ComputedRef<TData[]>;
+    descFirstColumns: ComputedRef<ReadonlySet<TColumn>>;
+    nextDirection: (column: TColumn) => SortDirection;
+} {
+    const sorting = computed<SortingState>(() => [
+        {
+            id: options.sortColumn(),
+            desc: options.sortDirection() === 'desc',
+        },
+        ...(options.tieBreakColumn && options.sortColumn() !== options.tieBreakColumn
+            ? [{ id: options.tieBreakColumn, desc: false }]
+            : []),
+    ]);
+
+    const resolvedColumns = computed<ColumnDef<TData, unknown>[]>(() =>
+        options.columns().map((column) =>
+            column.sortingFn
+                ? column
+                : {
+                      ...column,
+                      sortUndefined: false as const,
+                      sortingFn: sortEmptyLast<TData>(options.sortDirection),
+                  }
+        )
+    );
+
+    const descFirstColumns = computed<ReadonlySet<TColumn>>(
+        () =>
+            new Set(
+                options
+                    .columns()
+                    .filter((column) => column.sortDescFirst)
+                    .map((column) => column.id)
+            )
+    );
+
+    function nextDirection(column: TColumn): SortDirection {
+        if (options.sortColumn() === column) {
+            return options.sortDirection() === 'asc' ? 'desc' : 'asc';
+        }
+        return descFirstColumns.value.has(column) ? 'desc' : 'asc';
+    }
+
+    const table = useVueTable({
+        get data() {
+            return options.data();
+        },
+        get columns() {
+            return resolvedColumns.value;
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            get sorting() {
+                return sorting.value;
+            },
+        },
+        manualSorting: false,
+    });
+
+    const sortedRows = computed(() => table.getRowModel().rows.map((row) => row.original));
+
+    return { sortedRows, descFirstColumns, nextDirection };
+}

resources/js/utils/useTableSortState.ts

@@ -0,0 +1,32 @@
+import { useStorage } from '@vueuse/core';
+import type { SortDirection } from '@/utils/useSortableTable';
+
+export interface TableSortState<TColumn extends string> {
+    sortColumn: TColumn;
+    sortDirection: SortDirection;
+}
+
+/**
+ * The sort a table page remembers between visits, persisted in localStorage.
+ *
+ * Pages that persist more than the sort (filters, for example) pass the wider defaults
+ * and get them back on `tableState`; `mergeDefaults` is forwarded to `useStorage` so
+ * nested state can be merged key by key rather than wholesale.
+ */
+export function useTableSortState<
+    TColumn extends string,
+    TState extends TableSortState<TColumn> = TableSortState<TColumn>,
+>(
+    key: string,
+    defaults: TState,
+    mergeDefaults: boolean | ((storageValue: TState, defaults: TState) => TState) = true
+) {
+    const tableState = useStorage<TState>(key, defaults, undefined, { mergeDefaults });
+
+    function handleSort(column: TColumn, direction: SortDirection) {
+        tableState.value.sortColumn = column;
+        tableState.value.sortDirection = direction;
+    }
+
+    return { tableState, handleSort };
+}