> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerfi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bank Transactions

> Bank account and credit card transactions ingested into Layer.

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.

![TransactionCategorization](https://github.com/Layer-Fi/layer-react/assets/1592431/c1fea59b-a4c3-4d53-bfc9-9126c5ecba4a)

Optional properties and `useBankTransactionsContext` give more control over the transactions list:

```tsx theme={null}
/** Using props */
<BankTransactions
  pageSize={50}
  showCustomerVendor
  showTags
  showTooltips
  monthlyView
  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

<ParamField body="pageSize" type="number" default="20">
  Number of transactions to display per page. Controls pagination size.
</ParamField>

<ParamField body="showDescriptions" type="boolean" default="true">
  Controls whether transaction descriptions are displayed in the transaction list.
</ParamField>

<ParamField body="showReceiptUploads" type="boolean" default="true">
  Controls whether receipt upload functionality is available for transactions.
</ParamField>

<ParamField body="showTooltips" type="boolean" default="false">
  Controls whether tooltips are displayed to provide additional information about transactions and categorization.
</ParamField>

<ParamField body="showCustomerVendor" type="boolean" default="false">
  Controls whether the customer/vendor column is displayed in the transactions table.
</ParamField>

<ParamField body="showTags" type="boolean" default="false">
  Controls whether transaction tags are displayed and can be managed in the transaction list.
</ParamField>

<ParamField body="showUploadOptions" type="boolean" default="false">
  Controls whether upload options are displayed for transactions.
</ParamField>

<ParamField body="showStatusToggle" type="boolean" default="true">
  Controls whether the "To Review" / "Categorized" status toggle is displayed.
</ParamField>

<ParamField body="showCategorizationRules" type="boolean" default="false">
  Controls whether categorization rule suggestions are shown when categorizing transactions.
</ParamField>

<ParamField body="hideHeader" type="boolean" default="false">
  Hides the component header entirely.
</ParamField>

<ParamField body="collapseHeader" type="boolean" default="false">
  Collapses the component header into a more compact form.
</ParamField>

<ParamField body="monthlyView" type="boolean" default="false">
  Enables monthly view mode which changes the date filtering behavior to focus on monthly periods.
</ParamField>

<ParamField body="categorizeView" type="boolean">
  Controls whether the categorization interface is displayed. If not specified, this is automatically determined based on the business's bookkeeping configuration.
</ParamField>

<ParamField body="mobileComponent" type="string" default="regularList">
  Indicates whether to use dedicated mobile-oriented layout for smaller screens. Possible values are `mobileList` or `regularList`. Defaults to `regularList`.
</ParamField>

<ParamField body="onError" type="function">
  Callback function that is called when an error occurs in the component. Receives a LayerError object as a parameter.
</ParamField>

<ParamField body="renderInAppLink" type="function">
  Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode.
</ParamField>

<ParamField body="stringOverrides" type="BankTransactionsStringOverrides">
  Overrides for default strings in the component.

  <Expandable title="BankTransactionsStringOverrides properties">
    <ParamField body="bankTransactionHeader" type="string">
      Component header text. Defaults to "Bank Transactions"
    </ParamField>

    <ParamField body="bankTransactionCTAs" type="BankTransactionCTAStringOverrides">
      Overrides for button CTAs in the component.

      <Expandable title="BankTransactionCTAStringOverrides properties">
        <ParamField body="approveButtonText" type="string">
          Override the "Approve" button text which saves transaction categorization. Defaults to "Approve".
        </ParamField>

        <ParamField body="updateButtonText" type="string">
          Override for the "Update" button text which updates a transaction categorization. Defaults to "Update".
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="transactionsTable" type="BankTransactionsTableStringOverrides">
      Overrides for the transactions table.

      <Expandable title="BankTransactionsTableStringOverrides properties">
        <ParamField body="dateColumnHeaderText" type="string">
          Override for the "Date" column header text. Defaults to "Date".
        </ParamField>

        <ParamField body="transactionColumnHeaderText" type="string">
          Override for the "Transaction" column header text. Defaults to "Transaction".
        </ParamField>

        <ParamField body="accountColumnHeaderText" type="string">
          Override for the "Account" column header text representing the name of the source bank account. Defaults to "Account".
        </ParamField>

        <ParamField body="amountColumnHeaderText" type="string">
          Override for the "Amount" column header text. Defaults to "Amount".
        </ParamField>

        <ParamField body="categorizeColumnHeaderText" type="string">
          Override for the "Categorize" column header text. Shows only for uncategorized transactions. Defaults to "Categorize".
        </ParamField>

        <ParamField body="categoryColumnHeaderText" type="string">
          Override for the "Category" column header text. Shows only for categorized transactions. Defaults to "Category".
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="filters" type="BankTransactionFilters object">
  Filters to apply to the transaction list.

  <Expandable title="BankTransactionFilters properties">
    <ParamField body="amount" type="NumericRangeFilter object">
      Range of amounts to filter the transaction list to.

      <Expandable title="NumericRangeFilter properties">
        <ParamField body="min" type="number">
          Minimum value of transactions to list.
        </ParamField>

        <ParamField body="max" type="number">
          Maximum value of transactions to list.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="account" type="string[]">
      Array of Financial Account IDs to filter to. Allows filtering by multiple accounts.
    </ParamField>

    <ParamField body="direction" type="enum">
      Direction of transactions to filter to. Possible values are `CREDIT` or `DEBIT`.
    </ParamField>

    <ParamField body="categorizationStatus" type="enum">
      Show only unreviewed or categorized transactions. Possible values are `TO_REVIEW` or `CATEGORIZED`.
    </ParamField>

    <ParamField body="dateRange" type="DateRange object">
      Date range to filter transactions to.

      <Expandable title="DateRange properties">
        <ParamField body="startDate" type="ISO8601 timestamp">
          Start date to filter transactions to.
        </ParamField>

        <ParamField body="endDate" type="ISO8601 timestamp">
          End date to filter transactions to.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="query" type="string">
      Search query to filter transactions by description, counterparty name, or other transaction details.
    </ParamField>

    <ParamField body="tagFilter" type="TagFilterInput object">
      Filter transactions by tags. Allows filtering by specific tag criteria.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="applyGlobalDateRange" type="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`.
</ParamField>

## Variations

* [Bank Transactions with Linked Accounts](/embedded-components/pages/bank-transactions-with-linked-accounts)