add table sorting to members, clients and tags table

2026-08-15 03:32:15 +01:00 · 2026-02-18 17:41:36 +01:00
parent 88c0c334e9
commit cf98fabe0a
17 changed files with 829 additions and 46 deletions
--- a/resources/js/Components/Common/Client/ClientTable.vue
+++ b/resources/js/Components/Common/Client/ClientTable.vue
@@ -2,17 +2,102 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { type Component, ref } from 'vue';
+import { type Component, computed, ref } from 'vue';
 import { type Client } from '@/packages/api/src';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
 import { canCreateClients } from '@/utils/permissions';
+import { useProjectsQuery } from '@/utils/useProjectsQuery';
+import {
+    useVueTable,
+    getCoreRowModel,
+    getSortedRowModel,
+    type SortingState,
+} from '@tanstack/vue-table';

-defineProps<{
+export type SortColumn = 'name' | 'projects_count' | 'status';
+export type SortDirection = 'asc' | 'desc';
+
+const props = defineProps<{
    clients: Client[];
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
 }>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn, direction: SortDirection];
+}>();
+
 const createClient = ref(false);
+
+const { projects } = useProjectsQuery();
+
+const projectCountMap = computed(() => {
+    const map = new Map<string, number>();
+    projects.value.forEach((project) => {
+        if (project.client_id) {
+            map.set(project.client_id, (map.get(project.client_id) ?? 0) + 1);
+        }
+    });
+    return map;
+});
+
+const sorting = computed<SortingState>(() => [
+    {
+        id: props.sortColumn,
+        desc: props.sortDirection === 'desc',
+    },
+]);
+
+const columns = computed(() => [
+    {
+        id: 'name',
+        accessorFn: (row: Client) => row.name.toLowerCase(),
+    },
+    {
+        id: 'projects_count',
+        sortDescFirst: true,
+        accessorFn: (row: Client) => projectCountMap.value.get(row.id) ?? 0,
+    },
+    {
+        id: 'status',
+        accessorFn: (row: Client) => (row.is_archived ? 1 : 0),
+    },
+]);
+
+const descFirstColumns = new Set<SortColumn>(
+    columns.value.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
+);
+
+function handleSort(column: SortColumn) {
+    if (props.sortColumn === 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);
+});
 </script>

 <template>
@@ -23,8 +108,12 @@ const createClient = ref(false);
                data-testid="client_table"
                class="grid min-w-full"
                style="grid-template-columns: 1fr 150px 200px 80px">
-                <ClientTableHeading></ClientTableHeading>
-                <div v-if="clients.length === 0" class="col-span-3 py-24 text-center">
+                <ClientTableHeading
+                    :sort-column="props.sortColumn"
+                    :sort-direction="props.sortDirection"
+                    :desc-first-columns="descFirstColumns"
+                    @sort="handleSort"></ClientTableHeading>
+                <div v-if="sortedClients.length === 0" class="col-span-3 py-24 text-center">
                    <UserCircleIcon class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
                    <h3 class="text-text-primary font-semibold">No clients found</h3>
                    <p v-if="canCreateClients()" class="pb-5">Create your first client now!</p>
@@ -35,7 +124,7 @@ const createClient = ref(false);
                        >Create your First Client
                    </SecondaryButton>
                </div>
-                <template v-for="client in clients" :key="client.id">
+                <template v-for="client in sortedClients" :key="client.id">
                    <ClientTableRow :client="client"></ClientTableRow>
                </template>
            </div>
--- a/resources/js/Components/Common/Client/ClientTableHeading.vue
+++ b/resources/js/Components/Common/Client/ClientTableHeading.vue
@@ -1,18 +1,67 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
+
+const props = defineProps<{
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<SortColumn>;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn];
+}>();
+
+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 class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+        <div
+            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"
+            @click="handleSort('name')">
            Name
+            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+            <ChevronUpIcon v-else-if="isChevronUp('name')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('projects_count')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('status')" 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"></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>
--- a/resources/js/Components/Common/Client/ClientTableRow.vue
+++ b/resources/js/Components/Common/Client/ClientTableRow.vue
@@ -36,13 +36,13 @@ const showEditModal = ref(false);
    <TableRow>
        <ClientEditModal v-model:show="showEditModal" :client="client"></ClientEditModal>
        <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
            <span>
                {{ client.name }}
            </span>
        </div>
        <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center px-3 py-4 text-sm font-medium text-text-primary">
            <span class="text-text-secondary"> {{ projectCount }} Projects </span>
        </div>
        <div
