// // Copyright (c) 2025-2026 rustmailer.com (https://rustmailer.com) // // This file is part of the Bichon Email Archiving Project // // 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 . import { useState, MouseEvent as ReactMouseEvent, useEffect } from 'react' import { ColumnDef, ColumnFiltersState, Row, RowData, flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table' import { type Table } from '@tanstack/react-table' import { Table as ShadcnTable, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table' import { useTranslation } from 'react-i18next' import { EmailEnvelope } from '@/api' import { cn } from '@/lib/utils' import { useSearchContext } from '../context' import { ScrollArea } from '@/components/ui/scroll-area' declare module '@tanstack/react-table' { // eslint-disable-next-line @typescript-eslint/no-unused-vars interface ColumnMeta { className: string } } interface DataTableProps { columns: ColumnDef[] data: EmailEnvelope[] onRowClick: (e: ReactMouseEvent, row: Row) => void setSortBy: (sortBy: "DATE" | "SIZE") => void setSortOrder: (value: "desc" | "asc") => void children?: (table: Table) => React.ReactNode } export function SearchTable({ columns, data, onRowClick, setSortBy, setSortOrder, children }: DataTableProps) { const { sorting, setSorting } = useSearchContext() const { t } = useTranslation() const [rowSelection, setRowSelection] = useState({}) const [columnFilters, setColumnFilters] = useState([]) useEffect(() => { const [value] = sorting setSortBy(value.id.toUpperCase() as "DATE" | "SIZE") setSortOrder(value.desc ? "desc" : "asc") }, [sorting]) const table = useReactTable({ data, columns, state: { sorting, rowSelection, columnFilters, }, enableRowSelection: true, onRowSelectionChange: setRowSelection, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getSortedRowModel: getSortedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues(), }) return (
{children && (<>{children(table)})} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( onRowClick(e, row)} > {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( {t('common.table.noResults')} )}
) }