> 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/table-component.md).
# Table component
Add a Table component to a page to show records in rows and columns.
Use a **Table** component to show records in rows and columns on a page when users need to scan several records at once.
Before you add a **Table** component, make sure your table has:
* Clear field labels so columns are easy to scan
* The fields users need for quick decisions
* Fields to filter the records if the page should show only relevant ones
## **Add a Table component to a page**
{% stepper %}
{% step %}
**Open the Add tab**
In the **Settings** panel, open **Add**.
{% endstep %}
{% step %}
**Add Table**
Under **Views**, drag **Table** onto 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 Table component manually**
Under **Behavior**:
* Keep **Constant** selected as the data point option.
* Choose the source **Table**.
* Select the fields to show using :eye: x **hidden columns**.
* **Filter** or **Group** if you want to show only a selection of rows.
{% endstep %}
{% step %}
**Review the result**
Check whether the expected records and columns appear.\
Then drag the component to move it on the page.\
Use the resize handles to adjust its size.
{% endstep %}
{% endstepper %}
## **Table 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 table 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
* **Filter** to limit which records users can see with one or more conditions
* :eye: x **hidden columns** to control which fields Ninox shows, search for fields, and use **Hide all** or **Show all**
* **Group** to group records by one displayed text, date, status, linked-record, or location field
* **Show title** to show or hide the component **Label**.
* **Show search field** to show a search field at the top of the table
* **Show add record button** to show a button that lets users add new records
* **Quick add at the bottom** to show a blank row at the bottom of the table for quick entry
* **Multi-select and bulk actions** to let users select multiple records and perform bulk actions
* **Inline editing** to let users edit records directly in the table\
\
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 {...}.\
Required identifiers in `data` are:
* `id` of the record to display
* `tableId` built with `tableId(...)`
* `cells` with the key-value pairs like `{label, value}` such `{name: "Kim"}`
Needed `settings` identifiers is
* `columns` for explicit column order as plain strings.
Without `settings.columns`, order falls back to the first-seen `cells` keys across all rows.
\
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 table 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" %}
To remove a component from a page, select the component, then click :trash-can: **Delete component** in the blue menu above it.
{% 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 employees do
{
id: r,
tableId: tableId(r),
cells: {
Name: r.name,
Project: if r.project != void then
r.project.project_name
else
"—"
end,
Initials: upper(concat(for w in split(r.name, " ") do
substr(w, 0, 1)
end)),
'Has Photo': count(files(r)) > 0
}
}
end,
settings: {
columns: ["Name", "Project", "Initials", "Has Photo"]
}
}
```
{% endcode %}
Use this prompt to create the script with Ninox AI:\
"Create a script for the Table component that displays records from the Employees table with an assigned project. Show these columns: Name, Project, Initials, and Has Photo."
---
# 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/table-component.md?ask=&goal=
```
`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.