Merge pull request #112 from ktdd/search-table-v1

Replaced email listing with a table with adjustable columns + other changes
2026-08-03 07:48:34 +02:00 · 2026-01-14 14:32:24 +08:00
parent a6dd1d19ff 884ae64fc5
commit a64351d409
10 changed files with 837 additions and 64 deletions
@@ -24,6 +24,7 @@ import {
  DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
+import { Input } from "@/components/ui/input"
 import {
  Select,
  SelectContent,
@@ -33,14 +34,15 @@ import {
 } from '@/components/ui/select'
 import { useTranslation } from 'react-i18next'
 import { showNumbers } from '@/lib/utils'
+import { useEffect, useState } from 'react'

 interface PaginationProps {
  totalItems: number
-  pageIndex: number,
-  pageSize: number,
-  hasNextPage: () => boolean,
-  setPageIndex: (pageIndex: number) => void,
-  setPageSize: (pageSize: number) => void,
+  pageIndex: number
+  pageSize: number
+  hasNextPage: () => boolean
+  setPageIndex: (pageIndex: number) => void
+  setPageSize: (pageSize: number) => void
 }

 export function EnvelopeListPagination({
@@ -52,8 +54,13 @@ export function EnvelopeListPagination({
  setPageSize,
 }: PaginationProps) {
  const { t } = useTranslation()
+  const [pageInput, setPageInput] = useState(pageIndex + 1)
  const pageCount = Math.ceil(totalItems / pageSize)

+  useEffect(() => {
+    setPageInput(pageIndex + 1)
+  }, [pageIndex])
+
  const handlePageSizeChange = (value: string) => {
    const newPageSize = Number(value)
    setPageSize(newPageSize)
@@ -69,7 +76,7 @@ export function EnvelopeListPagination({
    setPageIndex(newPageIndex)
  }

-  const currentPage = pageIndex + 1;
+  const currentPage = pageIndex + 1
  const pageNumbers = showNumbers(currentPage, pageCount)

  return (
@@ -97,7 +104,16 @@ export function EnvelopeListPagination({
          </Select>
        </div>
        <div className='flex items-center justify-center text-sm font-medium'>
-          {t("table.page")} {pageIndex + 1} {t("table.of")} {pageCount}
+          {t("table.page")}
+          <Input type="number" value={pageInput} onBlur={() => {
+            if (Number.isNaN(pageInput)) return
+            if (pageInput > 0) setPageIndex(pageInput - 1)
+            else setPageIndex(0)
+          }}
+          onChange={(e) => setPageInput(Number(e.target.value))}
+          className='mx-2 w-20'
+          />
+          {t("table.of")} {pageCount}
        </div>
        <div className='flex items-center space-x-2'>
          <Button
@@ -154,4 +170,4 @@ export function EnvelopeListPagination({
      </div>
    </div>
  )
-}
+}
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'

 interface ScrollAreaProps
  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
-  orientation?: 'horizontal' | 'vertical'
+  orientation?: 'horizontal' | 'vertical' | 'both'
 }

 const ScrollArea = React.forwardRef<
@@ -24,7 +24,12 @@ const ScrollArea = React.forwardRef<
    >
      {children}
    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar orientation={orientation} />
+    {orientation === "both" ? (
+      <>
+        <ScrollBar orientation="vertical" />
+        <ScrollBar orientation="horizontal" />
+      </>
+    ) : <ScrollBar orientation={orientation} />}
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
 ))
@@ -0,0 +1,143 @@
+//
+// Copyright (c) 2025 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 <http://www.gnu.org/licenses/>.
+
+import { useTranslation } from 'react-i18next'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { SquarePen } from 'lucide-react'
+import { Button } from '@/components/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { useState } from 'react'
+import { useSearchContext } from './context'
+import { Label } from '@/components/ui/label'
+
+interface Props {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const defaultColumns = (t: (key: string) => string) => [
+    {
+        label: t('search.account'),
+        value: "account_email"
+    },
+    {
+        label: t('search.mailbox'),
+        value: "mailbox_name"
+    },
+    {
+        label: t('search.from'),
+        value: "from"
+    },
+    {
+        label: t('search.to'),
+        value: "to"
+    },
+    {
+        label: t('search.subject'),
+        value: "subject"
+    },
+    {
+        label: t('mail.attachments'),
+        value: "attachments"
+    },
+    {
+        label: t('search.size'),
+        value: "size"
+    },
+    {
+        label: t('search.date'),
+        value: "date"
+    },
+]
+
+export function ColumnsDialog({ open, onOpenChange }: Props) {
+  const { t } = useTranslation()
+  const { setColumnVisibility } = useSearchContext()
+  const columns = defaultColumns(t)
+
+  const [selected, setSelected] = useState(() => {
+    const _columns = localStorage.getItem("searchTableColumns")
+      ? JSON.parse(localStorage.getItem("searchTableColumns") as string) as Record<string, boolean>
+      : undefined
+
+      if (_columns) return new Map(Object.entries(_columns).map(([key, value]) => [key, value]))
+      return new Map(columns.map((col) => [col.value, true]))
+  })
+
+  const handleSave = () => {
+    const _selected = Object.fromEntries(selected)
+    setColumnVisibility(_selected)
+    localStorage.setItem("searchTableColumns", JSON.stringify(_selected))
+    onOpenChange(false)
+  }
+
+  const toggleSelected = (column: string) => {
+    setSelected(prev => {
+      const value = new Map(prev)
+
+      if (value.get(column)) {
+        value.set(column, false)
+      } else {
+        value.set(column, true)
+      }
+
+      return value
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <SquarePen className="h-5 w-5" />
+              {t('common.columns')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-5 py-4">
+          <div className="flex flex-wrap flex-col gap-2">
+            {columns.map(col => (
+              <div key={col.value} className="flex flex-row gap-2 items-center">
+                <Checkbox
+                  id={col.value}
+                  checked={selected.get(col.value)}
+                  onCheckedChange={() => toggleSelected(col.value)}
+                />
+                <Label htmlFor={col.value} className="cursor-pointer text-sm font-normal">
+                  {col.label}
+                </Label>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-end items-center">
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {t('search.addTags.cancel')}
+            </Button>
+            <Button onClick={handleSave}>
+              {t('search.addTags.save')}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -19,8 +19,9 @@

 import React from 'react'
 import { EmailEnvelope } from '@/api'
+import { SortingState, VisibilityState } from '@tanstack/react-table'

-export type SearchDialogType = 'mailbox' | 'display' | 'delete' | 'filters' | 'tags' | 'edit-tags' | 'search-form' | 'restore'
+export type SearchDialogType = 'mailbox' | 'display' | 'delete' | 'filters' | 'tags' | 'edit-tags' | 'search-form' | 'restore' | 'columns'

 interface SearchContextType {
  open: SearchDialogType | null
@@ -32,6 +33,10 @@ interface SearchContextType {
  selected: Map<number, Set<number>>
  setSelected: React.Dispatch<React.SetStateAction<Map<number, Set<number>>>>
  selectedTags: string[]
+  sorting: SortingState
+  setSorting: React.Dispatch<React.SetStateAction<SortingState>>
+  columnVisibility: VisibilityState
+  setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>
 }

 const SearchContext = React.createContext<SearchContextType | null>(null)
@@ -23,10 +23,9 @@ import { Main } from '@/components/layout/main';
 import { useSearchMessages } from '@/hooks/use-search-messages';
 import { SearchFormDialog } from './search-form';
 import { EnvelopeListPagination } from '@/components/pagination';
-import { MailList } from './mail-list';
 import React from 'react';
 import { EmailEnvelope } from '@/api';
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Filter, SearchIcon } from 'lucide-react';
+import { Filter, SearchIcon, SquarePen } from 'lucide-react';
 import { MailDisplayDrawer } from './mail-display-dialog';
 import { EnvelopeDeleteDialog } from './delete-dialog';
 import SearchProvider, { SearchDialogType } from './context';
@@ -39,8 +38,9 @@ import { EditTagsDialog } from './add-tag-dialog';
 import { useTranslation } from 'react-i18next';
 import Logo from '@/assets/logo.svg'
 import { RestoreMessageDialog } from './restore-message-dialog';
-import { Separator } from '@/components/ui/separator';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { ColumnsDialog } from './columns-dialog';
+import { MailListTable } from './mail-list-table';
+import { SortingState, VisibilityState } from '@tanstack/react-table';

 export default function Search() {
  const { t } = useTranslation()
@@ -49,6 +49,11 @@ export default function Search() {
  const [toDelete, setToDelete] = React.useState<Map<number, Set<number>>>(new Map());
  const [selected, setSelected] = React.useState<Map<number, Set<number>>>(new Map());
  const [selectedTags, setSelectedTags] = React.useState<string[]>([]);
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: "date", desc: true }]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(localStorage.getItem("searchTableColumns")
+    ? JSON.parse(localStorage.getItem("searchTableColumns") as string) as Record<string, boolean>
+    : {}
+  )

  const {
    emails,
@@ -58,8 +63,6 @@ export default function Search() {
    isFetching,
    page,
    pageSize,
-    sortBy,
-    sortOrder,
    setPage,
    setPageSize,
    setSortBy,
@@ -92,7 +95,23 @@ export default function Search() {
    <>
      <FixedHeader />
      <Main>
-        <SearchProvider value={{ open, setOpen, currentEnvelope: selectedEnvelope, selectedTags, setCurrentEnvelope: setSelectedEnvelope, toDelete, setToDelete, selected, setSelected }}>
+        <SearchProvider
+          value={{ 
+            open,
+            setOpen,
+            currentEnvelope: selectedEnvelope,
+            selectedTags,
+            setCurrentEnvelope: setSelectedEnvelope,
+            toDelete,
+            setToDelete,
+            selected,
+            setSelected,
+            sorting,
+            setSorting,
+            columnVisibility,
+            setColumnVisibility
+          }}
+        >
          <div className="mx-auto w-full px-4">
            <div className="mb-4 lg:hidden">
              <Sheet>
@@ -127,7 +146,7 @@ export default function Search() {
                </div>
              </aside>
              <div className="flex-1 min-w-0 space-y-4">
-                <div className="flex flex-row items-center justify-between w-full border-b pb-4">
+                <div className="flex flex-row gap-4 items-end">
                  <Button
                    size="sm"
                    variant="default"
@@ -137,46 +156,15 @@ export default function Search() {
                    <SearchIcon className="mr-2 h-4 w-4" />
                    {t('common.search')}
                  </Button>
-                  <div className="flex items-center gap-2 bg-muted/50 p-1 rounded-lg border">
-                    <span className="text-xs font-medium text-muted-foreground px-2">
-                      {t('search.sort')}
-                    </span>
-                    <Separator orientation="vertical" className="h-4" />
-                    <ToggleGroup
-                      type="single"
-                      value={sortBy}
-                      onValueChange={(value) => value && setSortBy(value as "DATE" | "SIZE")}
-                      className="gap-1"
-                    >
-                      <ToggleGroupItem
-                        value="DATE"
-                        size="sm"
-                        className="h-7 px-3 text-xs data-[state=on]:bg-background data-[state=on]:shadow-sm"
-                      >
-                        {t('search.date')}
-                      </ToggleGroupItem>
-                      <ToggleGroupItem
-                        value="SIZE"
-                        size="sm"
-                        className="h-7 px-3 text-xs data-[state=on]:bg-background data-[state=on]:shadow-sm"
-                      >
-                        {t('search.size')}
-                      </ToggleGroupItem>
-                    </ToggleGroup>
-                    <Separator orientation="vertical" className="h-4" />
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 hover:bg-background"
-                      onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
-                    >
-                      {sortOrder === "asc" ? (
-                        <ArrowUpWideNarrow className="h-4 w-4 text-primary" />
-                      ) : (
-                        <ArrowDownWideNarrow className="h-4 w-4 text-primary" />
-                      )}
-                    </Button>
-                  </div>
+                  <Button
+                    size="sm"
+                    variant="default"
+                    onClick={() => setOpen("columns")}
+                    className="px-4 shadow-sm"
+                  >
+                    <SquarePen className="mr-2 h-4 w-4" />
+                    {t('common.columns')}
+                  </Button>
                </div>
                {isLoading && (
                  <Card>
@@ -204,14 +192,16 @@ export default function Search() {
                    </p>
                  </div>
                </div>}
-                {total > 0 && <ScrollArea className='h-[calc(100vh-14rem)] w-full pr-4 -mr-4 py-1'>
-                  <MailList
+                {total > 0 && <ScrollArea className='h-[calc(100vh-14rem)] w-full pr-4 -mr-4 py-1' orientation='both'>
+                  <MailListTable
                    isLoading={isLoading}
                    items={emails}
                    onEnvelopeChanged={(envelope) => {
                      setOpen('display');
                      setSelectedEnvelope(envelope);
                    }}
+                    setSortBy={setSortBy}
+                    setSortOrder={setSortOrder}
                  />
                </ScrollArea>}
                {total > 0 && <EnvelopeListPagination
@@ -256,7 +246,14 @@ export default function Search() {
            open={open === 'restore'}
            onOpenChange={() => setOpen('restore')}
          />
-        </SearchProvider>
+
+          <ColumnsDialog
+            key='columns-dialog'
+            open={open === 'columns'}
+            onOpenChange={() => setOpen('columns')}
+          />
+
+       </SearchProvider>
      </Main>
    </>
  );
@@ -0,0 +1,239 @@
+//
+// Copyright (c) 2025 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 <http://www.gnu.org/licenses/>.
+
+
+import { dateFnsLocaleMap, formatBytes } from "@/lib/utils"
+import { format, formatDistanceToNow } from "date-fns"
+import { Paperclip } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Checkbox } from "@/components/ui/checkbox"
+import { EmailEnvelope } from "@/api"
+import { useSearchContext } from "./context"
+import { MailBulkActions } from "./bulk-actions"
+import { useTranslation } from 'react-i18next'
+import { enUS } from "date-fns/locale"
+import { ColumnDef } from "@tanstack/react-table"
+import LongText from "@/components/long-text"
+import { DataTableColumnHeader } from "./table/data-table-column-header"
+import { SearchTable } from "./table/table"
+import { DataTableRowActions } from "./table/data-table-row-actions"
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+interface MailListProps {
+    items: EmailEnvelope[]
+    isLoading: boolean
+    onEnvelopeChanged: (envelope: EmailEnvelope) => void
+    setSortBy: (sortBy: "DATE" | "SIZE") => void
+    setSortOrder: (value: "desc" | "asc") => void
+}
+
+export function MailListTable({
+    items,
+    isLoading,
+    onEnvelopeChanged,
+    setSortBy,
+    setSortOrder
+}: MailListProps) {
+    const { t, i18n } = useTranslation()
+
+    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS
+    const { selected, setSelected } = useSearchContext()
+
+    const columns: ColumnDef<EmailEnvelope>[] = [
+      {
+        accessorKey: "id",
+        header: () => (
+            <Checkbox
+              checked={
+                totalSelected === items.length && items.length > 0
+                  ? true
+                  : totalSelected > 0
+                    ? "indeterminate"
+                    : false
+              }
+              onCheckedChange={handleToggleAll}
+              className="h-4 w-4"
+            />
+        ),
+        cell: ({ row }) => (
+            <Checkbox
+              checked={hasSelected(row.original.account_id, row.original.id)}
+              onCheckedChange={() => toggleSelected(row.original.account_id, row.original.id)}
+              onClick={(e) => e.stopPropagation()}
+              className="h-4 w-4 shrink-0"
+            />
+        ),
+        meta: { className: 'text-left text-sm' },
+        minSize: 25,
+        maxSize: 25,
+      },
+      {
+        accessorKey: "account_email",
+        header: t('search.account'),
+        cell: ({ row }) => <LongText className='text-xs max-w-[150px]'>{row.original.account_email}</LongText>,
+        meta: { className: 'text-left text-sm' },
+        minSize: 166
+      },
+      {
+        accessorKey: "mailbox_name",
+        header: t('search.mailbox'),
+        cell: ({ row }) => <LongText className='text-xs max-w-[100px]'>{row.original.mailbox_name}</LongText>,
+        meta: { className: 'text-left text-sm' },
+        minSize: 116,
+        maxSize: 116,
+      },
+      {
+        accessorKey: "from",
+        header: t('search.from'),
+        cell: ({ row }) => <LongText className='text-xs max-w-[134px]'>{row.original.from}</LongText>,
+        meta: { className: 'text-left text-sm' },
+        minSize: 150,
+      },
+      {
+        accessorKey: "to",
+        header: t('search.to'),
+        cell: ({ row }) => <LongText className='text-xs max-w-[180px]'>{row.original.to.join(", ")}</LongText>,
+        meta: { className: 'text-left text-sm' },
+      },
+      {
+        accessorKey: "subject",
+        header: t('search.subject'),
+        cell: ({ row }) => <LongText className='text-xs max-w-[500px]'>{row.original.subject}</LongText>,
+        meta: { className: 'text-left text-sm' },
+        size: 1000
+      },
+      {
+        id: "attachment_count",
+        header: () => <Paperclip size={16} />,
+        cell: ({ row }) => <span className='text-xs'>{(row.original.attachments ?? []).length}</span>,
+        meta: { className: 'text-left text-sm' },
+        minSize: 40,
+        maxSize: 40
+      },
+      {
+        accessorKey: 'size',
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={t('search.size')} />
+        ),
+        cell: ({ row }) => <span className='text-xs max-w-[40px]'>{formatBytes(row.original.size)}</span>,
+        meta: { className: 'text-left text-sm' },
+        minSize: 100,
+        maxSize: 100,
+      },
+      {
+        accessorKey: 'date',
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={t('search.date')} />
+        ),
+        cell: ({ row }) => {
+          const date = new Date(row.original.date)
+          const title = format(date, 'yyyy-MM-dd HH:mm:ss')
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className='text-xs whitespace-nowrap'>
+                  {formatDistanceToNow(date, { addSuffix: true, locale })}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{title}</TooltipContent>
+            </Tooltip>
+          )
+        },
+        meta: { className: 'text-left text-sm' },
+        minSize: 100,
+      },
+      {
+        id: 'actions',
+        header: t('users.columns.actions'),
+        cell: DataTableRowActions,
+        minSize: 70,
+        maxSize: 70,
+      },
+    ]
+
+    const handleToggleAll = () => {
+      const total = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
+
+      if (total === items.length && items.length > 0) {
+        setSelected(new Map())
+      } else {
+        setSelected(prev => {
+          const next = new Map(prev)
+          for (const item of items) {
+            const set = new Set(next.get(item.account_id) || [])
+            set.add(item.id)
+            next.set(item.account_id, set)
+          }
+          return next
+        })
+      }
+    }
+
+    const toggleSelected = (accountId: number, mailId: number) => {
+      setSelected(prev => {
+        const next = new Map(prev)
+        const set = new Set(next.get(accountId) || [])
+
+        if (set.has(mailId)) {
+          set.delete(mailId)
+          if (set.size === 0) next.delete(accountId)
+          else next.set(accountId, set)
+        } else {
+          set.add(mailId)
+          next.set(accountId, set)
+        }
+        return next
+      })
+    }
+
+    const totalSelected = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)
+
+    const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false
+
+    if (isLoading) {
+        return (
+            <div className="divide-y divide-border">
+                {Array.from({ length: 8 }).map((_, i) => (
+                    <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+                        <Skeleton className="h-3 w-3" />
+                        <Skeleton className="h-3 w-3 rounded-full" />
+                        <Skeleton className="h-3 flex-1" />
+                        <Skeleton className="h-2.5 w-16" />
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <>
+          <SearchTable
+            data={items}
+            columns={columns}
+            onRowClick={(e, row) => {
+              const target = e.target as HTMLElement
+              if (target.closest('input[type="checkbox"], button')) return
+              onEnvelopeChanged(row.original)
+            }}
+            setSortBy={setSortBy}
+            setSortOrder={setSortOrder}
+          />
+          {totalSelected > 0 && <MailBulkActions />}
+        </>
+    )
+}
@@ -0,0 +1,83 @@
+//
+// Copyright (c) 2025 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 <http://www.gnu.org/licenses/>.
+
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CaretSortIcon,
+} from '@radix-ui/react-icons'
+import { Column } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+  const { t } = useTranslation()
+  return (
+    <div className={cn('flex items-center space-x-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='ghost'
+            size='sm'
+            className=' h-8 data-[state=open]:bg-accent'
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDownIcon className='ml-2 h-4 w-4' />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUpIcon className='ml-2 h-4 w-4' />
+            ) : (
+              <CaretSortIcon className='ml-2 h-4 w-4' />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='start'>
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+            {t('table.asc')}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
+            {t('table.desc')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
@@ -0,0 +1,121 @@
+//
+// Copyright (c) 2025 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 <http://www.gnu.org/licenses/>.
+
+
+import { Row } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+import { MoreVertical, TagIcon, Trash2 } from 'lucide-react'
+import { EmailEnvelope } from '@/api'
+import { useSearchContext } from '../context'
+
+interface DataTableRowActionsProps {
+  row: Row<EmailEnvelope>
+}
+
+export function DataTableRowActions({ row }: DataTableRowActionsProps) {
+  const { setOpen, setCurrentEnvelope, setToDelete } = useSearchContext()
+  const { t } = useTranslation()
+
+  const toggleToDelete = (accountId: number, mailId: number) => {
+    setToDelete(prev => {
+      const next = new Map(prev)
+      const set = new Set(next.get(accountId) || [])
+
+      if (set.has(mailId)) {
+        set.delete(mailId)
+        if (set.size === 0) next.delete(accountId)
+        else next.set(accountId, set)
+      } else {
+        set.add(mailId)
+        next.set(accountId, set)
+      }
+      return next
+    })
+  }
+
+  const handleDelete = (envelope: EmailEnvelope) => {
+    setToDelete(new Map())
+    toggleToDelete(envelope.account_id, envelope.id)
+    setOpen("delete")
+  }
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='ghost'
+            className='flex h-8 w-8 p-0 data-[state=open]:bg-muted'
+          >
+            <MoreVertical size={10} />
+            <span className='sr-only'>Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end' className='w-[160px]'>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation()
+              setCurrentEnvelope(row.original)
+              setOpen("edit-tags")
+            }}
+          >
+            {t('search.editTag')}
+            <DropdownMenuShortcut>
+              <TagIcon size={16} />
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation()
+              setCurrentEnvelope(row.original)
+              setOpen("restore")
+            }}
+          >
+            {t('restore_message.restore_to_imap', 'Restore Mail')}
+            <DropdownMenuShortcut>
+              <TagIcon size={16} />
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation()
+              handleDelete(row.original)
+            }}
+            className='!text-red-500'
+          >
+            {t('common.delete')}
+            <DropdownMenuShortcut>
+              <Trash2 size={16} />
+            </DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
@@ -0,0 +1,163 @@
+//
+// Copyright (c) 2025 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 <http://www.gnu.org/licenses/>.
+
+
+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 {
+  Table,
+  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'
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    className: string
+  }
+}
+
+interface DataTableProps {
+  columns: ColumnDef<EmailEnvelope>[]
+  data: EmailEnvelope[]
+  onRowClick: (e: ReactMouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<EmailEnvelope>) => void
+  setSortBy: (sortBy: "DATE" | "SIZE") => void
+  setSortOrder: (value: "desc" | "asc") => void
+}
+
+export function SearchTable({ columns, data, onRowClick, setSortBy, setSortOrder }: DataTableProps) {
+  const { sorting, setSorting, columnVisibility, setColumnVisibility } = useSearchContext()
+  const { t } = useTranslation()
+  const [rowSelection, setRowSelection] = useState({})
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  useEffect(() => {
+    const [value] = sorting
+    setSortBy(value.id.toUpperCase() as "DATE" | "SIZE")
+    setSortOrder(value.desc ? "desc" : "asc")
+  }, [sorting])
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  return (
+    <div className='space-y-4'>
+      <div className='rounded-md border'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className='group/row'>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      className={header.column.columnDef.meta?.className ?? ''}
+                    >
+                      {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'}
+                  className={cn("group/row cursor-pointer transition-colors hover:bg-accent/50")}
+                  onClick={(e) => onRowClick(e, row)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cell.column.columnDef.meta?.className ?? ''}
+                      style={{ 
+                        width: cell.column.columnDef.size,
+                        minWidth: cell.column.columnDef.minSize,
+                        maxWidth: cell.column.columnDef.maxSize
+                      }}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className='h-24 text-center'
+                >
+                  {t('common.table.noResults')}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
@@ -47,7 +47,8 @@
    "op_failed": "Operation failed",
    "na": "N/A",
    "retry": "Retry",
-    "deleting": "Deleting..."
+    "deleting": "Deleting...",
+    "columns": "Columns"
  },
  "navigation": {
    "home": "Home",
@@ -1462,4 +1463,4 @@
    "failed": "Failed to restore messages",
    "failedTitle": "Restore Failed"
  }
-}
+}