From 69921ed54ea6d61864d1c00c7f783fed8e817562 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 13 Jan 2026 19:28:40 +0900
Subject: [PATCH] rewrite tables

---
 src/components/DataTable.vue                  | 206 ------
 .../GroupMemberModerationDialog.vue           | 619 +++++++-----------
 .../groupMemberModerationBansColumns.jsx      | 132 ++++
 .../groupMemberModerationBlockedColumns.jsx   | 109 +++
 .../groupMemberModerationInvitesColumns.jsx   | 109 +++
 ...oupMemberModerationJoinRequestsColumns.jsx | 109 +++
 .../groupMemberModerationLogsColumns.jsx      |  72 ++
 .../groupMemberModerationMembersColumns.jsx   | 132 ++++
 .../dialogs/InviteDialog/SendInviteDialog.vue |  64 +-
 .../InviteDialog/sendInviteColumns.jsx        |  54 ++
 .../UserDialog/SendInviteRequestDialog.vue    |  60 +-
 .../UserDialog/sendInviteRequestColumns.jsx   |  53 ++
 src/plugin/components.js                      |   2 -
 .../SendInviteRequestResponseDialog.vue       |  57 +-
 .../dialogs/SendInviteResponseDialog.vue      |  56 +-
 .../sendInviteRequestResponseColumns.jsx      |  53 ++
 .../dialogs/sendInviteResponseColumns.jsx     |  53 ++
 .../dialogs/EditInviteMessagesDialog.vue      | 162 ++---
 .../editInviteMessagesMessageColumns.jsx      |  30 +
 .../editInviteMessagesRequestColumns.jsx      |  30 +
 ...itInviteMessagesRequestResponseColumns.jsx |  30 +
 .../editInviteMessagesResponseColumns.jsx     |  30 +
 22 files changed, 1419 insertions(+), 803 deletions(-)
 delete mode 100644 src/components/DataTable.vue
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationLogsColumns.jsx
 create mode 100644 src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
 create mode 100644 src/components/dialogs/InviteDialog/sendInviteColumns.jsx
 create mode 100644 src/components/dialogs/UserDialog/sendInviteRequestColumns.jsx
 create mode 100644 src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx
 create mode 100644 src/views/Notifications/dialogs/sendInviteResponseColumns.jsx
 create mode 100644 src/views/Tools/dialogs/editInviteMessagesMessageColumns.jsx
 create mode 100644 src/views/Tools/dialogs/editInviteMessagesRequestColumns.jsx
 create mode 100644 src/views/Tools/dialogs/editInviteMessagesRequestResponseColumns.jsx
 create mode 100644 src/views/Tools/dialogs/editInviteMessagesResponseColumns.jsx

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
deleted file mode 100644
index 8c9f8cca..00000000
--- a/src/components/DataTable.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-    <div class="data-table-wrapper">
-        <el-table
-            v-loading="loading"
-            :data="paginatedData"
-            v-bind="mergedTableProps"
-            :stripe="false"
-            :default-sort="resolvedDefaultSort"
-            @row-click="handleRowClick"
-            @sort-change="handleSortChange">
-            <slot></slot>
-        </el-table>
-
-        <div v-if="showPagination" class="pagination-wrapper">
-            <el-pagination
-                size="small"
-                :current-page="internalCurrentPage"
-                :page-size="effectivePageSize"
-                :total="totalItems"
-                v-bind="mergedPaginationProps"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-    import { computed, ref, toRaw, toRefs, watch } from 'vue';
-
-    import { useAppearanceSettingsStore, useVrcxStore } from '../stores';
-
-    const props = defineProps({
-        data: {
-            type: Array,
-            default: () => []
-        },
-        tableProps: {
-            type: Object,
-            default: () => ({})
-        },
-        paginationProps: {
-            type: Object,
-            default: () => ({})
-        },
-        pageSize: {
-            type: Number,
-            default: 20
-        },
-        pageSizeLinked: {
-            type: Boolean,
-            default: false
-        },
-        filters: {
-            type: Array,
-            default: () => []
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        layout: {
-            type: String,
-            default: 'table, pagination'
-        }
-    });
-
-    const emit = defineEmits(['row-click', 'sort-change']);
-
-    const appearanceSettingsStore = useAppearanceSettingsStore();
-    const vrcxStore = useVrcxStore();
-
-    const { data, pageSize, tableProps, paginationProps, filters } = toRefs(props);
-
-    const internalCurrentPage = ref(1);
-    const internalPageSize = ref(pageSize.value);
-
-    const asRawArray = (value) => (Array.isArray(value) ? toRaw(value) : []);
-    const isEmptyFilterValue = (value) => (Array.isArray(value) ? value.length === 0 : !value);
-
-    const showPagination = computed(() => {
-        return props.layout.includes('pagination');
-    });
-
-    const effectivePageSize = computed(() => {
-        return props.pageSizeLinked ? appearanceSettingsStore.tablePageSize : internalPageSize.value;
-    });
-
-    const resolvedDefaultSort = computed(() => {
-        if (props.tableProps?.defaultSort === null) {
-            return undefined;
-        }
-        return (
-            props.tableProps?.defaultSort ?? {
-                prop: 'created_at',
-                order: 'descending'
-            }
-        );
-    });
-
-    const mergedTableProps = computed(() => {
-        const src = tableProps.value || {};
-        const rest = { ...src };
-        if ('defaultSort' in rest) {
-            delete rest.defaultSort;
-        }
-        return {
-            ...rest
-        };
-    });
-
-    const mergedPaginationProps = computed(() => ({
-        layout: 'sizes, prev, pager, next, total',
-        ...paginationProps.value,
-        pageSizes: paginationProps.value?.pageSizes ?? appearanceSettingsStore.tablePageSizes
-    }));
-
-    const applyFilter = function (row, filter) {
-        if (Array.isArray(filter.prop)) {
-            return filter.prop.some((propItem) => applyFilter(row, { prop: propItem, value: filter.value }));
-        }
-
-        const cellValue = row[filter.prop];
-        if (cellValue === undefined || cellValue === null) return false;
-
-        if (Array.isArray(filter.value)) {
-            return filter.value.some((val) => String(cellValue).toLowerCase() === String(val).toLowerCase());
-        } else {
-            return String(cellValue).toLowerCase().includes(String(filter.value).toLowerCase());
-        }
-    };
-
-    const filteredData = computed(() => {
-        const rawData = asRawArray(data.value);
-        const rawFilters = Array.isArray(filters.value) ? filters.value : [];
-        const activeFilters = rawFilters.filter((filter) => !isEmptyFilterValue(filter?.value));
-
-        if (activeFilters.length === 0) {
-            return rawData;
-        }
-
-        return rawData.filter((row) => {
-            for (const filter of activeFilters) {
-                if (filter.filterFn) {
-                    if (!filter.filterFn(row, filter)) return false;
-                    continue;
-                }
-                if (!applyFilter(row, filter)) return false;
-            }
-            return true;
-        });
-    });
-
-    const paginatedData = computed(() => {
-        if (!showPagination.value) {
-            return filteredData.value;
-        }
-
-        const start = (internalCurrentPage.value - 1) * effectivePageSize.value;
-        const end = start + effectivePageSize.value;
-        return filteredData.value.slice(start, end);
-    });
-
-    const totalItems = computed(() => {
-        const length = filteredData.value.length;
-        const max = vrcxStore.maxTableSize;
-        return length > max && length < max + 51 ? max : length;
-    });
-
-    const handleRowClick = (row, column, event) => {
-        emit('row-click', row, column, event);
-    };
-
-    const handleSortChange = (data) => {
-        emit('sort-change', data);
-    };
-
-    const handleSizeChange = (size) => {
-        if (props.pageSizeLinked) {
-            appearanceSettingsStore.setTablePageSize(size);
-            return;
-        }
-        internalPageSize.value = size;
-    };
-
-    const handleCurrentChange = (page) => {
-        internalCurrentPage.value = page;
-    };
-
-    watch(pageSize, (newVal) => {
-        internalPageSize.value = newVal;
-    });
-</script>
-
-<style scoped>
-    .data-table-wrapper {
-        font-feature-settings:
-            'tnum' 1,
-            'lnum' 1;
-    }
-
-    .pagination-wrapper {
-        margin-top: 16px;
-        display: flex;
-        justify-content: space-around;
-    }
-</style>
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 6074dca5..13f3025f 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -117,94 +117,13 @@
                         <Button size="sm" variant="outline" @click="selectAllGroupMembers">{{
                             t('dialog.group_member_moderation.select_all')
                         }}</Button>
-                        <DataTable
+                        <DataTableLayout
                             v-if="groupMemberModerationTable.data.length"
-                            v-bind="groupMemberModerationTable"
-                            style="margin-top: 10px">
-                            <el-table-column width="55" prop="$selected">
-                                <template #default="scope">
-                                    <Checkbox
-                                        v-model="scope.row.$selected"
-                                        @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.avatar')"
-                                width="70"
-                                prop="photo">
-                                <template #default="scope">
-                                    <el-popover placement="right" :width="500" trigger="hover">
-                                        <template #reference>
-                                            <img
-                                                :src="userImage(scope.row.user)"
-                                                class="friends-list-avatar"
-                                                loading="lazy" />
-                                        </template>
-                                        <img
-                                            :src="userImageFull(scope.row.user)"
-                                            :class="['friends-list-avatar', 'x-popover-image']"
-                                            style="cursor: pointer"
-                                            @click="showFullscreenImageDialog(userImageFull(scope.row.user))"
-                                            loading="lazy" />
-                                    </el-popover>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.display_name')"
-                                width="160"
-                                prop="$displayName"
-                                sortable>
-                                <template #default="scope">
-                                    <span style="cursor: pointer" @click="showUserDialog(scope.row.userId)">
-                                        <span
-                                            v-if="randomUserColours"
-                                            :style="{ color: scope.row.user.$userColour }"
-                                            v-text="scope.row.user.displayName"></span>
-                                        <span v-else v-text="scope.row.user?.displayName"></span>
-                                    </span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column :label="t('dialog.group_member_moderation.roles')" prop="roleIds" sortable>
-                                <template #default="scope">
-                                    <template v-for="(roleId, index) in scope.row.roleIds" :key="roleId">
-                                        <template
-                                            v-for="(role, rIndex) in groupMemberModeration.groupRef.roles"
-                                            :key="roleId + rIndex">
-                                            <span v-if="role?.id === roleId"
-                                                >{{ role.name
-                                                }}<span v-if="index < scope.row.roleIds.length - 1">, </span></span
-                                            ></template
-                                        >
-                                    </template>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.notes')"
-                                prop="managerNotes"
-                                sortable>
-                                <template #default="scope">
-                                    <span @click.stop v-text="scope.row.managerNotes"></span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.joined_at')"
-                                width="170"
-                                prop="joinedAt"
-                                sortable>
-                                <template #default="scope">
-                                    <span>{{ formatDateFilter(scope.row.joinedAt, 'long') }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.visibility')"
-                                width="120"
-                                prop="visibility"
-                                sortable>
-                                <template #default="scope">
-                                    <span v-text="scope.row.visibility"></span>
-                                </template>
-                            </el-table-column>
-                        </DataTable>
+                            style="margin-top: 10px"
+                            :table="groupMemberModerationTanstackTable"
+                            :loading="isGroupMembersLoading"
+                            :page-sizes="pageSizes"
+                            :total-items="groupMemberModerationTotalItems" />
                     </div>
                 </el-tab-pane>
 
@@ -235,90 +154,12 @@
                         <Button size="sm" variant="outline" @click="selectAllGroupBans">{{
                             t('dialog.group_member_moderation.select_all')
                         }}</Button>
-                        <DataTable v-bind="groupBansModerationTable" style="margin-top: 10px">
-                            <el-table-column width="55" prop="$selected">
-                                <template #default="scope">
-                                    <Checkbox
-                                        v-model="scope.row.$selected"
-                                        @update:modelValue="groupMemberModerationTableSelectionChange(scope.row)" />
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.avatar')"
-                                width="70"
-                                prop="photo">
-                                <template #default="scope">
-                                    <el-popover placement="right" :width="500" trigger="hover">
-                                        <template #reference>
-                                            <img
-                                                :src="userImage(scope.row.user)"
-                                                class="friends-list-avatar"
-                                                loading="lazy" />
-                                        </template>
-                                        <img
-                                            :src="userImageFull(scope.row.user)"
-                                            :class="['friends-list-avatar', 'x-popover-image']"
-                                            style="cursor: pointer"
-                                            @click="showFullscreenImageDialog(userImageFull(scope.row.user))"
-                                            loading="lazy" />
-                                    </el-popover>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.display_name')"
-                                width="160"
-                                prop="$displayName"
-                                sortable>
-                                <template #default="scope">
-                                    <span style="cursor: pointer" @click="showUserDialog(scope.row.userId)">
-                                        <span
-                                            v-if="randomUserColours"
-                                            :style="{ color: scope.row.user?.$userColour }"
-                                            v-text="scope.row.user?.displayName"></span>
-                                        <span v-else v-text="scope.row.user?.displayName"></span>
-                                    </span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column :label="t('dialog.group_member_moderation.roles')" prop="roleIds" sortable>
-                                <template #default="scope">
-                                    <template v-for="(roleId, index) in scope.row.roleIds" :key="roleId">
-                                        <span
-                                            v-for="(role, rIndex) in groupMemberModeration.groupRef.roles"
-                                            v-if="role.id === roleId"
-                                            :key="rIndex + roleId"
-                                            >{{ role.name }}</span
-                                        >
-                                        <span v-if="index < scope.row.roleIds.length - 1">, </span>
-                                    </template>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.notes')"
-                                prop="managerNotes"
-                                sortable>
-                                <template #default="scope">
-                                    <span @click.stop v-text="scope.row.managerNotes"></span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.joined_at')"
-                                width="170"
-                                prop="joinedAt"
-                                sortable>
-                                <template #default="scope">
-                                    <span>{{ formatDateFilter(scope.row.joinedAt, 'long') }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.banned_at')"
-                                width="170"
-                                prop="bannedAt"
-                                sortable>
-                                <template #default="scope">
-                                    <span>{{ formatDateFilter(scope.row.bannedAt, 'long') }}</span>
-                                </template>
-                            </el-table-column>
-                        </DataTable>
+                        <DataTableLayout
+                            style="margin-top: 10px"
+                            :table="groupBansModerationTanstackTable"
+                            :loading="isGroupMembersLoading"
+                            :page-sizes="pageSizes"
+                            :total-items="groupBansModerationTotalItems" />
                     </div>
                 </el-tab-pane>
 
@@ -349,61 +190,12 @@
                                 <Button size="sm" variant="outline" @click="selectAllGroupInvites">{{
                                     t('dialog.group_member_moderation.select_all')
                                 }}</Button>
-                                <DataTable v-bind="groupInvitesModerationTable" style="margin-top: 10px">
-                                    <el-table-column width="55" prop="$selected">
-                                        <template #default="scope">
-                                            <Checkbox
-                                                v-model="scope.row.$selected"
-                                                @update:modelValue="
-                                                    groupMemberModerationTableSelectionChange(scope.row)
-                                                " />
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.avatar')"
-                                        width="70"
-                                        prop="photo">
-                                        <template #default="scope">
-                                            <el-popover placement="right" :width="500" trigger="hover">
-                                                <template #reference>
-                                                    <img
-                                                        :src="userImage(scope.row.user)"
-                                                        class="friends-list-avatar"
-                                                        loading="lazy" />
-                                                </template>
-                                                <img
-                                                    :src="userImageFull(scope.row.user)"
-                                                    :class="['friends-list-avatar', 'x-popover-image']"
-                                                    style="cursor: pointer"
-                                                    @click="showFullscreenImageDialog(userImageFull(scope.row.user))"
-                                                    loading="lazy" />
-                                            </el-popover>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.display_name')"
-                                        width="160"
-                                        prop="$displayName"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span style="cursor: pointer" @click="showUserDialog(scope.row.userId)">
-                                                <span
-                                                    v-if="randomUserColours"
-                                                    :style="{ color: scope.row.user.$userColour }"
-                                                    v-text="scope.row.user.displayName"></span>
-                                                <span v-else v-text="scope.row.user?.displayName"></span>
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.notes')"
-                                        prop="managerNotes"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span @click.stop v-text="scope.row.managerNotes"></span>
-                                        </template>
-                                    </el-table-column>
-                                </DataTable>
+                                <DataTableLayout
+                                    style="margin-top: 10px"
+                                    :table="groupInvitesModerationTanstackTable"
+                                    :loading="isGroupMembersLoading"
+                                    :page-sizes="pageSizes"
+                                    :total-items="groupInvitesModerationTotalItems" />
                                 <br />
                                 <Button
                                     variant="outline"
@@ -430,61 +222,12 @@
                                 <Button size="sm" variant="outline" @click="selectAllGroupJoinRequests">{{
                                     t('dialog.group_member_moderation.select_all')
                                 }}</Button>
-                                <DataTable v-bind="groupJoinRequestsModerationTable" style="margin-top: 10px">
-                                    <el-table-column width="55" prop="$selected">
-                                        <template #default="scope">
-                                            <Checkbox
-                                                v-model="scope.row.$selected"
-                                                @update:modelValue="
-                                                    groupMemberModerationTableSelectionChange(scope.row)
-                                                " />
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.avatar')"
-                                        width="70"
-                                        prop="photo">
-                                        <template #default="scope">
-                                            <el-popover placement="right" :width="500" trigger="hover">
-                                                <template #reference>
-                                                    <img
-                                                        :src="userImage(scope.row.user)"
-                                                        class="friends-list-avatar"
-                                                        loading="lazy" />
-                                                </template>
-                                                <img
-                                                    :src="userImageFull(scope.row.user)"
-                                                    :class="['friends-list-avatar', 'x-popover-image']"
-                                                    style="cursor: pointer"
-                                                    @click="showFullscreenImageDialog(userImageFull(scope.row.user))"
-                                                    loading="lazy" />
-                                            </el-popover>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.display_name')"
-                                        width="160"
-                                        prop="$displayName"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span style="cursor: pointer" @click="showUserDialog(scope.row.userId)">
-                                                <span
-                                                    v-if="randomUserColours"
-                                                    :style="{ color: scope.row.user.$userColour }"
-                                                    v-text="scope.row.user.displayName"></span>
-                                                <span v-else v-text="scope.row.user?.displayName"></span>
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.notes')"
-                                        prop="managerNotes"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span @click.stop v-text="scope.row.managerNotes"></span>
-                                        </template>
-                                    </el-table-column>
-                                </DataTable>
+                                <DataTableLayout
+                                    style="margin-top: 10px"
+                                    :table="groupJoinRequestsModerationTanstackTable"
+                                    :loading="isGroupMembersLoading"
+                                    :page-sizes="pageSizes"
+                                    :total-items="groupJoinRequestsModerationTotalItems" />
                                 <br />
                                 <Button
                                     variant="outline"
@@ -533,61 +276,12 @@
                                 <Button size="sm" variant="outline" @click="selectAllGroupBlocked">{{
                                     t('dialog.group_member_moderation.select_all')
                                 }}</Button>
-                                <DataTable v-bind="groupBlockedModerationTable" style="margin-top: 10px">
-                                    <el-table-column width="55" prop="$selected">
-                                        <template #default="scope">
-                                            <Checkbox
-                                                v-model="scope.row.$selected"
-                                                @update:modelValue="
-                                                    groupMemberModerationTableSelectionChange(scope.row)
-                                                " />
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.avatar')"
-                                        width="70"
-                                        prop="photo">
-                                        <template #default="scope">
-                                            <el-popover placement="right" :width="500" trigger="hover">
-                                                <template #reference>
-                                                    <img
-                                                        :src="userImage(scope.row.user)"
-                                                        class="friends-list-avatar"
-                                                        loading="lazy" />
-                                                </template>
-                                                <img
-                                                    :src="userImageFull(scope.row.user)"
-                                                    :class="['friends-list-avatar', 'x-popover-image']"
-                                                    style="cursor: pointer"
-                                                    @click="showFullscreenImageDialog(userImageFull(scope.row.user))"
-                                                    loading="lazy" />
-                                            </el-popover>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.display_name')"
-                                        width="160"
-                                        prop="$displayName"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span style="cursor: pointer" @click="showUserDialog(scope.row.userId)">
-                                                <span
-                                                    v-if="randomUserColours"
-                                                    :style="{ color: scope.row.user.$userColour }"
-                                                    v-text="scope.row.user.displayName"></span>
-                                                <span v-else v-text="scope.row.user?.displayName"></span>
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column
-                                        :label="t('dialog.group_member_moderation.notes')"
-                                        prop="managerNotes"
-                                        sortable>
-                                        <template #default="scope">
-                                            <span @click.stop v-text="scope.row.managerNotes"></span>
-                                        </template>
-                                    </el-table-column>
-                                </DataTable>
+                                <DataTableLayout
+                                    style="margin-top: 10px"
+                                    :table="groupBlockedModerationTanstackTable"
+                                    :loading="isGroupMembersLoading"
+                                    :page-sizes="pageSizes"
+                                    :total-items="groupBlockedModerationTotalItems" />
                                 <br />
                                 <Button
                                     variant="secondary"
@@ -651,55 +345,12 @@
                             :placeholder="t('dialog.group.members.search')"
                             style="margin-top: 10px; margin-bottom: 10px" />
                         <br />
-                        <DataTable v-bind="groupLogsModerationTable" style="margin-top: 10px">
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.created_at')"
-                                width="170"
-                                prop="created_at"
-                                sortable>
-                                <template #default="scope">
-                                    <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.type')"
-                                width="190"
-                                prop="eventType"
-                                sortable>
-                                <template #default="scope">
-                                    <span v-text="scope.row.eventType"></span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.display_name')"
-                                width="160"
-                                prop="actorDisplayName"
-                                sortable>
-                                <template #default="scope">
-                                    <span style="cursor: pointer" @click="showUserDialog(scope.row.actorId)">
-                                        <span v-text="scope.row.actorDisplayName"></span>
-                                    </span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                :label="t('dialog.group_member_moderation.description')"
-                                prop="description">
-                                <template #default="scope">
-                                    <Location
-                                        v-if="scope.row?.targetId.startsWith('wrld_')"
-                                        :location="scope.row.targetId" />
-                                    <span v-text="scope.row.description"></span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column :label="t('dialog.group_member_moderation.data')" prop="data">
-                                <template #default="scope">
-                                    <span v-if="Object.keys(scope.row.data).length">{{
-                                        JSON.stringify(scope.row.data)
-                                    }}</span>
-                                    <span v-else></span>
-                                </template>
-                            </el-table-column>
-                        </DataTable>
+                        <DataTableLayout
+                            style="margin-top: 10px"
+                            :table="groupLogsModerationTanstackTable"
+                            :loading="isGroupMembersLoading"
+                            :page-sizes="pageSizes"
+                            :total-items="groupLogsModerationTotalItems" />
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -878,7 +529,7 @@
 
 <script setup>
     import { ArrowDown, Loading, Refresh, Warning } from '@element-plus/icons-vue';
-    import { reactive, ref, watch } from 'vue';
+    import { computed, reactive, ref, watch } from 'vue';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
     import { Spinner } from '@/components/ui/spinner';
@@ -894,13 +545,21 @@
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { groupRequest, userRequest } from '../../../api';
     import { Badge } from '../../ui/badge';
-    import { Checkbox } from '../../ui/checkbox';
+    import { DataTableLayout } from '../../ui/data-table';
+    import { createColumns as createMembersColumns } from './groupMemberModerationMembersColumns.jsx';
+    import { createColumns as createBansColumns } from './groupMemberModerationBansColumns.jsx';
+    import { createColumns as createInvitesColumns } from './groupMemberModerationInvitesColumns.jsx';
+    import { createColumns as createJoinRequestsColumns } from './groupMemberModerationJoinRequestsColumns.jsx';
+    import { createColumns as createBlockedColumns } from './groupMemberModerationBlockedColumns.jsx';
+    import { createColumns as createLogsColumns } from './groupMemberModerationLogsColumns.jsx';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
 
     import * as workerTimers from 'worker-timers';
 
-    const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
+    const appearanceSettingsStore = useAppearanceSettingsStore();
+    const { randomUserColours } = storeToRefs(appearanceSettingsStore);
     const { showUserDialog } = useUserStore();
     const { currentUser } = storeToRefs(useUserStore());
     const { groupDialog, groupMemberModeration } = storeToRefs(useGroupStore());
@@ -923,6 +582,8 @@
     const members = ref([]);
     const memberSearch = ref('');
 
+    const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
+
     let loadMoreGroupMembersParams = ref({
         n: 100,
         offset: 0,
@@ -1014,6 +675,188 @@
         }
     });
 
+    const rolesText = (roleIds) => {
+        const ids = Array.isArray(roleIds) ? roleIds : [];
+        const roles = groupMemberModeration.value?.groupRef?.roles ?? [];
+        const names = [];
+        for (const id of ids) {
+            const role = roles.find((r) => r?.id === id);
+            if (role?.name) {
+                names.push(role.name);
+            }
+        }
+        return names.join(', ');
+    };
+
+    const groupMemberModerationColumns = computed(() =>
+        createMembersColumns({
+            randomUserColours,
+            rolesText,
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onSelectionChange: groupMemberModerationTableSelectionChange
+        })
+    );
+
+    const { table: groupMemberModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:members',
+        data: computed(() => groupMemberModerationTable.data ?? []),
+        columns: groupMemberModerationColumns,
+        getRowId: (row) => String(row?.userId ?? ''),
+        initialPagination: { pageIndex: 0, pageSize: groupMemberModerationTable.pageSize ?? 15 }
+    });
+
+    const groupMemberModerationTotalItems = computed(
+        () => groupMemberModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
+    const bansSearch = computed(() =>
+        String(groupBansModerationTable.filters?.[0]?.value ?? '')
+            .trim()
+            .toLowerCase()
+    );
+    const groupBansFilteredRows = computed(() => {
+        const rows = Array.isArray(groupBansModerationTable.data) ? groupBansModerationTable.data : [];
+        const q = bansSearch.value;
+        if (!q) {
+            return rows;
+        }
+        return rows.filter((r) => {
+            const name = (r?.$displayName ?? r?.user?.displayName ?? '').toString().toLowerCase();
+            return name.includes(q);
+        });
+    });
+
+    const groupBansModerationColumns = computed(() =>
+        createBansColumns({
+            randomUserColours,
+            rolesText,
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onSelectionChange: groupMemberModerationTableSelectionChange
+        })
+    );
+
+    const { table: groupBansModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:bans',
+        data: groupBansFilteredRows,
+        columns: groupBansModerationColumns,
+        getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
+        initialPagination: { pageIndex: 0, pageSize: groupBansModerationTable.pageSize ?? 15 }
+    });
+
+    const groupBansModerationTotalItems = computed(
+        () => groupBansModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
+    const groupInvitesModerationColumns = computed(() =>
+        createInvitesColumns({
+            randomUserColours,
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onSelectionChange: groupMemberModerationTableSelectionChange
+        })
+    );
+
+    const { table: groupInvitesModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:invites',
+        data: computed(() => groupInvitesModerationTable.data ?? []),
+        columns: groupInvitesModerationColumns,
+        getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
+        initialPagination: { pageIndex: 0, pageSize: groupInvitesModerationTable.pageSize ?? 15 }
+    });
+
+    const groupInvitesModerationTotalItems = computed(
+        () => groupInvitesModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
+    const groupJoinRequestsModerationColumns = computed(() =>
+        createJoinRequestsColumns({
+            randomUserColours,
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onSelectionChange: groupMemberModerationTableSelectionChange
+        })
+    );
+
+    const { table: groupJoinRequestsModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:join-requests',
+        data: computed(() => groupJoinRequestsModerationTable.data ?? []),
+        columns: groupJoinRequestsModerationColumns,
+        getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
+        initialPagination: { pageIndex: 0, pageSize: groupJoinRequestsModerationTable.pageSize ?? 15 }
+    });
+
+    const groupJoinRequestsModerationTotalItems = computed(
+        () => groupJoinRequestsModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
+    const groupBlockedModerationColumns = computed(() =>
+        createBlockedColumns({
+            randomUserColours,
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onSelectionChange: groupMemberModerationTableSelectionChange
+        })
+    );
+
+    const { table: groupBlockedModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:blocked',
+        data: computed(() => groupBlockedModerationTable.data ?? []),
+        columns: groupBlockedModerationColumns,
+        getRowId: (row) => String(row?.userId ?? row?.id ?? ''),
+        initialPagination: { pageIndex: 0, pageSize: groupBlockedModerationTable.pageSize ?? 15 }
+    });
+
+    const groupBlockedModerationTotalItems = computed(
+        () => groupBlockedModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
+    const logsSearch = computed(() =>
+        String(groupLogsModerationTable.filters?.[0]?.value ?? '')
+            .trim()
+            .toLowerCase()
+    );
+    const groupLogsFilteredRows = computed(() => {
+        const rows = Array.isArray(groupLogsModerationTable.data) ? groupLogsModerationTable.data : [];
+        const q = logsSearch.value;
+        if (!q) {
+            return rows;
+        }
+        return rows.filter((r) => {
+            const desc = (r?.description ?? '').toString().toLowerCase();
+            return desc.includes(q);
+        });
+    });
+
+    const groupLogsModerationColumns = computed(() =>
+        createLogsColumns({
+            onShowUser: showUserDialog
+        })
+    );
+
+    const { table: groupLogsModerationTanstackTable } = useVrcxVueTable({
+        persistKey: 'group-moderation:logs',
+        data: groupLogsFilteredRows,
+        columns: groupLogsModerationColumns,
+        getRowId: (row) => String(row?.id ?? `${row?.created_at ?? ''}:${row?.eventType ?? ''}`),
+        initialPagination: { pageIndex: 0, pageSize: groupLogsModerationTable.pageSize ?? 15 }
+    });
+
+    const groupLogsModerationTotalItems = computed(
+        () => groupLogsModerationTanstackTable.getFilteredRowModel().rows.length
+    );
+
     function deselectGroupMember(userId) {
         const deselectInTable = (tableData) => {
             if (userId) {
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
new file mode 100644
index 00000000..a0e6a3d7
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
@@ -0,0 +1,132 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { i18n } from '@/plugin';
+import { formatDateFilter } from '@/shared/utils';
+
+const { t } = i18n.global;
+
+export const createColumns = ({
+    randomUserColours,
+    rolesText,
+    userImage,
+    userImageFull,
+    onShowFullscreenImage,
+    onShowUser,
+    onSelectionChange
+}) => [
+    {
+        id: 'selected',
+        header: () => null,
+        size: 55,
+        enableSorting: false,
+        enableResizing: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <div
+                    class="flex items-center justify-center"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        modelValue={!!original?.$selected}
+                        onUpdate:modelValue={(value) => {
+                            original.$selected = value;
+                            onSelectionChange?.(original);
+                        }}
+                    />
+                </div>
+            );
+        }
+    },
+    {
+        id: 'avatar',
+        header: () => t('dialog.group_member_moderation.avatar'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original?.user);
+            const full = userImageFull?.(original?.user);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.user?.displayName ?? row?.$displayName ?? '',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            const useColors = !!(randomUserColours?.value ?? randomUserColours);
+            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.userId);
+                    }}
+                >
+                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        id: 'roles',
+        accessorFn: (row) => rolesText?.(row?.roleIds) ?? '',
+        header: () => t('dialog.group_member_moderation.roles'),
+        cell: ({ row }) => {
+            const original = row.original;
+            return <span>{rolesText?.(original?.roleIds) ?? ''}</span>;
+        }
+    },
+    {
+        accessorKey: 'managerNotes',
+        header: () => t('dialog.group_member_moderation.notes'),
+        cell: ({ row }) => (
+            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+        )
+    },
+    {
+        accessorKey: 'joinedAt',
+        header: () => t('dialog.group_member_moderation.joined_at'),
+        size: 170,
+        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+    },
+    {
+        accessorKey: 'bannedAt',
+        header: () => t('dialog.group_member_moderation.banned_at'),
+        size: 170,
+        cell: ({ row }) => <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+    }
+];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
new file mode 100644
index 00000000..c9d18b80
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
@@ -0,0 +1,109 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({
+    randomUserColours,
+    userImage,
+    userImageFull,
+    onShowFullscreenImage,
+    onShowUser,
+    onSelectionChange
+}) => [
+    {
+        id: 'selected',
+        header: () => null,
+        size: 55,
+        enableSorting: false,
+        enableResizing: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <div
+                    class="flex items-center justify-center"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        modelValue={!!original?.$selected}
+                        onUpdate:modelValue={(value) => {
+                            original.$selected = value;
+                            onSelectionChange?.(original);
+                        }}
+                    />
+                </div>
+            );
+        }
+    },
+    {
+        id: 'avatar',
+        header: () => t('dialog.group_member_moderation.avatar'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original?.user);
+            const full = userImageFull?.(original?.user);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.user?.displayName ?? row?.$displayName ?? '',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            const useColors = !!(randomUserColours?.value ?? randomUserColours);
+            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.userId);
+                    }}
+                >
+                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        accessorKey: 'managerNotes',
+        header: () => t('dialog.group_member_moderation.notes'),
+        cell: ({ row }) => (
+            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+        )
+    }
+];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
new file mode 100644
index 00000000..c9d18b80
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
@@ -0,0 +1,109 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({
+    randomUserColours,
+    userImage,
+    userImageFull,
+    onShowFullscreenImage,
+    onShowUser,
+    onSelectionChange
+}) => [
+    {
+        id: 'selected',
+        header: () => null,
+        size: 55,
+        enableSorting: false,
+        enableResizing: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <div
+                    class="flex items-center justify-center"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        modelValue={!!original?.$selected}
+                        onUpdate:modelValue={(value) => {
+                            original.$selected = value;
+                            onSelectionChange?.(original);
+                        }}
+                    />
+                </div>
+            );
+        }
+    },
+    {
+        id: 'avatar',
+        header: () => t('dialog.group_member_moderation.avatar'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original?.user);
+            const full = userImageFull?.(original?.user);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.user?.displayName ?? row?.$displayName ?? '',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            const useColors = !!(randomUserColours?.value ?? randomUserColours);
+            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.userId);
+                    }}
+                >
+                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        accessorKey: 'managerNotes',
+        header: () => t('dialog.group_member_moderation.notes'),
+        cell: ({ row }) => (
+            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+        )
+    }
+];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
new file mode 100644
index 00000000..c9d18b80
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
@@ -0,0 +1,109 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({
+    randomUserColours,
+    userImage,
+    userImageFull,
+    onShowFullscreenImage,
+    onShowUser,
+    onSelectionChange
+}) => [
+    {
+        id: 'selected',
+        header: () => null,
+        size: 55,
+        enableSorting: false,
+        enableResizing: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <div
+                    class="flex items-center justify-center"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        modelValue={!!original?.$selected}
+                        onUpdate:modelValue={(value) => {
+                            original.$selected = value;
+                            onSelectionChange?.(original);
+                        }}
+                    />
+                </div>
+            );
+        }
+    },
+    {
+        id: 'avatar',
+        header: () => t('dialog.group_member_moderation.avatar'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original?.user);
+            const full = userImageFull?.(original?.user);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.user?.displayName ?? row?.$displayName ?? '',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            const useColors = !!(randomUserColours?.value ?? randomUserColours);
+            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.userId);
+                    }}
+                >
+                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        accessorKey: 'managerNotes',
+        header: () => t('dialog.group_member_moderation.notes'),
+        cell: ({ row }) => (
+            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+        )
+    }
+];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationLogsColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationLogsColumns.jsx
new file mode 100644
index 00000000..25b6aa90
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationLogsColumns.jsx
@@ -0,0 +1,72 @@
+import Location from '@/components/Location.vue';
+import { i18n } from '@/plugin';
+import { formatDateFilter } from '@/shared/utils';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onShowUser }) => [
+    {
+        accessorKey: 'created_at',
+        header: () => t('dialog.group_member_moderation.created_at'),
+        size: 170,
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.created_at, 'long')}</span>
+        )
+    },
+    {
+        accessorKey: 'eventType',
+        header: () => t('dialog.group_member_moderation.type'),
+        size: 190,
+        cell: ({ row }) => <span>{row.original?.eventType}</span>
+    },
+    {
+        accessorKey: 'actorDisplayName',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.actorId);
+                    }}
+                >
+                    <span>{original?.actorDisplayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        id: 'description',
+        accessorFn: (row) => row?.description ?? '',
+        header: () => t('dialog.group_member_moderation.description'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            const targetId = original?.targetId ?? '';
+            return (
+                <span>
+                    {typeof targetId === 'string' && targetId.startsWith('wrld_') ? (
+                        <Location location={targetId} />
+                    ) : null}
+                    <span>{original?.description}</span>
+                </span>
+            );
+        }
+    },
+    {
+        id: 'data',
+        header: () => t('dialog.group_member_moderation.data'),
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const data = original?.data;
+            const hasData = data && typeof data === 'object' && Object.keys(data).length;
+            return <span>{hasData ? JSON.stringify(data) : ''}</span>;
+        }
+    }
+];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
new file mode 100644
index 00000000..cc534286
--- /dev/null
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
@@ -0,0 +1,132 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { i18n } from '@/plugin';
+import { formatDateFilter } from '@/shared/utils';
+
+const { t } = i18n.global;
+
+export const createColumns = ({
+    randomUserColours,
+    rolesText,
+    userImage,
+    userImageFull,
+    onShowFullscreenImage,
+    onShowUser,
+    onSelectionChange
+}) => [
+    {
+        id: 'selected',
+        header: () => null,
+        size: 55,
+        enableSorting: false,
+        enableResizing: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <div
+                    class="flex items-center justify-center"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        modelValue={!!original?.$selected}
+                        onUpdate:modelValue={(value) => {
+                            original.$selected = value;
+                            onSelectionChange?.(original);
+                        }}
+                    />
+                </div>
+            );
+        }
+    },
+    {
+        id: 'avatar',
+        header: () => t('dialog.group_member_moderation.avatar'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original?.user);
+            const full = userImageFull?.(original?.user);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'displayName',
+        accessorFn: (row) => row?.user?.displayName ?? '',
+        header: () => t('dialog.group_member_moderation.display_name'),
+        size: 160,
+        cell: ({ row }) => {
+            const original = row.original;
+            const useColors = !!(randomUserColours?.value ?? randomUserColours);
+            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+
+            return (
+                <span
+                    style="cursor: pointer"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.userId);
+                    }}
+                >
+                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                </span>
+            );
+        }
+    },
+    {
+        id: 'roles',
+        accessorFn: (row) => rolesText?.(row?.roleIds) ?? '',
+        header: () => t('dialog.group_member_moderation.roles'),
+        cell: ({ row }) => {
+            const original = row.original;
+            return <span>{rolesText?.(original?.roleIds) ?? ''}</span>;
+        }
+    },
+    {
+        accessorKey: 'managerNotes',
+        header: () => t('dialog.group_member_moderation.notes'),
+        cell: ({ row }) => (
+            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+        )
+    },
+    {
+        accessorKey: 'joinedAt',
+        header: () => t('dialog.group_member_moderation.joined_at'),
+        size: 170,
+        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+    },
+    {
+        accessorKey: 'visibility',
+        header: () => t('dialog.group_member_moderation.visibility'),
+        size: 120,
+        cell: ({ row }) => <span>{row.original?.visibility}</span>
+    }
+];
diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
index 47863493..9887a16e 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -35,38 +35,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteConfirmDialog">
-            <el-table-column
-                :label="t('table.profile.invite_messages.slot')"
-                prop="slot"
-                :sortable="true"
-                width="70"></el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message"></el-table-column>
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button
-                        size="icon-sm"
-                        class="w-6 h-6"
-                        variant="ghost"
-                        @click.stop="showEditAndSendInviteDialog(scope.row)">
-                        <SquarePen />
-                    </Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteMessageTanstackTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteMessageRowClick" />
 
         <template #footer>
             <Button variant="secondary" @click="cancelSendInvite">
