From d558ca8a49c8fd5dcbf87d2e2f6dfeeff18bf4b0 Mon Sep 17 00:00:00 2001
From: dat <dat.nguyen.supper@gmail.com>
Date: Thu, 22 May 2025 07:50:42 +0700
Subject: [PATCH] Topcoder Admin App - Misc Update 0518

---
 .../BillingAccountsPage.tsx                   |   7 +-
 .../ClientsPage/ClientsPage.tsx               |   7 +-
 .../BillingAccountResourcesTable.module.scss  |   6 ++
 .../BillingAccountResourcesTable.tsx          |  10 +-
 .../BillingAccountsTable.module.scss          |   6 ++
 .../BillingAccountsTable.tsx                  |  13 ++-
 .../ChallengeList/ChallengeList.module.scss   |   6 ++
 .../ChallengeList/ChallengeList.tsx           |   2 +
 .../ChallengeUserList.module.scss             |   6 ++
 .../ChallengeUserList/ChallengeUserList.tsx   |   1 +
 .../ClientsTable/ClientsTable.module.scss     |   6 ++
 .../components/ClientsTable/ClientsTable.tsx  |  13 ++-
 .../DialogEditUserGroups.module.scss          |   6 ++
 .../DialogEditUserGroups.tsx                  |   1 +
 .../DialogEditUserRoles.module.scss           |   6 ++
 .../DialogEditUserRoles.tsx                   |   1 +
 .../DialogEditUserTerms.module.scss           |   6 ++
 .../DialogEditUserTerms.tsx                   |   2 +
 .../DialogUserStatusHistory.module.scss       |   6 ++
 .../DialogUserStatusHistory.tsx               |   1 +
 .../GroupMembersTable.module.scss             |   6 ++
 .../GroupMembersTable/GroupMembersTable.tsx   |  22 ++--
 .../GroupsTable/GroupsTable.module.scss       |   6 ++
 .../components/GroupsTable/GroupsTable.tsx    |  17 ++-
 .../ResourceTable/ResourceTable.module.scss   |   6 ++
 .../ResourceTable/ResourceTable.tsx           |   1 +
 .../ReviewSummaryList.module.scss             |   6 ++
 .../ReviewSummaryList/ReviewSummaryList.tsx   |  20 +++-
 .../ReviewerList/ReviewerList.module.scss     |   5 +
 .../components/ReviewerList/ReviewerList.tsx  |   1 +
 .../RoleMembersTable.module.scss              |   6 ++
 .../RoleMembersTable/RoleMembersTable.tsx     |  12 ++-
 .../RolesTable/RolesTable.module.scss         |   6 ++
 .../lib/components/RolesTable/RolesTable.tsx  |  16 ++-
 .../UsersTable/UsersTable.module.scss         |   6 ++
 .../lib/components/UsersTable/UsersTable.tsx  |  40 +++++--
 .../hooks/useManagePermissionGroupMembers.ts  |  17 ++-
 .../lib/hooks/useManagePermissionGroups.ts    |   4 +
 .../hooks/useManagePermissionRoleMembers.ts   |   7 +-
 .../src/lib/hooks/useManagePermissionRoles.ts |   4 +
 .../src/lib/hooks/useTableFilterLocal.ts      |  38 +++++--
 .../admin/src/lib/models/UserRole.model.ts    |   6 +-
 src/apps/admin/src/lib/utils/index.ts         |   2 +
 src/apps/admin/src/lib/utils/others.ts        |  21 ++++
 src/apps/admin/src/lib/utils/string.ts        |  18 ++++
 .../PermissionGroupMembersPage.tsx            |   2 +-
 src/libs/ui/lib/components/table/Table.tsx    |  70 +++++++++++-
 src/libs/ui/lib/components/table/index.ts     |   1 +
 .../components/table/table-cell/TableCell.tsx |   4 +-
 .../components/table/table-column.model.ts    |   1 +
 .../components/table/table-row/TableRow.tsx   | 101 ++++++++++--------
 .../table/table-sort/TableSort.module.scss    |   5 +
 .../components/table/table-sort/TableSort.tsx |   4 +-
 src/libs/ui/lib/hooks/use-window-size.hook.ts |  34 ++++++
 54 files changed, 522 insertions(+), 105 deletions(-)
 create mode 100644 src/apps/admin/src/lib/utils/others.ts
 create mode 100644 src/apps/admin/src/lib/utils/string.ts
 create mode 100644 src/libs/ui/lib/components/table/table-sort/TableSort.module.scss
 create mode 100644 src/libs/ui/lib/hooks/use-window-size.hook.ts

diff --git a/src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx b/src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx
index 13d299563..8bf8e956b 100644
--- a/src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx
+++ b/src/apps/admin/src/billing-account/BillingAccountsPage/BillingAccountsPage.tsx
@@ -1,11 +1,11 @@
 /**
  * Billing accounts page.
  */
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import classNames from 'classnames'
 
 import { PlusIcon } from '@heroicons/react/solid'
