perf(web): improve frontend table rendering and pinned columns/UI table (#5405)
* refactor(web): centralize data table implementation - route all TanStack table setup through a shared data-table hook to remove repeated state and row model wiring. - move table rendering, static table wrappers, empty states, and primitive exports behind the data-table module. - update feature tables and configuration editors to share the same table UX while preserving their existing workflows. * refactor(web): trim data table public API - remove unused data-table exports and dead static table helper types. - keep internal table header, skeleton, empty state, and faceted filter helpers private to the data-table module. - route feature imports through the data-table barrel to avoid subpath coupling. * refactor(web): unify table rendering components - centralize static table headers, bodies, empty states, and shared class names behind the data-table package. - migrate settings, pricing, channel, key, subscription, and model tables to the shared table APIs. - remove data-table exports for low-level table primitives so feature code uses one supported abstraction. * perf(web): keep list tables fixed within page content - make shared data table pages fill available height and scroll row data inside the table body. - add a fixed content layout mode so selected list pages avoid page-level scrolling. - apply the fixed table behavior to keys, logs, channels, models, users, redemptions, and subscriptions. * perf(web): refine table pagination controls - show total row counts instead of redundant page range text. - tighten visible page buttons so pagination fits constrained table widths. - align pagination controls and tune text hierarchy for clearer scanning. * perf(web): stabilize model pricing table columns - keep model pricing columns at fixed widths so headers do not collapse in narrow layouts. - truncate long model names and pricing summaries within their cells instead of squeezing adjacent columns. * refactor(web): simplify data table rendering internals - split table body rendering into focused helpers for loading, empty, and row states. - extract static table row and cell class resolution to reduce branching in the main component. - reuse a single pagination page-size option list to avoid duplicated constants. * perf(pricing): reduce dynamic pricing table render work - reuse dynamic pricing field metadata instead of rebuilding it inside table columns. - precompute formatted dynamic prices per tier and group to avoid repeated entry mapping for each cell. - simplify select option construction in related dialogs while preserving the same choices. * refactor(web): streamline pricing table rendering - reuse translated endpoint select options between trigger data and menu items. - precompute dynamic pricing maps per group so table cells only resolve formatted values. - add local dynamic pricing type aliases to keep helper signatures readable. * refactor(web): merge pricing table imports * refactor(web): merge upstream ratio table imports * refactor(web): merge channel selector table imports * refactor(web): simplify tiered pricing select items * refactor(web): reuse model ratio row state * refactor(web): rely on table view row defaults * refactor(web): reuse pagination state values * refactor(web): hoist pagination size select items * refactor(web): clarify static table body rows * refactor(web): extract table page pagination rendering * fix(web): remove direct hast type dependency - rely on Shiki transformer contextual typing for line nodes. - allow frontend typecheck to pass without an undeclared hast package. * refactor(web): trim data table hook return API - return only the TanStack table instance from useDataTable. - keep internal state handling private because callers do not consume it directly. * refactor(web): keep static table empty row private - stop exporting the internal StaticDataTableEmptyRow helper. - keep the public static table API focused on the table component and column type. * refactor(web): hide data table view props from barrel * refactor(web): remove stale long text lint override * fix(web): keep pinned table columns opaque - apply pinned column background classes after custom column classes. - use an opaque hover background so scrolled content cannot show through fixed cells. * refactor(data-table): organize shared table components - group table primitives, page composition, toolbar controls, static tables, and hooks by responsibility. - split shared view types, row rendering, header rendering, and pinned-column styling out of the main table view. - keep the public data-table barrel stable while documenting the new ownership boundaries. * fix(web): stabilize split table column sizing - derive default colgroup widths from visible columns when split headers or header sizing are enabled. - apply a fixed table layout with computed minimum width so header and body columns stay aligned. - keep split-header containers from leaking horizontal overflow and avoid extra pinned-column borders. * fix(web): set stable table utility column widths - assign fixed widths to selection columns so shared colgroup sizing keeps checkbox cells compact. - size id columns in redemption and user tables to keep split headers aligned with body rows. * fix(web): align model metadata icon cells - render compact provider avatars in the metadata icon column instead of wide wordmarks. - position icons in a fixed-size wrapper so they line up with the existing icon header alignment. * fix(status-badge): hide status dot by default * fix(web): prevent user invite info overlap - give the invite info and created-at columns explicit widths so table sizing reserves enough space. - allow invite badges to wrap within the cell instead of spilling into adjacent columns. * perf(data-table): cache pinned column class resolution - reuse the pinned column lookup while table props stay stable to reduce repeated per-render work. - share the resolved column class handler across unified and split-header table layouts. - localize page-number screen reader labels so pagination remains accessible in every locale. * refactor(data-table): tighten static table modes - make StaticDataTable distinguish data-driven and children-only usage through explicit prop shapes. - remove unsupported columns-without-data fallback after confirming no repository callers rely on it. - default manual table modes away from unused local row models to reduce repeated table work. * fix(data-table): make pinned edit column opaque - use an opaque muted background for the active action column so sticky cells do not reveal scrolled content underneath. * fix(data-table): prevent narrow column overlap - apply stable header sizing to remaining desktop data table pages so constrained layouts scroll instead of compressing cells. - add explicit widths for key, quota, badge, and timestamp columns that contain fixed-format content. - constrain masked values and timestamp cells with truncation to keep content inside its assigned column. * fix(table): align table cell content with headers - remove extra inline padding from masked table text buttons so values start at the cell edge. - tag status badges and offset leading badges inside table cells to match header text alignment. * fix(table): prevent admin list column overflow - widen redemption and subscription table columns so masked codes, timestamps, and localized headers fit. - localize subscription ID headers and add Received amount translations across supported locales. * fix(provider-badge): unify provider icon spacing - add a shared provider badge component for icon and status label layout. - reuse it in channel type and model vendor columns so OpenAI icons align consistently.
This commit is contained in:
QuentinHsu
+62
-110
@@ -21,10 +21,6 @@ import {
|
||||
type ColumnDef,
|
||||
type RowSelectionState,
|
||||
type Table as TanStackTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table'
|
||||
import { Check, Copy, Info, Loader2, Settings } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
@@ -52,21 +48,17 @@ import {
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { DataTableBulkActions as BulkActionsToolbar } from '@/components/data-table'
|
||||
import { DataTablePagination } from '@/components/data-table/pagination'
|
||||
import {
|
||||
DataTableBulkActions as BulkActionsToolbar,
|
||||
DataTablePagination,
|
||||
DataTableView,
|
||||
useDataTable,
|
||||
} from '@/components/data-table'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import {
|
||||
sideDrawerContentClassName,
|
||||
@@ -200,7 +192,7 @@ function getTestTableColumnClass(columnId: string) {
|
||||
case 'status':
|
||||
return 'w-70 min-w-70 max-w-70 whitespace-normal'
|
||||
case 'actions':
|
||||
return 'bg-popover sticky right-0 z-20 w-24 min-w-24 border-l shadow-[-8px_0_8px_-8px_rgb(0_0_0_/_0.2)] whitespace-nowrap sm:w-28 sm:min-w-28'
|
||||
return 'bg-popover w-24 min-w-24 whitespace-nowrap sm:w-28 sm:min-w-28'
|
||||
default:
|
||||
return undefined
|
||||
}
|
||||
@@ -227,6 +219,14 @@ export function ChannelTestDialog({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
})
|
||||
const endpointSelectItems = useMemo(
|
||||
() =>
|
||||
endpointTypeOptions.map((option) => ({
|
||||
value: option.value,
|
||||
label: t(option.label),
|
||||
})),
|
||||
[t]
|
||||
)
|
||||
|
||||
const resetState = useCallback(() => {
|
||||
setEndpointType('auto')
|
||||
@@ -502,18 +502,17 @@ export function ChannelTestDialog({
|
||||
]
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
const { table } = useDataTable({
|
||||
data: tableData,
|
||||
columns,
|
||||
state: {
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
rowSelection,
|
||||
pagination,
|
||||
enableRowSelection: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
withFilteredRowModel: false,
|
||||
withSortedRowModel: false,
|
||||
withFacetedRowModel: false,
|
||||
})
|
||||
|
||||
if (!currentRow) {
|
||||
@@ -548,12 +547,7 @@ export function ChannelTestDialog({
|
||||
<div className='grid gap-2'>
|
||||
<Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
|
||||
<Select
|
||||
items={[
|
||||
...endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return { value: itemValue, label: t(option.label) }
|
||||
}),
|
||||
]}
|
||||
items={endpointSelectItems}
|
||||
value={endpointType}
|
||||
onValueChange={(v) => v !== null && setEndpointType(v)}
|
||||
>
|
||||
@@ -562,14 +556,11 @@ export function ChannelTestDialog({
|
||||
</SelectTrigger>
|
||||
<SelectContent alignItemWithTrigger={false}>
|
||||
<SelectGroup>
|
||||
{endpointTypeOptions.map((option) => {
|
||||
const itemValue = option.value
|
||||
return (
|
||||
<SelectItem key={itemValue} value={itemValue}>
|
||||
{t(option.label)}
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
{endpointSelectItems.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
@@ -615,80 +606,41 @@ export function ChannelTestDialog({
|
||||
</div>
|
||||
|
||||
<div className='space-y-3'>
|
||||
<div
|
||||
className='overflow-hidden rounded-md border'
|
||||
role='region'
|
||||
aria-label={t('Channel models')}
|
||||
>
|
||||
<div className='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'>
|
||||
<Table className='w-max min-w-full table-auto'>
|
||||
<colgroup>
|
||||
<col className='w-10 min-w-10' />
|
||||
<col className='w-auto' />
|
||||
<col className='w-70' />
|
||||
<col className='w-24 sm:w-28' />
|
||||
</colgroup>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
className={getTestTableColumnClass(
|
||||
header.column.id
|
||||
)}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={
|
||||
row.getIsSelected() ? 'selected' : undefined
|
||||
}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={getTestTableColumnClass(
|
||||
cell.column.id
|
||||
)}
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={table.getVisibleLeafColumns().length}
|
||||
className='text-muted-foreground h-16 text-center text-sm'
|
||||
>
|
||||
{models.length
|
||||
? 'No models matched your search.'
|
||||
: 'This channel has no configured models.'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
<DataTableView
|
||||
table={table}
|
||||
containerClassName='rounded-md'
|
||||
containerProps={{
|
||||
role: 'region',
|
||||
'aria-label': t('Channel models'),
|
||||
}}
|
||||
tableContainerClassName='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'
|
||||
tableClassName='w-max min-w-full table-auto'
|
||||
pinnedColumns={[
|
||||
{
|
||||
columnId: 'actions',
|
||||
side: 'right',
|
||||
className: 'w-24 min-w-24 sm:w-28 sm:min-w-28',
|
||||
cellClassName: 'bg-popover',
|
||||
},
|
||||
]}
|
||||
colgroup={
|
||||
<colgroup>
|
||||
<col className='w-10 min-w-10' />
|
||||
<col className='w-auto' />
|
||||
<col className='w-70' />
|
||||
<col className='w-24 sm:w-28' />
|
||||
</colgroup>
|
||||
}
|
||||
getColumnClassName={(columnId) =>
|
||||
getTestTableColumnClass(columnId)
|
||||
}
|
||||
emptyContent={
|
||||
models.length
|
||||
? t('No models matched your search.')
|
||||
: t('This channel has no configured models.')
|
||||
}
|
||||
emptyCellClassName='text-muted-foreground h-16 text-center text-sm'
|
||||
/>
|
||||
|
||||
<DataTablePagination table={table} />
|
||||
</div>
|
||||
|
||||
+48
-50
@@ -31,15 +31,8 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { ConfirmDialog } from '@/components/confirm-dialog'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import {
|
||||
@@ -358,48 +351,53 @@ export function MultiKeyManageDialog({
|
||||
{t('No keys found')}
|
||||
</div>
|
||||
) : (
|
||||
<div className='min-w-[800px]'>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className='w-20'>{t('Index')}</TableHead>
|
||||
<TableHead className='w-32'>{t('Status')}</TableHead>
|
||||
<TableHead className='min-w-[200px]'>
|
||||
{t('Disabled Reason')}
|
||||
</TableHead>
|
||||
<TableHead className='w-44'>
|
||||
{t('Disabled Time')}
|
||||
</TableHead>
|
||||
<TableHead className='w-44 text-right'>
|
||||
{t('Actions')}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{keys.map((key) => (
|
||||
<TableRow key={key.index}>
|
||||
<TableCell className='font-mono text-sm'>
|
||||
#{key.index + 1}
|
||||
</TableCell>
|
||||
<TableCell>{renderStatusBadge(key.status)}</TableCell>
|
||||
<TableCell className='max-w-xs truncate text-sm'>
|
||||
{key.reason || '-'}
|
||||
</TableCell>
|
||||
<TableCell className='text-muted-foreground text-sm'>
|
||||
{formatKeyTimestamp(key.disabled_time)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<MultiKeyTableRowActions
|
||||
keyIndex={key.index}
|
||||
status={key.status}
|
||||
onAction={setConfirmAction}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<StaticDataTable
|
||||
className='rounded-none border-0'
|
||||
tableClassName='min-w-[800px]'
|
||||
data={keys}
|
||||
getRowKey={(key) => key.index}
|
||||
columns={[
|
||||
{
|
||||
id: 'index',
|
||||
header: t('Index'),
|
||||
className: 'w-20',
|
||||
cellClassName: 'font-mono text-sm',
|
||||
cell: (key) => `#${key.index + 1}`,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: t('Status'),
|
||||
className: 'w-32',
|
||||
cell: (key) => renderStatusBadge(key.status),
|
||||
},
|
||||
{
|
||||
id: 'reason',
|
||||
header: t('Disabled Reason'),
|
||||
className: 'min-w-[200px]',
|
||||
cellClassName: 'max-w-xs truncate text-sm',
|
||||
cell: (key) => key.reason || '-',
|
||||
},
|
||||
{
|
||||
id: 'disabled-time',
|
||||
header: t('Disabled Time'),
|
||||
className: 'w-44',
|
||||
cellClassName: 'text-muted-foreground text-sm',
|
||||
cell: (key) => formatKeyTimestamp(key.disabled_time),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-44 text-right',
|
||||
cell: (key) => (
|
||||
<MultiKeyTableRowActions
|
||||
keyIndex={key.index}
|
||||
status={key.status}
|
||||
onAction={setConfirmAction}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user