Pro Components
Base Components
Data Table 6
Transaction table with sticky columns, horizontal scroll navigation buttons, sortable headers, and row selection.
Example
Transactions table with horizontal controls
Sticky primary columns, keyboard-friendly scroll controls, and a responsive actions rail keep dense financial data easy to scan.
Tags | Actions | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
May 14, 2026txn-2082 | Stripe payoutSubscription revenue for April cycle | $14,825.32 | — | Revenue | Stripe Payments Transfer | SubscriptionsRecurring | Founders Checking · 0421 | Transfer | Hannah Lee | Posted | ||
May 13, 2026txn-2081 | LinearWorkspace subscription for product team | -$320.00 | $26.40 | Software | Linear HQ Card | ProductSaaS | Capital One · 5522 | Card | Marcus Lin | Pending | ||
May 12, 2026txn-2080 | Mercury FXUSD → EUR conversion for Berlin invoices | -$184.35 | — | Banking fees | Mercury Bank Wire | International | Treasury · 1189 | Wire | Noah Patel | Needs review | ||
May 10, 2026txn-2079 | Gusto PayrollCycle #42 · engineering + marketing | -$48,600.00 | $8,123.45 | Payroll | Gusto ACH | PayrollUS | Operating · 7730 | ACH | Unassigned | Completed | ||
May 9, 2026txn-2078 | AWSApril usage across edge + inference clusters | -$9,832.11 | — | Infrastructure | Amazon Web Services Transfer | InfraUsage | Treasury · 1189 | Transfer | Hannah Lee | Posted | ||
May 8, 2026txn-2077 | RampTeam offsite flights + hotels | -$6,120.88 | $531.83 | Travel | Ramp Corporate Card | OffsiteQ2 | Capital One · 5522 | Card | Isabella Cho | Needs review | ||
May 7, 2026txn-2076 | NotionEnterprise plan for GTM org | -$850.00 | $72.25 | Software | Notion Labs Card | GTMContract | Operating · 7730 | Card | Unassigned | Pending | ||
May 6, 2026txn-2075 | Manual adjustmentReconciled hardware swap | $0.00 | — | Reconciliation | Internal Manual | No tags | Founders Checking · 0421 | Manual | Marcus Lin | Excluded |
Introduction
Data Table 6 is for wide financial data:- Sticky columns: Date and description stay fixed on the left while scrolling horizontally.
- Scroll buttons: Left/right buttons to scroll the table.
- Sortable: Click headers to sort.
- Row selection: Checkbox column; status badges for payment/transaction status.
Usage
import { DataTable26 } from "@/components/ui/data-table26";
<DataTable26 data={transactionRows} />;