diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index e25abfbfe89d..263fd6c8dedc 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -6,10 +6,54 @@ import {
     GalaxyApi,
     type GalaxyApiPaths,
     type HDADetailed,
+    type HDASummary,
 } from "@/api";
 import { withPrefix } from "@/utils/redirect";
 import { rethrowSimple } from "@/utils/simple-error";
 
+export interface LoadDatasetsOptions {
+    limit?: number;
+    offset?: number;
+    sortBy?: string;
+    sortDesc?: boolean;
+    search?: string;
+}
+
+export interface LoadDatasetsResult {
+    data: HDASummary[];
+    totalMatches: number;
+}
+
+export async function loadDatasets(options: LoadDatasetsOptions): Promise<LoadDatasetsResult> {
+    const { limit = 24, offset = 0, sortBy = "update_time", sortDesc = true, search = "" } = options;
+
+    const {
+        response,
+        data: datasets,
+        error,
+    } = await GalaxyApi().GET("/api/datasets", {
+        params: {
+            query: {
+                q: search ? ["name-contains"] : undefined,
+                qv: search ? [search] : undefined,
+                limit,
+                offset,
+                order: `${sortBy}${sortDesc ? "-dsc" : "-asc"}`,
+                view: "summary",
+            },
+        },
+    });
+
+    if (error) {
+        rethrowSimple(error);
+    }
+
+    const totalMatches = parseInt(response.headers.get("total_matches") ?? "0", 10) || 0;
+    const data = datasets as unknown as HDASummary[];
+
+    return { data, totalMatches };
+}
+
 export async function fetchDatasetTextContentDetails(params: { id: string }): Promise<DatasetTextContentDetails> {
     const { data, error } = await GalaxyApi().GET("/api/datasets/{dataset_id}/get_content_as_text", {
         params: {
@@ -56,11 +100,11 @@ export async function undeleteDataset(datasetId: string) {
     return data;
 }
 
-export async function purgeDataset(datasetId: string) {
+export async function deleteDataset(datasetId: string, purge: boolean = false) {
     const { data, error } = await GalaxyApi().DELETE("/api/datasets/{dataset_id}", {
         params: {
             path: { dataset_id: datasetId },
-            query: { purge: true },
+            query: { purge },
         },
     });
     if (error) {
@@ -69,6 +113,10 @@ export async function purgeDataset(datasetId: string) {
     return data;
 }
 
+export async function purgeDataset(datasetId: string) {
+    return deleteDataset(datasetId, true);
+}
+
 type CopyDatasetParamsType = GalaxyApiPaths["/api/histories/{history_id}/contents/{type}s"]["post"]["parameters"];
 type CopyDatasetBodyType = components["schemas"]["CreateHistoryContentPayload"];
 
diff --git a/client/src/components/Common/GTable.types.ts b/client/src/components/Common/GTable.types.ts
new file mode 100644
index 000000000000..1ca5e6007bda
--- /dev/null
+++ b/client/src/components/Common/GTable.types.ts
@@ -0,0 +1,119 @@
+import type { SizeProp } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+import type { BootstrapVariant } from "@/components/Common";
+
+/** Bootstrap component sizes */
+export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+/** Table field sorting order */
+export type SortOrder = "asc" | "desc";
+
+/** Table field alignment options */
+export type FieldAlignment = "left" | "center" | "right";
+
+/** Table field definition */
+export interface TableField {
+    /** Unique key for the field (matches data property name) */
+    key: string;
+    /** Display label for the column header */
+    label?: string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom CSS classes for the column */
+    class?: string;
+    /** Custom CSS classes for the header cell */
+    headerClass?: string;
+    /** Custom CSS classes for data cells */
+    cellClass?: string;
+    /** Column alignment */
+    align?: FieldAlignment;
+    /** Width of the column (CSS value) */
+    width?: string;
+    /** Whether to hide the column on small screens */
+    hideOnSmall?: boolean;
+    /** Custom formatter function for cell values */
+    formatter?: (value: any, key: string, item: any) => string;
+}
+
+/** Sort change event payload */
+export interface SortChangeEvent {
+    /** The field key being sorted */
+    sortBy: string;
+    /** Whether sorting in descending order */
+    sortDesc: boolean;
+}
+
+/** Row click event payload */
+export interface RowClickEvent<T = any> {
+    /** The row item data */
+    item: T;
+    /** The row index */
+    index: number;
+    /** The original mouse/keyboard event */
+    event: MouseEvent | KeyboardEvent;
+}
+
+/** Row selection event payload */
+export interface RowSelectEvent<T = any> {
+    /** The selected row item */
+    item: T;
+    /** The row index */
+    index: number;
+    /** Whether the row is now selected */
+    selected: boolean;
+}
+
+/** Table action button configuration */
+export interface TableAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action */
+    label: string;
+    /** Tooltip text */
+    title: string;
+    /** FontAwesome icon */
+    icon?: IconDefinition;
+    /** Bootstrap variant */
+    variant?: BootstrapVariant;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Whether the action is visible */
+    visible?: boolean;
+    /** Bootstrap component size */
+    size?: BootstrapSize;
+    /** Vue Router route to navigate to */
+    to?: string;
+    /** Hyperlink reference */
+    href?: string;
+    /** Link target attribute */
+    target?: string;
+    /** Whether link opens in new tab/window */
+    externalLink?: boolean;
+    /** Click handler function */
+    handler?: (item: any, index: number) => void;
+}
+
+/** Empty state configuration */
+export interface TableEmptyState {
+    /** Message to display when no data */
+    message: string;
+    /** Optional icon to display */
+    icon?: IconDefinition;
+    /** Bootstrap variant for styling */
+    variant?: BootstrapVariant;
+}
+
+/** Row status icon configuration */
+export interface RowIcon {
+    /** FontAwesome icon (required) */
+    icon: IconDefinition;
+    /** Additional CSS classes */
+    class?: string;
+    /** Icon size (FontAwesome SizeProp) */
+    size?: SizeProp;
+    /** Tooltip text */
+    title?: string;
+    /** Whether icon should spin (loading state) */
+    spin?: boolean;
+}
diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
new file mode 100644
index 000000000000..c4dbfad1264c
--- /dev/null
+++ b/client/src/components/Common/GTable.vue
@@ -0,0 +1,572 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { faEllipsisV, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BDropdown, BDropdownItem, BFormCheckbox, BOverlay } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { useUid } from "@/composables/utils/uid";
+
+import type {
+    FieldAlignment,
+    RowClickEvent,
+    RowIcon,
+    RowSelectEvent,
+    TableAction,
+    TableEmptyState,
+    TableField,
+} from "./GTable.types";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    /**
+     * Unique identifier for the table
+     * @default useUid("g-table-").value
+     */
+    id?: string;
+
+    /**
+     * Table actions displayed above the table
+     * @default []
+     */
+    actions?: TableAction[];
+
+    /**
+     * Whether to show borders
+     * @default false
+     */
+    bordered?: boolean;
+
+    /**
+     * Whether rows are clickable
+     * @default false
+     */
+    clickableRows?: boolean;
+
+    /**
+     * Additional CSS classes for the table container
+     * @default ""
+     */
+    containerClass?: string | string[];
+
+    /**
+     * Empty state configuration
+     * @default { message: "No data available" }
+     */
+    emptyState?: TableEmptyState;
+
+    /**
+     * Table field definitions
+     * @default []
+     */
+    fields?: TableField[];
+
+    /**
+     * Whether to show hover effect on rows
+     * @default true
+     */
+    hover?: boolean;
+
+    /**
+     * Table data items
+     * @default []
+     */
+    items?: T[];
+
+    /**
+     * Whether the table is in loading state
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * Loading message to display
+     * @default "Loading..."
+     */
+    loadingMessage?: string;
+
+    /**
+     * Whether to show load-more loading indicator at bottom (for pagination/scroll)
+     * @default false
+     */
+    loadMoreLoading?: boolean;
+
+    /**
+     * Load-more loading message
+     * @default "Loading more..."
+     */
+    loadMoreMessage?: string;
+
+    /**
+     * Whether to show overlay loading (for sorting/filtering operations)
+     * @default false
+     */
+    overlayLoading?: boolean;
+
+    /**
+     * Whether to show striped rows
+     * @default true
+     */
+    striped?: boolean;
+
+    /**
+     * Whether to show selection checkboxes
+     * @default false
+     */
+    selectable?: boolean;
+
+    /**
+     * Array of selected item indices
+     * @default []
+     */
+    selectedItems?: number[];
+
+    /**
+     * Current sort field key
+     * @default ""
+     */
+    sortBy?: string;
+
+    /**
+     * Whether sorting in descending order
+     * @default false
+     */
+    sortDesc?: boolean;
+
+    /**
+     * Whether to show select all checkbox in header
+     * @default false
+     */
+    showSelectAll?: boolean;
+
+    /**
+     * Row status icon getter - renders icon inline with first data column
+     * Return undefined to skip icon for a row
+     * @default undefined
+     */
+    statusIcon?: (item: T, index: number) => RowIcon | undefined;
+
+    /**
+     * Additional CSS classes for the table element
+     * @default ""
+     */
+    tableClass?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    id: () => useUid("g-table-").value,
+    actions: () => [],
+    bordered: false,
+    clickableRows: false,
+    containerClass: "",
+    emptyState: () => ({ message: "No data available" }),
+    fields: () => [],
+    hover: true,
+    items: () => [],
+    loading: false,
+    loadingMessage: "Loading...",
+    loadMoreLoading: false,
+    loadMoreMessage: "Loading more...",
+    overlayLoading: false,
+    selectable: false,
+    selectedItems: () => [],
+    showSelectAll: false,
+    sortBy: "",
+    sortDesc: false,
+    striped: true,
+    statusIcon: undefined,
+    tableClass: "",
+});
+
+/**
+ * Events emitted by the GTable component
+ */
+const emit = defineEmits<{
+    /**
+     * Emitted when sort changes
+     * @event sort-changed
+     */
+    (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
+
+    /**
+     * Emitted when select all checkbox is toggled
+     * @event select-all
+     */
+    (e: "select-all"): void;
+
+    /**
+     * Emitted when a row is selected/deselected
+     * @event row-select
+     */
+    (e: "row-select", event: RowSelectEvent<T>): void;
+
+    /**
+     * Emitted when a row is clicked
+     * @event row-click
+     */
+    (e: "row-click", event: RowClickEvent<T>): void;
+}>();
+
+const sortBy = ref<string>(props.sortBy || "update_time");
+const sortDesc = ref<boolean>(props.sortDesc || true);
+
+const localItems = computed(() => props.items || []);
+const selectAllDisabled = computed(() => {
+    return props.selectable && localItems.value.length === 0;
+});
+const indeterminateSelected = computed(() => {
+    return props.selectable && props.selectedItems.length > 0 && props.selectedItems.length < localItems.value.length;
+});
+const allSelected = computed(() => {
+    return props.selectable && localItems.value.length > 0 && props.selectedItems.length === localItems.value.length;
+});
+
+/**
+ * Handle column header click for sorting
+ */
+function onHeaderClick(field: TableField) {
+    if (!field.sortable) {
+        return;
+    }
+
+    if (sortBy.value === field.key) {
+        sortDesc.value = !sortDesc.value;
+    } else {
+        sortBy.value = field.key;
+        sortDesc.value = false;
+    }
+
+    emit("sort-changed", sortBy.value || "", sortDesc.value);
+}
+
+/**
+ * Get sort icon for a field
+ */
+function getSortIcon(field: TableField) {
+    if (!field.sortable) {
+        return null;
+    }
+
+    if (sortBy.value !== field.key) {
+        return faSort;
+    }
+
+    return sortDesc.value ? faSortDown : faSortUp;
+}
+
+/**
+ * Handle row click
+ */
+function onRowClick(item: T, index: number, event: MouseEvent | KeyboardEvent) {
+    if (!props.clickableRows) {
+        return;
+    }
+
+    emit("row-click", { item, index, event });
+}
+
+function onSelectAll(selected: boolean) {
+    emit("select-all");
+}
+
+/**
+ * Handle row selection toggle
+ */
+function onRowSelect(item: T, index: number) {
+    const isSelected = props.selectedItems.includes(index);
+    emit("row-select", { item, index, selected: !isSelected });
+}
+
+/**
+ * Get cell value with optional formatter
+ */
+function getCellValue(item: T, field: TableField) {
+    const value = item[field.key];
+
+    if (field.formatter) {
+        return field.formatter(value, field.key, item);
+    }
+
+    return value;
+}
+
+/**
+ * Get alignment class for a field
+ */
+function getAlignmentClass(align?: FieldAlignment) {
+    if (!align || align === "left") {
+        return "";
+    }
+    return `text-${align}`;
+}
+
+/**
+ * Check if row is selected
+ */
+function isRowSelected(index: number) {
+    return props.selectedItems.includes(index);
+}
+
+/**
+ * Get status icon for a row
+ */
+function getStatusIcon(item: T, index: number): RowIcon | undefined {
+    return props.statusIcon?.(item, index);
+}
+
+/**
+ * Get icon props for FontAwesomeIcon component
+ * Computes icon attributes once per call
+ */
+function getIconProps(item: T, index: number) {
+    const icon = getStatusIcon(item, index);
+    if (!icon) {
+        return {};
+    }
+    return {
+        icon: icon.icon,
+        class: [icon.class],
+        title: icon.title,
+        spin: icon.spin,
+        size: icon.size,
+    };
+}
+
+/**
+ * Helper functions for generating consistent element IDs
+ */
+const getFieldId = (tableId: string, fieldKey: string) => `g-table-field-${fieldKey}-${tableId}`;
+const getRowId = (tableId: string, index: number) => `g-table-row-${index}-${tableId}`;
+const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table-cell-${fieldKey}-${index}-${tableId}`;
+</script>
+
+<template>
+    <div :id="`g-table-container-${props.id}`" class="w-100" :class="containerClass">
+        <!-- Table wrapper -->
+        <BOverlay :show="overlayLoading" rounded="sm" class="position-relative w-100">
+            <div :id="`g-table-wrapper-${props.id}`" class="position-relative w-100">
+                <table
+                    :id="`g-table-${props.id}`"
+                    class="g-table table w-100 mb-0"
+                    :class="[
+                        { 'table-striped': striped },
+                        { 'table-hover': hover },
+                        { 'table-bordered': bordered },
+                        tableClass,
+                    ]">
+                    <thead>
+                        <tr>
+                            <th v-if="selectable" class="g-table-select-column">
+                                <slot name="head-select">
+                                    <BFormCheckbox
+                                        v-if="showSelectAll"
+                                        :id="`g-table-select-all-${props.id}`"
+                                        v-b-tooltip.hover.noninteractive
+                                        :disabled="selectAllDisabled"
+                                        :checked="allSelected"
+                                        :indeterminate="indeterminateSelected"
+                                        title="Select all for bulk actions"
+                                        @click.stop
+                                        @change="onSelectAll($event)" />
+                                </slot>
+                            </th>
+
+                            <!-- Field columns -->
+                            <th
+                                v-for="field in props.fields"
+                                :id="getFieldId(props.id, field.key)"
+                                :key="field.key"
+                                :class="[
+                                    field.headerClass,
+                                    getAlignmentClass(field.align),
+                                    { 'g-table-sortable': field.sortable },
+                                    { 'g-table-sorted': sortBy === field.key },
+                                    { 'hide-on-small': field.hideOnSmall },
+                                ]"
+                                :style="field.width ? { width: field.width } : undefined"
+                                @click="onHeaderClick(field)">
+                                <div class="d-flex align-items-center justify-content-between">
+                                    <slot :name="`head(${field.key})`" :field="field">
+                                        <span>{{ field.label || field.key }}</span>
+                                    </slot>
+                                    <FontAwesomeIcon
+                                        v-if="field.sortable && getSortIcon(field)"
+                                        :icon="getSortIcon(field)"
+                                        :class="{ 'text-muted': sortBy !== field.key }"
+                                        class="ml-1" />
+                                </div>
+                            </th>
+
+                            <th v-if="props.actions" class="g-table-actions-column">
+                                <slot name="head-actions">Actions</slot>
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <tbody v-if="localItems.length > 0">
+                        <tr
+                            v-for="(item, index) in localItems"
+                            :id="getRowId(props.id, index)"
+                            :key="index"
+                            :class="{
+                                'g-table-row-clickable': clickableRows,
+                                'g-table-row-selected': isRowSelected(index),
+                            }"
+                            @click="onRowClick(item, index, $event)">
+                            <!-- Selection checkbox column -->
+                            <td v-if="selectable" class="g-table-select-column">
+                                <BFormCheckbox
+                                    :id="`${getRowId(props.id, index)}-select`"
+                                    v-b-tooltip.hover.noninteractive
+                                    :checked="isRowSelected(index)"
+                                    title="Select for bulk actions"
+                                    @click.stop
+                                    @change="onRowSelect(item, index)" />
+                            </td>
+
+                            <!-- Data columns -->
+                            <td
+                                v-for="(field, fieldIndex) in props.fields"
+                                :id="getCellId(props.id, field.key, index)"
+                                :key="field.key"
+                                :class="[
+                                    field.cellClass,
+                                    field.class,
+                                    getAlignmentClass(field.align),
+                                    { 'hide-on-small': field.hideOnSmall },
+                                ]">
+                                <template v-if="fieldIndex === 0 && getStatusIcon(item, index)">
+                                    <FontAwesomeIcon
+                                        v-if="getStatusIcon(item, index)"
+                                        v-b-tooltip.hover.noninteractive
+                                        v-bind="getIconProps(item, index)"
+                                        fixed-width />
+                                </template>
+
+                                <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
+                                    <span>{{ getCellValue(item, field) }}</span>
+                                </slot>
+                            </td>
+
+                            <!-- Actions column -->
+                            <td v-if="props.actions" class="g-table-actions-column">
+                                <slot name="actions" :item="item" :index="index">
+                                    <BDropdown
+                                        v-b-tooltip.hover.noninteractive
+                                        no-caret
+                                        right
+                                        title="More actions"
+                                        variant="link"
+                                        size="lg"
+                                        toggle-class="text-decoration-none p-0"
+                                        @click.stop>
+                                        <template v-slot:button-content>
+                                            <FontAwesomeIcon :icon="faEllipsisV" fixed-width />
+                                        </template>
+
+                                        <template v-for="ac in props.actions">
+                                            <BDropdownItem
+                                                v-if="ac.visible ?? true"
+                                                :id="ac.id"
+                                                :key="ac.id"
+                                                :disabled="ac.disabled"
+                                                :size="ac.size || 'sm'"
+                                                :variant="ac.variant || 'link'"
+                                                :to="ac.to"
+                                                :title="ac.title"
+                                                :href="ac.href"
+                                                :target="ac.externalLink ? '_blank' : undefined"
+                                                @click.stop="ac.handler && ac.handler(item, index)">
+                                                <FontAwesomeIcon v-if="ac.icon" :icon="ac.icon" fixed-width />
+                                                {{ ac.label }}
+                                            </BDropdownItem>
+                                        </template>
+                                    </BDropdown>
+                                </slot>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <!-- Load more loading indicator -->
+                <div v-if="loadMoreLoading && localItems.length > 0" class="g-table-load-more py-3 text-center">
+                    <LoadingSpan :message="props.loadMoreMessage" />
+                </div>
+            </div>
+        </BOverlay>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/style/scss/theme/blue.scss";
+@import "@/style/scss/_breakpoints.scss";
+
+// Essential custom styles that cannot be replaced with utility classes
+.g-table {
+    thead th {
+        position: sticky;
+        top: 0;
+        background-color: $body-bg;
+        z-index: 10;
+        border-bottom: 2px solid $brand-secondary;
+        font-weight: 600;
+        padding: 0.75rem;
+
+        &.g-table-sortable {
+            cursor: pointer;
+            user-select: none;
+
+            &:hover {
+                background-color: lighten($brand-light, 0.5);
+            }
+        }
+
+        &.g-table-sorted {
+            background-color: $brand-light;
+        }
+    }
+
+    tbody {
+        tr {
+            &.g-table-row-clickable {
+                cursor: pointer;
+
+                &:hover {
+                    background-color: lighten($brand-light, 0.5);
+                }
+            }
+
+            box-shadow: inset 0 -1px 0 0 rgba($brand-primary, 0.2);
+
+            &.g-table-row-selected {
+                background-color: $brand-light;
+            }
+        }
+
+        td {
+            padding: 0.75rem;
+            vertical-align: middle;
+        }
+    }
+
+    .g-table-select-column {
+        width: 40px;
+        text-align: center;
+    }
+
+    .g-table-actions-column {
+        width: 60px;
+        text-align: center;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+        .hide-on-small {
+            display: none;
+        }
+    }
+}
+
+.g-table-load-more {
+    border-top: 1px solid $brand-secondary;
+}
+</style>
diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 1514d2038ff9..f65eae24ad16 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faAngleUp, faBars, faCog, faGripVertical, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BFormCheckbox } from "bootstrap-vue";
+import { BDropdown, BDropdownGroup, BDropdownHeader, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type ListViewMode, useUserStore } from "@/stores/userStore";
@@ -9,7 +9,17 @@ import { type ListViewMode, useUserStore } from "@/stores/userStore";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 
-type SortBy = "create_time" | "update_time" | "name";
+type SortBy = string;
+
+interface ColumnOption {
+    key: string;
+    label: string;
+}
+
+interface SortOption {
+    value: string;
+    label: string;
+}
 
 interface Props {
     listId: string;
@@ -19,6 +29,9 @@ interface Props {
     showSortOptions?: boolean;
     selectAllDisabled?: boolean;
     indeterminateSelected?: boolean;
+    columnOptions?: ColumnOption[];
+    visibleColumns?: string[];
+    sortOptions?: SortOption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,24 +41,60 @@ const props = withDefaults(defineProps<Props>(), {
     showSortOptions: false,
     selectAllDisabled: false,
     indeterminateSelected: false,
+    columnOptions: () => [],
+    visibleColumns: () => [],
+    sortOptions: () => [],
 });
 
 const emit = defineEmits<{
     (e: "select-all"): void;
+    (e: "toggle-column", key: string): void;
+    (e: "sort-changed", sortBy: string, sortDesc: boolean): void;
+    (e: "reset-columns"): void;
 }>();
 
 const userStore = useUserStore();
 
 const sortDesc = ref(true);
-const sortBy = ref<SortBy>("update_time");
+
+// Default sort options for backward compatibility
+const defaultSortOptions: SortOption[] = [
+    { value: "name", label: "Name" },
+    { value: "update_time", label: "Update time" },
+];
+
+// Use provided sortOptions or fall back to defaults
+const effectiveSortOptions = computed(() => (props.sortOptions.length > 0 ? props.sortOptions : defaultSortOptions));
+
+const sortBy = ref<SortBy>(
+    props.sortOptions.length > 0 ? (effectiveSortOptions.value[0]?.value ?? "update_time") : "update_time",
+);
 const currentListViewMode = computed(() => userStore.currentListViewPreferences[props.listId] || "grid");
 
+const isAColumnNotVisible = computed(() => {
+    return props.columnOptions.some((column) => !props.visibleColumns.includes(column.key));
+});
+
 function onSort(newSortBy: SortBy) {
     if (sortBy.value === newSortBy) {
         sortDesc.value = !sortDesc.value;
     } else {
         sortBy.value = newSortBy;
+        sortDesc.value = true; // Reset to descending when changing sort field
     }
+    emit("sort-changed", sortBy.value, sortDesc.value);
+}
+
+function onResetColumns() {
+    emit("reset-columns");
+}
+
+function isColumnVisible(key: string) {
+    return props.visibleColumns.includes(key);
+}
+
+function onToggleColumn(key: string) {
+    emit("toggle-column", key);
 }
 
 function onToggleView(newView: ListViewMode) {
@@ -80,33 +129,61 @@ defineExpose({
                 Sort by:
                 <GButtonGroup>
                     <GButton
-                        id="sortby-name"
+                        v-for="option in effectiveSortOptions"
+                        :id="`sortby-${option.value}`"
+                        :key="option.value"
                         tooltip
                         size="small"
-                        :title="sortDesc ? 'Sort by name ascending' : 'Sort by name descending'"
-                        :pressed="sortBy === 'name'"
+                        :title="sortDesc ? `Sort by ${option.label} ascending` : `Sort by ${option.label} descending`"
+                        :pressed="sortBy === option.value"
                         color="blue"
                         outline
-                        @click="onSort('name')">
-                        <FontAwesomeIcon v-show="sortBy === 'name'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                        Name
-                    </GButton>
-
-                    <GButton
-                        id="sortby-update-time"
-                        tooltip
-                        size="small"
-                        :title="sortDesc ? 'Sort by update time ascending' : 'Sort by update time descending'"
-                        :pressed="sortBy === 'update_time'"
-                        color="blue"
-                        outline
-                        @click="onSort('update_time')">
-                        <FontAwesomeIcon v-show="sortBy === 'update_time'" :icon="sortDesc ? faAngleDown : faAngleUp" />
-                        Update time
+                        @click="onSort(option.value)">
+                        <FontAwesomeIcon v-show="sortBy === option.value" :icon="sortDesc ? faAngleDown : faAngleUp" />
+                        {{ option.label }}
                     </GButton>
                 </GButtonGroup>
             </div>
 
+            <BDropdown
+                v-if="columnOptions.length > 0"
+                text="Columns"
+                size="sm"
+                variant="outline-primary"
+                right
+                no-caret>
+                <template v-slot:button-content>
+                    <FontAwesomeIcon :icon="faCog" fixed-width />
+                </template>
+
+                <BDropdownGroup>
+                    <BDropdownHeader>
+                        Show/Hide Columns
+                        <GButton
+                            v-if="isAColumnNotVisible"
+                            transparent
+                            tooltip
+                            title="Reset columns to default"
+                            @click="onResetColumns">
+                            <FontAwesomeIcon :icon="faUndo" fixed-width />
+                        </GButton>
+                    </BDropdownHeader>
+
+                    <BDropdownItem
+                        v-for="column in columnOptions"
+                        :key="column.key"
+                        :disabled="column.key === 'name'"
+                        @click="column.key !== 'name' && onToggleColumn(column.key)">
+                        <BFormCheckbox
+                            :checked="isColumnVisible(column.key)"
+                            :disabled="column.key === 'name'"
+                            @click.prevent>
+                            {{ column.label }}
+                        </BFormCheckbox>
+                    </BDropdownItem>
+                </BDropdownGroup>
+            </BDropdown>
+
             <slot name="extra-filter" />
         </div>
 
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 524c33f414ea..c20881507ce4 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,133 +1,121 @@
 <script setup lang="ts">
-import { BAlert, BTable } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
+import { faBurn, faCheckCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
-import { GalaxyApi, type HDASummary } from "@/api";
-import { copyDataset } from "@/api/datasets";
+import type { HDASummary } from "@/api";
+import { deleteDataset, loadDatasets } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
-import { useHistoryStore } from "@/stores/historyStore";
-import { rethrowSimple } from "@/utils/simple-error";
+import type { RowIcon } from "@/components/Common/GTable.types";
+import { STATES } from "@/components/History/Content/model/states";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import localize from "@/utils/localization";
 
+import { useDatasetTableActions } from "./useDatasetTableActions";
+
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
-import DatasetName from "@/components/Dataset/DatasetName.vue";
+import GTable from "@/components/Common/GTable.vue";
+import ListHeader from "@/components/Common/ListHeader.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-const historyStore = useHistoryStore();
-const { currentHistoryId } = storeToRefs(historyStore);
+const breadcrumbItems = [{ title: "Datasets", to: "/datasets/list" }];
 
-const query = ref("");
-const limit = ref(50);
-const offset = ref(0);
-const message = ref("");
-const loading = ref(true);
-const sortDesc = ref(true);
-const sortBy = ref("update_time");
-const rows = ref<HDASummary[]>([]);
-const messageVariant = ref("danger");
-const fields = ref([
+const allFields = [
     {
         key: "name",
+        label: "Name",
         sortable: true,
     },
     {
         key: "tags",
+        label: "Tags",
         sortable: false,
     },
     {
-        label: "History",
         key: "history_id",
+        label: "History",
         sortable: true,
     },
     {
         key: "extension",
+        label: "Extension",
         sortable: true,
     },
     {
-        label: "Updated",
         key: "update_time",
+        label: "Updated",
         sortable: true,
     },
-    {
-        key: "context",
-        label: "",
-        sortable: false,
-    },
-]);
+];
+
+const columnOptions = allFields.map((field) => ({ key: field.key, label: field.label }));
+
+const { confirm } = useConfirmDialog();
+
+const query = ref("");
+const limit = ref(24);
+const offset = ref(0);
+const loading = ref(true);
+const overlay = ref(false);
+const sortDesc = ref(true);
+const sortBy = ref("update_time");
+const rows = ref<HDASummary[]>([]);
+const selectedItemIds = ref<string[]>([]);
+const totalDatasets = ref(0);
+const visibleColumns = ref<string[]>(["name", "tags", "history_id", "extension", "update_time"]);
+const bulkDeleteOrRestoreLoading = ref(false);
 
+const { datasetTableActions } = useDatasetTableActions(() => load(true));
+
+const currentPage = computed(() => Math.floor(offset.value / limit.value) + 1);
+const fields = computed(() => allFields.filter((field) => visibleColumns.value.includes(field.key)));
 const showNotFound = computed(() => {
-    return !loading.value && rows.value.length === 0 && query;
+    return !loading.value && rows.value.length === 0 && query.value;
 });
 const showNotAvailable = computed(() => {
     return !loading.value && rows.value.length === 0 && !query.value;
 });
+const allSelected = computed(() => {
+    return rows.value.length > 0 && selectedItemIds.value.length === rows.value.length;
+});
+const indeterminateSelected = computed(() => {
+    return selectedItemIds.value.length > 0 && selectedItemIds.value.length < rows.value.length;
+});
+const selectedIndices = computed(() => {
+    return rows.value
+        .map((row, index) => (selectedItemIds.value.includes(row.id) ? index : -1))
+        .filter((i) => i !== -1);
+});
 
-async function load(concat = false) {
-    loading.value = true;
+async function load(showOverlay = false) {
+    if (showOverlay) {
+        overlay.value = true;
+    } else {
+        loading.value = true;
+    }
 
     try {
-        const { data, error } = await GalaxyApi().GET("/api/datasets", {
-            params: {
-                query: {
-                    q: ["name-contains"],
-                    qv: [query.value],
-                    limit: limit.value,
-                    offset: offset.value,
-                    order: `${sortBy.value}${sortDesc.value ? "-dsc" : "-asc"}`,
-                    view: "summary",
-                },
-            },
+        const { data, totalMatches } = await loadDatasets({
+            limit: limit.value,
+            offset: offset.value,
+            sortBy: sortBy.value,
+            sortDesc: sortDesc.value,
+            search: query.value,
         });
 
-        if (error) {
-            rethrowSimple(error);
-        }
-
-        const datasets = data as HDASummary[];
-
-        if (concat) {
-            rows.value = rows.value.concat(datasets);
-        } else {
-            rows.value = datasets;
-        }
-    } catch (error: any) {
-        onError(error);
+        rows.value = data;
+        totalDatasets.value = totalMatches;
+    } catch (e: any) {
+        Toast.error(`Failed to load datasets: ${e}`);
     } finally {
         loading.value = false;
-    }
-}
-
-async function onCopyDataset(item: HDASummary) {
-    const dataset_id = item.id;
-
-    try {
-        if (!currentHistoryId.value) {
-            throw new Error("No current history found.");
-        }
-
-        await copyDataset(dataset_id, currentHistoryId.value);
-
-        historyStore.loadCurrentHistory();
-    } catch (error: any) {
-        onError(error);
-    }
-}
-
-async function onShowDataset(item: HDASummary) {
-    const { history_id } = item;
-    const filters = {
-        deleted: item.deleted,
-        visible: item.visible,
-        hid: item.hid,
-    };
-
-    try {
-        await historyStore.applyFilters(history_id, filters);
-    } catch (error: any) {
-        onError(error);
+        overlay.value = false;
     }
 }
 
@@ -140,40 +128,127 @@ async function onTags(tags: string[], index: number) {
 
     try {
         await updateTags(item?.id as string, "HistoryDatasetAssociation", tags);
-    } catch (error: any) {
-        onError(error);
+    } catch (e: any) {
+        Toast.error(`Failed to update tags: ${e}`);
     }
 }
 
 function onQuery(q: string) {
     query.value = q;
     offset.value = 0;
-
+    selectedItemIds.value = [];
     load();
 }
 
-function onSort(props: { sortBy: string; sortDesc: boolean }) {
+function onSort(sortByValue: string, sortDescValue: boolean) {
     offset.value = 0;
-    sortBy.value = props.sortBy;
-    sortDesc.value = props.sortDesc;
+    sortBy.value = sortByValue;
+    sortDesc.value = sortDescValue;
+    selectedItemIds.value = [];
+    load(true);
+}
 
-    load();
+async function onPageChange(page: number) {
+    offset.value = (page - 1) * limit.value;
+    selectedItemIds.value = [];
+    await load(true);
+}
+
+function onSelectAll() {
+    if (allSelected.value) {
+        selectedItemIds.value = [];
+    } else {
+        selectedItemIds.value = rows.value.map((row) => row.id);
+    }
+}
+
+function onRowSelect(event: { item: HDASummary; index: number; selected: boolean }) {
+    const index = selectedItemIds.value.indexOf(event.item.id);
+    if (index > -1) {
+        selectedItemIds.value.splice(index, 1);
+    } else {
+        selectedItemIds.value.push(event.item.id);
+    }
 }
 
-function onScroll(scroll: Event) {
-    const { scrollTop, clientHeight, scrollHeight } = scroll.target as HTMLElement;
+function onResetColumns() {
+    visibleColumns.value = allFields.map((field) => field.key);
+}
 
-    if (scrollTop + clientHeight >= scrollHeight) {
-        if (offset.value + limit.value <= rows.value.length) {
-            offset.value += limit.value;
+function onToggleColumn(key: string) {
+    const index = visibleColumns.value.indexOf(key);
+    if (index > -1) {
+        if (visibleColumns.value.length > 1 && key !== "name") {
+            visibleColumns.value.splice(index, 1);
+        }
+    } else {
+        visibleColumns.value.push(key);
+    }
+}
 
-            load(true);
+async function onBulkDelete() {
+    const totalSelected = selectedItemIds.value.length;
+
+    const confirmed = await confirm(`Are you sure you want to delete ${totalSelected} datasets?`, {
+        id: "bulk-delete-datasets-confirmation",
+        title: "Delete datasets",
+        okTitle: "Delete datasets",
+        okVariant: "danger",
+        cancelVariant: "outline-primary",
+        centered: true,
+    });
+
+    if (confirmed) {
+        try {
+            overlay.value = true;
+            bulkDeleteOrRestoreLoading.value = true;
+
+            const totalSelected = selectedItemIds.value.length;
+            const tmpSelected = [...selectedItemIds.value];
+
+            for (const id of selectedItemIds.value) {
+                await deleteDataset(id);
+
+                tmpSelected.splice(
+                    tmpSelected.findIndex((s) => s === id),
+                    1,
+                );
+            }
+
+            Toast.success(`Deleted ${totalSelected} dataset${totalSelected > 1 ? "s" : ""}.`);
+
+            selectedItemIds.value = [];
+        } catch (e: any) {
+            Toast.error(`Failed to delete some datasets: ${e}`);
+        } finally {
+            overlay.value = false;
+            bulkDeleteOrRestoreLoading.value = false;
+
+            await load(true);
         }
     }
 }
 
-function onError(msg: string) {
-    message.value = msg;
+function getDatasetStatusIcon(item: HDASummary): RowIcon | undefined {
+    if (item.purged) {
+        return { icon: faBurn, class: "text-danger", title: "Purged" };
+    }
+    if (item.deleted) {
+        return { icon: faTrash, class: "text-muted", title: "Deleted" };
+    }
+    if (item.state === "ok") {
+        return { icon: faCheckCircle, class: "text-success", title: "Success" };
+    }
+    const state = item.state && STATES[item.state];
+    if (state?.icon) {
+        return {
+            icon: state.icon,
+            class: `text-${state.status}`,
+            title: state.displayName,
+            spin: state.spin,
+        };
+    }
+    return undefined;
 }
 
 onMounted(() => {
@@ -182,49 +257,136 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="overflow-auto h-100" @scroll="onScroll">
-        <BAlert v-if="message" :variant="messageVariant" show>
-            {{ message }}
-        </BAlert>
-
-        <DelayedInput class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
-
-        <BTable
-            id="dataset-table"
-            striped
-            no-sort-reset
-            no-local-sorting
-            :fields="fields"
-            :items="rows"
-            @sort-changed="onSort">
-            <template v-slot:cell(name)="row">
-                <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
-            </template>
-
-            <template v-slot:cell(history_id)="row">
-                <SwitchToHistoryLink
-                    :history-id="row.item.history_id"
-                    :filters="{ deleted: row.item.deleted, visible: row.item.visible, hid: row.item.hid }" />
-            </template>
-
-            <template v-slot:cell(tags)="row">
-                <StatelessTags
-                    :value="row.item.tags"
-                    :disabled="row.item.deleted"
-                    @input="(tags) => onTags(tags, row.index)" />
-            </template>
-
-            <template v-slot:cell(update_time)="data">
-                <UtcDate :date="data.value" mode="elapsed" />
-            </template>
-        </BTable>
-
-        <LoadingSpan v-if="loading" message="Loading datasets" />
-
-        <BAlert v-if="showNotFound" variant="info" show>
-            No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
-        </BAlert>
-
-        <BAlert v-if="showNotAvailable" variant="info" show> No datasets found. </BAlert>
+    <div class="dataset-list-container h-100 d-flex flex-column">
+        <BreadcrumbHeading :items="breadcrumbItems" />
+        <div class="dataset-list-header">
+            <DelayedInput class="m-2 mb-3" placeholder="Search Datasets" @change="onQuery" />
+
+            <ListHeader
+                list-id="datasets"
+                :select-all-disabled="loading || rows.length === 0"
+                :all-selected="allSelected"
+                :indeterminate-selected="indeterminateSelected"
+                :column-options="columnOptions"
+                :visible-columns="visibleColumns"
+                @select-all="onSelectAll"
+                @reset-columns="onResetColumns"
+                @toggle-column="onToggleColumn" />
+        </div>
+
+        <div v-if="loading" class="dataset-list-content">
+            <BAlert variant="info" show>
+                <LoadingSpan message="Loading datasets" />
+            </BAlert>
+        </div>
+        <div v-else-if="showNotAvailable" class="dataset-list-content">
+            <BAlert id="dataset-list-empty" variant="info" show>
+                No datasets found. You may upload new datasets using the button above.
+            </BAlert>
+        </div>
+        <div v-else-if="showNotFound" class="dataset-list-content">
+            <BAlert id="no-dataset-found" variant="info" show>
+                No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
+            </BAlert>
+        </div>
+        <div v-else class="dataset-list-content overflow-auto">
+            <GTable
+                id="dataset-table"
+                striped
+                selectable
+                show-select-all
+                no-sort-reset
+                no-local-sorting
+                :fields="fields"
+                :items="rows"
+                :sort-by="sortBy"
+                :sort-desc="sortDesc"
+                :overlay-loading="overlay"
+                :selected-items="selectedIndices"
+                :actions="datasetTableActions"
+                :status-icon="getDatasetStatusIcon"
+                @sort-changed="onSort"
+                @row-select="onRowSelect"
+                @select-all="onSelectAll">
+                <template v-slot:cell(name)="row">
+                    <span>{{ row.item.name }}</span>
+                </template>
+
+                <template v-slot:cell(history_id)="row">
+                    <SwitchToHistoryLink
+                        :history-id="row.item.history_id"
+                        :filters="{
+                            deleted: row.item.deleted,
+                            visible: row.item.visible,
+                            hid: String(row.item.hid),
+                        }" />
+                </template>
+
+                <template v-slot:cell(tags)="row">
+                    <StatelessTags
+                        :value="row.item.tags"
+                        :disabled="row.item.deleted"
+                        @input="(tags) => onTags(tags, row.index)" />
+                </template>
+
+                <template v-slot:cell(update_time)="data">
+                    <UtcDate :date="data.value" mode="elapsed" />
+                </template>
+            </GTable>
+        </div>
+
+        <div class="d-flex mt-1 align-items-center mt-2">
+            <div v-if="selectedItemIds.length > 0" class="d-flex gap-1 w-100 position-absolute">
+                <BButton
+                    v-b-tooltip.hover
+                    size="sm"
+                    variant="primary"
+                    :disabled="bulkDeleteOrRestoreLoading"
+                    :title="bulkDeleteOrRestoreLoading ? 'Deleting datasets' : 'Delete selected datasets'"
+                    @click="onBulkDelete">
+                    <FontAwesomeIcon :icon="faTrash" />
+                    {{ localize("Delete Selected") }} ({{ selectedItemIds.length }})
+                </BButton>
+            </div>
+
+            <BPagination
+                class="mx-0 my-auto w-100"
+                :value="currentPage"
+                :total-rows="totalDatasets"
+                :per-page="limit"
+                align="right"
+                size="sm"
+                first-number
+                last-number
+                @change="onPageChange" />
+        </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+.dataset-list-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.dataset-list-header {
+    flex-shrink: 0;
+}
+
+.dataset-list-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.dataset-list-footer {
+    flex-shrink: 0;
+    padding: 0.5rem 1rem;
+    background-color: #f8f9fa;
+    border-top: 1px solid #dee2e6;
+}
+
+.gap-1 {
+    gap: 0.25rem;
+}
+</style>
diff --git a/client/src/components/Dataset/DatasetName.test.ts b/client/src/components/Dataset/DatasetName.test.ts
deleted file mode 100644
index 1e83aaec2c6b..000000000000
--- a/client/src/components/Dataset/DatasetName.test.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { getLocalVue } from "@tests/vitest/helpers";
-import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-import DatasetName from "./DatasetName.vue";
-
-const localVue = getLocalVue();
-
-async function mountComponent(propsData: { item: { name: string; state: string } }) {
-    return shallowMount(DatasetName as object, {
-        propsData,
-        localVue,
-    });
-}
-
-describe("Dataset Name", () => {
-    it("test dataset default", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "success" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-        const $linkCopy = wrapper.find(".dropdown-item:first-child");
-        $linkCopy.trigger("click");
-
-        expect(Array.isArray(wrapper.emitted().copyDataset)).toBe(true);
-    });
-
-    it("test dataset error", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "error" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-
-        const errorstate = wrapper.findAll(".error");
-        expect(errorstate.length).toBe(1);
-        expect(errorstate.at(0).classes()).toEqual(expect.arrayContaining(["text-danger"]));
-    });
-
-    it("test dataset paused", async () => {
-        const wrapper = await mountComponent({ item: { name: "name", state: "paused" } });
-
-        const state = wrapper.findAll(".name");
-        expect(state.length).toBe(1);
-        expect(state.at(0).text()).toBe("name");
-
-        const pausestate = wrapper.findAll(".pause");
-        expect(pausestate.length).toBe(1);
-        expect(pausestate.at(0).classes()).toEqual(expect.arrayContaining(["text-info"]));
-    });
-});
diff --git a/client/src/components/Dataset/DatasetName.vue b/client/src/components/Dataset/DatasetName.vue
deleted file mode 100644
index 6fcfbbca3951..000000000000
--- a/client/src/components/Dataset/DatasetName.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { faCaretDown, faCopy, faPause, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BLink } from "bootstrap-vue";
-import { computed } from "vue";
-
-import type { HDASummary } from "@/api";
-
-interface Props {
-    item: HDASummary;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-    (e: "copyDataset", item: Props["item"]): void;
-    (e: "showDataset", item: Props["item"]): void;
-}>();
-
-const getName = computed(() => {
-    return props.item.name || "Unavailable";
-});
-const isError = computed(() => {
-    return props.item.state === "error";
-});
-const isPaused = computed(() => {
-    return props.item.state === "paused";
-});
-
-function copyDataset() {
-    emit("copyDataset", props.item);
-}
-</script>
-
-<template>
-    <div>
-        <BLink
-            id="dataset-dropdown"
-            class="workflow-dropdown p-2"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false">
-            <FontAwesomeIcon
-                v-if="isError"
-                v-b-tooltip.hover
-                :icon="faTimesCircle"
-                class="dataset-icon error text-danger"
-                title="An error occurred for this dataset." />
-            <FontAwesomeIcon
-                v-else-if="isPaused"
-                v-b-tooltip.hover
-                :icon="faPause"
-                class="dataset-icon pause text-info"
-                title="The creation of this dataset has been paused." />
-            <FontAwesomeIcon v-else :icon="faCaretDown" class="dataset-icon" />
-
-            <span class="name">{{ getName }}</span>
-        </BLink>
-
-        <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
-            <a class="dropdown-item" href="#" @click.prevent="copyDataset">
-                <FontAwesomeIcon :icon="faCopy" class="mr-1" />
-
-                <span>Copy to current History</span>
-            </a>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.dataset-icon {
-    position: relative;
-    margin-left: -1rem;
-}
-</style>
diff --git a/client/src/components/Dataset/useDatasetTableActions.ts b/client/src/components/Dataset/useDatasetTableActions.ts
new file mode 100644
index 000000000000..40395d151b77
--- /dev/null
+++ b/client/src/components/Dataset/useDatasetTableActions.ts
@@ -0,0 +1,115 @@
+import { faCopy, faEye, faFire, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { storeToRefs } from "pinia";
+
+import type { HDASummary } from "@/api";
+import { copyDataset, deleteDataset } from "@/api/datasets";
+import type { TableAction } from "@/components/Common/GTable.types";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { Toast } from "@/composables/toast";
+import { useHistoryStore } from "@/stores/historyStore";
+
+export function useDatasetTableActions(refreshList: () => Promise<void>) {
+    const historyStore = useHistoryStore();
+    const { currentHistoryId } = storeToRefs(historyStore);
+
+    const { confirm } = useConfirmDialog();
+
+    async function onShowDataset(item: HDASummary) {
+        const { history_id } = item;
+        const filters = {
+            deleted: item.deleted,
+            visible: item.visible,
+            hid: item.hid,
+        };
+
+        try {
+            await historyStore.applyFilters(history_id, filters);
+        } catch (error) {
+            Toast.error("Failed to show dataset in history");
+        }
+    }
+
+    async function onCopyDataset(item: HDASummary) {
+        const dataset_id = item.id;
+
+        try {
+            if (!currentHistoryId.value) {
+                throw new Error("No current history found.");
+            }
+
+            await copyDataset(dataset_id, currentHistoryId.value);
+
+            historyStore.loadCurrentHistory();
+            await refreshList();
+            Toast.success(`Dataset "${item.name}" copied to current history.`);
+        } catch (error) {
+            Toast.error("Failed to copy dataset");
+        }
+    }
+
+    async function confirmDeleteDataset(item: HDASummary, purge: boolean) {
+        const confirmed = await confirm(
+            `Are you sure you want to ${purge ? "purge" : "delete"} the dataset "${item.name}"?`,
+            {
+                title: purge ? "Purge Dataset" : "Delete Dataset",
+                okTitle: purge ? "Purge" : "Delete",
+                okVariant: "danger",
+            },
+        );
+
+        if (confirmed) {
+            try {
+                await deleteDataset(item.id, purge);
+
+                Toast.success(`Dataset "${item.name}" ${purge ? "purged" : "deleted"}.`);
+                historyStore.loadCurrentHistory();
+                await refreshList();
+            } catch (error) {
+                Toast.error(`Failed to ${purge ? "purge" : "delete"} dataset.`);
+            }
+        }
+    }
+
+    async function onDeleteDataset(item: HDASummary) {
+        confirmDeleteDataset(item, false);
+    }
+
+    async function onPurgeDataset(item: HDASummary) {
+        confirmDeleteDataset(item, true);
+    }
+
+    const datasetTableActions: TableAction[] = [
+        {
+            id: "copy-dataset",
+            label: "Copy to current history",
+            title: "Copy Dataset to current history",
+            icon: faCopy,
+            handler: onCopyDataset,
+        },
+        {
+            id: "show-dataset",
+            label: "Show in history",
+            title: "Show dataset in history panel",
+            icon: faEye,
+            handler: onShowDataset,
+        },
+        {
+            id: "delete-dataset",
+            label: "Delete",
+            title: "Delete dataset",
+            icon: faTrash,
+            handler: onDeleteDataset,
+        },
+        {
+            id: "purge-dataset",
+            label: "Purge",
+            title: "Purge dataset",
+            icon: faFire,
+            handler: onPurgeDataset,
+        },
+    ];
+
+    return {
+        datasetTableActions,
+    };
+}
diff --git a/client/src/components/History/SwitchToHistoryLink.test.ts b/client/src/components/History/SwitchToHistoryLink.test.ts
index e7b16cbaefa6..ea39c97cdea8 100644
--- a/client/src/components/History/SwitchToHistoryLink.test.ts
+++ b/client/src/components/History/SwitchToHistoryLink.test.ts
@@ -127,7 +127,11 @@ function mountSwitchToHistoryLinkForHistory(history: HistorySummaryExtended, has
  * @param setsFilters Whether filters are applied to the current history on click
  */
 async function expectActionForHistory(
-    tooltip: "Switch to this history" | "This is your current history" | "View in new tab" | "Show in history",
+    tooltip:
+        | "Switch to this history"
+        | "This is your current history"
+        | "View in new tab"
+        | "Switch to history and view dataset",
     history: HistorySummaryExtended,
     opensInNewTab = false,
     hasFilters = false,
@@ -192,7 +196,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("Switch to this history", history, false, false, true, false);
 
         // Since history was not current, we switch to it AND apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("only applies filters when the history is the Current history", async () => {
@@ -209,7 +213,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("This is your current history", history);
 
         // Since history is already current, we only apply filters
-        await expectActionForHistory("Show in history", history, false, true, false, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, false, true);
     });
 
     it("opens purged history in new tab or applies filters", async () => {
@@ -226,7 +230,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("View in new tab", history, true);
 
         // We switch to the purged history and apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("opens archived history in new tab or applies filters", async () => {
@@ -243,7 +247,7 @@ describe("SwitchToHistoryLink", () => {
         await expectActionForHistory("View in new tab", history, true);
 
         // We switch to the archived history and apply filters
-        await expectActionForHistory("Show in history", history, false, true, true, true);
+        await expectActionForHistory("Switch to history and view dataset", history, false, true, true, true);
     });
 
     it("only opens an accessible unowned history in new tab", async () => {
diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 223848e4226b..0c3f868e9d80 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -43,7 +43,7 @@ const canSwitch = computed(
 
 const linkTitle = computed(() => {
     if (props.filters && history.value && userOwnsHistory(userStore.currentUser, history.value)) {
-        return "Show in history";
+        return "Switch to history and view dataset";
     }
 
     if (historyStore.currentHistoryId === props.historyId) {
diff --git a/lib/galaxy_test/selenium/test_histories_list.py b/lib/galaxy_test/selenium/test_histories_list.py
index 338b5cc797c9..5839016deaf1 100644
--- a/lib/galaxy_test/selenium/test_histories_list.py
+++ b/lib/galaxy_test/selenium/test_histories_list.py
@@ -230,8 +230,8 @@ def test_sort_by_name(self):
         self._login()
         self.navigate_to_histories_page()
 
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         expected_histories = [self.history2_name, self.history3_name]
diff --git a/lib/galaxy_test/selenium/test_histories_published.py b/lib/galaxy_test/selenium/test_histories_published.py
index bf4915b9342d..ea486b1c180f 100644
--- a/lib/galaxy_test/selenium/test_histories_published.py
+++ b/lib/galaxy_test/selenium/test_histories_published.py
@@ -23,8 +23,8 @@ def test_published_histories_sort_by_name(self):
         self._login()
         self.navigate_to_published_histories()
 
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
-        self.wait_for_and_click_selector('[data-title="Sort by name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Name ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         sorted_histories = self.get_published_history_names_from_server(sort_by="name")
@@ -36,7 +36,7 @@ def test_published_histories_sort_by_last_update(self):
         self._login()
         self.navigate_to_published_histories()
 
-        self.wait_for_and_click_selector('[data-title="Sort by update time ascending"]')
+        self.wait_for_and_click_selector('[data-title="Sort by Update time ascending"]')
         self.sleep_for(self.wait_types.UX_RENDER)
 
         expected_history_names = self.get_published_history_names_from_server(sort_by="update_time")