Bank Transactions

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

default:"20"

Number of transactions to display per page. Controls pagination size.

boolean

default:"true"

Controls whether transaction descriptions are displayed in the transaction list.

boolean

default:"true"

Controls whether receipt upload functionality is available for transactions.

boolean

default:"false"

Controls whether tooltips are displayed to provide additional information about transactions and categorization.

boolean

default:"false"

Controls whether the customer/vendor column is displayed in the transactions table.

boolean

default:"false"

Controls whether transaction tags are displayed and can be managed in the transaction list.

boolean

default:"false"

Controls whether upload options are displayed for transactions.

boolean

default:"false"

Enables monthly view mode which changes the date filtering behavior to focus on monthly periods.

boolean

Controls whether the categorization interface is displayed. If not specified, this is automatically determined based on the business’s bookkeeping configuration.

string

default:"regularList"

Indicates whether to use dedicated mobile-oriented layout for smaller screens. Possible values are mobileList or regularList. Defaults to regularList.

function

Callback function that is called when an error occurs in the component. Receives a LayerError object as a parameter.

function

Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode.

object

Overrides for default strings in the component.

Show String override options

string

Component header text. Defaults to “Bank Transactions”

object

Overrides for button CTAs in the component.

Show BankTransactionTabs properties

string

Override the “Approve” button text which saves transaction categorization. Defaults to “Approve”.

string

Override for the “Update” button text which updates a transaction categorization. Defaults to “Update”.

object

Overrides for the transactions table.

Show child attributes

string

Override for the “Date” column header text. Defaults to “Date”.

string

Override for the “Transaction” column header text. Defaults to “Transaction”.

string

Override for the “Account” column header text representing the name of the source bank account. Defaults to “Account”.

string

Override for the “Amount” column header text. Defaults to “Amount”.

string

Override for the “Categorize” column header text. Shows only for uncategorized transactions. Defaults to “Categorize”.

string

Override for the “Category” column header text. Shows only for categorized transactions. Defaults to “Category”.

BankTransactionFilters object

Filters to apply to the transaction list.

Show BankTransactionFilters properties

NumericRangeFilter object

Range of amounts to filter the transaction list to.

Show NumericRangeFilter properties

number

Minimum value of transactions to list.

number

Maximum value of transactions to list.

string[]

Array of Financial Account IDs to filter to. Allows filtering by multiple accounts.

enum

Direction of transactions to filter to. Possible values are CREDIT or DEBIT.

enum

Show only unreviewed or categorized transactions. Possible values are TO_REVIEW or CATEGORIZED.

DateRange object

Date range to filter transactions to.

Show DateRange properties

ISO8601 timestamp

Start date to filter transactions to.

ISO8601 timestamp

End date to filter transactions to.

string

Search query to filter transactions by description, counterparty name, or other transaction details.

TagFilterInput object

Filter transactions by tags. Allows filtering by specific tag criteria.

boolean

default:"false"

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.

Overview

Components

Layouts

Bank Transactions

Properties

​Properties

Properties