@@ -92,13 +66,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteColumns.jsx';
 
     import EditAndSendInviteDialog from './EditAndSendInviteDialog.vue';
     import SendInviteConfirmDialog from './SendInviteConfirmDialog.vue';
@@ -135,6 +111,26 @@
         newMessage: ''
     });
 
+    const inviteMessageRows = computed(() => inviteMessageTable.value?.data ?? []);
+    const inviteMessageColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteDialog
+        })
+    );
+
+    const { table: inviteMessageTanstackTable } = useVrcxVueTable({
+        persistKey: 'invite-message',
+        data: inviteMessageRows,
+        columns: inviteMessageColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteMessageRowClick(row) {
+        showSendInviteConfirmDialog(row?.original);
+    }
+
     function showSendInviteConfirmDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
diff --git a/src/components/dialogs/InviteDialog/sendInviteColumns.jsx b/src/components/dialogs/InviteDialog/sendInviteColumns.jsx
new file mode 100644
index 00000000..aacdaf41
--- /dev/null
+++ b/src/components/dialogs/InviteDialog/sendInviteColumns.jsx
@@ -0,0 +1,54 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                class="w-6 h-6"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index 9d0669e2..728f2c9a 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -10,34 +10,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteRequestMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteConfirmDialog">
-            <el-table-column
-                :label="t('table.profile.invite_messages.slot')"
-                prop="slot"
-                :sortable="true"
-                width="70"></el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message"></el-table-column>
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteDialog(scope.row)">
-                        <SquarePen
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteRequestMessageTanstackTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteRequestMessageRowClick" />
 
         <template #footer>
             <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequest">{{
@@ -63,13 +41,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteRequestColumns.jsx';
 
     import EditAndSendInviteDialog from '../InviteDialog/EditAndSendInviteDialog.vue';
     import SendInviteConfirmDialog from '../InviteDialog/SendInviteConfirmDialog.vue';
@@ -108,6 +88,26 @@
         newMessage: ''
     });
 
