DenozordecandCursor
b1315ffe0a
- Установлен @reui/data-grid через shadcn CLI: зависимости @tanstack/react-table, @tanstack/react-virtual, @dnd-kit/* добавлены в apps/web - Поправлены type-only импорты во всех файлах data-grid (verbatimModuleSyntax), убран unused параметр table в DataGridTableVirtualBody - Создана shared-обёртка apps/web/src/components/data-grid-card.tsx (замена DataTableCard) с типизированными ColumnDef<TData>, сортировкой, пагинацией (>25 строк), column pinning, optional virtualization (DataGridScrollArea + DataGridTableVirtual), footer-контентом и хелпером columnDefFromDataTable - Мигрированы все 7 страниц: vps, dashboard, payments, balance, accounts, tariffs, providers — DataTableCard/TableCard+Table → DataGridCard - Virtualization включена для VPS и payments при >200 строк (height 560) - Column pinning последней колонки (actions) — vps, payments, balance, accounts, providers - Footer rows с итогами: balance (приходы/списания/итого), payments (по валютам) - build + tsc --noEmit без ошибок Co-authored-by: Cursor <[email protected]>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { type ReactElement } from "react"
|
|
import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
|
|
import { type Table } from "@tanstack/react-table"
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "@cfdm/ui/components/dropdown-menu"
|
|
|
|
function DataGridColumnVisibility<TData>({
|
|
table,
|
|
trigger,
|
|
}: {
|
|
table: Table<TData>
|
|
trigger: ReactElement<Record<string, unknown>>
|
|
}) {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger render={trigger} />
|
|
<DropdownMenuContent align="end" className="min-w-[150px]">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel className="font-medium">
|
|
Toggle Columns
|
|
</DropdownMenuLabel>
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className="capitalize"
|
|
checked={column.getIsVisible()}
|
|
onSelect={(event) => event.preventDefault()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{getColumnHeaderLabel(column)}
|
|
</DropdownMenuCheckboxItem>
|
|
)
|
|
})}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
export { DataGridColumnVisibility } |