Data Components

Display financial data with data components.

TransactionTable

A comprehensive table component for displaying and managing financial transactions with advanced filtering, sorting, and categorization capabilities.

TypeScript
1import { TransactionTable } from "@openledger/accounting-react";
2
3function TransactionList() {
4return <TransactionTable />;
5}

IntelligentTransactionTable

An enhanced transaction table with AI-powered features for automatic categorization and contextual insights.

TypeScript
1import { IntelligentTransactionTable } from "@openledger/accounting-react";
2import { useTransactions } from "@openledger/accounting-react";
3
4function AITransactionList() {
5 const { transactions, loadingStatus } = useTransactions();
6
7 return (
8 <IntelligentTransactionTable
9 transactions={transactions || []}
10 loadingStatus={loadingStatus}
11 />
12 );
13}

LedgerTable

A flexible table component for displaying general ledger data with account hierarchies and balance calculations.

TypeScript
1import { LedgerTable } from "@openledger/accounting-react";
2import { useGeneralLedger } from "@openledger/accounting-react";
3
4function AccountBalances() {
5const { accountBalances, loadingStatus } = useGeneralLedger();
6
7return (
8<LedgerTable
9accounts={accountBalances || []}
10isLoading={loadingStatus === "loading"}
11/>
12);
13}

HierarchicalTable

A specialized table component for displaying hierarchical data like chart of accounts with expandable rows and nested relationships.

TypeScript
1import { HierarchicalTable } from "@openledger/accounting-react";
2import { useAccounts } from "@openledger/accounting-react";
3
4function ChartOfAccounts() {
5 const { accounts, loadingStatus } = useAccounts();
6
7 return (
8 <HierarchicalTable
9 data={accounts || []}
10 isLoading={loadingStatus === "loading"}
11 columns={[
12 { header: "Account Name", accessor: "name" },
13 { header: "Type", accessor: "type" },
14 { header: "Balance", accessor: "balance", align: "right" }
15 ]}
16 />
17 );
18}

JournalTable

A double-entry accounting table for displaying journal entries with debits and credits clearly displayed.

TypeScript
1import { JournalTable } from "@openledger/accounting-react";
2import { useGeneralLedger } from "@openledger/accounting-react";
3
4function JournalEntries() {
5const { journalEntries, loadingStatus } = useGeneralLedger();
6
7return (
8<JournalTable
9entries={journalEntries || []}
10isLoading={loadingStatus === "loading"}
11/>
12);
13}

AreaChart

A responsive area chart component for visualizing financial data trends over time, perfect for cash balances and cumulative metrics.

TypeScript
1import { AreaChart } from "@openledger/accounting-react";
2
3function CashBalanceChart() {
4 return (
5 <AreaChart
6 onBalanceChange={(balance) => console.log("Current balance:", balance)}
7 />
8 );
9}
PropTypeDescription
onStatsChange(stats: { revenue: number; expenses: number; profit: number; revenueChange: number; expensesChange: number; profitChange: number }) => voidCallback with financial statistics
heightnumberChart height (optional)
widthnumberChart width (optional)

BarChart

A bar chart component for comparing financial metrics across categories or time periods, ideal for profit and loss visualization.

TypeScript
1import { BarChart } from "@openledger/accounting-react";
2
3function ProfitLossChart() {
4return (
5<BarChart
6onStatsChange={(stats) => {
7console.log("Revenue:", stats.revenue);
8console.log("Expenses:", stats.expenses);
9console.log("Profit:", stats.profit);
10}}
11/>
12);
13}
PropTypeDescription
onStatsChange(stats: { revenue: number; expenses: number; profit: number; revenueChange: number; expensesChange: number; profitChange: number }) => voidCallback with financial statistics
heightnumberChart height (optional)
widthnumberChart width (optional)

ReportWidget

A flexible component for displaying financial reports with a title, period selector, and visualizations.

TypeScript
1import { ReportWidget } from "@openledger/accounting-react";
2
3function ProfitLossReport() {
4 return (
5 <ReportWidget
6 title="Profit & Loss"
7 period="monthly"
8 type="profit_loss"
9 onPeriodChange={(period) => console.log("Period changed:", period)}
10 />
11 );
12}

| Prop | Type | Description | |------|------|-------------| | title | string | Report title | | period | "daily" \| "weekly" \| "monthly" \| "quarterly" \| "yearly" | Time period for the report | | type | "profit_loss" \| "balance_sheet" \| "cash_flow" \| "custom" | Report type | | onPeriodChange | (period: string) => void | Callback when period changes |

FinancialOverview

A dashboard component that displays key financial metrics including revenue, expenses, profit, and trends.

TypeScript
1import { FinancialOverview } from "@openledger/accounting-react";
2
3function Dashboard() {
4return (
5<FinancialOverview
6onMetricsLoad={(metrics) => console.log("Metrics loaded:", metrics)}
7/>
8);
9}
PropTypeDescription
onMetricsLoad(metrics: FinancialMetrics) => voidCallback when metrics are loaded
period"week" | "month" | "quarter" | "year"Time period for metrics (default: “month”)

ThemedUnifiedDirectory

A component for displaying and selecting from hierarchical data structures like chart of accounts.

TypeScript
1import { ThemedUnifiedDirectory } from "@openledger/accounting-react";
2
3function AccountSelector() {
4 return (
5 <ThemedUnifiedDirectory
6 items={accountsData}
7 onSelect={(item) => setSelectedAccount(item)}
8 title="Chart of Accounts"
9 />
10 );
11}

TransactionAssistant

AI-powered assistant for categorizing and managing transactions with natural language capabilities.

TypeScript
1import { TransactionAssistant } from "@openledger/accounting-react";
2import { useTransactions } from "@openledger/accounting-react";
3
4function TransactionManager() {
5const { transactions, loadingStatus, mutate } = useTransactions();
6
7return (
8<TransactionAssistant
9transactions={transactions || []}
10mutate={mutate}
11loadingStatus={loadingStatus as "loading" | "error" | "success"}
12/>
13);
14}
PropTypeDescription
transactionsTransaction[]Array of transaction objects
mutate() => voidFunction to refresh transactions
loadingStatus”loading” | “error” | “success”Current loading state