--- a/resources/js/Components/Common/Member/MemberTable.vue
+++ b/resources/js/Components/Common/Member/MemberTable.vue
@@ -2,19 +2,117 @@
 import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vue';
 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,
+    getCoreRowModel,
+    getSortedRowModel,
+    type SortingState,
+} from '@tanstack/vue-table';
+
+export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
+export type SortDirection = 'asc' | 'desc';
+
+const props = defineProps<{
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn, direction: SortDirection];
+}>();

 const { members } = useMembersQuery();
+
+const roleOrder: Record<string, number> = {
+    owner: 0,
+    admin: 1,
+    manager: 2,
+    employee: 3,
+    placeholder: 4,
+};
+
+const sorting = computed<SortingState>(() => [
+    {
+        id: props.sortColumn,
+        desc: props.sortDirection === 'desc',
+    },
+]);
+
+const columns = [
+    {
+        id: 'name',
+        accessorFn: (row: Member) => row.name.toLowerCase(),
+    },
+    {
+        id: 'email',
+        accessorFn: (row: Member) => row.email.toLowerCase(),
+    },
+    {
+        id: 'role',
+        accessorFn: (row: Member) => roleOrder[row.role] ?? 99,
+    },
+    {
+        id: 'billable_rate',
+        sortDescFirst: true,
+        sortUndefined: 'last' as const,
+        accessorFn: (row: Member) => {
+            if (row.billable_rate === null) return undefined;
+            return row.billable_rate;
+        },
+    },
+    {
+        id: 'status',
+        accessorFn: (row: Member) => (row.is_placeholder ? 1 : 0),
+    },
+];
+
+const descFirstColumns = new Set<SortColumn>(
+    columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+);
+
+function handleSort(column: SortColumn) {
+    if (props.sortColumn === 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>
    <div class="flow-root max-w-[100vw] overflow-x-auto">
        <div class="inline-block min-w-full align-middle">
            <div
-                data-testid="client_table"
+                data-testid="member_table"
                class="grid min-w-full"
                style="grid-template-columns: 1fr 1fr 180px 180px 150px 130px">
-                <MemberTableHeading></MemberTableHeading>
-                <template v-for="member in members" :key="member.id">
+                <MemberTableHeading
+                    :sort-column="props.sortColumn"
+                    :sort-direction="props.sortDirection"
+                    :desc-first-columns="descFirstColumns"
+                    @sort="handleSort"></MemberTableHeading>
+                <template v-for="member in sortedMembers" :key="member.id">
                    <MemberTableRow :member="member"></MemberTableRow>
                </template>
            </div>
--- a/resources/js/Components/Common/Member/MemberTableHeading.vue
+++ b/resources/js/Components/Common/Member/MemberTableHeading.vue
@@ -1,20 +1,83 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
+
+const props = defineProps<{
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<SortColumn>;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn];
+}>();
+
+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 class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+        <div
+            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"
+            @click="handleSort('name')">
            Name
+            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+            <ChevronUpIcon v-else-if="isChevronUp('name')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('email')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('role')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" 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 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" />
+            <ChevronUpIcon v-else-if="isChevronUp('status')" 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">Email</div>
-        <div class="px-3 py-1.5 text-left text-text-tertiary">Role</div>
-        <div class="px-3 py-1.5 text-left text-text-tertiary">Billable Rate</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 bg-row-heading-background">
            <span class="sr-only">Edit</span>
        </div>
    </TableHeading>
 </template>
-
-<style scoped></style>
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Member, Organization } from '@/packages/api/src';
 import { api } from '@/packages/api/src';
-import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
+import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/outline';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
@@ -82,11 +82,15 @@ const userHasValidMailAddress = computed(() => {
            }}
        </div>
        <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