+    const inviteRequestMessageRows = computed(() => inviteRequestMessageTable.value?.data ?? []);
+    const inviteRequestMessageColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteDialog
+        })
+    );
+
+    const { table: inviteRequestMessageTanstackTable } = useVrcxVueTable({
+        persistKey: 'invite-request-message',
+        data: inviteRequestMessageRows,
+        columns: inviteRequestMessageColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteRequestMessageRowClick(row) {
+        showSendInviteConfirmDialog(row?.original);
+    }
+
     function showSendInviteConfirmDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
diff --git a/src/components/dialogs/UserDialog/sendInviteRequestColumns.jsx b/src/components/dialogs/UserDialog/sendInviteRequestColumns.jsx
new file mode 100644
index 00000000..29625fa5
--- /dev/null
+++ b/src/components/dialogs/UserDialog/sendInviteRequestColumns.jsx
@@ -0,0 +1,53 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];
diff --git a/src/plugin/components.js b/src/plugin/components.js
index f2aeefbf..45f3e79b 100644
--- a/src/plugin/components.js
+++ b/src/plugin/components.js
@@ -2,7 +2,6 @@ import { TooltipWrapper } from '../components/ui/tooltip';
 
 import AvatarInfo from '../components/AvatarInfo.vue';
 import CountdownTimer from '../components/CountdownTimer.vue';
-import DataTable from '../components/DataTable.vue';
 import DisplayName from '../components/DisplayName.vue';
 import InstanceInfo from '../components/InstanceInfo.vue';
 import InviteYourself from '../components/InviteYourself.vue';
@@ -23,6 +22,5 @@ export function initComponents(app) {
     app.component('InviteYourself', InviteYourself);
     app.component('Launch', Launch);
     app.component('LocationWorld', LocationWorld);
-    app.component('DataTable', DataTable);
     app.component('TooltipWrapper', TooltipWrapper);
 }
diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
index 115e2cce..7aa88188 100644
--- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
@@ -10,31 +10,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteRequestResponseMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteResponseConfirmDialog">
-            <el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70">
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message"> </el-table-column>
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
-                        <SquarePen
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteRequestResponseTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteRequestResponseRowClick" />
 
         <template #footer>
             <Button variant="secondary" class="mr-2" @click="cancelSendInviteRequestResponse">
@@ -58,13 +39,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteRequestResponseColumns.jsx';
 
     import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
     import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +82,26 @@
         visible: false
     });
 
