The transaction categorization component displays a list of transactions that have been imported into Layer. By default, the component has two tabs:
To Review - Transactions that need to be reviewed/categorized before they will be journaled to the general ledger.Categorized - Transactions that have already been categorized and journaled to the general ledger.
Optional properties and useBankTransactionsContext give more control over the transactions list:
/** Using props */ < BankTransactions pageSize = { 50 } showCustomerVendor = { true } showTags = { true } showTooltips = { true } monthlyView = { true } filters = { { amount: { min: 0 , max: 100 }, query: "coffee" } } mobileComponent = "mobileList" onError = { ( error ) => console . error ( 'Transaction error:' , error ) } /> /** Using hook */ const { setFilters } = useBankTransactionsContext () setFilters ({ amount: { min: 0 , max: 10000 } }) < BankTransactions /> Properties Number of transactions to display per page. Controls pagination size.
Controls whether transaction descriptions are displayed in the transaction list.
Controls whether receipt upload functionality is available for transactions.
Controls whether tooltips are displayed to provide additional information about transactions and categorization.
Controls whether the customer/vendor column is displayed in the transactions table.
Controls whether transaction tags are displayed and can be managed in the transaction list.
Controls whether upload options are displayed for transactions.
Enables monthly view mode which changes the date filtering behavior to focus on monthly periods.
Controls whether the categorization interface is displayed. If not specified, this is automatically determined based on the business’s bookkeeping configuration.
mobileComponent
string
default: "regularList"
Indicates whether to use dedicated mobile-oriented layout for smaller screens. Possible values are mobileList or regularList. Defaults to regularList.
Callback function that is called when an error occurs in the component. Receives a LayerError object as a parameter.
Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode.
Overrides for default strings in the component. Show String override options
Component header text. Defaults to “Bank Transactions”
Overrides for button CTAs in the component. Show BankTransactionTabs properties
Override the “Approve” button text which saves transaction categorization. Defaults to “Approve”.
Override for the “Update” button text which updates a transaction categorization. Defaults to “Update”.
Overrides for the transactions table. Override for the “Date” column header text. Defaults to “Date”.
transactionColumnHeaderText
Override for the “Transaction” column header text. Defaults to “Transaction”.
Override for the “Account” column header text representing the name of the source bank account. Defaults to “Account”.
Override for the “Amount” column header text. Defaults to “Amount”.
categorizeColumnHeaderText
Override for the “Categorize” column header text. Shows only for uncategorized transactions. Defaults to “Categorize”.
Override for the “Category” column header text. Shows only for categorized transactions. Defaults to “Category”.
filters
BankTransactionFilters object
Filters to apply to the transaction list. Show BankTransactionFilters properties
amount
NumericRangeFilter object
Range of amounts to filter the transaction list to. Show NumericRangeFilter properties
Minimum value of transactions to list.
Maximum value of transactions to list.
Array of Financial Account IDs to filter to. Allows filtering by multiple accounts.
Direction of transactions to filter to. Possible values are CREDIT or DEBIT.
Show only unreviewed or categorized transactions. Possible values are TO_REVIEW or CATEGORIZED.
Date range to filter transactions to. Show DateRange properties
Start date to filter transactions to.
End date to filter transactions to.
Search query to filter transactions by description, counterparty name, or other transaction details.
Filter transactions by tags. Allows filtering by specific tag criteria.
Indicates whether to apply the global date range filter to the transaction list. If set to true, changing the date range in any Layer component will filter the transaction list to that time range as well. Defaults to false.