-import { LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
+import { colWidthType, LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
 
 import { BillingAccountsFilter } from '../../lib/components/BillingAccountsFilter'
 import { BillingAccountsTable } from '../../lib/components/BillingAccountsTable'
@@ -22,6 +22,7 @@ interface Props {
 const pageTitle = 'Billing Accounts'
 
 export const BillingAccountsPage: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         isLoading,
         datas,
@@ -76,6 +77,8 @@ export const BillingAccountsPage: FC<Props> = (props: Props) => {
                                 setPage={setPage}
                                 setSort={setSort}
                                 sort={sort}
+                                colWidth={colWidth}
+                                setColWidth={setColWidth}
                             />
                         )}
                     </>
diff --git a/src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx b/src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx
index ee2e97010..ceb44fc8f 100644
--- a/src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx
+++ b/src/apps/admin/src/billing-account/ClientsPage/ClientsPage.tsx
@@ -1,10 +1,10 @@
 /**
  * Billing account clients page.
  */
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import classNames from 'classnames'
 
-import { LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
+import { colWidthType, LinkButton, LoadingSpinner, PageDivider, PageTitle } from '~/libs/ui'
 import { PlusIcon } from '@heroicons/react/solid'
 
 import { MSG_NO_RECORD_FOUND } from '../../config/index.config'
@@ -22,6 +22,7 @@ interface Props {
 const pageTitle = 'Clients'
 
 export const ClientsPage: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         isLoading,
         datas,
@@ -77,6 +78,8 @@ export const ClientsPage: FC<Props> = (props: Props) => {
                                 setPage={setPage}
                                 setSort={setSort}
                                 sort={sort}
+                                colWidth={colWidth}
+                                setColWidth={setColWidth}
                             />
                         )}
                     </>
diff --git a/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.module.scss b/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.module.scss
index cf03543d0..6e7d98479 100644
--- a/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.module.scss
+++ b/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.module.scss
@@ -21,3 +21,9 @@
 .btnDelete {
     padding-right: 0;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx b/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx
index 70e241c12..69eee47f7 100644
--- a/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx
+++ b/src/apps/admin/src/lib/components/BillingAccountResourcesTable/BillingAccountResourcesTable.tsx
@@ -1,11 +1,11 @@
 /**
  * Billing account resources table.
  */
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import classNames from 'classnames'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Button, Table, TableColumn } from '~/libs/ui'
+import { Button, colWidthType, Table, TableColumn } from '~/libs/ui'
 
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
 import { Pagination } from '../common/Pagination'
@@ -26,6 +26,7 @@ interface Props {
 }
 
 export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         page,
         setPage,
@@ -40,12 +41,14 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<BillingAccountResource>[]>(
         () => [
             {
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
                 className: styles.blockColumnAction,
+                columnId: 'action',
                 label: '',
                 renderer: (data: BillingAccountResource) => (
                     <Button
@@ -100,6 +103,9 @@ export const BillingAccountResourcesTable: FC<Props> = (props: Props) => {
                     onToggleSort={setSort}
                     forceSort={sort}
                     removeDefaultSort
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
 
diff --git a/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.module.scss b/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.module.scss
index b5bc883e4..9bc87b4f4 100644
--- a/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.module.scss
+++ b/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.module.scss
@@ -38,3 +38,9 @@
     white-space: break-spaces !important;
     text-align: left !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.tsx b/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.tsx
index 0dca4f59e..fe6f2a046 100644
--- a/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.tsx
+++ b/src/apps/admin/src/lib/components/BillingAccountsTable/BillingAccountsTable.tsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { Sort } from '~/apps/gamification-admin/src/game-lib'
-import { LinkButton, Table, TableColumn } from '~/libs/ui'
+import { colWidthType, LinkButton, Table, TableColumn } from '~/libs/ui'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { BillingAccount, MobileTableColumn } from '../../models'
@@ -23,12 +23,15 @@ interface Props {
     setPage: Dispatch<SetStateAction<number>>
     sort: Sort | undefined,
     setSort: Dispatch<SetStateAction<Sort | undefined>>
+    colWidth: colWidthType | undefined,
+    setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
 }
 
 export const BillingAccountsTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<BillingAccount>[]>(
         () => [
             {
+                columnId: 'id',
                 label: 'Account ID',
                 renderer: (data: BillingAccount) => (
                     <div>
@@ -39,26 +42,31 @@ export const BillingAccountsTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.tableCell,
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
+                columnId: 'status',
                 label: 'Status',
                 propertyName: 'status',
                 type: 'text',
             },
             {
+                columnId: 'startDateString',
                 label: 'Start Date',
                 propertyName: 'startDateString',
                 type: 'text',
             },
             {
+                columnId: 'endDateString',
                 label: 'End Date',
                 propertyName: 'endDateString',
                 type: 'text',
             },
             {
+                columnId: 'action',
                 label: '',
                 renderer: (data: BillingAccount) => (
                     <span>
@@ -167,6 +175,9 @@ export const BillingAccountsTable: FC<Props> = (props: Props) => {
                     onToggleSort={props.setSort}
                     removeDefaultSort
                     forceSort={props.sort}
+                    colWidth={props.colWidth}
+                    setColWidth={props.setColWidth}
+                    className={styles.desktopTable}
                 />
             )}
             <Pagination
diff --git a/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.module.scss b/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.module.scss
index af4a88c57..34cf58249 100644
--- a/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.module.scss
+++ b/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.module.scss
@@ -53,3 +53,9 @@
         flex: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx b/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx
index 1934a915c..17e998b3b 100644
--- a/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx
+++ b/src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx
@@ -332,6 +332,8 @@ const ChallengeList: FC<ChallengeListProps> = props => {
                     columns={columns}
                     data={props.challenges}
                     disableSorting
+                    onToggleSort={_.noop}
+                    className={styles.desktopTable}
                 />
             )}
             {screenWidth <= 1279 && (
diff --git a/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.module.scss b/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.module.scss
index 7c6a75428..9f6c39382 100644
--- a/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.module.scss
+++ b/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.module.scss
@@ -48,3 +48,9 @@
         text-align: right;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.tsx b/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.tsx
index b0703e795..89f301457 100644
--- a/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.tsx
+++ b/src/apps/admin/src/lib/components/ChallengeUserList/ChallengeUserList.tsx
@@ -421,6 +421,7 @@ const ChallengeUserList: FC<ChallengeUserListProps> = props => {
                         columns={columns}
                         data={props.users}
                         disableSorting
+                        className={styles.desktopTable}
                     />
                 )}
                 {screenWidth <= 984 && (
diff --git a/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.module.scss b/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.module.scss
index daf61e99d..30a42a9bc 100644
--- a/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.module.scss
+++ b/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.module.scss
@@ -30,3 +30,9 @@
     white-space: break-spaces !important;
     text-align: left !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.tsx b/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.tsx
index 12131908d..2338f4b75 100644
--- a/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.tsx
+++ b/src/apps/admin/src/lib/components/ClientsTable/ClientsTable.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames'
 
 import { Sort } from '~/apps/gamification-admin/src/game-lib'
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Table, TableColumn } from '~/libs/ui'
+import { colWidthType, Table, TableColumn } from '~/libs/ui'
 
 import { ClientInfo, MobileTableColumn } from '../../models'
 import { Pagination } from '../common/Pagination'
@@ -23,12 +23,15 @@ interface Props {
     setPage: Dispatch<SetStateAction<number>>
     sort: Sort | undefined
     setSort: Dispatch<SetStateAction<Sort | undefined>>
+    colWidth: colWidthType | undefined,
+    setColWidth: Dispatch<SetStateAction<colWidthType>> | undefined
 }
 
 export const ClientsTable: FC<Props> = (props: Props) => {
     const columns = useMemo<TableColumn<ClientInfo>[]>(
         () => [
             {
+                columnId: 'ClientID',
                 label: 'Client ID',
                 renderer: (data: ClientInfo) => (
                     <div>
@@ -39,26 +42,31 @@ export const ClientsTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.tableCell,
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 type: 'text',
             },
             {
+                columnId: 'status',
                 label: 'Status',
                 propertyName: 'status',
                 type: 'text',
             },
             {
+                columnId: 'startDateString',
                 label: 'Start Date',
                 propertyName: 'startDateString',
                 type: 'text',
             },
             {
+                columnId: 'endDateString',
                 label: 'End Date',
                 propertyName: 'endDateString',
                 type: 'text',
             },
             {
+                columnId: 'codeName',
                 label: 'Code name',
                 renderer: (data: ClientInfo) => (
                     <>
@@ -161,6 +169,9 @@ export const ClientsTable: FC<Props> = (props: Props) => {
                     onToggleSort={props.setSort}
                     removeDefaultSort
                     forceSort={props.sort}
+                    className={styles.desktopTable}
+                    colWidth={props.colWidth}
+                    setColWidth={props.setColWidth}
                 />
             )}
             <Pagination
diff --git a/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.module.scss b/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.module.scss
index 385e3f7c8..09bd95416 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.module.scss
+++ b/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.module.scss
@@ -61,3 +61,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.tsx b/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.tsx
index c9ba6f0c8..f1e00c69c 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.tsx
+++ b/src/apps/admin/src/lib/components/DialogEditUserGroups/DialogEditUserGroups.tsx
@@ -158,6 +158,7 @@ export const DialogEditUserGroups: FC<Props> = (props: Props) => {
                                 data={userGroups}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         ) : (
                             <div>No groups</div>
diff --git a/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.module.scss b/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.module.scss
index 5d20206f0..34d2cc484 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.module.scss
+++ b/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.module.scss
@@ -61,3 +61,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.tsx b/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.tsx
index a3e8e23e0..a4c4d9a84 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.tsx
+++ b/src/apps/admin/src/lib/components/DialogEditUserRoles/DialogEditUserRoles.tsx
@@ -154,6 +154,7 @@ export const DialogEditUserRoles: FC<Props> = (props: Props) => {
                                 data={userRoles}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         ) : (
                             <div>No roles</div>
diff --git a/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.module.scss b/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.module.scss
index 5f4900fcb..d0d6c07aa 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.module.scss
+++ b/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.module.scss
@@ -78,3 +78,9 @@
         background: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.tsx b/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.tsx
index 97ee7fde7..7b4ba89f1 100644
--- a/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.tsx
+++ b/src/apps/admin/src/lib/components/DialogEditUserTerms/DialogEditUserTerms.tsx
@@ -223,6 +223,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
                                             data={addedInfo.datas}
                                             disableSorting
                                             onToggleSort={_.noop}
+                                            className={styles.desktopTable}
                                         />
                                         <Pagination
                                             page={addedInfo.page}
@@ -276,6 +277,7 @@ export const DialogEditUserTerms: FC<Props> = (props: Props) => {
                                             data={notAddedInfo.datas}
                                             disableSorting
                                             onToggleSort={_.noop}
+                                            className={styles.desktopTable}
                                         />
                                         <Pagination
                                             page={notAddedInfo.page}
diff --git a/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.module.scss b/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.module.scss
index 86c651d5c..d719f25f8 100644
--- a/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.module.scss
+++ b/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.module.scss
@@ -41,3 +41,9 @@
     padding: 16px 16px 32px;
     text-align: center;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.tsx b/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.tsx
index 0bea0a83a..fd4216bab 100644
--- a/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.tsx
+++ b/src/apps/admin/src/lib/components/DialogUserStatusHistory/DialogUserStatusHistory.tsx
@@ -92,6 +92,7 @@ export const DialogUserStatusHistory: FC<Props> = (props: Props) => {
                                 data={userAchievements}
                                 disableSorting
                                 onToggleSort={_.noop}
+                                className={styles.desktopTable}
                             />
                         )}
                     </>
diff --git a/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.module.scss b/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.module.scss
index 7f454d76e..c28d1df35 100644
--- a/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.module.scss
+++ b/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.module.scss
@@ -32,3 +32,9 @@
 .blockCellWrap {
     white-space: break-spaces !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.tsx b/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.tsx
index f163f4c30..f51b92775 100644
--- a/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.tsx
+++ b/src/apps/admin/src/lib/components/GroupMembersTable/GroupMembersTable.tsx
@@ -1,12 +1,12 @@
 /**
  * Group members table.
  */
-import { FC, useCallback, useEffect, useMemo } from 'react'
+import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Button, InputCheckbox, Table, TableColumn } from '~/libs/ui'
+import { Button, colWidthType, InputCheckbox, Table, TableColumn } from '~/libs/ui'
 
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
 import { UserGroupMember, UserMappingType } from '../../models'
@@ -31,10 +31,11 @@ interface Props {
     toggleSelect: (key: number) => void
     forceSelect: (key: number) => void
     forceUnSelect: (key: number) => void
-    doRemoveGroupMember: (memberId: number) => void
+    doRemoveGroupMember: (memberId: number, memberType: string) => void
 }
 
 export const GroupMembersTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const {
         page,
         setPage,
@@ -78,6 +79,7 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
         () => [
             {
                 className: styles.blockCellCheckBox,
+                columnId: 'checkbox',
                 label: () => ( // eslint-disable-line react/no-unstable-nested-components
                     <div className={styles.headerCheckboxWrapper}>
                         <InputCheckbox
@@ -104,12 +106,14 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'memberId',
                 label: `${props.memberType} ID`,
                 propertyName: 'memberId',
                 type: 'text',
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'name',
                 label: props.memberType === 'user' ? 'Handle' : 'Group Name',
                 propertyName: 'name',
                 renderer: (data: UserGroupMember) => {
@@ -132,8 +136,8 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'createdByHandle',
                 label: 'Created By',
-                propertyName: 'createdByHandle',
                 renderer: (data: UserGroupMember) => {
                     if (!data.createdBy) {
                         return <></>
@@ -150,14 +154,15 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'createdAtString',
                 label: 'Created at',
                 propertyName: 'createdAtString',
                 type: 'text',
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'updatedByHandle',
                 label: 'Modified By',
-                propertyName: 'updatedByHandle',
                 renderer: (data: UserGroupMember) => {
                     if (!data.updatedBy) {
                         return <></>
@@ -174,11 +179,13 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'updatedAtString',
                 label: 'Modified at',
                 propertyName: 'updatedAtString',
                 type: 'text',
             },
             {
+                columnId: 'action',
                 label: '',
                 renderer: (data: UserGroupMember) => (
                     <Button
@@ -186,7 +193,7 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
                         variant='danger'
                         disabled={props.isRemoving[data.memberId]}
                         onClick={function onClick() {
-                            props.doRemoveGroupMember(data.memberId)
+                            props.doRemoveGroupMember(data.memberId, props.memberType)
                         }}
                     >
                         Remove
@@ -368,6 +375,9 @@ export const GroupMembersTable: FC<Props> = (props: Props) => {
                     onToggleSort={setSort}
                     forceSort={sort}
                     removeDefaultSort
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
 
diff --git a/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.module.scss b/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.module.scss
index e5c11762f..41ad04dc5 100644
--- a/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.module.scss
+++ b/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.module.scss
@@ -36,3 +36,9 @@
 .blockCellWrap {
     white-space: break-spaces !important;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.tsx b/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.tsx
index ba313e200..65bbacfb8 100644
--- a/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.tsx
+++ b/src/apps/admin/src/lib/components/GroupsTable/GroupsTable.tsx
@@ -1,11 +1,11 @@
 /**
  * Groups table.
  */
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
-import { Table, TableColumn } from '~/libs/ui'
+import { colWidthType, Table, TableColumn } from '~/libs/ui'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
@@ -23,9 +23,11 @@ interface Props {
 }
 
 export const GroupsTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const columns = useMemo<TableColumn<UserGroup>[]>(
         () => [
             {
+                columnId: 'id',
                 label: 'Group ID',
                 propertyName: 'id',
                 renderer: (data: UserGroup) => (
@@ -36,6 +38,7 @@ export const GroupsTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'name',
                 label: 'Name',
                 propertyName: 'name',
                 renderer: (data: UserGroup) => (
@@ -47,13 +50,14 @@ export const GroupsTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'description',
                 label: 'Description',
                 propertyName: 'description',
                 type: 'text',
             },
             {
+                columnId: 'createdByHandle',
                 label: 'Created By',
-                propertyName: 'createdByHandle',
                 renderer: (data: UserGroup) => {
                     if (!data.createdBy) {
                         return <></>
@@ -70,13 +74,14 @@ export const GroupsTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'createdAtString',
                 label: 'Created at',
                 propertyName: 'createdAtString',
                 type: 'text',
             },
             {
+                columnId: 'updatedByHandle',
                 label: 'Modified By',
-                propertyName: 'updatedByHandle',
                 renderer: (data: UserGroup) => {
                     if (!data.updatedBy) {
                         return <></>
@@ -93,6 +98,7 @@ export const GroupsTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'updatedAtString',
                 label: 'Modified at',
                 propertyName: 'updatedAtString',
                 type: 'text',
@@ -235,6 +241,9 @@ export const GroupsTable: FC<Props> = (props: Props) => {
                     onToggleSort={setSort}
                     removeDefaultSort
                     forceSort={sort}
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
             <Pagination
diff --git a/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.module.scss b/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.module.scss
index 01f9304ec..e6694ebaf 100644
--- a/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.module.scss
+++ b/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.module.scss
@@ -2,3 +2,9 @@
     display: flex;
     flex-direction: column;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.tsx b/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.tsx
index f1f271e3c..c2dfa243b 100644
--- a/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.tsx
+++ b/src/apps/admin/src/lib/components/ResourceTable/ResourceTable.tsx
@@ -145,6 +145,7 @@ export const ResourceTable: FC<Props> = (props: Props) => {
                     removeDefaultSort
                     onToggleSort={props.setSort}
                     forceSort={props.sort}
+                    className={styles.desktopTable}
                 />
             )}
             <Pagination
diff --git a/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss b/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss
index f460fc40a..c94b23fd5 100644
--- a/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss
+++ b/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.module.scss
@@ -35,3 +35,9 @@
         flex: none;
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx b/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx
index db21dcab2..8758a014b 100644
--- a/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx
+++ b/src/apps/admin/src/lib/components/ReviewSummaryList/ReviewSummaryList.tsx
@@ -1,9 +1,9 @@
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { EnvironmentConfig } from '~/config'
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Button, LinkButton, Table, type TableColumn } from '~/libs/ui'
+import { Button, colWidthType, LinkButton, Table, type TableColumn } from '~/libs/ui'
 import { Sort } from '~/apps/gamification-admin/src/game-lib/pagination'
 
 import { Pagination } from '../common/Pagination'
@@ -61,6 +61,7 @@ const ChallengeTitle: FC<{
 }
 
 const ReviewSummaryList: FC<ReviewListProps> = props => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const columns = useMemo<TableColumn<ReviewSummary>[]>(
         () => [
             // Hide the columns temporary, we do not have these data now
@@ -70,6 +71,7 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
             //     type: 'text',
             // },
             {
+                columnId: 'challengeName',
                 label: 'Challenge Title',
                 propertyName: 'challengeName',
                 renderer: (review: ReviewSummary) => (
@@ -78,6 +80,7 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
                 type: 'element',
             },
             {
+                columnId: 'legacyChallengeId',
                 label: 'Legacy ID',
                 propertyName: 'legacyChallengeId',
                 type: 'text',
@@ -87,7 +90,12 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
             //     propertyName: '',
             //     type: 'text',
             // },
-            { label: 'Status', propertyName: 'challengeStatus', type: 'text' },
+            {
+                columnId: 'challengeStatus',
+                label: 'Status',
+                propertyName: 'challengeStatus',
+                type: 'text',
+            },
             // I think this column is important, and it exits in `admin-app`
             // but resp does not have it, so I just comment it here
             // {
@@ -106,6 +114,7 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
             //     type: 'element',
             // },
             {
+                columnId: 'OpenReviewOpp',
                 label: 'Open Review Opp',
                 renderer: (review: ReviewSummary) => (
                     <div>{review.numberOfReviewerSpots - review.numberOfApprovedApplications}</div>
@@ -113,11 +122,13 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
                 type: 'element',
             },
             {
+                columnId: 'numberOfPendingApplications',
                 label: 'Review Applications',
                 propertyName: 'numberOfPendingApplications',
                 type: 'number',
             },
             {
+                columnId: 'action',
                 label: '',
                 renderer: (review: ReviewSummary) => (
                     <Actions
@@ -141,6 +152,9 @@ const ReviewSummaryList: FC<ReviewListProps> = props => {
                     initSort={{ direction: 'asc',
                         fieldName: '' }}
                     onToggleSort={props.onToggleSort}
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
             {screenWidth <= 1279 && (
diff --git a/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.module.scss b/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.module.scss
index ec41c0540..674f5df77 100644
--- a/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.module.scss
+++ b/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.module.scss
@@ -47,3 +47,8 @@
     }
 }
 
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx b/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx
index f12c60210..1029c9f6a 100644
--- a/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx
+++ b/src/apps/admin/src/lib/components/ReviewerList/ReviewerList.tsx
@@ -221,6 +221,7 @@ const ReviewerList: FC<ReviewerListProps> = props => {
                     data={props.reviewers}
                     initSort={{ direction: 'asc', fieldName: '' }}
                     onToggleSort={props.onToggleSort}
+                    className={styles.desktopTable}
                 />
             )}
             {screenWidth <= 984 && (
diff --git a/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.module.scss b/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.module.scss
index bcfb6832a..4c4ef7c30 100644
--- a/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.module.scss
+++ b/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.module.scss
@@ -37,3 +37,9 @@
 .blockCellCheckBox {
     width: 52px;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.tsx b/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.tsx
index eb1e53f1f..33d918d79 100644
--- a/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.tsx
+++ b/src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.tsx
@@ -1,12 +1,12 @@
 /**
  * Role members table.
  */
-import { FC, useContext, useEffect, useMemo } from 'react'
+import { FC, useContext, useEffect, useMemo, useState } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
-import { Button, InputCheckbox, Table, TableColumn } from '~/libs/ui'
+import { Button, colWidthType, InputCheckbox, Table, TableColumn } from '~/libs/ui'
 
 import { AdminAppContext } from '../../contexts'
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
@@ -28,6 +28,7 @@ interface Props {
 }
 
 export const RoleMembersTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const { loadUser, usersMapping, cancelLoadUser }: AdminAppContextType
         = useContext(AdminAppContext)
     const {
@@ -76,6 +77,7 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
         () => [
             {
                 className: styles.blockCellCheckBox,
+                columnId: 'checkbox',
                 label: () => ( // eslint-disable-line react/no-unstable-nested-components
                     <div className={styles.headerCheckboxWrapper}>
                         <InputCheckbox
@@ -101,11 +103,13 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'id',
                 label: 'User ID',
                 propertyName: 'id',
                 type: 'text',
             },
             {
+                columnId: 'handle',
                 label: 'Handle',
                 propertyName: 'handle',
                 renderer: (data: RoleMemberInfo) => {
@@ -125,6 +129,7 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.blockColumnAction,
+                columnId: 'action',
                 label: '',
                 renderer: (data: RoleMemberInfo) => (
                     <Button
@@ -198,6 +203,9 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
                     onToggleSort={setSort}
                     forceSort={sort}
                     removeDefaultSort
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
 
diff --git a/src/apps/admin/src/lib/components/RolesTable/RolesTable.module.scss b/src/apps/admin/src/lib/components/RolesTable/RolesTable.module.scss
index 8b0f302d9..7807230fd 100644
--- a/src/apps/admin/src/lib/components/RolesTable/RolesTable.module.scss
+++ b/src/apps/admin/src/lib/components/RolesTable/RolesTable.module.scss
@@ -41,3 +41,9 @@
     padding: 16px 16px 32px;
     text-align: center;
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/RolesTable/RolesTable.tsx b/src/apps/admin/src/lib/components/RolesTable/RolesTable.tsx
index a3779dd1c..4b75040fa 100644
--- a/src/apps/admin/src/lib/components/RolesTable/RolesTable.tsx
+++ b/src/apps/admin/src/lib/components/RolesTable/RolesTable.tsx
@@ -1,11 +1,11 @@
 /**
  * Roles table.
  */
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
-import { Table, TableColumn } from '~/libs/ui'
+import { colWidthType, Table, TableColumn } from '~/libs/ui'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
@@ -24,9 +24,11 @@ interface Props {
 }
 
 export const RolesTable: FC<Props> = (props: Props) => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const columns = useMemo<TableColumn<UserRole>[]>(
         () => [
             {
+                columnId: 'id',
                 label: 'Role ID',
                 propertyName: 'id',
                 renderer: (data: UserRole) => (
@@ -37,6 +39,7 @@ export const RolesTable: FC<Props> = (props: Props) => {
                 type: 'numberElement', // Change from 'element' to 'numberElement'
             },
             {
+                columnId: 'roleName',
                 label: 'Role Name',
                 propertyName: 'roleName',
                 renderer: (data: UserRole) => (
@@ -50,8 +53,8 @@ export const RolesTable: FC<Props> = (props: Props) => {
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'createdByHandle',
                 label: 'Created By',
-                propertyName: 'createdByHandle',
                 renderer: (data: UserRole) => {
                     if (!data.createdBy) {
                         return <></>
@@ -68,14 +71,15 @@ export const RolesTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'createdAtString',
                 label: 'Created at',
                 propertyName: 'createdAtString',
                 type: 'text',
             },
             {
                 className: styles.blockCellWrap,
+                columnId: 'modifiedByHandle',
                 label: 'Modified By',
-                propertyName: 'modifiedByHandle',
                 renderer: (data: UserRole) => {
                     if (!data.modifiedBy) {
                         return <></>
@@ -92,6 +96,7 @@ export const RolesTable: FC<Props> = (props: Props) => {
                 type: 'element',
             },
             {
+                columnId: 'modifiedAtString',
                 label: 'Modified at',
                 propertyName: 'modifiedAtString',
                 type: 'text',
@@ -229,6 +234,9 @@ export const RolesTable: FC<Props> = (props: Props) => {
                     showExpand={false}
                     removeDefaultSort
                     forceSort={sort}
+                    className={styles.desktopTable}
+                    colWidth={colWidth}
+                    setColWidth={setColWidth}
                 />
             )}
 
diff --git a/src/apps/admin/src/lib/components/UsersTable/UsersTable.module.scss b/src/apps/admin/src/lib/components/UsersTable/UsersTable.module.scss
index 2fe54412d..d81f26842 100644
--- a/src/apps/admin/src/lib/components/UsersTable/UsersTable.module.scss
+++ b/src/apps/admin/src/lib/components/UsersTable/UsersTable.module.scss
@@ -126,3 +126,9 @@
         }
     }
 }
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
diff --git a/src/apps/admin/src/lib/components/UsersTable/UsersTable.tsx b/src/apps/admin/src/lib/components/UsersTable/UsersTable.tsx
index c5a8ded96..4ae53a4cf 100644
--- a/src/apps/admin/src/lib/components/UsersTable/UsersTable.tsx
+++ b/src/apps/admin/src/lib/components/UsersTable/UsersTable.tsx
@@ -9,6 +9,7 @@ import moment from 'moment'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import {
     Button,
+    colWidthType,
     ConfirmModal,
     IconOutline,
     IconSolid,
@@ -45,6 +46,7 @@ interface Props {
 }
 
 export const UsersTable: FC<Props> = props => {
+    const [colWidth, setColWidth] = useState<colWidthType>({})
     const [showDialogEditUserEmail, setShowDialogEditUserEmail] = useState<
         UserInfo | undefined
     >()
@@ -91,33 +93,38 @@ export const UsersTable: FC<Props> = props => {
     const columns = useMemo<TableColumn<UserInfo>[]>(
         () => [
             {
+                columnId: 'id',
                 label: 'User ID',
                 propertyName: 'id',
                 type: 'text',
             },
             {
                 className: styles.blockColumnHandle,
+                columnId: 'handle',
                 label: 'Handle',
                 propertyName: 'handle',
                 type: 'text',
             },
             ...(isTablet
                 ? [
-                      {
-                          isExpand: true,
-                          label: 'Primary Email',
-                          propertyName: 'email',
-                          type: 'text',
-                      } as TableColumn<UserInfo>,
+                    {
+                        columnId: 'email',
+                        isExpand: true,
+                        label: 'Primary Email',
+                        propertyName: 'email',
+                        type: 'text',
+                    } as TableColumn<UserInfo>,
                 ]
                 : [
-                      {
-                          label: 'Primary Email',
-                          propertyName: 'email',
-                          type: 'text',
-                      } as TableColumn<UserInfo>,
+                    {
+                        columnId: 'email',
+                        label: 'Primary Email',
+                        propertyName: 'email',
+                        type: 'text',
+                    } as TableColumn<UserInfo>,
                 ]),
             {
+                columnId: 'firstName',
                 isExpand: true,
                 label: 'Name',
                 propertyName: 'firstName',
@@ -131,6 +138,7 @@ export const UsersTable: FC<Props> = props => {
                 type: 'element',
             },
             {
+                columnId: 'statusDesc',
                 isExpand: true,
                 label: 'User Status',
                 propertyName: 'statusDesc',
@@ -151,12 +159,14 @@ export const UsersTable: FC<Props> = props => {
                 type: 'element',
             },
             {
+                columnId: 'emailStatusDesc',
                 isExpand: true,
                 label: 'Email Status',
                 propertyName: 'emailStatusDesc',
                 type: 'text',
             },
             {
+                columnId: 'createdAt',
                 isExpand: true,
                 label: 'Created at',
                 propertyName: 'createdAt',
@@ -170,6 +180,7 @@ export const UsersTable: FC<Props> = props => {
                 type: 'element',
             },
             {
+                columnId: 'modifiedAt',
                 isExpand: true,
                 label: 'Modified at',
                 propertyName: 'modifiedAt',
@@ -183,6 +194,7 @@ export const UsersTable: FC<Props> = props => {
                 type: 'element',
             },
             {
+                columnId: 'activationCode',
                 isExpand: true,
                 label: 'Activation Code',
                 propertyName: 'activationCode',
@@ -212,6 +224,7 @@ export const UsersTable: FC<Props> = props => {
             ...(isMobile
                 ? [
                     {
+                        columnId: 'active',
                         isExpand: true,
                         label: 'User Active',
                         propertyName: 'active',
@@ -230,6 +243,7 @@ export const UsersTable: FC<Props> = props => {
                 ]
                 : [
                     {
+                        columnId: 'active',
                         label: 'User Active',
                         propertyName: 'active',
                         renderer: (data: UserInfo) => (
@@ -247,6 +261,7 @@ export const UsersTable: FC<Props> = props => {
                 ]),
             {
                 className: styles.blockColumnAction,
+                columnId: 'Action',
                 label: 'Action',
                 renderer: (data: UserInfo) => {
                     function onSelectOption(item: string): void {
@@ -352,6 +367,9 @@ export const UsersTable: FC<Props> = props => {
                 onToggleSort={setSort}
                 showExpand
                 removeDefaultSort
+                className={styles.desktopTable}
+                colWidth={colWidth}
+                setColWidth={setColWidth}
             />
             {props.allUsers.length > 0 && (
                 <Pagination
diff --git a/src/apps/admin/src/lib/hooks/useManagePermissionGroupMembers.ts b/src/apps/admin/src/lib/hooks/useManagePermissionGroupMembers.ts
index ec466edf3..acbabf3dc 100644
--- a/src/apps/admin/src/lib/hooks/useManagePermissionGroupMembers.ts
+++ b/src/apps/admin/src/lib/hooks/useManagePermissionGroupMembers.ts
@@ -381,7 +381,7 @@ export interface useManagePermissionGroupMembersProps {
         filterCriteria: FormGroupMembersFilters,
         memberType: string,
     ) => void
-    doRemoveGroupMember: (memberId: number) => void
+    doRemoveGroupMember: (memberId: number, memberType: string) => void
     doRemoveGroupMembers: (
         memberIds: number[],
         callBack: () => void,
@@ -590,16 +590,23 @@ export function useManagePermissionGroupMembers(
     )
 
     const doRemoveGroupMember = useCallback(
-        (memberId: number) => {
+        (memberId: number, memberType: string) => {
             dispatch({
                 payload: memberId,
                 type: GroupsActionType.REMOVE_GROUP_MEMBERS_INIT,
             })
             removeGroupMember(groupId, memberId)
                 .then(() => {
-                    toast.success('Member removed successfully', {
-                        toastId: 'Remove group member',
-                    })
+                    if (memberType === 'group') {
+                        toast.success('Group removed successfully', {
+                            toastId: 'Remove group member',
+                        })
+                    } else {
+                        toast.success('Member removed successfully', {
+                            toastId: 'Remove group member',
+                        })
+                    }
+
                     dispatch({
                         payload: memberId,
                         type: GroupsActionType.REMOVE_GROUP_MEMBERS_DONE,
diff --git a/src/apps/admin/src/lib/hooks/useManagePermissionGroups.ts b/src/apps/admin/src/lib/hooks/useManagePermissionGroups.ts
index 53541d173..702cbc734 100644
--- a/src/apps/admin/src/lib/hooks/useManagePermissionGroups.ts
+++ b/src/apps/admin/src/lib/hooks/useManagePermissionGroups.ts
@@ -145,10 +145,14 @@ export function useManagePermissionGroups(
                 _.forEach(result, group => {
                     if (group.createdBy) {
                         loadUser(group.createdBy)
+                    } else {
+                        group.createdByHandle = ''
                     }
 
                     if (group.updatedBy) {
                         loadUser(group.updatedBy)
+                    } else {
+                        group.updatedByHandle = ''
                     }
                 })
             })
diff --git a/src/apps/admin/src/lib/hooks/useManagePermissionRoleMembers.ts b/src/apps/admin/src/lib/hooks/useManagePermissionRoleMembers.ts
index df67b4205..b2bd48e76 100644
--- a/src/apps/admin/src/lib/hooks/useManagePermissionRoleMembers.ts
+++ b/src/apps/admin/src/lib/hooks/useManagePermissionRoleMembers.ts
@@ -78,9 +78,10 @@ const reducer = (
 
         case RolesActionType.FETCH_ROLE_MEMBERS_DONE: {
             const roleInfo = action.payload
-            const allRoleMembers = (roleInfo.subjects || []).map(
-                memberId => ({ id: memberId }),
-            )
+            const allRoleMembers = (roleInfo.subjects || []).map(subject => ({
+                handle: subject.handle ?? '',
+                id: `${subject.userId ?? ''}`,
+            }))
             return {
                 ...previousState,
                 allRoleMembers,
diff --git a/src/apps/admin/src/lib/hooks/useManagePermissionRoles.ts b/src/apps/admin/src/lib/hooks/useManagePermissionRoles.ts
index 0e57a0b90..9c2b2a151 100644
--- a/src/apps/admin/src/lib/hooks/useManagePermissionRoles.ts
+++ b/src/apps/admin/src/lib/hooks/useManagePermissionRoles.ts
@@ -157,10 +157,14 @@ export function useManagePermissionRoles(
                 _.forEach(result, role => {
                     if (role.createdBy) {
                         loadUser(role.createdBy)
+                    } else {
+                        role.createdByHandle = ''
                     }
 
                     if (role.modifiedBy) {
                         loadUser(role.modifiedBy)
+                    } else {
+                        role.modifiedByHandle = ''
                     }
                 })
             })
diff --git a/src/apps/admin/src/lib/hooks/useTableFilterLocal.ts b/src/apps/admin/src/lib/hooks/useTableFilterLocal.ts
index fc518fde5..f371440a5 100644
--- a/src/apps/admin/src/lib/hooks/useTableFilterLocal.ts
+++ b/src/apps/admin/src/lib/hooks/useTableFilterLocal.ts
@@ -7,6 +7,7 @@ import _ from 'lodash'
 import { Sort } from '~/apps/gamification-admin/src/game-lib'
 
 import { TABLE_PAGINATION_ITEM_PER_PAGE } from '../../config/index.config'
+import { checkIsDateObject, checkIsNumberObject, checkIsStringNumeric } from '../utils'
 
 export interface useTableFilterLocalProps<T> {
     page: number
@@ -54,15 +55,40 @@ export function useTableFilterLocal<T>(
                 sortField = mappingSortField[sortField]
             }
 
+            let isNumberString = false
+            let isDateObject = false
+            let isNumberObject = false
+            _.forEach(datas, data => {
+                const value = (data as Record<string, any>)[sortField]
+                if (value) {
+                    isNumberString = checkIsStringNumeric(value)
+                    isDateObject = checkIsDateObject(value)
+                    isNumberObject = checkIsNumberObject(value)
+                    // eslint-disable-next-line no-useless-return
+                    return
+                }
+            })
+
             datas = [...datas].sort((a, b) => {
-                const aValue = (a as Record<string, any>)[sortField]
-                const bValue = (b as Record<string, any>)[sortField]
+                let aValue = (a as Record<string, any>)[sortField]
+                let bValue = (b as Record<string, any>)[sortField]
+
+                if (isNumberString) {
+                    aValue = Number(aValue)
+                    bValue = Number(bValue)
+                }
+
+                if (isDateObject || isNumberObject || isNumberString) {
+                    let compareValue = 0
+                    if (aValue > bValue) {
+                        compareValue = 1
+                    } else if (aValue < bValue) {
+                        compareValue = -1
+                    }
 
-                // Add special case for id field
-                if (sortField === 'id') {
                     return sort.direction === 'asc'
-                        ? Number(aValue) - Number(bValue)
-                        : Number(bValue) - Number(aValue)
+                        ? compareValue
+                        : -compareValue
                 }
 
                 // Existing string comparison logic
diff --git a/src/apps/admin/src/lib/models/UserRole.model.ts b/src/apps/admin/src/lib/models/UserRole.model.ts
index aa6326187..f15777868 100644
--- a/src/apps/admin/src/lib/models/UserRole.model.ts
+++ b/src/apps/admin/src/lib/models/UserRole.model.ts
@@ -16,7 +16,11 @@ export interface UserRole {
     modifiedAt: Date
     modifiedAtString?: string
     modifiedByHandle?: string
-    subjects?: string[]
+    subjects?: {
+        email?: null | string
+        handle?: null | string
+        userId?: null | number
+    }[]
 }
 
 /**
diff --git a/src/apps/admin/src/lib/utils/index.ts b/src/apps/admin/src/lib/utils/index.ts
index 619e1330b..93e9bfb22 100644
--- a/src/apps/admin/src/lib/utils/index.ts
+++ b/src/apps/admin/src/lib/utils/index.ts
@@ -1,2 +1,4 @@
 export * from './api'
 export * from './validation'
+export * from './string'
+export * from './others'
diff --git a/src/apps/admin/src/lib/utils/others.ts b/src/apps/admin/src/lib/utils/others.ts
new file mode 100644
index 000000000..2d8cbfa1b
--- /dev/null
+++ b/src/apps/admin/src/lib/utils/others.ts
@@ -0,0 +1,21 @@
+/**
+ * Util for other check
+ */
+
+/**
+ * Check if object is date
+ * @param date date object
+ * @returns true if object is date
+ */
+export function checkIsDateObject(date: any): boolean {
+    return Object.prototype.toString.call(date) === '[object Date]'
+}
+
+/**
+ * Check if object is number
+ * @param numberObject number object
+ * @returns true if object is number
+ */
+export function checkIsNumberObject(numberObject: any): boolean {
+    return typeof numberObject === 'number'
+}
diff --git a/src/apps/admin/src/lib/utils/string.ts b/src/apps/admin/src/lib/utils/string.ts
new file mode 100644
index 000000000..c64c86cab
--- /dev/null
+++ b/src/apps/admin/src/lib/utils/string.ts
@@ -0,0 +1,18 @@
+/**
+ * Util for string
+ */
+
+/**
+ * Check if string is number
+ * @param str string to check
+ * @returns if string is numberic
+ */
+export function checkIsStringNumeric(str: string): boolean {
+    if (typeof str !== 'string') return false // we only process strings!
+    return (
+        !Number.isNaN(str as any)
+        && !Number.isNaN(parseFloat(str)) // use type coercion to parse the
+        // _entirety_ of the string (`parseFloat` alone does not do this)
+        // and ensure strings of whitespace fail
+    )
+}
diff --git a/src/apps/admin/src/permission-management/PermissionGroupMembersPage/PermissionGroupMembersPage.tsx b/src/apps/admin/src/permission-management/PermissionGroupMembersPage/PermissionGroupMembersPage.tsx
index 1ff610dcf..ea85c8010 100644
--- a/src/apps/admin/src/permission-management/PermissionGroupMembersPage/PermissionGroupMembersPage.tsx
+++ b/src/apps/admin/src/permission-management/PermissionGroupMembersPage/PermissionGroupMembersPage.tsx
@@ -152,7 +152,7 @@ export const PermissionGroupMembersPage: FC<Props> = (props: Props) => {
                                         {(groupMembers[memberType] || [])
                                             .length === 0 ? (
                                                 <p className={styles.noRecordFound}>
-                                                    No members
+                                                    No groups
                                                 </p>
                                             ) : (
                                                 <div className={styles.blockTableContainer}>
diff --git a/src/libs/ui/lib/components/table/Table.tsx b/src/libs/ui/lib/components/table/Table.tsx
index af302b8b1..629aee29c 100644
--- a/src/libs/ui/lib/components/table/Table.tsx
+++ b/src/libs/ui/lib/components/table/Table.tsx
@@ -1,7 +1,9 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 
+import { useWindowSize, WindowSize } from '~/libs/shared'
+
 import { Button } from '../button'
 import { Sort } from '../../../../../apps/gamification-admin/src/game-lib/pagination'
 import { IconOutline } from '../svgs'
@@ -18,6 +20,8 @@ function getKey(key: string | number): string {
     return `${key}`
 }
 
+export type colWidthType = {[key: string]: number}
+
 interface TableProps<T> {
     readonly columns: ReadonlyArray<TableColumn<T>>
     readonly data: ReadonlyArray<T>
@@ -30,6 +34,9 @@ interface TableProps<T> {
     readonly onRowClick?: (data: T) => void
     readonly onToggleSort?: (sort: Sort) => void
     readonly removeDefaultSort?: boolean
+    readonly colWidth?: colWidthType | undefined,
+    readonly setColWidth?: Dispatch<SetStateAction<colWidthType>> | undefined
+    readonly className?: string
 }
 
 interface DefaultSortDirectionMap {
@@ -38,6 +45,11 @@ interface DefaultSortDirectionMap {
 
 const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) => JSX.Element
     = <T extends { [propertyName: string]: any }>(props: TableProps<T>) => {
+        const { width: screenWidth }: WindowSize = useWindowSize()
+        const tableRef = useRef<HTMLTableElement>(null)
+        const screenWidthBkRef = useRef<number>(0)
+        const colWidthInput = props.colWidth
+        const setColWidth = props.setColWidth
 
         const [sort, setSort]: [Sort | undefined, Dispatch<SetStateAction<Sort | undefined>>]
             = useState<Sort | undefined>(
@@ -61,6 +73,52 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
         const [sortedData, setSortedData]: [ReadonlyArray<T>, Dispatch<SetStateAction<ReadonlyArray<T>>>]
             = useState<ReadonlyArray<T>>(props.data)
 
+        useEffect(() => {
+            if (_.isEmpty(colWidthInput) && colWidthInput) {
+                setTimeout(() => {
+                    let haveColumnWidth = true
+                    const colWidthBk: { [key: string]: number } = {}
+                    _.forEach(displayColumns, column => {
+                        const columnId = `column-id-${column.columnId}-`
+                        const colElement = tableRef.current?.querySelector(
+                            `.${columnId}`,
+                        )
+                        const computedStyle = colElement
+                            ? getComputedStyle(colElement)
+                            : { paddingLeft: '0', paddingRight: '0' }
+                        let colWidth = colElement?.clientWidth ?? 0
+                        if (!!colWidth) {
+                            colWidth
+                                -= parseFloat(computedStyle.paddingLeft)
+                                + parseFloat(computedStyle.paddingRight)
+                        }
+
+                        colWidthBk[`column-id-${column.columnId}-`] = colWidth
+                        if (!colWidth) {
+                            haveColumnWidth = false
+                        }
+                    })
+                    if (haveColumnWidth) {
+                        setColWidth?.(colWidthBk)
+                    }
+                }, 10)
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [sortedData, colWidthInput])
+        useEffect(() => {
+            if (!screenWidthBkRef.current) {
+                screenWidthBkRef.current = screenWidth
+                return // do not reset col width on init
+            }
+
+            if (!_.isEmpty(colWidthInput) && screenWidthBkRef.current !== screenWidth) {
+                setColWidth?.({})
+            }
+
+            screenWidthBkRef.current = screenWidth
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [screenWidth])
+
         useEffect(() => {
             if (
                 (props.forceSort || props.removeDefaultSort)
@@ -138,15 +196,18 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                 const isCurrentlySorted: boolean = isSortable && col.propertyName === sort?.fieldName
                 const colorClass: string = isCurrentlySorted ? 'black-100' : 'black-60'
                 const sortableClass: string | undefined = isSortable ? styles.sortable : undefined
+                const columnId = `column-id-${col.columnId}-`
+                const colWidth = colWidthInput?.[columnId]
                 return (
                     <th
-                        className={styles.th}
+                        className={classNames(styles.th, columnId)}
                         key={getKey(index)}
                     >
                         <div
                             className={
                                 classNames(styles['header-container'], styles[col.type], colorClass, sortableClass)
                             }
+                            style={colWidth ? { width: `${colWidth}px` } : {}}
                         >
                             {typeof col.label === 'function' ? col.label() : col.label}
                             {!!col.tooltip && (
@@ -180,13 +241,14 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                     columns={props.columns}
                     index={index}
                     showExpand={props.showExpand}
+                    colWidth={colWidthInput}
                 />
             ))
 
         return (
             /* TODO: sticky header */
-            <div className={styles['table-wrap']}>
-                <table className={styles.table}>
+            <div className={classNames(styles['table-wrap'], props.className)}>
+                <table ref={tableRef} className={styles.table}>
                     <thead>
                         <tr className={styles.tr}>
                             {headerRow}
diff --git a/src/libs/ui/lib/components/table/index.ts b/src/libs/ui/lib/components/table/index.ts
index 396d852ea..53d659d6a 100644
--- a/src/libs/ui/lib/components/table/index.ts
+++ b/src/libs/ui/lib/components/table/index.ts
@@ -1,3 +1,4 @@
 export * from './table-column.model'
 export { tableGetDefaultSort } from './table-functions'
+export type { colWidthType } from './Table'
 export { default as Table } from './Table'
diff --git a/src/libs/ui/lib/components/table/table-cell/TableCell.tsx b/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
index c4b48f439..561520d05 100644
--- a/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
+++ b/src/libs/ui/lib/components/table/table-cell/TableCell.tsx
@@ -1,4 +1,4 @@
-import { ElementType, MouseEvent } from 'react'
+import { CSSProperties, ElementType, MouseEvent } from 'react'
 import classNames from 'classnames'
 
 import { IconOutline } from '~/libs/ui'
@@ -23,6 +23,7 @@ interface TableCellProps<T> {
     readonly showExpandIndicator?: boolean
     readonly isExpanded?: boolean
     readonly colSpan?: number
+    readonly style?: CSSProperties
 }
 
 const TableCell: <T extends { [propertyName: string]: any }>(
@@ -92,6 +93,7 @@ const TableCell: <T extends { [propertyName: string]: any }>(
                     'TableCell_blockCell',
                 )}
                 onClick={onClick}
+                style={props.style}
             >
                 {props.showExpandIndicator && (
                     <IconOutline.ChevronRightIcon
diff --git a/src/libs/ui/lib/components/table/table-column.model.ts b/src/libs/ui/lib/components/table/table-column.model.ts
index 3421f9a11..d0fb0d15c 100644
--- a/src/libs/ui/lib/components/table/table-column.model.ts
+++ b/src/libs/ui/lib/components/table/table-column.model.ts
@@ -12,4 +12,5 @@ export interface TableColumn<T> {
     readonly colSpan?: number
     readonly type: TableCellType
     readonly isSortable?: boolean
+    readonly columnId?: string
 }
diff --git a/src/libs/ui/lib/components/table/table-row/TableRow.tsx b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
index 60fd3be33..87a381015 100644
--- a/src/libs/ui/lib/components/table/table-row/TableRow.tsx
+++ b/src/libs/ui/lib/components/table/table-row/TableRow.tsx
@@ -21,6 +21,7 @@ interface Props<T> {
     readonly columns: ReadonlyArray<TableColumn<T>>
     index: number
     readonly showExpand?: boolean
+    colWidth?: {[key: string]: number}
 }
 
 export const TableRow: <T extends { [propertyName: string]: any }>(
@@ -44,23 +45,28 @@ export const TableRow: <T extends { [propertyName: string]: any }>(
         return _.filter(props.columns, item => !!item.isExpand)
     }, [props.columns, props.showExpand])
     // get the cells in the row
-    const cells: Array<JSX.Element> = displayColumns.map((col, colIndex) => (
-        <TableCell
-            {...col}
-            data={props.data}
-            index={props.index}
-            key={getKey(`${props.index}${colIndex}`)}
-            showExpandIndicator={colIndex === 0 && props.showExpand}
-            isExpanded={isExpanded && colIndex === 0}
-            onExpand={
-                props.showExpand
-                    ? function onExpand() {
-                        setIsExpanded(!isExpanded)
-                    }
-                    : undefined
-            }
-        />
-    ))
+    const cells: Array<JSX.Element> = displayColumns.map((col, colIndex) => {
+        const columnId = `column-id-${col.columnId}-`
+        const colWidth = props.colWidth?.[columnId]
+        return (
+            <TableCell
+                {...col}
+                data={props.data}
+                index={props.index}
+                key={getKey(`${props.index}${colIndex}`)}
+                showExpandIndicator={colIndex === 0 && props.showExpand}
+                isExpanded={isExpanded && colIndex === 0}
+                onExpand={
+                    props.showExpand
+                        ? function onExpand() {
+                            setIsExpanded(!isExpanded)
+                        }
+                        : undefined
+                }
+                style={colWidth ? { width: `${colWidth}px` } : {}}
+            />
+        )
+    })
 
     return (
         <>
@@ -89,35 +95,40 @@ export const TableRow: <T extends { [propertyName: string]: any }>(
                 >
                     <td colSpan={displayColumns.length}>
                         <div className={styles.blockExpandContainer}>
-                            {expandColumns.map((col, colIndex) => (
-                                <div
-                                    key={getKey(`${props.index}${colIndex}`)}
-                                    className={styles.blockExpandItem}
-                                >
-                                    <strong
-                                        className={classNames(
-                                            styles.blockExpandCell,
-                                            styles.blockExpandTitle,
-                                            'TableRow_blockExpandTitle',
-                                        )}
+                            {expandColumns.map((col, colIndex) => {
+                                const columnId = `column-id-${col.columnId}-`
+                                const colWidth = props.colWidth?.[columnId]
+                                return (
+                                    <div
+                                        key={getKey(`${props.index}${colIndex}`)}
+                                        className={styles.blockExpandItem}
                                     >
-                                        {col.label as string}
-                                        :
-                                    </strong>
-                                    <TableCell
-                                        {...col}
-                                        data={props.data}
-                                        index={props.index}
-                                        as='div'
-                                        className={classNames(
-                                            styles.blockExpandCell,
-                                            styles.blockExpandValue,
-                                            col.className,
-                                            'TableCell_blockExpandValue',
-                                        )}
-                                    />
-                                </div>
-                            ))}
+                                        <strong
+                                            className={classNames(
+                                                styles.blockExpandCell,
+                                                styles.blockExpandTitle,
+                                                'TableRow_blockExpandTitle',
+                                            )}
+                                        >
+                                            {col.label as string}
+                                            :
+                                        </strong>
+                                        <TableCell
+                                            {...col}
+                                            data={props.data}
+                                            index={props.index}
+                                            as='div'
+                                            className={classNames(
+                                                styles.blockExpandCell,
+                                                styles.blockExpandValue,
+                                                col.className,
+                                                'TableCell_blockExpandValue',
+                                            )}
+                                            style={colWidth ? { width: `${colWidth}px` } : {}}
+                                        />
+                                    </div>
+                                )
+                            })}
                         </div>
                     </td>
                 </tr>
diff --git a/src/libs/ui/lib/components/table/table-sort/TableSort.module.scss b/src/libs/ui/lib/components/table/table-sort/TableSort.module.scss
new file mode 100644
index 000000000..2b523a57c
--- /dev/null
+++ b/src/libs/ui/lib/components/table/table-sort/TableSort.module.scss
@@ -0,0 +1,5 @@
+.btnSort {
+    &:disabled {
+        opacity: 0.3;
+    }
+}
diff --git a/src/libs/ui/lib/components/table/table-sort/TableSort.tsx b/src/libs/ui/lib/components/table/table-sort/TableSort.tsx
index 969bbe92b..c5a04797c 100644
--- a/src/libs/ui/lib/components/table/table-sort/TableSort.tsx
+++ b/src/libs/ui/lib/components/table/table-sort/TableSort.tsx
@@ -5,6 +5,8 @@ import { Sort } from '../../../../../../apps/gamification-admin/src/game-lib/pag
 import { IconOutline } from '../../svgs'
 import { Button } from '../../button'
 
+import styles from './TableSort.module.scss'
+
 interface TableSortProps {
     iconClass: string
     isCurrentlySorted: boolean
@@ -34,7 +36,7 @@ const TableSort: FC<TableSortProps> = (props: TableSortProps) => {
 
     return (
         <Button
-            className={classNames(props.iconClass, 'TableSort')}
+            className={classNames(props.iconClass, 'TableSort', styles.btnSort)}
             icon={icon}
             onClick={handleClick}
             size='sm'
diff --git a/src/libs/ui/lib/hooks/use-window-size.hook.ts b/src/libs/ui/lib/hooks/use-window-size.hook.ts
new file mode 100644
index 000000000..e080bad67
--- /dev/null
+++ b/src/libs/ui/lib/hooks/use-window-size.hook.ts
@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'
+
+export interface WindowSize {
+  height: number
+  width: number
+}
+
+export function useWindowSize(): WindowSize {
+    const [windowSize, setWindowSize]: [WindowSize, Dispatch<SetStateAction<WindowSize>>] = useState({
+        height: 0,
+        width: 0,
+    })
+
+    const handleResize: () => void = useCallback(() => {
+    // Set window width/height to state
+        setWindowSize({
+            height: window.innerHeight,
+            width: window.innerWidth,
+        })
+    }, [])
+
+    useEffect(() => {
+    // Add event listener
+        window.addEventListener('resize', handleResize)
+
+        // Call handler right away so state gets updated with initial window size
+        handleResize()
+
+        // Remove event listener on cleanup
+        return () => window.removeEventListener('resize', handleResize)
+    }, [handleResize]) // Empty array ensures that effect is only run on mount
+
+    return windowSize
+}