+    const inviteRequestResponseRows = computed(() => inviteRequestResponseMessageTable.value?.data ?? []);
+    const inviteRequestResponseColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteResponseDialog
+        })
+    );
+
+    const { table: inviteRequestResponseTable } = useVrcxVueTable({
+        persistKey: 'invite-request-response-message',
+        data: inviteRequestResponseRows,
+        columns: inviteRequestResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteRequestResponseRowClick(row) {
+        showSendInviteResponseConfirmDialog(row?.original);
+    }
+
     function showEditAndSendInviteResponseDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {
diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
index 40af7cd4..647587d6 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
@@ -10,30 +10,12 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <DataTable
-            v-bind="inviteResponseMessageTable"
-            style="margin-top: 10px; cursor: pointer"
-            @row-click="showSendInviteResponseConfirmDialog">
-            <el-table-column :label="t('table.profile.invite_messages.slot')" prop="slot" :sortable="true" width="70" />
-            <el-table-column :label="t('table.profile.invite_messages.message')" prop="message" />
-            <el-table-column
-                :label="t('table.profile.invite_messages.cool_down')"
-                prop="updatedAt"
-                :sortable="true"
-                width="110"
-                align="right">
-                <template #default="scope">
-                    <countdown-timer :datetime="scope.row.updatedAt" :hours="1" />
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.profile.invite_messages.action')" width="70" align="right">
-                <template #default="scope">
-                    <Button size="icon-sm" variant="ghost" @click.stop="showEditAndSendInviteResponseDialog(scope.row)">
-                        <SquarePen
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
+        <DataTableLayout
+            style="margin-top: 10px"
+            :table="inviteResponseTable"
+            :loading="false"
+            :show-pagination="false"
+            :on-row-click="handleInviteResponseRowClick" />
 
         <template #footer>
             <Button variant="secondary" class="mr-2" @click="cancelSendInviteResponse">{{
@@ -57,13 +39,15 @@
 </template>
 
 <script setup>
+    import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { SquarePen } from 'lucide-vue-next';
-    import { ref } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
+    import { createColumns } from './sendInviteResponseColumns.jsx';
 
     import EditAndSendInviteResponseDialog from './EditAndSendInviteResponseDialog.vue';
     import SendInviteResponseConfirmDialog from './SendInviteResponseConfirmDialog.vue';
@@ -99,6 +83,26 @@
         visible: false
     });
 
+    const inviteResponseRows = computed(() => inviteResponseMessageTable.value?.data ?? []);
+    const inviteResponseColumns = computed(() =>
+        createColumns({
+            onEdit: showEditAndSendInviteResponseDialog
+        })
+    );
+
+    const { table: inviteResponseTable } = useVrcxVueTable({
+        persistKey: 'invite-response-message',
+        data: inviteResponseRows,
+        columns: inviteResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleInviteResponseRowClick(row) {
+        showSendInviteResponseConfirmDialog(row?.original);
+    }
+
     function closeInviteDialog() {
         cancelSendInviteResponse();
     }
diff --git a/src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx b/src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx
new file mode 100644
index 00000000..29625fa5
--- /dev/null
+++ b/src/views/Notifications/dialogs/sendInviteRequestResponseColumns.jsx
@@ -0,0 +1,53 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];
diff --git a/src/views/Notifications/dialogs/sendInviteResponseColumns.jsx b/src/views/Notifications/dialogs/sendInviteResponseColumns.jsx
new file mode 100644
index 00000000..29625fa5
--- /dev/null
+++ b/src/views/Notifications/dialogs/sendInviteResponseColumns.jsx
@@ -0,0 +1,53 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { Button } from '@/components/ui/button';
+import { i18n } from '@/plugin';
+import { SquarePen } from 'lucide-vue-next';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onEdit }) => [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    },
+    {
+        id: 'action',
+        header: () => t('table.profile.invite_messages.action'),
+        size: 70,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <Button
+                size="icon-sm"
+                variant="ghost"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(row.original);
+                }}
+            >
+                <SquarePen />
+            </Button>
+        )
+    }
+];
diff --git a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
index e48eff59..36567b31 100644
--- a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
@@ -7,104 +7,36 @@
         @close="closeDialog">
         <el-tabs v-model="activeTab" style="margin-top: 10px">
             <el-tab-pane :label="t('dialog.edit_invite_messages.invite_message_tab')" name="message">
