diff --git a/web/default/src/components/data-table/layout/card-row-content.tsx b/web/default/src/components/data-table/layout/card-row-content.tsx
index ab0996ed..aadaf746 100644
--- a/web/default/src/components/data-table/layout/card-row-content.tsx
+++ b/web/default/src/components/data-table/layout/card-row-content.tsx
@@ -16,13 +16,27 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
-import type { Row } from '@tanstack/react-table'
+import type { Cell, Row } from '@tanstack/react-table'
import * as React from 'react'
import { StatusBadgeTypeContext } from '@/components/status-badge'
import { getCellLabel, renderCellContent } from './card-cell-utils'
+function orderCardCells(
+ cells: Cell[]
+): Cell[] {
+ return [...cells].sort((a, b) => {
+ const aOrder = a.column.columnDef.meta?.mobileOrder
+ const bOrder = b.column.columnDef.meta?.mobileOrder
+
+ if (aOrder == null && bOrder == null) return 0
+ if (aOrder == null) return 1
+ if (bOrder == null) return -1
+ return aOrder - bOrder
+ })
+}
+
/**
* Shared, column-meta-driven card content rendering for TanStack rows.
*
@@ -62,12 +76,14 @@ function CompactContent({ row }: { row: Row }) {
const titleCell = allCells.find((_, i) => cellMetas[i]?.mobileTitle)
const badgeCell = allCells.find((_, i) => cellMetas[i]?.mobileBadge)
const actionsCell = allCells.find((c) => c.column.id === 'actions')
- const fieldCells = allCells.filter(
- (c, i) =>
- c !== titleCell &&
- c !== badgeCell &&
- c !== actionsCell &&
- !cellMetas[i]?.mobileHidden
+ const fieldCells = orderCardCells(
+ allCells.filter(
+ (c, i) =>
+ c !== titleCell &&
+ c !== badgeCell &&
+ c !== actionsCell &&
+ !cellMetas[i]?.mobileHidden
+ )
)
return (
@@ -135,8 +151,10 @@ function FallbackContent({ row }: { row: Row }) {
)
const actionsCell = allCells.find((c) => c.column.id === 'actions')
- const contentCells = allCells.filter(
- (c, i) => c.column.id !== 'actions' && !cellMetas[i]?.mobileHidden
+ const contentCells = orderCardCells(
+ allCells.filter(
+ (c, i) => c.column.id !== 'actions' && !cellMetas[i]?.mobileHidden
+ )
)
return (
diff --git a/web/default/src/features/users/components/users-columns.tsx b/web/default/src/features/users/components/users-columns.tsx
index d1845d85..964132e5 100644
--- a/web/default/src/features/users/components/users-columns.tsx
+++ b/web/default/src/features/users/components/users-columns.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
-import { type ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { BadgeCell } from '@/components/data-table'
@@ -40,7 +40,7 @@ import {
USER_ROLES,
isUserDeleted,
} from '../constants'
-import { type User } from '../types'
+import type { User } from '../types'
import { DataTableRowActions } from './data-table-row-actions'
function getQuotaProgressColor(percentage: number): string {
@@ -80,11 +80,14 @@ export function useUsersColumns(): ColumnDef[] {
header: t('ID'),
cell: ({ row }) => {
return (
-
+
)
},
size: 80,
- meta: { mobileHidden: true },
+ meta: { mobileOrder: 10 },
},
{
accessorKey: 'username',
@@ -224,6 +227,7 @@ export function useUsersColumns(): ColumnDef[] {
)
},
size: 170,
+ meta: { mobileOrder: 40 },
},
{
accessorKey: 'group',
@@ -242,6 +246,7 @@ export function useUsersColumns(): ColumnDef[] {
return group.includes(searchValue)
},
size: 140,
+ meta: { mobileOrder: 30 },
},
{
accessorKey: 'role',
@@ -268,6 +273,7 @@ export function useUsersColumns(): ColumnDef[] {
},
enableSorting: false,
size: 120,
+ meta: { mobileOrder: 20 },
},
{
id: 'invite_info',
diff --git a/web/default/src/i18n/locales/fr.json b/web/default/src/i18n/locales/fr.json
index 8ff9c68a..dc205dc3 100644
--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@@ -3718,7 +3718,7 @@
"Right to Left": "De droite à gauche",
"Role": "Rôle",
"Roleplay": "Roleplay",
- "Root": "Racine",
+ "Root": "Root",
"Rose Garden": "Jardin de roses",
"Route": "Route",
"Route active": "Route active",
diff --git a/web/default/src/i18n/locales/ja.json b/web/default/src/i18n/locales/ja.json
index 1bbcf897..1b4edda6 100644
--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@@ -3718,7 +3718,7 @@
"Right to Left": "右から左",
"Role": "ロール",
"Roleplay": "ロールプレイ",
- "Root": "ルート",
+ "Root": "Root",
"Rose Garden": "ローズガーデン",
"Route": "ルート",
"Route active": "ルート有効",
diff --git a/web/default/src/i18n/locales/ru.json b/web/default/src/i18n/locales/ru.json
index a9044cb6..1d809f52 100644
--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@@ -3718,7 +3718,7 @@
"Right to Left": "Справа налево",
"Role": "Роль",
"Roleplay": "Ролевые игры",
- "Root": "Корень",
+ "Root": "Root",
"Rose Garden": "Розовый сад",
"Route": "Маршрут",
"Route active": "Маршрут активен",
diff --git a/web/default/src/i18n/locales/vi.json b/web/default/src/i18n/locales/vi.json
index 0fb82378..ce45754c 100644
--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@@ -3718,7 +3718,7 @@
"Right to Left": "Phải sang trái",
"Role": "Vai trò",
"Roleplay": "Nhập vai",
- "Root": "Gốc",
+ "Root": "Root",
"Rose Garden": "Vườn hoa hồng",
"Route": "Tuyến đường",
"Route active": "Tuyến đang hoạt động",
diff --git a/web/default/src/i18n/locales/zh.json b/web/default/src/i18n/locales/zh.json
index e78ac5b4..2d6590d9 100644
--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@@ -3718,7 +3718,7 @@
"Right to Left": "从右到左",
"Role": "角色",
"Roleplay": "角色扮演",
- "Root": "根",
+ "Root": "Root",
"Rose Garden": "玫瑰花园",
"Route": "路由",
"Route active": "路由已启用",
diff --git a/web/default/src/tanstack-table.d.ts b/web/default/src/tanstack-table.d.ts
index 9709eee2..10d2022c 100644
--- a/web/default/src/tanstack-table.d.ts
+++ b/web/default/src/tanstack-table.d.ts
@@ -28,5 +28,6 @@ declare module '@tanstack/react-table' {
mobileTitle?: boolean // card title area (left, larger text)
mobileBadge?: boolean // status badge alongside title (right)
mobileHidden?: boolean // hide this column on mobile entirely
+ mobileOrder?: number // lower values appear first in card field area
}
}