Skip to content

Add column sorting to cost basis table #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcintyre94 merged 1 commit into from
Feb 8, 2026
Merged

Add column sorting to cost basis table #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 106 additions & 9 deletions src/routes/cost-basis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { useQuery } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
import {
ArrowDown,
ArrowRightLeft,
ArrowUp,
ArrowUpDown,
Check,
ExternalLink,
Loader2,
Expand Down Expand Up @@ -33,6 +36,8 @@ export const Route = createFileRoute("/cost-basis")({
});

type InputMode = "per-token" | "total";
type SortKey = "token" | "costBasis" | "price" | "change";
type SortDirection = "asc" | "desc";

function useDebouncedValue<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
Expand Down Expand Up @@ -63,6 +68,10 @@ function CostBasisPage() {
const [savedCostBasis, setSavedCostBasis] = useState<StoredCostBasis[]>([]);
const [confirmingDelete, setConfirmingDelete] = useState<string | null>(null);

// Sort state
const [sortKey, setSortKey] = useState<SortKey>("token");
const [sortDir, setSortDir] = useState<SortDirection>("asc");

// Edit state management
const [editingToken, setEditingToken] = useState<string | null>(null);
const [editInputMode, setEditInputMode] = useState<InputMode>("per-token");
Expand Down Expand Up @@ -117,6 +126,66 @@ function CostBasisPage() {
refetchInterval: 60 * 1000,
});

const handleSort = (key: SortKey) => {
if (sortKey === key) {
setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
} else {
setSortKey(key);
setSortDir("asc");
}
};

const sortIcon = (key: SortKey) =>
sortKey === key ? (
sortDir === "asc" ? (
<ArrowUp className="w-3 h-3" />
) : (
<ArrowDown className="w-3 h-3" />
)
) : (
<ArrowUpDown className="w-3 h-3 opacity-50" />
);

const sortedEntries = useMemo(() => {
return [...savedCostBasis].sort((a, b) => {
let comparison = 0;

switch (sortKey) {
case "token":
comparison = a.tokenName.localeCompare(b.tokenName);
break;
case "costBasis":
comparison = a.costBasisUSD - b.costBasisUSD;
break;
case "price": {
const priceA = tokenPriceMap?.get(a.tokenAddress);
const priceB = tokenPriceMap?.get(b.tokenAddress);
if (priceA === undefined && priceB === undefined) return 0;
if (priceA === undefined) return 1;
if (priceB === undefined) return -1;
comparison = priceA - priceB;
break;
}
case "change": {
const getChange = (entry: StoredCostBasis) => {
const price = tokenPriceMap?.get(entry.tokenAddress);
if (price === undefined || entry.costBasisUSD === 0) return null;
return ((price - entry.costBasisUSD) / entry.costBasisUSD) * 100;
};
const changeA = getChange(a);
const changeB = getChange(b);
if (changeA === null && changeB === null) return 0;
if (changeA === null) return 1;
if (changeB === null) return -1;
comparison = changeA - changeB;
break;
}
}

return sortDir === "asc" ? comparison : -comparison;
});
}, [savedCostBasis, sortKey, sortDir, tokenPriceMap]);

// Focus search input after saving (when selectedToken becomes null and flag is set)
useEffect(() => {
if (shouldFocusSearch && !selectedToken) {
Expand Down Expand Up @@ -539,25 +608,53 @@ function CostBasisPage() {
<table className="w-full">
<thead>
<tr className="border-b border-slate-700">
<th className="text-left py-3 px-2 text-sm font-medium text-slate-400">
Token
<th className="text-left py-3 px-2">
<button
type="button"
onClick={() => handleSort("token")}
className="flex items-center gap-1 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
>
Token
{sortIcon("token")}
</button>
</th>
<th className="text-right py-3 px-2 text-sm font-medium text-slate-400">
Cost Basis
<th className="text-right py-3 px-2">
<button
type="button"
onClick={() => handleSort("costBasis")}
className="ml-auto flex items-center gap-1 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
>
Cost Basis
{sortIcon("costBasis")}
</button>
</th>
<th className="text-right py-3 px-2 text-sm font-medium text-slate-400">
Current Price
<th className="text-right py-3 px-2">
<button
type="button"
onClick={() => handleSort("price")}
className="ml-auto flex items-center gap-1 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
>
Current Price
{sortIcon("price")}
</button>
</th>
<th className="text-right py-3 px-2 text-sm font-medium text-slate-400">
Change
<th className="text-right py-3 px-2">
<button
type="button"
onClick={() => handleSort("change")}
className="ml-auto flex items-center gap-1 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
>
Change
{sortIcon("change")}
</button>
</th>
<th className="text-right py-3 px-2 text-sm font-medium text-slate-400">
Actions
</th>
</tr>
</thead>
<tbody>
{savedCostBasis.map((entry) => {
{sortedEntries.map((entry) => {
const isEditing = editingToken === entry.tokenAddress;
const currentPrice = tokenPriceMap?.get(entry.tokenAddress);
const percentChange =
Expand Down