-                <DataTable
-                    v-bind="inviteMessageTable"
+                <DataTableLayout
                     style="margin-top: 10px; cursor: pointer"
-                    @row-click="showEditInviteMessageDialog">
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.slot')"
-                        prop="slot"
-                        :sortable="true"
-                        width="70"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.message')"
-                        prop="message"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.cool_down')"
-                        prop="updatedAt"
-                        :sortable="true"
-                        width="110"
-                        align="right">
-                        <template #default="scope">
-                            <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                        </template>
-                    </el-table-column>
-                </DataTable>
+                    :table="inviteMessageTanstackTable"
+                    :loading="false"
+                    :show-pagination="false"
+                    :on-row-click="handleEditInviteMessageRowClick" />
             </el-tab-pane>
             <el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_tab')" name="request">
-                <DataTable
-                    v-bind="inviteRequestMessageTable"
+                <DataTableLayout
                     style="margin-top: 10px; cursor: pointer"
-                    @row-click="showEditInviteMessageDialog">
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.slot')"
-                        prop="slot"
-                        :sortable="true"
-                        width="70"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.message')"
-                        prop="message"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.cool_down')"
-                        prop="updatedAt"
-                        :sortable="true"
-                        width="110"
-                        align="right">
-                        <template #default="scope">
-                            <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                        </template>
-                    </el-table-column>
-                </DataTable>
+                    :table="inviteRequestTanstackTable"
+                    :loading="false"
+                    :show-pagination="false"
+                    :on-row-click="handleEditInviteMessageRowClick" />
             </el-tab-pane>
             <el-tab-pane :label="t('dialog.edit_invite_messages.invite_request_response_tab')" name="requestResponse">
