diff --git a/src/components/ItemListSortButton.vue b/src/components/ItemListSortButton.vue
index 841d314..2c055e5 100644
--- a/src/components/ItemListSortButton.vue
+++ b/src/components/ItemListSortButton.vue
@@ -1,24 +1,20 @@
 <script lang="ts" setup>
-import type { listingTableColumn } from "@/types";
-
 defineProps<{
-  id: listingTableColumn;
-  state: boolean | null;
+    id: string;
+    state: boolean | null;
 }>();
-
-defineEmits(["clicked"]);
 </script>
 
 <template>
-  <span class="pointer" @click="$emit('clicked', id)">
-    <i v-if="state === true" class="fa-solid fa-arrow-up-a-z"></i>
-    <i v-else-if="state === false" class="fa-solid fa-arrow-down-z-a"></i>
-    <i v-else="" class="fa-thin fa-arrow-up-a-z"></i>
-  </span>
+    <span class="pointer" @click="$emit('clicked', id)">
+        <i v-if="state === true" class="fa-solid fa-arrow-up-a-z"></i>
+        <i v-else-if="state === false" class="fa-solid fa-arrow-down-z-a"></i>
+        <i v-else class="fa-thin fa-arrow-up-a-z"></i>
+    </span>
 </template>
 
 <style scoped>
 .pointer {
-  cursor: pointer;
+    cursor: pointer;
 }
 </style>
