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

@@ -11,6 +11,7 @@
"@tailwindcss/forms": "^0.5.10",
"@tanstack/react-query": "^5.87.1",
"@tanstack/react-router": "^1.131.36",
"@tanstack/react-table": "^8.21.3",
"@tanstack/router-cli": "^1.131.36",
"autoprefixer": "^10.4.21",
"axios": "^1.11.0",
@@ -1609,6 +1610,26 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/@tanstack/react-table": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
"integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
"license": "MIT",
"dependencies": {
"@tanstack/table-core": "8.21.3"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tanstack/router-cli": {
"version": "1.131.36",
"resolved": "https://registry.npmjs.org/@tanstack/router-cli/-/router-cli-1.131.36.tgz",
@@ -1777,6 +1798,19 @@
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/table-core": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
"integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/virtual-file-routes": {
"version": "1.131.2",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.131.2.tgz",