Skip to content
Cynco UI

Accounting · Ledger

ChartOfAccountsTree

The nested Chart of Accounts: expandable header accounts, category dot, mono code, name, type and balance, with inactive accounts marked.

import { ChartOfAccountsTree } from "@cynco-labs/ui";

Example

Use

The Chart of Accounts page's main list; pair with CoaAccountPanel for the selected account.

Props

nodes [{ id, accountCode, accountName, accountType, balance?, isHeaderAccount?, isActive?, children? }], currency?, defaultExpandedIds?, selectedId?, onSelect?, className? (merged on the root) and native props.

Notes

Keeps the ARIA tree (role=treeitem, aria-level/expanded/selected, Enter/Space/Arrow keys). Header accounts show "—", negatives in text-destructive, Inactive as a neutral StatusChip. Responsive: Container-responsive: below 28rem the code sits above the name, below 36rem the Type column is dropped; headers reuse the row layout so they always line up.

Source Demo source Markdown