-                <DataTable
-                    v-bind="inviteRequestResponseMessageTable"
+                <DataTableLayout
                     style="margin-top: 10px; cursor: pointer"
-                    @row-click="showEditInviteMessageDialog">
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.slot')"
-                        prop="slot"
-                        :sortable="true"
-                        width="70"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.message')"
-                        prop="message"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.cool_down')"
-                        prop="updatedAt"
-                        :sortable="true"
-                        width="110"
-                        align="right">
-                        <template #default="scope">
-                            <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                        </template>
-                    </el-table-column>
-                </DataTable>
+                    :table="inviteRequestResponseTanstackTable"
+                    :loading="false"
+                    :show-pagination="false"
+                    :on-row-click="handleEditInviteMessageRowClick" />
             </el-tab-pane>
             <el-tab-pane :label="t('dialog.edit_invite_messages.invite_response_tab')" name="response">
-                <DataTable
-                    v-bind="inviteResponseMessageTable"
+                <DataTableLayout
                     style="margin-top: 10px; cursor: pointer"
-                    @row-click="showEditInviteMessageDialog">
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.slot')"
-                        prop="slot"
-                        :sortable="true"
-                        width="70"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.message')"
-                        prop="message"></el-table-column>
-                    <el-table-column
-                        :label="t('table.profile.invite_messages.cool_down')"
-                        prop="updatedAt"
-                        :sortable="true"
-                        width="110"
-                        align="right">
-                        <template #default="scope">
-                            <countdown-timer :datetime="scope.row.updatedAt" :hours="1"></countdown-timer>
-                        </template>
-                    </el-table-column>
-                </DataTable>
+                    :table="inviteResponseTanstackTable"
+                    :loading="false"
+                    :show-pagination="false"
+                    :on-row-click="handleEditInviteMessageRowClick" />
             </el-tab-pane>
         </el-tabs>
     </el-dialog>
