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 } }