Files
new-api/web/default/src/components/data-table/layout/card-cell-utils.ts
T
CaIon 68585568d6 feat(data-table): add reusable card/table view toggle
Add an opt-in card view to the shared data-table stack (DataTablePage),
toggled via a segmented control in the toolbar with per-table localStorage
persistence. Cards render generically from column meta by default, with an
optional renderCard slot. Defaults to table-only so existing pages are
unchanged.

Wire it into the channels page with a bespoke ChannelCard that reuses every
column's cell renderer, preserving all table information and interactions
(selection, inline priority/weight, balance refresh, status, actions, tag
expand).
2026-06-19 17:43:11 +08:00

60 lines
2.0 KiB
TypeScript
Vendored

/*
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 <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { flexRender, type Cell, type Table } from '@tanstack/react-table'
import type { ReactNode } from 'react'
/**
* Shared cell helpers for the column-meta-driven card content used by both the
* mobile list and the desktop card grid. Kept separate from the card content
* component so the module exports only non-component utilities.
*/
export function getCellLabel<TData>(cell: Cell<TData, unknown>): string | null {
const { header, meta } = cell.column.columnDef
if (typeof header === 'string') {
return header
}
if (meta?.label) {
return meta.label
}
return null
}
export function renderCellContent<TData>(
cell: Cell<TData, unknown>
): ReactNode {
const cellRenderer = cell.column.columnDef.cell
if (cellRenderer) {
return flexRender(cellRenderer, cell.getContext())
}
return cell.getValue() as ReactNode
}
/**
* Whether any visible column declares `mobileTitle`/`mobileBadge` meta. When
* true the compact two-tier layout is used; otherwise the condensed
* label:value fallback layout is used.
*/
export function tableHasCompactMeta<TData>(table: Table<TData>): boolean {
return table.getVisibleLeafColumns().some((col) => {
const meta = col.columnDef.meta
return Boolean(meta?.mobileTitle || meta?.mobileBadge)
})
}