LWC

Expense approvals, grouped by employee

Fourteen expense lines grouped by employee, status badges, three lines checked and an Approve selected button. A finance manager's whole review, in one tag.

Data Table Group By
avonni-dd-datatable-group-by
center
The scenario

The Expenses tab of Finance opens on the September lines. Four employees, four groups with a count, every line with its date, merchant, category, amount and status badge. Two of Maya Chen's lines and one of Tomas Berg's are checked. Approve selected sits in the header, next to Export. Status and Category filter the table, the search box finds a merchant.

The configuration
  • query.groupBy on the employee field, groupByAttributes.displayGroupRowsCount: true: one group per person, the count in the header.
  • columns with type: date, text, currency and badge for the status: the eye reads a badge faster than a word.
  • hideCheckboxColumn: false with headerActions Approve selected and Export: select, then act, the headeractionclick event carries the selection.
  • filters on Status and Category, searchFields on Merchant: the filtering comes with the tag, nothing to code.
Step by step

The settings above are the ones that matter. The tutorial has the whole build: the objects and sample data behind the screen, every step in order, and what to check once it runs.

Open the tutorial
Runs on
Flow Screen ComponentsDynamic ComponentsLWC Components

Build it in your org.

85+ components, four Salesforce surfaces, 10 free production licenses. Start with the one you just saw.

Start freeAll use cases