> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/kanban-component.md).

# Kanban component

Track work by stage in a Kanban.

Use a **Kanban** component on a page when records move through clear stages. It works well for tasks, leads, approvals, and support tickets.

Before you add a **Kanban** component, make sure your table has:

* One field that defines the stage or status
* Clear values for each stage
* Optional fields for card details, colors, or thumbnails

{% hint style="info" %}
Use one clear **Single-choice** field, such as Status, to define the columns. This keeps the board easy to understand.
{% endhint %}

## **Add a Kanban component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add Kanban**

Under **Views**, drag **Kanban** to the preferred location on the page.
{% endstep %}

{% step %}
**Label the component**

Ninox generates the **Label** and **Internal name** automatically. You can update both values if needed.
{% endstep %}

{% step %}
**Configure the Kanban manually**

In the component **Settings** under **Behavior**:

* Keep **Constant** selected as the data point option.
* Choose the source **Table**.
* Choose the Single-choice field that defines the columns in **Group by field**.
* **Filter** if you want to show only a selection of records.
  {% endstep %}

{% step %}
**Review the result**

Check whether the columns and cards show the records you expect.\
Then drag the component to move it on the page.\
Use the resize handles to adjust its size.
{% endstep %}
{% endstepper %}

## **Kanban component settings**

In **Settings**, you can define the basic component details:

* **Label** for the title shown on the component
* **Internal name** is filled automatically. Change it only if needed and carefully. When you script, you use **Internal name**, not **Label**.

Under **Behavior**, configure how the board works on the page:

* **Data point** to set up data retrieval. Use **Constant** to configure it with controls, or **Logic** to use Ninox Script.\
  \
  If **Data point** is set to **Constant**:
* **Table** to choose the source table
* **Group by field** to choose the Single-choice field that defines the columns
* **Filter** to limit which records users can see with one or more conditions
* Click **Configure cards** to configure:
  * **Title** to assign a text field as the card title
  * **Image** to display a thumbnail from a file field
  * **Color** to distinguish categories through card color. Choose a color or choice field.
  * Select additional fields whose content you want to display on the card.
* **Card radius** uses a numeric value.
* **Card border** uses a width in px, line style, and HEX color separated by spaces.\
  For example `4px solid #cb2010`
* **Card padding** uses a numeric value.
* **Card font** uses text, such as `bold italic`.
* **Image position** uses text, such as `center`, `left`, or `right`.
* **Image size** uses text, such as `cover`.
* **Show empty lane** to show columns even when they contain no records
* **Show search field** to show a search field at the top of the board\
  \
  If **Data point** is set to **Logic**:
* **Logic** to add the Ninox Script that retrieves the data.\
  In this case, Ninox expects the values and optional layout setting in a JSON language style as key-value pairs in curly braces {...}.\
  The needed `data` identifiers are

  * `column` assigns the card to a lane
  * `record` for the underlying record, so the card can be opened
  * `tableId` built with `tableId(...)`
  * Optional: `title`, `subtitle`, `color`, `image`, `badge`, `sort`

  Optional `settings` identifiers:

  * `columns` for explicit lane order, entries can be a plain string or `{label, value}`
  * `value` is required to drag cards in reference or table-grouped dynamic-choice lanes
  * `design` supports `radius`, `border`, `padding`, `font`, and `imagePosition`
  * `allowDrag` to be able to drag a card into another kanban lane
  * `columnField` the field that receives the updated lane value when you drag a card to another Kanban lane

  See the example below.

Under **Visibility**, choose how the component is shown on the page:

* **Visible** to show the component on the page
* **Hidden** to hide the component on the page
* **Conditional** to define a **Visibility condition** that controls when the component is shown or hidden

  Use **Conditional** when the Kanban should appear only in specific cases.

  Build the condition based on **Fields** and **Tables**.

  This only affects what is shown on the page. It does not change records or permissions.

{% hint style="info" %}
For **Logic** under **Data point**, use Ninox AI in the [Logic editor](/ninox-scripting/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md) to create a script or explain an existing script.
{% endhint %}

#### **Let's take a look at an example:**

When you use **Logic** data retrieval, structure the script like this:

{% code lineNumbers="true" %}

```
{
	data: for r in select movies do
		{
			column: text(r.genre),
			title: r.title,
			record: r,
			tableId: tableId(r),
			subtitle: if r.director != "" then r.director else null end,
			badge: if r.release_year != 0 then text(r.release_year) else null end,
			image: r.poster,
			color: if r.watch_status = "1" then
				color("#c8e6c9")
			else
				if r.watch_status = "2" then
					color("#bbdefb")
				else
					if r.watch_status = "3" then color("#fff9c4") else null end
				end
			end,
			sort: r.title
		}
	end,
	settings: {
		columns: ["Action", "Comedy", "Drama", "Horror", "Sci-Fi", "Thriller", "Romance", "Animation", "Documentary", "Fantasy"],
		design: {
			radius: 8,
			border: "1px solid #e2e2e2",
			padding: 12
		},
		columnField: "genre"
	}
}
```

{% endcode %}

Use this prompt to create the script with Ninox AI:\
"Please create a Kanban view with all movies from the Movies table grouped by the genre."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/kanban-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.