-            <CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
-            <span v-if="member.is_placeholder === false">Active</span>
-            <UserCircleIcon v-if="member.is_placeholder === true" class="w-5"></UserCircleIcon>
-            <span v-if="member.is_placeholder === true">Inactive</span>
+            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1.5 items-center font-medium">
+            <template v-if="member.is_placeholder === false">
+                <CheckCircleIcon class="w-4 text-icon-default"></CheckCircleIcon>
+                <span>Active</span>
+            </template>
+            <template v-else>
+                <UserCircleIcon class="w-4 text-icon-default"></UserCircleIcon>
+                <span>Inactive</span>
+            </template>
        </div>
        <div
            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -62,7 +62,7 @@ const sorting = computed<SortingState>(() => [
 // 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 = [
+const columns = computed(() => [
    {
        id: 'name',
        accessorFn: (row: Project) => row.name.toLowerCase(),
@@ -98,11 +98,11 @@ const columns = [
        id: 'status',
        accessorFn: (row: Project) => (row.is_archived ? 1 : 0),
    },
-];
+]);

 // Columns with sortDescFirst get desc as default direction on first click.
 const descFirstColumns = new Set<SortColumn>(
-    columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+    columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
 );

 function handleSort(column: SortColumn) {
@@ -117,7 +117,9 @@ const table = useVueTable({
    get data() {
        return props.projects;
    },
-    columns,
+    get columns() {
+        return columns.value;
+    },
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: {
--- a/resources/js/Components/Common/Tag/TagTable.vue
+++ b/resources/js/Components/Common/Tag/TagTable.vue
@@ -2,18 +2,80 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { ref } from 'vue';
+import { computed, 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';
 import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
 import { canCreateTags } from '@/utils/permissions';
 import type { Tag } from '@/packages/api/src';
-defineProps<{
+import {
+    useVueTable,
+    getCoreRowModel,
+    getSortedRowModel,
+    type SortingState,
+} from '@tanstack/vue-table';
+
+export type SortColumn = 'name';
+export type SortDirection = 'asc' | 'desc';
+
+const props = defineProps<{
    createTag: (name: string) => Promise<Tag | undefined>;
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
 }>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn, direction: SortDirection];
+}>();
+
 const { tags } = useTagsQuery();
 const showCreateTagModal = ref(false);
+
+const sorting = computed<SortingState>(() => [
+    {
+        id: props.sortColumn,
+        desc: props.sortDirection === 'desc',
+    },
+]);
+
+const columns = [
+    {
+        id: 'name',
+        accessorFn: (row: Tag) => row.name.toLowerCase(),
+    },
+];
+
+const descFirstColumns = new Set<SortColumn>(
+    columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
+);
+
+function handleSort(column: SortColumn) {
+    if (props.sortColumn === 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>
@@ -24,8 +86,12 @@ const showCreateTagModal = ref(false);
                data-testid="tag_table"
                class="grid min-w-full"
                style="grid-template-columns: 1fr 80px">
-                <TagTableHeading></TagTableHeading>
-                <div v-if="tags.length === 0" class="col-span-5 py-24 text-center">
+                <TagTableHeading
+                    :sort-column="props.sortColumn"
+                    :sort-direction="props.sortDirection"
+                    :desc-first-columns="descFirstColumns"
+                    @sort="handleSort"></TagTableHeading>
+                <div v-if="sortedTags.length === 0" class="col-span-5 py-24 text-center">
                    <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                    <h3 class="text-text-primary font-semibold">No tags found</h3>
                    <p v-if="canCreateTags()" class="pb-5">Create your first tag now!</p>
@@ -36,7 +102,7 @@ const showCreateTagModal = ref(false);
                        >Create your First Tag</SecondaryButton
                    >
                </div>
-                <template v-for="tag in tags" :key="tag.id">
+                <template v-for="tag in sortedTags" :key="tag.id">
                    <TagTableRow :tag="tag"></TagTableRow>
                </template>
            </div>
--- a/resources/js/Components/Common/Tag/TagTableHeading.vue
+++ b/resources/js/Components/Common/Tag/TagTableHeading.vue
@@ -1,16 +1,51 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
+
+const props = defineProps<{
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<SortColumn>;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: SortColumn];
+}>();
+
+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 class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+        <div
+            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"
+            @click="handleSort('name')">
            Name
+            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+            <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>
    </TableHeading>
 </template>
-
-<style scoped></style>