@@ -118,14 +50,19 @@
 </template>
 
 <script setup>
-    import { ref, watch } from 'vue';
+    import { computed, ref, watch } from 'vue';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
+    import { columns as inviteMessageColumns } from './editInviteMessagesMessageColumns.jsx';
+    import { columns as inviteRequestColumns } from './editInviteMessagesRequestColumns.jsx';
+    import { columns as inviteRequestResponseColumns } from './editInviteMessagesRequestResponseColumns.jsx';
+    import { columns as inviteResponseColumns } from './editInviteMessagesResponseColumns.jsx';
     import { useInviteStore } from '../../../stores';
 
-    import DataTable from '../../../components/DataTable.vue';
     import EditInviteMessageDialog from './EditInviteMessageDialog.vue';
 
     const {
@@ -167,6 +104,51 @@
         emit('close');
     }
 
+    const inviteMessageRows = computed(() => inviteMessageTable.value?.data ?? []);
+    const inviteRequestRows = computed(() => inviteRequestMessageTable.value?.data ?? []);
+    const inviteRequestResponseRows = computed(() => inviteRequestResponseMessageTable.value?.data ?? []);
+    const inviteResponseRows = computed(() => inviteResponseMessageTable.value?.data ?? []);
+
+    const { table: inviteMessageTanstackTable } = useVrcxVueTable({
+        persistKey: 'edit-invite-messages:message',
+        data: inviteMessageRows,
+        columns: inviteMessageColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    const { table: inviteRequestTanstackTable } = useVrcxVueTable({
+        persistKey: 'edit-invite-messages:request',
+        data: inviteRequestRows,
+        columns: inviteRequestColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    const { table: inviteRequestResponseTanstackTable } = useVrcxVueTable({
+        persistKey: 'edit-invite-messages:request-response',
+        data: inviteRequestResponseRows,
+        columns: inviteRequestResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    const { table: inviteResponseTanstackTable } = useVrcxVueTable({
+        persistKey: 'edit-invite-messages:response',
+        data: inviteResponseRows,
+        columns: inviteResponseColumns,
+        getRowId: (row) => String(row?.slot ?? ''),
+        enablePagination: false,
+        initialSorting: [{ id: 'slot', desc: false }]
+    });
+
+    function handleEditInviteMessageRowClick(row) {
+        showEditInviteMessageDialog(row?.original);
+    }
+
     function showEditInviteMessageDialog(row) {
         if (row.updatedAt) {
             const cooldownEnd = new Date(row.updatedAt);
diff --git a/src/views/Tools/dialogs/editInviteMessagesMessageColumns.jsx b/src/views/Tools/dialogs/editInviteMessagesMessageColumns.jsx
new file mode 100644
index 00000000..4563838a
--- /dev/null
+++ b/src/views/Tools/dialogs/editInviteMessagesMessageColumns.jsx
@@ -0,0 +1,30 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const columns = [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    }
+];
diff --git a/src/views/Tools/dialogs/editInviteMessagesRequestColumns.jsx b/src/views/Tools/dialogs/editInviteMessagesRequestColumns.jsx
new file mode 100644
index 00000000..4563838a
--- /dev/null
+++ b/src/views/Tools/dialogs/editInviteMessagesRequestColumns.jsx
@@ -0,0 +1,30 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const columns = [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    }
+];
diff --git a/src/views/Tools/dialogs/editInviteMessagesRequestResponseColumns.jsx b/src/views/Tools/dialogs/editInviteMessagesRequestResponseColumns.jsx
new file mode 100644
index 00000000..4563838a
--- /dev/null
+++ b/src/views/Tools/dialogs/editInviteMessagesRequestResponseColumns.jsx
@@ -0,0 +1,30 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const columns = [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    }
+];
diff --git a/src/views/Tools/dialogs/editInviteMessagesResponseColumns.jsx b/src/views/Tools/dialogs/editInviteMessagesResponseColumns.jsx
new file mode 100644
index 00000000..4563838a
--- /dev/null
+++ b/src/views/Tools/dialogs/editInviteMessagesResponseColumns.jsx
@@ -0,0 +1,30 @@
+import CountdownTimer from '@/components/CountdownTimer.vue';
+import { i18n } from '@/plugin';
+
+const { t } = i18n.global;
+
+export const columns = [
+    {
+        accessorKey: 'slot',
+        header: () => t('table.profile.invite_messages.slot'),
+        size: 70
+    },
+    {
+        accessorKey: 'message',
+        header: () => t('table.profile.invite_messages.message'),
+        meta: {
+            stretch: true
+        }
+    },
+    {
+        accessorKey: 'updatedAt',
+        header: () => t('table.profile.invite_messages.cool_down'),
+        size: 110,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => (
+            <CountdownTimer datetime={row.original?.updatedAt} hours={1} />
+        )
+    }
+];