From 27b2b2c4b95536fb832b9e9059ab00ec79d7e5d9 Mon Sep 17 00:00:00 2001 From: QuentinHsu Date: Fri, 12 Jun 2026 23:18:22 +0800 Subject: [PATCH] perf(data-table): improve data table layout and badge display (#5460) * perf(table): use percentage-based column widths - compute each column's width as a percentage of total column size instead of a fixed pixel value, letting the colgroup scale fluidly with the table container. * perf(data-table): reduce unnecessary re-renders across table components - stabilize commitSearchValue in toolbar by reading table/searchKey via refs, eliminating recreation on every parent render - store onColumnFiltersChange in a ref so debounce effect is not reset when the caller passes a new function reference each render - wrap DataTableRow in React.memo with a custom comparator that ignores getColumnClassName reference churn - memoize selectedValues Set in DataTableFacetedFilter and wrap with React.memo to prevent rerenders on unrelated state changes - cache cell meta reads in CompactRow and FallbackRow to a single pass per row; memoize hasCompactMeta in MobileCardList - memoize hideable columns list in DataTableViewOptions and colSpan in DataTableView - remove tableClassName and colgroup from scroll-sync effect deps; cache toolbar button NodeList via useLayoutEffect to avoid per-keydown DOM queries * perf(data-table): replace scroll-sync split header with CSS sticky - remove JS scroll-sync effect and event listener between split header and body containers. - merge separate header/body tables into a single scrollable table element, reducing DOM complexity. - apply CSS sticky positioning to the header for a simpler, hardware-accelerated freeze effect. * fix(data-table): replace opacity muted colors with color-mix - switch from bg-muted/50 and bg-muted/30 to color-mix(in oklch) to produce opaque blended backgrounds that prevent scroll content from showing through pinned cells. - expose --table-header-bg CSS variable so pinned header cells inherit the exact same computed color as the thead background. - add group class to TableRow to enable group-hover selectors on pinned cell styles. * feat(data-table): support column pinning via meta.pinned - add pinned?: 'left' | 'right' to ColumnMeta so pinning is declared once in the column definition and applies to both header and body automatically - DataTableView derives pinnedColumns from meta.pinned at runtime, merged with any explicit pinnedColumns prop; explicit entries take precedence - add header and meta.pinned: 'right' to all actions columns across channels, users, api-keys, redemption-codes, models, deployments, and subscriptions tables * style(row-actions): align action buttons to leading edge of column * refactor(data-table): extract BadgeListCell and centralize badge alignment - add BadgeListCell component to data-table for badge lists with overflow tooltip, replacing duplicated renderLimitedItems helpers in channels, models, and pricing columns - move StatusBadge -ml-1.5 alignment into the component itself via a table-cell context selector, so callers no longer need manual offset wrappers - remove the table-cell-level -ml-1.5 selector from TableCell now that alignment is handled by StatusBadge directly * style(row-actions): offset action buttons to align with column header text * refactor(data-table): consolidate mobile meta into ColumnMeta declaration - move mobileTitle, mobileBadge, mobileHidden into the global ColumnMeta augmentation so the type is shared across the project - remove the local MobileColumnMeta interface and getCellMeta helper from mobile-card-list.tsx - direct col.columnDef.meta access is now type-safe without explicit casting * refactor(data-table): simplify column header and meta config - auto-render string `header` values via DataTableColumnHeader so sortable/non-sortable columns work without boilerplate function wrappers - promote mobile layout hints (mobileTitle, mobileBadge, mobileHidden) into the global ColumnMeta type, removing the local MobileColumnMeta cast in mobile-card-list - migrate all column files from `meta: { label }` to top-level `header: t('...')`, cutting ~180 lines of repetitive template code - ViewOptions and MobileCardList label resolution now reads string header first, then meta.label as fallback * feat(status-badge): add text and underline display types - introduce StatusBadgeType ('badge' | 'text' | 'underline') and StatusBadgeTypeContext so ancestors can override rendering without touching call sites - mobile card field rows now use the text type via context, showing badges as plain colored text instead of pills - ProviderBadge gains data-slot='provider-badge' to enable targeted CSS resets in compact layouts - replace the implicit [[data-slot=table-cell]>&]:-ml-1.5 rule with explicit -ml-1.5 at each column call site * refactor(data-table): simplify table filtering internals - derive toolbar search state from the active table filter to avoid render-time ref writes. - extract faceted filter selection updates into a pure helper for clearer single and multi-select behavior. - split pinned column resolution into focused helpers so explicit and meta pins merge predictably. Co-authored-by: t0ng7u --- .../data-table/core/badge-list-cell.tsx | 74 +++++ .../data-table/core/column-pinning.ts | 4 +- .../data-table/core/data-table-colgroup.tsx | 15 +- .../data-table/core/data-table-header.tsx | 26 +- .../data-table/core/data-table-row.tsx | 15 +- .../data-table/core/data-table-view.tsx | 125 ++++---- .../hooks/use-debounced-column-filter.ts | 6 +- .../src/components/data-table/index.ts | 1 + .../data-table/layout/data-table-page.tsx | 2 +- .../data-table/layout/mobile-card-list.tsx | 83 +++--- .../static/static-data-table-classnames.ts | 2 +- .../data-table/toolbar/bulk-actions.tsx | 9 +- .../data-table/toolbar/faceted-filter.tsx | 61 ++-- .../components/data-table/toolbar/toolbar.tsx | 106 ++++--- .../data-table/toolbar/view-options.tsx | 43 +-- web/default/src/components/provider-badge.tsx | 10 +- web/default/src/components/status-badge.tsx | 36 ++- web/default/src/components/ui/table.tsx | 4 +- .../channels/components/channels-columns.tsx | 144 +++------- .../components/data-table-row-actions.tsx | 2 +- .../keys/components/api-keys-columns.tsx | 62 ++-- .../components/data-table-row-actions.tsx | 2 +- .../components/data-table-row-actions.tsx | 4 +- .../models/components/deployments-columns.tsx | 33 +-- .../models/components/models-columns.tsx | 266 +++++------------- .../pricing/components/pricing-columns.tsx | 127 ++------- .../components/data-table-row-actions.tsx | 4 +- .../components/redemptions-columns.tsx | 54 ++-- .../components/data-table-row-actions.tsx | 4 +- .../components/subscriptions-columns.tsx | 63 ++--- .../models/model-ratio-table-columns.tsx | 3 +- .../columns/common-logs-columns.tsx | 45 +-- .../columns/drawing-logs-columns.tsx | 34 +-- .../components/columns/task-logs-columns.tsx | 28 +- .../components/data-table-row-actions.tsx | 4 +- .../users/components/users-columns.tsx | 59 ++-- web/default/src/tanstack-table.d.ts | 11 +- 37 files changed, 694 insertions(+), 877 deletions(-) create mode 100644 web/default/src/components/data-table/core/badge-list-cell.tsx diff --git a/web/default/src/components/data-table/core/badge-list-cell.tsx b/web/default/src/components/data-table/core/badge-list-cell.tsx new file mode 100644 index 00000000..74128ce9 --- /dev/null +++ b/web/default/src/components/data-table/core/badge-list-cell.tsx @@ -0,0 +1,74 @@ +/* +Copyright (C) 2023-2026 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ +import * as React from 'react' +import { StatusBadgeList } from '@/components/status-badge' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' + +interface BadgeListCellProps { + items: React.ReactNode[] + max?: number + tooltipClassName?: string +} + +/** + * Table cell renderer for a list of badges with overflow tooltip. + * Displays up to `max` badges inline; remaining items appear in a tooltip. + * Applies -ml-1.5 to compensate for badge px-1.5 and align with column header. + */ +export function BadgeListCell({ + items, + max = 2, + tooltipClassName, +}: BadgeListCellProps) { + if (items.length === 0) { + return - + } + + const showTooltip = items.length > max + + return ( + + + }> + item} + /> + + {showTooltip && ( + +
{items}
+ + )} + + + ) +} diff --git a/web/default/src/components/data-table/core/column-pinning.ts b/web/default/src/components/data-table/core/column-pinning.ts index ed86ea14..fb43dfe9 100644 --- a/web/default/src/components/data-table/core/column-pinning.ts +++ b/web/default/src/components/data-table/core/column-pinning.ts @@ -63,8 +63,8 @@ function getPinnedColumnClassName( pinnedColumn.side === 'left' ? 'left-0' : 'right-0', edgeClassName, kind === 'header' - ? 'bg-background z-30' - : 'bg-background z-10 group-hover:bg-muted group-data-[state=selected]:bg-muted', + ? '[background-color:var(--table-header-bg,var(--background))] group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] z-30' + : 'bg-background z-10 group-hover:[background-color:color-mix(in_oklch,var(--muted)_50%,var(--background))] group-data-[state=selected]:bg-muted', pinnedColumn.className, kind === 'header' ? pinnedColumn.headerClassName diff --git a/web/default/src/components/data-table/core/data-table-colgroup.tsx b/web/default/src/components/data-table/core/data-table-colgroup.tsx index 26c57ba3..03dc9644 100644 --- a/web/default/src/components/data-table/core/data-table-colgroup.tsx +++ b/web/default/src/components/data-table/core/data-table-colgroup.tsx @@ -23,10 +23,21 @@ export function DataTableColgroup({ }: { table: TanstackTable }) { + const columns = table.getVisibleLeafColumns() + const totalSize = columns.reduce((sum, col) => sum + col.getSize(), 0) + return ( - {table.getVisibleLeafColumns().map((column) => ( - + {columns.map((column) => ( + 0 + ? `${(column.getSize() / totalSize) * 100}%` + : undefined, + }} + /> ))} ) diff --git a/web/default/src/components/data-table/core/data-table-header.tsx b/web/default/src/components/data-table/core/data-table-header.tsx index 63d04bdb..fbaca0bf 100644 --- a/web/default/src/components/data-table/core/data-table-header.tsx +++ b/web/default/src/components/data-table/core/data-table-header.tsx @@ -16,8 +16,9 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ -import { flexRender, type Table as TanstackTable } from '@tanstack/react-table' +import { flexRender, type Header, type Table as TanstackTable } from '@tanstack/react-table' import { TableHead, TableHeader, TableRow } from '@/components/ui/table' +import { DataTableColumnHeader } from './column-header' import type { DataTableColumnClassName } from './types' type DataTableHeaderProps = { @@ -46,12 +47,7 @@ export function DataTableHeader({ className={getColumnClassName?.(header.column.id, 'header')} style={applyHeaderSize ? { width: header.getSize() } : undefined} > - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} + {renderHeaderContent(header)} ))} @@ -59,3 +55,19 @@ export function DataTableHeader({ ) } + +function renderHeaderContent(header: Header) { + if (header.isPlaceholder) return null + const { header: headerDef, meta } = header.column.columnDef + // A string header means the user wrote e.g. `header: t('Name')` — auto-render + // with DataTableColumnHeader so sorting works without boilerplate. + // A function (including TanStack's default accessor-key fallback) is passed + // through as-is. meta.label is kept as a fallback for legacy columns. + if (typeof headerDef === 'string') { + return + } + if (meta?.label) { + return + } + return flexRender(headerDef, header.getContext()) +} diff --git a/web/default/src/components/data-table/core/data-table-row.tsx b/web/default/src/components/data-table/core/data-table-row.tsx index 8ad703ae..b6d56bb1 100644 --- a/web/default/src/components/data-table/core/data-table-row.tsx +++ b/web/default/src/components/data-table/core/data-table-row.tsx @@ -16,7 +16,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ -import type * as React from 'react' +import * as React from 'react' import { flexRender, type Row } from '@tanstack/react-table' import { TableCell, TableRow } from '@/components/ui/table' import type { DataTableColumnClassName } from './types' @@ -27,7 +27,7 @@ type DataTableRowProps = { getColumnClassName?: DataTableColumnClassName } & Omit, 'children'> -export function DataTableRow({ +function DataTableRowInner({ row, className, getColumnClassName, @@ -50,3 +50,14 @@ export function DataTableRow({ ) } + +export const DataTableRow = React.memo(DataTableRowInner, (prev, next) => { + // Skip re-render when only the getColumnClassName reference changed but the + // row identity and selection state are the same — callers rarely stabilize + // this callback, so excluding it from comparison avoids unnecessary renders. + return ( + prev.row === next.row && + prev.className === next.className && + prev.row.getIsSelected() === next.row.getIsSelected() + ) +}) as typeof DataTableRowInner diff --git a/web/default/src/components/data-table/core/data-table-view.tsx b/web/default/src/components/data-table/core/data-table-view.tsx index 978dabb5..9bc1d1e4 100644 --- a/web/default/src/components/data-table/core/data-table-view.tsx +++ b/web/default/src/components/data-table/core/data-table-view.tsx @@ -17,7 +17,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ import * as React from 'react' -import { type Row } from '@tanstack/react-table' +import { type Row, type Table as TanstackTable } from '@tanstack/react-table' import { cn } from '@/lib/utils' import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table' import { @@ -46,8 +46,12 @@ export { DataTableRow } from './data-table-row' export function DataTableView(props: DataTableViewProps) { const rows = props.rows ?? props.table.getRowModel().rows - const colSpan = props.table.getVisibleLeafColumns().length + const colSpan = React.useMemo( + () => props.table.getVisibleLeafColumns().length, + [props.table] + ) const columnClassName = useResolvedColumnClassName( + props.table, props.getColumnClassName, props.pinnedColumns ) @@ -120,32 +124,8 @@ function SplitHeaderTableView({ colSpan: number getColumnClassName: DataTableColumnClassName }) { - const headerHostRef = React.useRef(null) - const bodyHostRef = React.useRef(null) const tableSizing = getTableSizing(props) - React.useEffect(() => { - const headerScroller = headerHostRef.current?.querySelector( - '[data-slot=table-container]' - ) - const bodyScroller = bodyHostRef.current?.querySelector( - '[data-slot=table-container]' - ) - - if (!headerScroller || !bodyScroller) return - - const syncHeaderScroll = () => { - headerScroller.scrollLeft = bodyScroller.scrollLeft - } - - syncHeaderScroll() - bodyScroller.addEventListener('scroll', syncHeaderScroll, { passive: true }) - - return () => { - bodyScroller.removeEventListener('scroll', syncHeaderScroll) - } - }, [rows.length, props.tableClassName, props.colgroup]) - return (
({ >
-
- - {tableSizing.colgroup} - -
-
-
- - {tableSizing.colgroup} - {renderTableBody(props, rows, colSpan, getColumnClassName)} -
-
+ {tableSizing.colgroup} + + {renderTableBody(props, rows, colSpan, getColumnClassName)} +
) } -function useResolvedColumnClassName( +function useResolvedColumnClassName( + table: TanstackTable, getColumnClassName?: DataTableColumnClassName, pinnedColumns?: DataTablePinnedColumn[] ) { + const allPinnedColumns = React.useMemo(() => { + const metaPinnedColumns = getMetaPinnedColumns(table) + return mergePinnedColumns(pinnedColumns, metaPinnedColumns) + }, [table, pinnedColumns]) + const pinnedColumnById = React.useMemo( - () => getPinnedColumnMap(pinnedColumns), - [pinnedColumns] + () => getPinnedColumnMap(allPinnedColumns), + [allPinnedColumns] ) return React.useMemo( @@ -207,6 +187,41 @@ function useResolvedColumnClassName( ) } +function getMetaPinnedColumns( + table: TanstackTable +): DataTablePinnedColumn[] { + return table.getAllColumns().flatMap((column) => { + const side = column.columnDef.meta?.pinned + if (!side) return [] + + return [{ columnId: column.id, side }] + }) +} + +function mergePinnedColumns( + explicitPinnedColumns: DataTablePinnedColumn[] | undefined, + metaPinnedColumns: DataTablePinnedColumn[] +): DataTablePinnedColumn[] | undefined { + if (!metaPinnedColumns.length) { + return explicitPinnedColumns + } + + if (!explicitPinnedColumns?.length) { + return metaPinnedColumns + } + + const explicitColumnIds = new Set( + explicitPinnedColumns.map((column) => column.columnId) + ) + + return [ + ...explicitPinnedColumns, + ...metaPinnedColumns.filter( + (column) => !explicitColumnIds.has(column.columnId) + ), + ] +} + function getTableSizing(props: DataTableViewProps): { colgroup?: React.ReactNode style?: React.CSSProperties diff --git a/web/default/src/components/data-table/hooks/use-debounced-column-filter.ts b/web/default/src/components/data-table/hooks/use-debounced-column-filter.ts index e539325c..f7806695 100644 --- a/web/default/src/components/data-table/hooks/use-debounced-column-filter.ts +++ b/web/default/src/components/data-table/hooks/use-debounced-column-filter.ts @@ -41,6 +41,8 @@ export function useDebouncedColumnFilter({ const [pendingValue, setPendingValue] = React.useState(value) const isComposingRef = React.useRef(false) const debouncedValue = useDebounce(pendingValue, delay) + const onColumnFiltersChangeRef = React.useRef(onColumnFiltersChange) + onColumnFiltersChangeRef.current = onColumnFiltersChange React.useEffect(() => { // Keep the input aligned when URL state changes outside the local field. @@ -55,13 +57,13 @@ export function useDebouncedColumnFilter({ React.useEffect(() => { if (debouncedValue === value) return - onColumnFiltersChange((previous) => { + onColumnFiltersChangeRef.current((previous) => { const filters = previous.filter((filter) => filter.id !== columnId) return debouncedValue ? [...filters, { id: columnId, value: debouncedValue }] : filters }) - }, [columnId, debouncedValue, onColumnFiltersChange, value]) + }, [columnId, debouncedValue, value]) const updateInputValue = React.useCallback((nextValue: string) => { setInputValue(nextValue) diff --git a/web/default/src/components/data-table/index.ts b/web/default/src/components/data-table/index.ts index 7cf6c81f..ded3be53 100644 --- a/web/default/src/components/data-table/index.ts +++ b/web/default/src/components/data-table/index.ts @@ -18,6 +18,7 @@ For commercial licensing, please contact support@quantumnous.com */ export { DataTablePagination } from './core/pagination' export { DataTableColumnHeader } from './core/column-header' +export { BadgeListCell } from './core/badge-list-cell' export { DataTableViewOptions } from './toolbar/view-options' export { DataTableToolbar } from './toolbar/toolbar' export { DataTableBulkActions } from './toolbar/bulk-actions' diff --git a/web/default/src/components/data-table/layout/data-table-page.tsx b/web/default/src/components/data-table/layout/data-table-page.tsx index 5b45874c..cff24135 100644 --- a/web/default/src/components/data-table/layout/data-table-page.tsx +++ b/web/default/src/components/data-table/layout/data-table-page.tsx @@ -344,7 +344,7 @@ function renderDesktop( splitHeader={fixedHeight} tableContainerClassName={fixedHeight ? 'h-full min-h-0' : undefined} tableHeaderClassName={cn( - fixedHeight && 'bg-muted/30', + fixedHeight && '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]', props.tableHeaderClassName )} getColumnClassName={props.getColumnClassName} diff --git a/web/default/src/components/data-table/layout/mobile-card-list.tsx b/web/default/src/components/data-table/layout/mobile-card-list.tsx index 0ca3336d..8eb31905 100644 --- a/web/default/src/components/data-table/layout/mobile-card-list.tsx +++ b/web/default/src/components/data-table/layout/mobile-card-list.tsx @@ -16,6 +16,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ +import * as React from 'react' import { flexRender, type Cell, @@ -24,6 +25,7 @@ import { } from '@tanstack/react-table' import { Database } from 'lucide-react' import { useTranslation } from 'react-i18next' +import { StatusBadgeTypeContext } from '@/components/status-badge' import { cn } from '@/lib/utils' import { Empty, @@ -43,24 +45,11 @@ interface MobileCardListProps { getRowClassName?: (row: Row) => string | undefined } -interface MobileColumnMeta { - label?: string - mobileTitle?: boolean - mobileBadge?: boolean - mobileHidden?: boolean -} - -function getCellMeta( - cell: Cell -): MobileColumnMeta | undefined { - return cell.column.columnDef.meta as MobileColumnMeta | undefined -} - function getCellLabel(cell: Cell): string | null { - const meta = getCellMeta(cell) + const { header, meta } = cell.column.columnDef + if (typeof header === 'string') return header if (meta?.label) return meta.label - const header = cell.column.columnDef.header - return typeof header === 'string' ? header : null + return null } function renderCellContent(cell: Cell): React.ReactNode { @@ -128,16 +117,22 @@ function CompactRow({ row }: { row: Row }) { .getVisibleCells() .filter((cell) => cell.column.id !== 'select') - const titleCell = allCells.find((c) => getCellMeta(c)?.mobileTitle) - const badgeCell = allCells.find((c) => getCellMeta(c)?.mobileBadge) - const actionsCell = allCells.find((c) => c.column.id === 'actions') + // Read each cell's meta once, then reuse for all categorisation checks. + const cellMetas = React.useMemo( + () => allCells.map((c) => c.column.columnDef.meta), + // eslint-disable-next-line react-hooks/exhaustive-deps + [allCells.map((c) => c.id).join(',')] + ) + 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) => + (c, i) => c !== titleCell && c !== badgeCell && c !== actionsCell && - !getCellMeta(c)?.mobileHidden + !cellMetas[i]?.mobileHidden ) return ( @@ -145,12 +140,14 @@ function CompactRow({ row }: { row: Row }) { {/* Row 1: Title + Badge */}
{titleCell && ( -
+
{renderCellContent(titleCell)}
)} {badgeCell && ( -
{renderCellContent(badgeCell)}
+
+ {renderCellContent(badgeCell)} +
)}
@@ -166,8 +163,10 @@ function CompactRow({ row }: { row: Row }) { {label}
)} -
- {renderCellContent(cell) ?? '-'} +
+ + {renderCellContent(cell) ?? '-'} +
) @@ -194,21 +193,28 @@ function FallbackRow({ row }: { row: Row }) { .getVisibleCells() .filter((cell) => cell.column.id !== 'select') + const cellMetas = React.useMemo( + () => allCells.map((c) => c.column.columnDef.meta), + // eslint-disable-next-line react-hooks/exhaustive-deps + [allCells.map((c) => c.id).join(',')] + ) + const actionsCell = allCells.find((c) => c.column.id === 'actions') const contentCells = allCells.filter( - (c) => c.column.id !== 'actions' && !getCellMeta(c)?.mobileHidden + (c, i) => c.column.id !== 'actions' && !cellMetas[i]?.mobileHidden ) return ( <> {contentCells.map((cell) => { const label = getCellLabel(cell) - const content = renderCellContent(cell) if (!label) { return ( -
- {content} +
+ + {renderCellContent(cell)} +
) } @@ -221,8 +227,10 @@ function FallbackRow({ row }: { row: Row }) { {label} -
- {content ?? '-'} +
+ + {renderCellContent(cell) ?? '-'} +
) @@ -265,10 +273,15 @@ export function MobileCardList(props: MobileCardListProps) { const resolvedEmptyTitle = emptyTitle ?? t('No Data') const resolvedEmptyDescription = emptyDescription ?? t('No data available') - const hasCompactMeta = table.getVisibleLeafColumns().some((col) => { - const meta = col.columnDef.meta as MobileColumnMeta | undefined - return meta?.mobileTitle || meta?.mobileBadge - }) + const visibleColumns = table.getVisibleLeafColumns() + const hasCompactMeta = React.useMemo( + () => + visibleColumns.some((col) => { + const meta = col.columnDef.meta + return meta?.mobileTitle || meta?.mobileBadge + }), + [visibleColumns] + ) if (isLoading) { return hasCompactMeta ? : diff --git a/web/default/src/components/data-table/static/static-data-table-classnames.ts b/web/default/src/components/data-table/static/static-data-table-classnames.ts index 5780cfe2..ca057af8 100644 --- a/web/default/src/components/data-table/static/static-data-table-classnames.ts +++ b/web/default/src/components/data-table/static/static-data-table-classnames.ts @@ -22,7 +22,7 @@ export const staticDataTableClassNames = { embeddedContainer: 'rounded-none border-0', compactTable: 'text-sm', compactHeaderRow: 'hover:bg-transparent', - mutedHeaderRow: 'bg-muted/30 hover:bg-muted/30', + mutedHeaderRow: '[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))] hover:[background-color:color-mix(in_oklch,var(--muted)_30%,var(--background))]', compactHeaderCell: 'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase', compactHeaderCellRight: diff --git a/web/default/src/components/data-table/toolbar/bulk-actions.tsx b/web/default/src/components/data-table/toolbar/bulk-actions.tsx index 08a74065..69be45b2 100644 --- a/web/default/src/components/data-table/toolbar/bulk-actions.tsx +++ b/web/default/src/components/data-table/toolbar/bulk-actions.tsx @@ -16,7 +16,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ -import { useState, useEffect, useRef } from 'react' +import { useState, useEffect, useLayoutEffect, useRef } from 'react' import { type Table } from '@tanstack/react-table' import { X } from 'lucide-react' import { useTranslation } from 'react-i18next' @@ -55,8 +55,13 @@ export function DataTableBulkActions({ const selectedRows = table.getFilteredSelectedRowModel().rows const selectedCount = selectedRows.length const toolbarRef = useRef(null) + const buttonsRef = useRef | null>(null) const [announcement, setAnnouncement] = useState('') + useLayoutEffect(() => { + buttonsRef.current = toolbarRef.current?.querySelectorAll('button') ?? null + }) + // Announce selection changes to screen readers useEffect(() => { if (selectedCount > 0) { @@ -75,7 +80,7 @@ export function DataTableBulkActions({ } const handleKeyDown = (event: React.KeyboardEvent) => { - const buttons = toolbarRef.current?.querySelectorAll('button') + const buttons = buttonsRef.current if (!buttons) return const currentIndex = Array.from(buttons).findIndex( diff --git a/web/default/src/components/data-table/toolbar/faceted-filter.tsx b/web/default/src/components/data-table/toolbar/faceted-filter.tsx index 9198e7e0..5fb80015 100644 --- a/web/default/src/components/data-table/toolbar/faceted-filter.tsx +++ b/web/default/src/components/data-table/toolbar/faceted-filter.tsx @@ -53,7 +53,7 @@ type DataTableFacetedFilterProps = { singleSelect?: boolean } -export function DataTableFacetedFilter({ +function DataTableFacetedFilterInner({ column, title, options, @@ -64,6 +64,18 @@ export function DataTableFacetedFilter({ const filterValue = column?.getFilterValue() as string[] | undefined const selectedValues = new Set(filterValue) + const handleOptionSelect = (optionValue: string) => { + const nextSelectedValues = getNextSelectedValues( + selectedValues, + optionValue, + singleSelect + ) + + column?.setFilterValue( + nextSelectedValues.length ? nextSelectedValues : undefined + ) + } + return ( ({ return ( { - if (singleSelect) { - // Single select mode: toggle or switch selection - if (isSelected) { - // Deselect if clicking the same option - column?.setFilterValue(undefined) - } else { - // Select only this option - column?.setFilterValue([option.value]) - } - } else { - // Multi-select mode: original behavior - if (isSelected) { - selectedValues.delete(option.value) - } else { - selectedValues.add(option.value) - } - const filterValues = Array.from(selectedValues) - column?.setFilterValue( - filterValues.length ? filterValues : undefined - ) - } - }} + onSelect={() => handleOptionSelect(option.value)} >
({ ) } + +export const DataTableFacetedFilter = React.memo( + DataTableFacetedFilterInner +) as typeof DataTableFacetedFilterInner + +function getNextSelectedValues( + selectedValues: Set, + optionValue: string, + singleSelect: boolean +): string[] { + if (singleSelect) { + return selectedValues.has(optionValue) ? [] : [optionValue] + } + + const nextSelectedValues = new Set(selectedValues) + if (nextSelectedValues.has(optionValue)) { + nextSelectedValues.delete(optionValue) + } else { + nextSelectedValues.add(optionValue) + } + + return Array.from(nextSelectedValues) +} diff --git a/web/default/src/components/data-table/toolbar/toolbar.tsx b/web/default/src/components/data-table/toolbar/toolbar.tsx index 1859e602..543e6146 100644 --- a/web/default/src/components/data-table/toolbar/toolbar.tsx +++ b/web/default/src/components/data-table/toolbar/toolbar.tsx @@ -19,9 +19,9 @@ For commercial licensing, please contact support@quantumnous.com import * as React from 'react' import { useState, type ReactNode } from 'react' import { type Table } from '@tanstack/react-table' +import { useDebounce } from '@/hooks' import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react' import { useTranslation } from 'react-i18next' -import { useDebounce } from '@/hooks' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' @@ -41,6 +41,11 @@ type FilterDef = { singleSelect?: boolean } +type SearchDraft = { + baseValue: string + value: string +} + export type DataTableToolbarProps = { table: Table /** @@ -141,8 +146,7 @@ export type DataTableToolbarProps = { export function DataTableToolbar(props: DataTableToolbarProps) { const { t } = useTranslation() const [expanded, setExpanded] = useState(false) - const isSearchComposingRef = React.useRef(false) - const lastCommittedSearchValueRef = React.useRef('') + const [isSearchComposing, setIsSearchComposing] = useState(false) const filters = props.filters ?? [] const hasExpandable = props.expandable != null @@ -159,31 +163,22 @@ export function DataTableToolbar(props: DataTableToolbarProps) { '') : ((props.table.getState().globalFilter as string | undefined) ?? '') - const [searchValue, setSearchValue] = useState(currentSearchValue) - const [pendingSearchValue, setPendingSearchValue] = - useState(currentSearchValue) + const [searchDraft, setSearchDraft] = useState(null) + const activeSearchDraft = + searchDraft && + (isSearchComposing || searchDraft.baseValue === currentSearchValue) + ? searchDraft + : null + const searchValue = activeSearchDraft?.value ?? currentSearchValue const searchDebounceMs = Math.max(0, props.searchDebounceMs ?? 0) - const debouncedSearchValue = useDebounce( - pendingSearchValue, - searchDebounceMs - ) - - React.useEffect(() => { - lastCommittedSearchValueRef.current = currentSearchValue - if (!isSearchComposingRef.current) { - setSearchValue(currentSearchValue) - } - setPendingSearchValue(currentSearchValue) - }, [currentSearchValue]) + const debouncedSearchValue = useDebounce(searchValue, searchDebounceMs) const commitSearchValue = React.useCallback( (value: string) => { - if (value === lastCommittedSearchValueRef.current) { + if (value === currentSearchValue) { return } - lastCommittedSearchValueRef.current = value - if (props.searchKey) { props.table.getColumn(props.searchKey)?.setFilterValue(value) return @@ -191,14 +186,14 @@ export function DataTableToolbar(props: DataTableToolbarProps) { props.table.setGlobalFilter(value) }, - [props.searchKey, props.table] + [currentSearchValue, props.searchKey, props.table] ) React.useEffect(() => { if ( searchDebounceMs <= 0 || - isSearchComposingRef.current || - debouncedSearchValue !== pendingSearchValue + isSearchComposing || + debouncedSearchValue !== searchValue ) { return } @@ -207,13 +202,12 @@ export function DataTableToolbar(props: DataTableToolbarProps) { }, [ commitSearchValue, debouncedSearchValue, - pendingSearchValue, + isSearchComposing, searchDebounceMs, + searchValue, ]) const queueSearchValue = (value: string) => { - setPendingSearchValue(value) - if (searchDebounceMs <= 0) { commitSearchValue(value) } @@ -221,36 +215,27 @@ export function DataTableToolbar(props: DataTableToolbarProps) { const handleSearchChange = (event: React.ChangeEvent) => { const value = event.target.value - setSearchValue(value) + setSearchDraft({ baseValue: currentSearchValue, value }) - if (!isSearchComposingRef.current) { + if (!isSearchComposing) { queueSearchValue(value) } } const handleSearchCompositionStart = () => { - isSearchComposingRef.current = true + setIsSearchComposing(true) } const handleSearchCompositionEnd = ( event: React.CompositionEvent ) => { - isSearchComposingRef.current = false + setIsSearchComposing(false) const value = event.currentTarget.value - setSearchValue(value) + setSearchDraft({ baseValue: currentSearchValue, value }) queueSearchValue(value) } - const searchInput = props.searchKey ? ( - - ) : ( + const searchInput = ( (props: DataTableToolbarProps) { /> ) - const filterChips = filters.map((filter) => { - const column = props.table.getColumn(filter.columnId) - if (!column) return null - return ( - - ) - }) + const filterChips = React.useMemo( + () => + filters.map((filter) => { + const column = props.table.getColumn(filter.columnId) + if (!column) return null + return ( + + ) + }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [props.filters, props.table] + ) const handleReset = () => { - isSearchComposingRef.current = false - setSearchValue('') - setPendingSearchValue('') - lastCommittedSearchValueRef.current = '' + setIsSearchComposing(false) + setSearchDraft(null) props.table.resetColumnFilters() props.table.setGlobalFilter('') props.onReset?.() diff --git a/web/default/src/components/data-table/toolbar/view-options.tsx b/web/default/src/components/data-table/toolbar/view-options.tsx index 08e03172..5e431789 100644 --- a/web/default/src/components/data-table/toolbar/view-options.tsx +++ b/web/default/src/components/data-table/toolbar/view-options.tsx @@ -16,6 +16,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ +import * as React from 'react' import { type Table } from '@tanstack/react-table' import { useTranslation } from 'react-i18next' import { Button } from '@/components/ui/button' @@ -36,6 +37,18 @@ export function DataTableViewOptions({ table, }: DataTableViewOptionsProps) { const { t } = useTranslation() + + const hideableColumns = React.useMemo( + () => + table + .getAllColumns() + .filter( + (column) => + typeof column.accessorFn !== 'undefined' && column.getCanHide() + ), + [table] + ) + return ( ({ {t('Toggle columns')} - {table - .getAllColumns() - .filter( - (column) => - typeof column.accessorFn !== 'undefined' && column.getCanHide() + {hideableColumns.map((column) => { + return ( + column.toggleVisibility(!!value)} + > + {typeof column.columnDef.header === 'string' + ? column.columnDef.header + : (column.columnDef.meta?.label ?? column.id)} + ) - .map((column) => { - return ( - column.toggleVisibility(!!value)} - > - {column.columnDef.meta?.label ?? column.id} - - ) - })} + })} diff --git a/web/default/src/components/provider-badge.tsx b/web/default/src/components/provider-badge.tsx index c2eb401d..40891fe4 100644 --- a/web/default/src/components/provider-badge.tsx +++ b/web/default/src/components/provider-badge.tsx @@ -36,9 +36,15 @@ export function ProviderBadge({ const icon = iconKey ? getLobeIcon(iconKey, iconSize) : null return ( -
+
{icon} - +
) } diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx index 809903b8..24e04aaa 100644 --- a/web/default/src/components/status-badge.tsx +++ b/web/default/src/components/status-badge.tsx @@ -22,7 +22,6 @@ import { type LucideIcon } from 'lucide-react' import { stringToColor } from '@/lib/colors' import { cn } from '@/lib/utils' import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard' - export const dotColorMap = { success: 'bg-success', warning: 'bg-warning', @@ -73,12 +72,29 @@ export const textColorMap = { export type StatusVariant = keyof typeof dotColorMap +/** Controls the visual style of the badge. + * - `badge` — default pill with background and padding (default) + * - `text` — plain text, no background or padding, only color + * - `underline`— plain text with a bottom border underline + */ +export type StatusBadgeType = 'badge' | 'text' | 'underline' + +/** Context that lets ancestor components (e.g. MobileCardList field area) + * override the badge type without modifying every call site. */ +export const StatusBadgeTypeContext = React.createContext('badge') + const sizeMap = { sm: 'h-5 gap-1 px-1.5 text-xs leading-none', md: 'h-5 gap-1 px-1.5 text-xs leading-none', lg: 'h-6 gap-1.5 px-2 text-xs leading-none', } as const +const textSizeMap = { + sm: 'gap-1 text-xs leading-none', + md: 'gap-1 text-xs leading-none', + lg: 'gap-1.5 text-xs leading-none', +} as const + export interface StatusBadgeProps extends Omit< React.HTMLAttributes, 'children' @@ -94,6 +110,8 @@ export interface StatusBadgeProps extends Omit< copyable?: boolean copyText?: string autoColor?: string + /** Visual style. Defaults to 'badge'. Can be overridden via StatusBadgeTypeContext. */ + type?: StatusBadgeType } export function StatusBadge({ @@ -107,11 +125,14 @@ export function StatusBadge({ copyable = true, copyText, autoColor, + type: typeProp, className, onClick, ...props }: StatusBadgeProps) { const { copyToClipboard } = useCopyToClipboard() + const contextType = React.useContext(StatusBadgeTypeContext) + const type = typeProp ?? contextType const computedVariant: StatusVariant = autoColor ? (stringToColor(autoColor) as StatusVariant) @@ -126,14 +147,21 @@ export function StatusBadge({ } const content = - children ?? (label ? {label} : null) + children ?? + (label ? ( + {label} + ) : null) + + const isBadge = type === 'badge' return ( ) { ) { *:has(>[data-slot=status-badge]:first-child):first-child]:-ml-1.5 [&>[data-slot=status-badge]:first-child]:-ml-1.5', + 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className )} {...props} diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx index 331f1867..cf8d3cef 100644 --- a/web/default/src/features/channels/components/channels-columns.tsx +++ b/web/default/src/features/channels/components/channels-columns.tsx @@ -45,10 +45,10 @@ import { TooltipTrigger, } from '@/components/ui/tooltip' import { ConfirmDialog } from '@/components/confirm-dialog' -import { DataTableColumnHeader } from '@/components/data-table' +import { BadgeListCell } from '@/components/data-table' import { GroupBadge } from '@/components/group-badge' import { ProviderBadge } from '@/components/provider-badge' -import { StatusBadge, StatusBadgeList } from '@/components/status-badge' +import { StatusBadge } from '@/components/status-badge' import { TableId } from '@/components/table-id' import { TruncatedText } from '@/components/truncated-text' import { getCodexUsage } from '../api' @@ -98,22 +98,6 @@ function parseIonetMeta(otherInfo: string | null | undefined): null | { return null } -/** - * Render limited items with "and X more" indicator - */ -function renderLimitedItems( - items: React.ReactNode[], - maxDisplay: number = 2 -): React.ReactNode { - return ( - item} - /> - ) -} - /** * Upstream update tags (+N / -N) shown on channel name for model-fetchable channels */ @@ -314,6 +298,7 @@ function BalanceCell({ channel }: { channel: Channel }) { size='sm' copyable={false} showDot={false} + className='-ml-1.5' /> ) } @@ -349,7 +334,7 @@ function BalanceCell({ channel }: { channel: Channel }) { return ( -
+
[] { // ID column { accessorKey: 'id', - meta: { label: t('ID'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('ID'), + meta: { mobileHidden: true }, cell: ({ row }) => { const id = row.getValue('id') as number return @@ -490,10 +473,8 @@ export function useChannelsColumns(): ColumnDef[] { // Name column { accessorKey: 'name', - meta: { label: t('Name'), mobileTitle: true }, - header: ({ column }) => ( - - ), + header: t('Name'), + meta: { mobileTitle: true }, cell: ({ row }) => { const isTagRow = isTagAggregateRow(row.original) const name = row.getValue('name') as string @@ -603,7 +584,6 @@ export function useChannelsColumns(): ColumnDef[] { // Type column { accessorKey: 'type', - meta: { label: t('Type') }, header: t('Type'), cell: ({ row }) => { const isTagRow = isTagAggregateRow(row.original) @@ -615,6 +595,7 @@ export function useChannelsColumns(): ColumnDef[] { variant='blue' size='sm' copyable={false} + className='-ml-1.5' /> ) } @@ -718,8 +699,8 @@ export function useChannelsColumns(): ColumnDef[] { // Status column { accessorKey: 'status', - meta: { label: t('Status'), mobileBadge: true }, header: t('Status'), + meta: { mobileBadge: true }, cell: ({ row }) => { const isTagRow = isTagAggregateRow(row.original) const status = row.getValue('status') as number @@ -737,6 +718,7 @@ export function useChannelsColumns(): ColumnDef[] { variant='success' size='sm' copyable={false} + className='-ml-1.5' /> ) } else { @@ -746,6 +728,7 @@ export function useChannelsColumns(): ColumnDef[] { variant='neutral' size='sm' copyable={false} + className='-ml-1.5' /> ) } @@ -823,6 +806,7 @@ export function useChannelsColumns(): ColumnDef[] { variant={config.variant} size='sm' copyable={false} + className='-ml-1.5' /> ) }, @@ -840,42 +824,23 @@ export function useChannelsColumns(): ColumnDef[] { // Models column { accessorKey: 'models', - meta: { label: t('Models'), mobileHidden: true }, header: t('Models'), + meta: { mobileHidden: true }, cell: ({ row }) => { const models = row.getValue('models') as string const modelArray = parseModelsList(models) - - if (modelArray.length === 0) { - return - - } - - const modelBadges = modelArray.map((model, idx) => ( - - )) - return ( - - - }> - {renderLimitedItems(modelBadges, 2)} - - {modelArray.length > 2 && ( - -
{modelBadges}
- - )} - - + ( + + ))} + /> ) }, size: 200, @@ -885,32 +850,17 @@ export function useChannelsColumns(): ColumnDef[] { // Group column { accessorKey: 'group', - meta: { label: t('Groups'), mobileHidden: true }, header: t('Groups'), + meta: { mobileHidden: true }, cell: ({ row }) => { const group = row.getValue('group') as string const groupArray = parseGroupsList(group) - - const groupBadges = groupArray.map((g) => ( - - )) - return ( - - - }> - {renderLimitedItems(groupBadges, 2)} - - {groupArray.length > 2 && ( - -
{groupBadges}
- - )} - - + ( + + ))} + /> ) }, filterFn: (row, id, value) => { @@ -926,14 +876,14 @@ export function useChannelsColumns(): ColumnDef[] { // Tag column { accessorKey: 'tag', - meta: { label: t('Tag'), mobileHidden: true }, header: t('Tag'), + meta: { mobileHidden: true }, cell: ({ row }) => { const tag = row.getValue('tag') as string | null if (!tag) return - - return + return }, size: 120, enableSorting: false, @@ -942,10 +892,8 @@ export function useChannelsColumns(): ColumnDef[] { // Priority column { accessorKey: 'priority', - meta: { label: t('Priority'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('Priority'), + meta: { mobileHidden: true }, cell: ({ row }) => , size: 100, }, @@ -953,8 +901,8 @@ export function useChannelsColumns(): ColumnDef[] { // Weight column { accessorKey: 'weight', - meta: { label: t('Weight'), mobileHidden: true }, header: t('Weight'), + meta: { mobileHidden: true }, cell: ({ row }) => , size: 90, enableSorting: false, @@ -963,10 +911,7 @@ export function useChannelsColumns(): ColumnDef[] { // Balance column (Used/Remaining) { accessorKey: 'balance', - meta: { label: t('Used / Remaining') }, - header: ({ column }) => ( - - ), + header: t('Used / Remaining'), cell: ({ row }) => , size: 180, }, @@ -974,10 +919,8 @@ export function useChannelsColumns(): ColumnDef[] { // Response Time column { accessorKey: 'response_time', - meta: { label: t('Response'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('Response'), + meta: { mobileHidden: true }, cell: ({ row }) => { const responseTime = row.getValue('response_time') as number const config = getResponseTimeConfig(responseTime) @@ -988,6 +931,7 @@ export function useChannelsColumns(): ColumnDef[] { variant={config.variant} size='sm' copyable={false} + className='-ml-1.5' /> ) }, @@ -997,10 +941,8 @@ export function useChannelsColumns(): ColumnDef[] { // Test Time column { accessorKey: 'test_time', - meta: { label: t('Last Tested'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('Last Tested'), + meta: { mobileHidden: true }, cell: ({ row }) => { const testTime = row.getValue('test_time') as number @@ -1037,6 +979,7 @@ export function useChannelsColumns(): ColumnDef[] { // Actions column { id: 'actions', + header: () => t('Actions'), cell: ({ row }) => { // Check if this is a tag row (has children) const isTagRow = isTagAggregateRow(row.original) @@ -1055,6 +998,7 @@ export function useChannelsColumns(): ColumnDef[] { size: 132, enableSorting: false, enableHiding: false, + meta: { pinned: 'right' as const }, }, ] } diff --git a/web/default/src/features/channels/components/data-table-row-actions.tsx b/web/default/src/features/channels/components/data-table-row-actions.tsx index 92394245..0d93bf11 100644 --- a/web/default/src/features/channels/components/data-table-row-actions.tsx +++ b/web/default/src/features/channels/components/data-table-row-actions.tsx @@ -140,7 +140,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) { } return ( -
+
[] { enableSorting: false, enableHiding: false, size: 40, - meta: { label: t('Select') }, }, { accessorKey: 'name', - header: ({ column }) => ( - - ), + header: t('Name'), cell: ({ row }) => (
{row.getValue('name')}
), size: 180, - meta: { label: t('Name'), mobileTitle: true }, + meta: { mobileTitle: true }, }, { accessorKey: 'status', - header: ({ column }) => ( - - ), + header: t('Status'), cell: ({ row }) => { const statusConfig = API_KEY_STATUSES[row.getValue('status') as number] if (!statusConfig) return null @@ -121,12 +115,13 @@ export function useApiKeysColumns(): ColumnDef[] { label={t(statusConfig.label)} variant={statusConfig.variant} copyable={false} + className='-ml-1.5' /> ) }, filterFn: (row, id, value) => value.includes(String(row.getValue(id))), size: 120, - meta: { label: t('Status'), mobileBadge: true }, + meta: { mobileBadge: true }, }, { id: 'key', @@ -135,14 +130,11 @@ export function useApiKeysColumns(): ColumnDef[] { cell: ({ row }) => , enableSorting: false, size: 260, - meta: { label: t('API Key') }, }, { id: 'quota', accessorKey: 'remain_quota', - header: ({ column }) => ( - - ), + header: t('Quota'), cell: ({ row }) => { const apiKey = row.original if (apiKey.unlimited_quota) { @@ -151,6 +143,7 @@ export function useApiKeysColumns(): ColumnDef[] { label={t('Unlimited')} variant='neutral' copyable={false} + className='-ml-1.5' /> ) } @@ -194,13 +187,10 @@ export function useApiKeysColumns(): ColumnDef[] { ) }, size: 170, - meta: { label: t('Quota') }, }, { accessorKey: 'group', - header: ({ column }) => ( - - ), + header: t('Group'), cell: ({ row }) => { const apiKey = row.original const group = row.getValue('group') as string @@ -236,48 +226,40 @@ export function useApiKeysColumns(): ColumnDef[] { return }, size: 160, - meta: { label: t('Group'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { id: 'model_limits', accessorKey: 'model_limits', - header: ({ column }) => ( - - ), + header: t('Models'), cell: ({ row }) => , enableSorting: false, size: 160, - meta: { label: t('Models'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { id: 'allow_ips', accessorKey: 'allow_ips', - header: ({ column }) => ( - - ), + header: t('IP Restriction'), cell: ({ row }) => , enableSorting: false, size: 160, - meta: { label: t('IP Restriction'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'created_time', - header: ({ column }) => ( - - ), + header: t('Created'), cell: ({ row }) => ( {formatTimestampToDate(row.getValue('created_time'))} ), size: 180, - meta: { label: t('Created'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'accessed_time', - header: ({ column }) => ( - - ), + header: t('Last Used'), cell: ({ row }) => { const accessedTime = row.getValue('accessed_time') as number if (!accessedTime) { @@ -290,13 +272,11 @@ export function useApiKeysColumns(): ColumnDef[] { ) }, size: 180, - meta: { label: t('Last Used'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'expired_time', - header: ({ column }) => ( - - ), + header: t('Expires'), cell: ({ row }) => { const expiredTime = row.getValue('expired_time') as number if (expiredTime === -1) { @@ -305,6 +285,7 @@ export function useApiKeysColumns(): ColumnDef[] { label={t('Never')} variant='neutral' copyable={false} + className='-ml-1.5' /> ) } @@ -321,12 +302,13 @@ export function useApiKeysColumns(): ColumnDef[] { ) }, size: 180, - meta: { label: t('Expires'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { id: 'actions', + header: () => t('Actions'), cell: ({ row }) => , - meta: { label: t('Actions') }, + meta: { pinned: 'right' as const }, size: 88, }, ] diff --git a/web/default/src/features/keys/components/data-table-row-actions.tsx b/web/default/src/features/keys/components/data-table-row-actions.tsx index 81855abc..d155f156 100644 --- a/web/default/src/features/keys/components/data-table-row-actions.tsx +++ b/web/default/src/features/keys/components/data-table-row-actions.tsx @@ -190,7 +190,7 @@ export function DataTableRowActions({ } return ( -
+
+
+ +
) } diff --git a/web/default/src/features/models/components/deployments-columns.tsx b/web/default/src/features/models/components/deployments-columns.tsx index 32d5eff0..541fefb5 100644 --- a/web/default/src/features/models/components/deployments-columns.tsx +++ b/web/default/src/features/models/components/deployments-columns.tsx @@ -21,7 +21,6 @@ import { Eye, Info, Pencil, Settings2, Timer, Trash2 } from 'lucide-react' import { useTranslation } from 'react-i18next' import { formatTimestampToDate } from '@/lib/format' import { Button } from '@/components/ui/button' -import { DataTableColumnHeader } from '@/components/data-table' import { StatusBadge } from '@/components/status-badge' import { TableId } from '@/components/table-id' import { getDeploymentStatusConfig } from '../constants' @@ -45,10 +44,8 @@ export function useDeploymentsColumns(opts: { return [ { accessorKey: 'id', - meta: { label: t('ID'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('ID'), + meta: { mobileHidden: true }, cell: ({ row }) => { const id = row.original.id return @@ -59,10 +56,8 @@ export function useDeploymentsColumns(opts: { id: 'name', accessorFn: (row) => row.container_name || row.deployment_name || row.name || '', - meta: { label: t('Name'), mobileTitle: true }, - header: ({ column }) => ( - - ), + header: t('Name'), + meta: { mobileTitle: true }, cell: ({ getValue }) => { const name = String(getValue() || '-') || '-' return ( @@ -71,7 +66,7 @@ export function useDeploymentsColumns(opts: { variant='neutral' copyText={name} size='sm' - className='font-mono' + className='-ml-1.5 font-mono' /> ) }, @@ -79,8 +74,8 @@ export function useDeploymentsColumns(opts: { }, { accessorKey: 'status', - meta: { label: t('Status'), mobileBadge: true }, header: t('Status'), + meta: { mobileBadge: true }, cell: ({ row }) => { const raw = row.original.status const key = normalizeDeploymentStatus(raw) @@ -95,6 +90,7 @@ export function useDeploymentsColumns(opts: { variant={config.variant} size='sm' copyable={false} + className='-ml-1.5' /> ) }, @@ -114,7 +110,6 @@ export function useDeploymentsColumns(opts: { }, { accessorKey: 'provider', - meta: { label: t('Provider') }, header: t('Provider'), cell: ({ row }) => { const provider = row.original.provider @@ -126,6 +121,7 @@ export function useDeploymentsColumns(opts: { autoColor={String(provider)} size='sm' copyable={false} + className='-ml-1.5' /> ) }, @@ -134,7 +130,6 @@ export function useDeploymentsColumns(opts: { }, { accessorKey: 'time_remaining', - meta: { label: t('Time remaining') }, header: t('Time remaining'), cell: ({ row }) => { const status = normalizeDeploymentStatus(row.original.status) @@ -185,8 +180,8 @@ export function useDeploymentsColumns(opts: { }, { id: 'hardware', - meta: { label: t('Hardware'), mobileHidden: true }, header: t('Hardware'), + meta: { mobileHidden: true }, accessorFn: (row) => row.hardware_info || row.hardware_name || row.brand_name || '', cell: ({ row }) => { @@ -220,10 +215,8 @@ export function useDeploymentsColumns(opts: { }, { accessorKey: 'created_at', - meta: { label: t('Created'), mobileHidden: true }, - header: ({ column }) => ( - - ), + header: t('Created'), + meta: { mobileHidden: true }, cell: ({ row }) => { const ts = typeof row.original.created_at === 'number' @@ -241,6 +234,7 @@ export function useDeploymentsColumns(opts: { }, { id: 'actions', + header: () => t('Actions'), enableHiding: false, enableSorting: false, cell: ({ row }) => { @@ -252,7 +246,7 @@ export function useDeploymentsColumns(opts: { '' return ( -
+
) }, - meta: { label: t('User') }, } ) } columns.push({ accessorKey: 'token_name', - header: ({ column }) => ( - - ), + header: t('Token'), cell: function TokenNameCell({ row }) { const { sensitiveVisible } = useUsageLogsContext() const log = row.original @@ -520,16 +508,12 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: t('Token') }, size: 160, }) - columns.push( { accessorKey: 'model_name', - header: ({ column }) => ( - - ), + header: t('Model'), cell: function ModelCell({ row }) { const log = row.original if (!isDisplayableLogType(log.type)) return null @@ -545,14 +529,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: t('Model'), mobileTitle: true }, + meta: { mobileTitle: true }, }, - { accessorKey: 'use_time', - header: ({ column }) => ( - - ), + header: t('Timing'), cell: ({ row }) => { const log = row.original if (!isTimingLogType(log.type)) return null @@ -656,14 +637,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: t('Timing') }, }, { accessorKey: 'prompt_tokens', - header: ({ column }) => ( - - ), + header: 'Tokens', cell: ({ row }) => { const log = row.original if (!isDisplayableLogType(log.type)) return null @@ -707,14 +685,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: 'Tokens' }, }, { accessorKey: 'quota', - header: ({ column }) => ( - - ), + header: t('Cost'), cell: ({ row }) => { const log = row.original if (!isDisplayableLogType(log.type)) return null @@ -762,7 +737,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: t('Cost') }, }, { @@ -820,7 +794,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef[] { ) }, - meta: { label: t('Details') }, size: 180, maxSize: 200, } diff --git a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx index 41b46aa6..83fb73ed 100644 --- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx +++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx @@ -38,7 +38,6 @@ import { } from 'lucide-react' import { useTranslation } from 'react-i18next' import { formatTimestampToDate } from '@/lib/format' -import { DataTableColumnHeader } from '@/components/data-table' import { StatusBadge } from '@/components/status-badge' import { MJ_TASK_TYPES } from '../../constants' import { @@ -87,9 +86,7 @@ export function useDrawingLogsColumns( const columns: ColumnDef[] = [ { accessorKey: 'submit_time', - header: ({ column }) => ( - - ), + header: t('Submit Time'), cell: ({ row }) => { const log = row.original const submitTime = row.getValue('submit_time') as number @@ -109,7 +106,6 @@ export function useDrawingLogsColumns( ) }, size: 180, - meta: { label: t('Submit Time') }, }, ] @@ -121,9 +117,7 @@ export function useDrawingLogsColumns( columns.push({ accessorKey: 'action', - header: ({ column }) => ( - - ), + header: t('Type'), cell: ({ row }) => { const action = row.getValue('action') as string return ( @@ -133,17 +127,15 @@ export function useDrawingLogsColumns( icon={getDrawingTypeIcon(action)} size='sm' copyable={false} + className='-ml-1.5' /> ) }, - meta: { label: t('Type') }, }) columns.push({ accessorKey: 'mj_id', - header: ({ column }) => ( - - ), + header: t('Task ID'), cell: ({ row }) => { const mjId = row.getValue('mj_id') as string @@ -162,7 +154,7 @@ export function useDrawingLogsColumns(
) }, - meta: { label: t('Task ID'), mobileTitle: true }, + meta: { mobileTitle: true }, }) columns.push( @@ -176,9 +168,7 @@ export function useDrawingLogsColumns( if (isAdmin) { columns.push({ accessorKey: 'code', - header: ({ column }) => ( - - ), + header: t('Submit Result'), cell: ({ row }) => { const code = row.getValue('code') as number @@ -188,10 +178,10 @@ export function useDrawingLogsColumns( variant={mjSubmitResultMapper.getVariant(String(code))} size='sm' copyable={false} + className='-ml-1.5' /> ) }, - meta: { label: t('Submit Result') }, }) } @@ -199,9 +189,7 @@ export function useDrawingLogsColumns( createProgressColumn({ headerLabel: t('Progress') }), { accessorKey: 'image_url', - header: ({ column }) => ( - - ), + header: t('Image'), cell: function ImageCell({ row }) { const log = row.original const imageUrl = row.getValue('image_url') as string @@ -232,13 +220,10 @@ export function useDrawingLogsColumns( ) }, - meta: { label: t('Image') }, }, { accessorKey: 'prompt', - header: ({ column }) => ( - - ), + header: t('Prompt'), cell: function PromptCell({ row }) { const log = row.original const prompt = row.getValue('prompt') as string @@ -269,7 +254,6 @@ export function useDrawingLogsColumns( ) }, - meta: { label: t('Prompt') }, size: 200, maxSize: 220, }, diff --git a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx index 61825161..9f37b6ee 100644 --- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx +++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx @@ -25,7 +25,6 @@ import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar' import { formatTimestampToDate } from '@/lib/format' import { cn } from '@/lib/utils' import { Avatar, AvatarFallback } from '@/components/ui/avatar' -import { DataTableColumnHeader } from '@/components/data-table' import { StatusBadge } from '@/components/status-badge' import { TASK_ACTIONS, TASK_STATUS } from '../../constants' import { taskActionMapper, taskStatusMapper } from '../../lib/mappers' @@ -94,9 +93,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { const columns: ColumnDef[] = [ { accessorKey: 'submit_time', - header: ({ column }) => ( - - ), + header: t('Submit Time'), cell: ({ row }) => { const log = row.original const submitTime = row.getValue('submit_time') as number @@ -117,17 +114,14 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { ) }, size: 180, - meta: { label: t('Submit Time') }, }, ] if (isAdmin) { columns.push(createChannelColumn({ headerLabel: t('Channel') }), { id: 'user', + header: t('User'), accessorFn: (row) => row.username || row.user_id, - header: ({ column }) => ( - - ), cell: function UserCell({ row }) { const { sensitiveVisible, setSelectedUserId, setUserInfoDialogOpen } = useUsageLogsContext() @@ -163,16 +157,13 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { ) }, - meta: { label: t('User') }, }) } columns.push( { accessorKey: 'task_id', - header: ({ column }) => ( - - ), + header: t('Task ID'), cell: ({ row }) => { const log = row.original const taskId = row.getValue('task_id') as string @@ -193,7 +184,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] {
) }, - meta: { label: t('Task ID'), mobileTitle: true }, + meta: { mobileTitle: true }, }, createDurationColumn({ submitTimeKey: 'submit_time', @@ -204,9 +195,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { }), { accessorKey: 'status', - header: ({ column }) => ( - - ), + header: t('Status'), cell: ({ row }) => { const status = row.getValue('status') as string return ( @@ -215,17 +204,15 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { variant={taskStatusMapper.getVariant(status)} size='sm' copyable={false} + className='-ml-1.5' /> ) }, - meta: { label: t('Status') }, }, createProgressColumn({ headerLabel: t('Progress') }), { accessorKey: 'fail_reason', - header: ({ column }) => ( - - ), + header: t('Details'), cell: function DetailsCell({ row }) { const log = row.original const failReason = row.getValue('fail_reason') as string @@ -295,7 +282,6 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef[] { ) }, - meta: { label: t('Details') }, size: 200, maxSize: 220, } diff --git a/web/default/src/features/users/components/data-table-row-actions.tsx b/web/default/src/features/users/components/data-table-row-actions.tsx index ca632bec..9a078ca8 100644 --- a/web/default/src/features/users/components/data-table-row-actions.tsx +++ b/web/default/src/features/users/components/data-table-row-actions.tsx @@ -136,7 +136,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) { } return ( - <> +
- +
) } diff --git a/web/default/src/features/users/components/users-columns.tsx b/web/default/src/features/users/components/users-columns.tsx index aed7bd2e..1cc3953d 100644 --- a/web/default/src/features/users/components/users-columns.tsx +++ b/web/default/src/features/users/components/users-columns.tsx @@ -27,7 +27,6 @@ import { TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip' -import { DataTableColumnHeader } from '@/components/data-table' import { GroupBadge } from '@/components/group-badge' import { LongText } from '@/components/long-text' import { StatusBadge } from '@/components/status-badge' @@ -67,26 +66,21 @@ export function useUsersColumns(): ColumnDef[] { enableSorting: false, enableHiding: false, size: 40, - meta: { label: t('Select') }, }, { accessorKey: 'id', - header: ({ column }) => ( - - ), + header: t('ID'), cell: ({ row }) => { return ( ) }, size: 80, - meta: { label: t('ID'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'username', - header: ({ column }) => ( - - ), + header: t('Username'), cell: ({ row }) => { const username = row.getValue('username') as string const displayName = row.original.display_name @@ -121,13 +115,11 @@ export function useUsersColumns(): ColumnDef[] { }, enableHiding: false, size: 220, - meta: { label: t('Username'), mobileTitle: true }, + meta: { mobileTitle: true }, }, { accessorKey: 'status', - header: ({ column }) => ( - - ), + header: t('Status'), cell: ({ row }) => { const user = row.original const requestCount = user.request_count @@ -142,7 +134,7 @@ export function useUsersColumns(): ColumnDef[] { return ( - }> + }> [] { }, enableSorting: false, size: 120, - meta: { label: t('Status'), mobileBadge: true }, + meta: { mobileBadge: true }, }, { id: 'quota', accessorKey: 'quota', - header: ({ column }) => ( - - ), + header: t('Quota'), cell: ({ row }) => { const user = row.original const used = user.used_quota @@ -183,6 +173,7 @@ export function useUsersColumns(): ColumnDef[] { label={t('No Quota')} variant='neutral' copyable={false} + className='-ml-1.5' /> ) } @@ -225,13 +216,10 @@ export function useUsersColumns(): ColumnDef[] { ) }, size: 170, - meta: { label: t('Quota') }, }, { accessorKey: 'group', - header: ({ column }) => ( - - ), + header: t('Group'), cell: ({ row }) => { const group = row.getValue('group') as string return @@ -242,13 +230,10 @@ export function useUsersColumns(): ColumnDef[] { return group.includes(searchValue) }, size: 140, - meta: { label: t('Group') }, }, { accessorKey: 'role', - header: ({ column }) => ( - - ), + header: t('Role'), cell: ({ row }) => { const roleValue = row.getValue('role') as number const roleConfig = USER_ROLES[roleValue as keyof typeof USER_ROLES] @@ -271,13 +256,10 @@ export function useUsersColumns(): ColumnDef[] { }, enableSorting: false, size: 120, - meta: { label: t('Role') }, }, { id: 'invite_info', - header: ({ column }) => ( - - ), + header: t('Invite Info'), cell: ({ row }) => { const user = row.original const affCount = user.aff_count || 0 @@ -347,13 +329,11 @@ export function useUsersColumns(): ColumnDef[] { }, size: 240, enableSorting: false, - meta: { label: t('Invite Info'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'created_at', - header: ({ column }) => ( - - ), + header: t('Created At'), cell: ({ row }) => { const ts = row.getValue('created_at') as number | undefined return ( @@ -363,13 +343,11 @@ export function useUsersColumns(): ColumnDef[] { ) }, size: 180, - meta: { label: t('Created At'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { accessorKey: 'last_login_at', - header: ({ column }) => ( - - ), + header: t('Last Login'), cell: ({ row }) => { const ts = row.getValue('last_login_at') as number | undefined return ( @@ -379,12 +357,13 @@ export function useUsersColumns(): ColumnDef[] { ) }, size: 180, - meta: { label: t('Last Login'), mobileHidden: true }, + meta: { mobileHidden: true }, }, { id: 'actions', + header: () => t('Actions'), cell: ({ row }) => , - meta: { label: t('Actions') }, + meta: { pinned: 'right' as const }, }, ] } diff --git a/web/default/src/tanstack-table.d.ts b/web/default/src/tanstack-table.d.ts index ba7d6c2a..e9b3cdf8 100644 --- a/web/default/src/tanstack-table.d.ts +++ b/web/default/src/tanstack-table.d.ts @@ -19,15 +19,14 @@ For commercial licensing, please contact support@quantumnous.com import '@tanstack/react-table' declare module '@tanstack/react-table' { - // Extended column metadata for enhanced table functionality interface ColumnMeta<_TData, _TValue> { - // Human-readable label for the column label?: string - // Optional description shown in tooltips or help text description?: string - // Whether this column can be sorted (overrides default behavior) - sortable?: boolean - // Custom CSS classes to apply to the column cells className?: string + pinned?: 'left' | 'right' + // Mobile card list layout hints (used by MobileCardList) + mobileTitle?: boolean // card title area (left, larger text) + mobileBadge?: boolean // status badge alongside title (right) + mobileHidden?: boolean // hide this column on mobile entirely } }