diff --git a/src/components/SortableTabularList.vue b/src/components/SortableTabularList.vue
new file mode 100644
index 0000000..5842e88
--- /dev/null
+++ b/src/components/SortableTabularList.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { RouterLink } from "vue-router";
+import type { ListItemExtra } from "@/types";
+import ItemListSortButton from "@/components/ItemListSortButton.vue";
+
+const props = defineProps<{
+    items: ListItemExtra[];
+    predicates: string[];
+}>();
+
+const sortKey = ref("title-asc"); // sort key <predicate>-asc or <predicate>-desc, default to title
+
+const extraPredicates = computed(() => {
+    return ["title", ...props.predicates];
+});
+
+const sortedList = computed(() => {
+    const [sortPredicate, sortDirection]: string[] = sortKey.value.split("-");
+    const isAscending = sortDirection === "asc";
+    return props.items.sort((a, b) => {
+        if (sortPredicate === "title" || sortPredicate === "description") {
+            if (a[sortPredicate] && b[sortPredicate]) {
+                return isAscending ? a[sortPredicate]!.localeCompare(b[sortPredicate]!) : b[sortPredicate]!.localeCompare(a[sortPredicate]!);
+            } else if (a[sortPredicate]) {
+                return isAscending ? -1 : 1;
+            } else if (b[sortPredicate]) {
+                return isAscending ? 1 : -1;
+            } else {
+                return 0;
+            }
+        } else {
+            if (a.extras[sortPredicate] && b.extras[sortPredicate]) {
+                const aLabel = a.extras[sortPredicate].label;
+                const bLabel = b.extras[sortPredicate].label;
+                return isAscending ? aLabel.localeCompare(bLabel) : bLabel.localeCompare(aLabel);
+            } else if (a.extras[sortPredicate]) {
+                return isAscending ? -1 : 1;
+            } else if (b.extras[sortPredicate]) {
+                return isAscending ? 1 : -1;
+            } else {
+                return 0;
+            }
+        }
+    })
+});
+
+function setSorted(key: string) {
+    if (sortKey.value.startsWith(key)) {
+        sortKey.value = `${key}-${sortKey.value.endsWith("asc") ? "desc" : "asc"}`;
+    } else {
+        sortKey.value = `${key}-asc`;
+    }
+}
+
+function camelToTitleCase(s: string): string {
+    const result = s.replace(/([A-Z])/g, " $1");
+    return result.charAt(0).toUpperCase() + result.slice(1);
+}
+</script>
+
+<template>
+    <table class="table" role="grid">
+        <thead>
+            <tr role="row">
+                <th v-for="predicate in extraPredicates">
+                    {{ camelToTitleCase(predicate) }}&nbsp;
+                    <ItemListSortButton
+                        :id="predicate"
+                        :state="sortKey.startsWith(predicate) ? sortKey.endsWith('asc') : null"
+                        @clicked="id => setSorted(id)"
+                    />
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="item in sortedList" class="row" role="row">
+                <td v-for="predicate in extraPredicates">
+                    <RouterLink v-if="predicate === 'title'" :to="!!item.link ? item.link : ''">
+                        {{ item.title || item.iri }}
+                    </RouterLink>
+                    <div v-else-if="predicate === 'description' && !!item.description">{{ item.description.substring(0, 80) + "..." }}</div>
+                    <div v-else-if="!!item.extras[predicate]">
+                        <a v-if="!!item.extras[predicate].iri" :href="item.extras[predicate].iri" target="_blank" rel="noopener noreferrer">{{ item.extras[predicate].label }}</a>
+                        <template v-else>{{ item.extras[predicate].label }}</template>
+                        <span v-if="!!item.extras[predicate].color" :style="{color: item.extras[predicate].color, marginLeft: '6px'}" class="fa-solid fa-circle fa-2xs"></span>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/sass/_variables.scss";
+
+.table {
+    border-collapse: separate;
+    border-spacing: 0 1em;
+}
+
+.row {
+    padding: 5px;
+    background-color: var(--cardBg);
+}
+
+th {
+    text-align: left;
+    padding-left: 0.5rem;
+    white-space: nowrap;
+}
+
+td {
+    padding: 10px;
+}
+
+.list {
+    gap: 12px;
+    margin-bottom: 12px;
+
+    a.list-item {
+        gap: 10px;
+        background-color: var(--cardBg);
+        padding: 10px;
+        border-radius: $borderRadius;
+
+        .list-item-left {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            flex-grow: 1;
+
+            .list-item-title {
+                margin: 0;
+            }
+
+            .list-item-desc {
+                font-style: italic;
+                color: grey;
+                font-size: 0.8rem;
+            }
+        }
+
+        .child-btn {
+            align-self: baseline;
+            flex-shrink: 0;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VocabItemList.vue b/src/components/VocabItemList.vue
deleted file mode 100644
index 61e477c..0000000
--- a/src/components/VocabItemList.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<script lang="ts" setup>
-import { reactive, watch, ref } from "vue";
-import { RouterLink } from "vue-router";
-
-import ItemListSortButton from "@/components/ItemListSortButton.vue";
-import type { VocabListItem, listingTableColumn } from "@/types";
-
-const props = defineProps<{
-    items: VocabListItem[];
-    childName?: string;
-    childLink?: string;
-}>();
-
-// Each key is a table header.
-// If key has the value "true", it is being sorted alphabetically A-Z.
-// If key has the value "false", it is being sorted alphabetically Z-A.
-// Only one key can have a value of true or false and other keys are null.
-const sortState = reactive<{label: boolean | null, description: boolean | null, status: boolean | null, derivationMode: boolean | null}>({
-    label: true,
-    description: null,
-    status: null,
-    derivationMode: null
-});
-
-const rows = ref(props.items);
-
-const setSortState = (key: listingTableColumn) => {
-    const validKeys: listingTableColumn[] = ["label", "description", "status", "derivationMode"];
-    
-    // Save the current value.
-    const currentKeyValue = sortState[key];
-
-    // Set all the values to null.
-    for (const validKey of validKeys) {
-        sortState[validKey] = null;
-    }
-
-    if (typeof currentKeyValue === "boolean") {
-        if (currentKeyValue === true) {
-            sortState[key] = false;
-        } 
-        else if (currentKeyValue === false) {
-            sortState[key] = true;
-        } else {
-            sortState[key] = null;
-        }
-    }
-    else {
-        sortState[key] = true;
-    }
-}
-
-watch(sortState, () => {
-    const validKeys: listingTableColumn[] = ["label", "description", "status", "derivationMode"];
-    const keyToListItem = {
-        label: "title",
-        description: "description",
-        status: "status",
-        derivationMode: "derivationMode",
-    }
-    
-    for (const validKey of validKeys) {
-        if (sortState[validKey] === true) {
-            rows.value = props.items.sort((a: VocabListItem, b: VocabListItem) => {
-                const listItemKey = keyToListItem[validKey];
-                if (a.hasOwnProperty(listItemKey)) {
-                    return (a[listItemKey] as string).localeCompare(b[listItemKey] as string);
-                }
-                return 0;
-            })
-        }
-        else if (sortState[validKey] === false) {
-            rows.value = props.items.sort((a: VocabListItem, b: VocabListItem) => {
-                const listItemKey = keyToListItem[validKey];
-                if (b.hasOwnProperty(listItemKey)) {
-                    return (b[listItemKey] as string).localeCompare(a[listItemKey] as string);
-                }
-                return 0;
-            })
-        }
-    }
-});
-
-</script>
-
-<template>
-    <table class="table" role="grid">
-        <thead>
-            <tr role="row">
-                <th>Label <ItemListSortButton id="label" :state="sortState.label" @clicked="(id) => setSortState(id)" /></th>
-                <th>Description <ItemListSortButton id="description" :state="sortState.description" @clicked="(id) => setSortState(id)" /></th>
-                <th>Status <ItemListSortButton id="status" :state="sortState.status" @clicked="(id) => setSortState(id)" /></th>
-                <th>Derivation mode <ItemListSortButton id="derivationMode" :state="sortState.derivationMode" @clicked="(id) => setSortState(id)" /></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="row" role="row" v-for="item in props.items">
-                <td>
-                    <RouterLink :to="!!item.link ? item.link : ''">
-                        {{ item.title || item.iri }}
-                    </RouterLink>
-                </td>
-                <td>
-                    <div v-if="!!item.description">{{ item.description.substring(0, 80) + "..." }}</div>
-                </td>
-                <td>
-                    <div v-if="!!item.status">
-                        <a :href="item.status.iri" target="_blank">{{ item.status.label }}</a> <span :style="`color: ${item.status.color}`" class="fa-solid fa-circle fa-2xs"></span>
-                    </div>
-                </td>
-                <td>
-                    <div v-if="!!item.derivationMode">
-                        <a :href="item.derivationMode.iri">{{  item.derivationMode.label }}</a>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</template>
-
-<style lang="scss" scoped>
-@import "@/assets/sass/_variables.scss";
-
-.table {
-    border-collapse: separate;
-    border-spacing: 0 1em;
-}
-
-.row {
-    padding: 5px;
-    background-color: var(--cardBg);
-}
-
-th {
-    text-align: left;
-    padding-left: 0.5rem;
-}
-
-td {
-    padding: 10px;
-}
-
-.list {
-    gap: 12px;
-    margin-bottom: 12px;
-
-    a.list-item {
-        gap: 10px;
-        background-color: var(--cardBg);
-        padding: 10px;
-        border-radius: $borderRadius;
-
-        .list-item-left {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            flex-grow: 1;
-
-            .list-item-title {
-                margin: 0;
-            }
-
-            .list-item-desc {
-                font-style: italic;
-                color: grey;
-                font-size: 0.8rem;
-            }
-        }
-
-        .child-btn {
-            align-self: baseline;
-            flex-shrink: 0;
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 94d5e52..bf0c79f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,8 +3,6 @@ import type { Quad } from "n3";
 
 export type PrezFlavour = "CatPrez" | "SpacePrez" | "VocPrez";
 
-export type listingTableColumn = "label" | "description" | "status" | "derivationMode";
-
 export const mapConfigKey: InjectionKey<MapConfig> = Symbol();
 export const sidenavConfigKey: InjectionKey<boolean> = Symbol();
 export const enabledPrezsConfigKey: InjectionKey<PrezFlavour[]> = Symbol();
@@ -94,26 +92,17 @@ export interface ListItem {
     type?: string;
 };
 
-export interface RegStatus {
-    iri: string;
-    label: string;
-    color?: string;
-};
+// extra properies for SortableTable display go in extras
+export interface ListItemExtra extends ListItem {
+    extras: {
+        [key: string]: ListItemSortable
+    };
+}
 
-export interface DerivationMode {
-    iri: string;
+export interface ListItemSortable {
     label: string;
-};
-
-export interface VocabListItem {
-    iri: string;
-    title?: string;
-    description?: string;
-    link?: string;
-    type?: string;
-    status?: RegStatus;
-    derivationMode?: DerivationMode;
-    [key: string]: string | RegStatus | undefined;
+    iri?: string;
+    color?: string;
 };
 
 export interface AnnotatedPredicate {
diff --git a/src/views/ItemListView.vue b/src/views/ItemListView.vue
index 159371b..f07049d 100644
--- a/src/views/ItemListView.vue
+++ b/src/views/ItemListView.vue
@@ -5,14 +5,14 @@ import { DataFactory, type Quad_Object, type Quad_Subject } from "n3";
 import { useUiStore } from "@/stores/ui";
 import { useRdfStore } from "@/composables/rdfStore";
 import { useGetRequest } from "@/composables/api";
-import { apiBaseUrlConfigKey, type Breadcrumb, type ListItem, type VocabListItem, type PrezFlavour, type Profile, type RegStatus, type DerivationMode } from "@/types";
+import { apiBaseUrlConfigKey, type Breadcrumb, type ListItem, type PrezFlavour, type Profile, type ListItemExtra, type ListItemSortable } from "@/types";
 import ItemList from "@/components/ItemList.vue";
-import VocabItemList from "@/components/VocabItemList.vue";
 import AdvancedSearch from "@/components/search/AdvancedSearch.vue";
 import ProfilesTable from "@/components/ProfilesTable.vue";
 import ErrorMessage from "@/components/ErrorMessage.vue";
 import PaginationComponent from "@/components/PaginationComponent.vue";
 import { getPrezSystemLabel } from "@/util/prezSystemLabelMapping";
+import SortableTabularList from "@/components/SortableTabularList.vue";
 
 const { namedNode } = DataFactory;
 
@@ -37,7 +37,7 @@ const TOP_LEVEL_TYPES = [
 const ALT_PROFILES_TOKEN = "lt-prfl:alt-profile";
 
 // const parent = ref<ListItem>({} as ListItem); // might need to store parent info (dataset & feature collection)
-const items = ref<ListItem[]>([]);
+const items = ref<ListItemExtra[]>([]);
 const itemType = ref({
     uri: "",
     label: ""
@@ -185,7 +185,10 @@ function getProperties() {
 
     // fill out item list & handle vocprez items
     nodeList.forEach(member => {
-        let c: VocabListItem = { iri: member.id }; // already contains all attributes we need
+        let c: ListItemExtra = {
+            iri: member.id,
+            extras: {}
+        };
 
         store.value.forEach(q => {
             if (labelPredicates.includes(q.predicate.value)) {
@@ -195,7 +198,7 @@ function getProperties() {
             } else if (q.predicate.value === qname("prez:link")) {
                 c.link = q.object.value;
             } else if (flavour.value === "VocPrez" && q.predicate.value === qname("reg:status")) {
-                const status: RegStatus = {iri: q.object.value, label: getIRILocalName(q.object.value)};
+                const status: ListItemSortable = {iri: q.object.value, label: getIRILocalName(q.object.value)};
 
                 store.value.forObjects(result => {
                     status.label = result.value;
@@ -204,16 +207,16 @@ function getProperties() {
                 store.value.forObjects(result => {
                     status.color = result.value;
                 }, q.object, qname("sdo:color"), null);
-                c.status = status;
+                c.extras.status = status;
             } else if (flavour.value === "VocPrez" && q.predicate.value === qname("prov:qualifiedDerivation")) {
                 store.value.forObjects(result => {
-                    const mode: DerivationMode = {iri: result.value, label: getIRILocalName(result.value)};
+                    const mode: ListItemSortable = {iri: result.value, label: getIRILocalName(result.value)};
 
                     store.value.forObjects(innerResult => {
                         mode.label = innerResult.value;
                     }, result,qname("rdfs:label"), null);
 
-                    c.derivationMode = mode;
+                    c.extras.derivationMode = mode;
                 }, q.object, qname("prov:hadRole"), null);
             }
         }, member, null, null, null);
@@ -322,7 +325,7 @@ onMounted(() => {
             <i class="fa-regular fa-spinner-third fa-spin"></i> Loading...
         </template>
         <template v-else-if="items.length > 0">
-            <VocabItemList v-if="flavour === 'VocPrez'" :items="items" />
+            <SortableTabularList v-if="flavour === 'VocPrez'" :items="items" :predicates="['description', 'status', 'derivationMode']" />
             <ItemList v-else :items="items" :childName="childrenConfig.buttonTitle" :childLink="childrenConfig.buttonLink" />
             <PaginationComponent :url="route.path" :totalCount="count" :currentPage="currentPageNumber" />
         </template>
diff --git a/src/views/PropTableView.vue b/src/views/PropTableView.vue
index 7a7214a..63698a8 100644
--- a/src/views/PropTableView.vue
+++ b/src/views/PropTableView.vue
@@ -5,7 +5,7 @@ import { BlankNode, DataFactory, Quad, Store } from "n3";
 import { useUiStore } from "@/stores/ui";
 import { useRdfStore } from "@/composables/rdfStore";
 import { useGetRequest } from "@/composables/api";
-import { apiBaseUrlConfigKey, type ListItem, type AnnotatedQuad, type Breadcrumb, type Concept, type PrezFlavour, type Profile } from "@/types";
+import { apiBaseUrlConfigKey, type ListItem, type AnnotatedQuad, type Breadcrumb, type Concept, type PrezFlavour, type Profile, type ListItemExtra, type ListItemSortable } from "@/types";
 import PropTable from "@/components/proptable/PropTable.vue";
 import ConceptComponent from "@/components/ConceptComponent.vue";
 import AdvancedSearch from "@/components/search/AdvancedSearch.vue";
@@ -14,6 +14,7 @@ import ErrorMessage from "@/components/ErrorMessage.vue";
 import { getPrezSystemLabel } from "@/util/prezSystemLabelMapping";
 import MapClient from "@/components/MapClient.vue";
 import type { WKTResult } from "@/stores/mapSearchStore.d";
+import SortableTabularList from "@/components/SortableTabularList.vue";
 
 const { namedNode } = DataFactory;
 
@@ -31,7 +32,7 @@ const RECURSION_LIMIT = 5; // limit on recursive search of blank nodes
 const ALT_PROFILES_TOKEN = "lt-prfl:alt-profile";
 
 const item = ref<ListItem>({} as ListItem);
-const children = ref<ListItem[]>([]);
+const children = ref<ListItemExtra[]>([]);
 const concepts = ref<Concept[]>([]); // only for vocab
 const properties = ref<AnnotatedQuad[]>([]);
 const blankNodes = ref<AnnotatedQuad[]>([]);
@@ -185,6 +186,10 @@ function getBreadcrumbs(): Breadcrumb[] {
             switch (pathSegment) {
                 case "catalogs":
                     crumbs.push({ name: "Catalogs", url: "/c/catalogs" });
+                    if (index + 1 !== pathSegments.length) {
+                        crumbs.push({ name: "Catalog", url: `/c/catalogs/${route.params.catalogId}` });
+                        skipSegment = true;
+                    }
                     break;
                 case "datasets":
                     crumbs.push({ name: "Datasets", url: "/s/datasets" });
@@ -232,6 +237,16 @@ function getBreadcrumbs(): Breadcrumb[] {
     return crumbs;
 }
 
+function getIRILocalName(iri: string) {
+    let result = iri.split("#");
+    if (result.length === 1) {
+        return result[0].split("/").slice(-1)[0]
+    }
+    else {
+        return result.slice(-1)[0];
+    }
+}
+
 function getChildren() {
     if (item.value.type === qname("skos:ConceptScheme")) {
         getConcepts();
@@ -239,8 +254,9 @@ function getChildren() {
         const labelPredicates = defaultProfile.value!.labelPredicates.length > 0 ? defaultProfile.value!.labelPredicates : DEFAULT_LABEL_PREDICATES;
 
         store.value.forObjects((obj) => {
-            let child: ListItem = {
-                iri: obj.id
+            let child: ListItemExtra = {
+                iri: obj.id,
+                extras: {}
             };
 
             store.value.forEach(q => {
@@ -250,7 +266,26 @@ function getChildren() {
                     child.link = q.object.value;
                 } else if (q.predicate.value === qname("a")) {
                     child.type = q.object.value;
-                }
+                } else if (item.value.type === qname("dcat:Catalog") && q.predicate.value === qname("dcterms:publisher")) {
+                    const publisher: ListItemSortable = { iri: q.object.value, label: getIRILocalName(q.object.value) };
+
+                    store.value.forObjects(result => {
+                        publisher.label = result.value;
+                    }, q.object, qname("rdfs:label"), null);
+
+                    child.extras.publisher = publisher;
+                } else if (item.value.type === qname("dcat:Catalog") && q.predicate.value === qname("dcterms:creator")) {
+                    const creator: ListItemSortable = { iri: q.object.value, label: getIRILocalName(q.object.value) };
+
+                    store.value.forObjects(result => {
+                        creator.label = result.value;
+                    }, q.object, qname("rdfs:label"), null);
+                    
+                    child.extras.creator = creator;
+                } else if (item.value.type === qname("dcat:Catalog") && q.predicate.value === qname("dcterms:issued")) {
+                    const issued: ListItemSortable = { label: q.object.value };
+                    child.extras.issued = issued;
+                } 
             }, obj, null, null, null);
 
             children.value.push(child);
@@ -462,7 +497,12 @@ onMounted(() => {
             <template v-else-if="childrenConfig.showChildren" #bottom>
                 <tr>
                     <th>{{ childrenConfig.childrenTitle }}</th>
-                    <td>
+                    <SortableTabularList
+                        v-if="item.type === qname('dcat:Catalog')"
+                        :items="children"
+                        :predicates="['publisher', 'creator', 'issued']"
+                    />
+                    <td v-else>
                         <div class="children-list">
                             <RouterLink v-for="child in children" :to="child.link || ''">{{ child.title || child.iri }}</RouterLink>
                         </div>