---
title: "KPI, Table & Gauge Widgets"
description: "Configure the three non-chart widget types: a KPI big-number with comparison, target and sparkline, a richly-formatted table with per-column control, and a gauge with a needle and color bands."
section: "Dashboards"
canonical: "https://banksync.io/docs/dashboards/kpi-table-gauge"
---

Not every widget is a chart. Three widget types show numbers without an x/y plot: the **KPI** for a single headline figure, the **Table** for rows of detail, and the **Gauge** for a value against a scale. Each has its own set of controls.

> **Where these controls live:** 'Each of these widgets is configured in its inspector, the panel that opens on the right when you select a widget on the canvas. To get one onto the canvas in the first place, see Adding widgets (linked at the foot of this page). To switch a widget you already have to KPI, Table or Gauge, select it and change its kind in the inspector.'

![A settled KPI widget cell on the dashboard grid: a draggable header titled Income above a large rendered figure of $12,480, with no loading spinner or truncation.](https://cdn.banksync.io/screenshots/dashboards/widget-cell.7c2ade81421397ea.png "A KPI widget on the canvas. Select it to open its inspector.")

## KPI: one number that matters

A KPI shows a single big number (this month's spend, total balance, transaction count) with optional context around it.

- **Value and summary** — Pick the field (BankSync limits the picker to measures, the numeric fields it can total), then
  choose how to summarize the result: Sum, Average, Median, Min, Max, Count of rows, or the
  latest/earliest row.
- **Comparison** — Show the change against a prior period as an up/down delta, so the number has direction. Compare
  against the previous period, the previous year, a fixed baseline, or a rolling window.
- **Sparkline** — Add a tiny inline trend line beneath the number for at-a-glance history.

The KPI inspector also lets you choose a **Display as** style so the same number can read as a plain card, a change-focused delta, a progress bar toward a target, a bullet (target plus bands), or a gauge. Add a **prefix/suffix** (for example a `$` or `%`), a **label** and a **caption** (such as "vs last month"), and pick whether the number formats as a plain number, currency, percent, or a compact value with set decimals.

> **Set a target for budget-vs-actual:** 'Turn on Target in the KPI inspector to set a goal value and add colored bands around it. Paired with the Progress or Bullet display style, this turns a KPI into a budget-vs-actual or goal tracker: the number shows where you are, and the bands show whether you are on track. This is the fastest way to answer "how am I doing against plan?" without building a separate chart.'

![The KPI widget inspector fully decorated: a sum of the Amount field, the comparison option enabled to show an up/down delta-arrow against a prior period, and the sparkline toggle turned on to add an inline area trend line beneath the number.](https://cdn.banksync.io/screenshots/dashboards/kpi-inspector.5bdeea912beded3c.png "KPI inspector with the sum value, comparison delta and sparkline enabled. Target and Display-as controls live in the same panel.")

### Worked example: spend this month, vs last month

1. Add a KPI widget and select it to open the inspector.
2. Under **Value**, pick your amount field and set **Summarize** to **Sum**.
3. Turn on **Comparison** and set **Compare against** to **Previous period**, so the delta reads "vs last month".
4. Optionally turn on **Sparkline** for a small trend line, and add the caption "vs last month".

You now have a single headline number with direction, no chart required.

## Table: rows with per-column control

A Table widget lists rows from your data with control over each column.

**Shape a table**

1. **Choose and order columns** — Show the fields you want and drag to reorder them; remove the ones you do not need.
2. **Set how each column reads** — Open a column and pick its Format. The choices are Text, Number, Currency (with a currency
   picker), Percent, Date, Relative date, Yes/No, Duration, and JSON. BankSync picks a sensible
   default from the data, and you can override it per column.
3. **Align, pin and size** — Per column you can set the alignment (left/right/center), pin it to the left or right edge so it
   stays in view as you scroll sideways, set a fixed width, and toggle whether the column is
   sortable.
4. **Rename and pick an icon** — Give the widget a clear title and icon so it is easy to find.

Beyond the per-column format, the **Appearance** section sets the look of the whole table: row density (comfortable/compact/tight), borders, zebra stripes, row numbers, a sticky header, a sticky first column, and whether long text wraps.

![The table widget inspector's column manager: a Date column card and an Amount column card, each with a reorder grip and per-column format, alignment and pin controls, plus two more fields available to add to the table.](https://cdn.banksync.io/screenshots/dashboards/table-inspector.354ae711218831ee.png "Table inspector column manager: reorder, format, align and pin each column")

> **Rich cell formats render automatically:** 'Tables can show far more than plain text and numbers. Depending on the data, a cell can render as a status pill, a progress bar, an inline sparkline, heatmap-shaded shading, a star rating, tag chips, a link, an image, formatted Markdown, a range bar, a difference indicator, an icon, or a duration. These richer formats are assigned automatically from the shape of your data; the per-column Format dropdown covers the everyday choices (currency, percent, date, duration, and so on).'

![A rendered table showing several rich cell formats at once: a currency column with signed amounts that tint by sign (Woolworths minus $412.18, salary plus $6,540.00), a status column with Posted, Pending and Cleared pills, a budget-used percentage column, and a 4-week trend sparkline column, with a 142 rows meta line beneath.](https://cdn.banksync.io/screenshots/dashboards/data-preview.2083d5619b34503f.png "A table renders status pills, sign-tinted currency, percent and an inline trend, all chosen automatically from the data.")

> **How coloring works:** 'Several formats color themselves from the data: currency and percent cells tint by sign (so negatives stand out), and status cells take a tone from their value. You do not author per-cell rules in the inspector; pick the format that matches the column and the coloring follows the data as it updates.'

### Pagination

Long results stay readable because the table paginates. The **Pagination** section lets you choose the mode: **Paged** (the usual default, with page controls), **Virtual** (smooth scroll through a long list), or **None**. When pagination is on, set the rows per page (default 25). Pagination is a setting you can change, not something fixed.

## Gauge: a value on a scale

A Gauge draws a needle on a banded arc, good for a value measured against a target or a healthy range.

- **Value** — Type or pick the result value the needle points to. This is a free-text box with suggestions,
  not a field dropdown, and the gauge sums the rows for you (there is no separate aggregate
  choice).
- **Scale** — Set the min and max, the arc shape (half, three-quarter, full), and thickness.
- **Bands** — Add colored bands (for example green, amber, red) so the reading has meaning at a glance.

![The gauge widget inspector for a savings-rate goal: a three-quarter arc shape, a percent unit, and green/amber/red color bands so the needle's position reads as a status against the scale.](https://cdn.banksync.io/screenshots/dashboards/gauge-inspector.f1cbe3981117d6d1.png "Gauge inspector for a savings-rate goal: three-quarter arc, percent unit, green/amber/red bands")

> **Gauge bands:** A gauge with no bands draws its arc in one accent color. Add bands to turn it into a status dial, where each range gets its own color and the needle's band tells the story.

### Worked example: savings rate against a 70% target

1. Add a Gauge widget and select it to open the inspector.
2. Under **Value**, type the alias of your savings-rate result (the suggestions list helps); the gauge sums the rows to a single figure.
3. Set the **Scale** min to 0 and max to 100, with a percent unit.
4. Add three **Bands**: red up to 50, amber up to 70, green beyond 70.

The needle now lands in the band that matches your savings rate, so the reading is a status, not just a number.

## Related guides

- [Binding data](/docs/dashboards/binding-data): the Value and summarize controls these widgets share with charts.
- [The chart kind catalog](/docs/dashboards/chart-kinds): the plotted chart kinds.
- [Adding widgets](/docs/dashboards/adding-widgets): add a KPI, table, or gauge from the library.

[Add dashboard filters](/docs/dashboards/filters-and-cross-filtering)