feat(frontend): implement TanStack Table for transactions view

- Add @tanstack/react-table package for advanced table functionality
- Create new TransactionsTable component with sorting, pagination, and filtering
- Implement column sorting for description, amount, and date
- Add pagination with configurable page sizes (10, 25, 50, 100)
- Implement global search across multiple fields (description, creditor, debtor, reference)
- Add quick date filters (Last 7 days, Last 30 days, This month)
- Add amount range filtering (min/max)
- Ensure mobile responsiveness with proper table layout
- Integrate RawTransactionModal with table actions
- Replace TransactionsList with TransactionsTable in routes
- Fix table freezing issue by removing conflicting filtering logic
- Optimize performance with TanStack Table's built-in state management
This commit is contained in:
Elisiário Couto
2025-09-11 12:39:42 +01:00
parent 91020e32ea
commit 544527f282
4 changed files with 690 additions and 2 deletions

View File

@@ -1,8 +1,8 @@
import { createFileRoute } from "@tanstack/react-router";
import TransactionsList from "../components/TransactionsList";
import TransactionsTable from "../components/TransactionsTable";
export const Route = createFileRoute("/transactions")({
component: TransactionsList,
component: TransactionsTable,
validateSearch: (search) => ({
accountId: search.accountId as string | undefined,
startDate: search.startDate as string | undefined,