> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/data-and-organisation/table.md).

# Table

The Table component presents structured data in rows and columns. Data can be entered manually, loaded from a CSV resource, or fetched from a CSV or Google Sheets URL. Tables can include headers, footers, sorting, search, pagination, striped rows, and custom cell content.

### Requirements

{% hint style="warning" %}
Pages containing the Table component must be published as PHP.
{% endhint %}

Remote CSV data must be publicly accessible to the published site.

### Supported Content and File Types

* Manual columns and rows
* CSV files stored in Resources
* Public CSV URLs
* Published Google Sheets data

### How to Use Table

You’ll find Table under **Content** in the Components list.

1. Drag **Table** onto the page.
2. Choose Manual, CSV File, or CSV URL.
3. Add and configure the Columns collection.
4. For Manual data, set the row count and edit the cells.
5. Optionally enable sorting, search, pagination, header, and footer.
6. Style cells, text, search, and pagination, then test the published PHP page.

### Component Settings

#### Settings

**Data Source**

* **Manual** — Uses editable cells and a Rows setting. This is the default.
* **CSV File** — Loads a CSV resource.
* **CSV URL** — Loads a public CSV or Google Sheets URL.

CSV File reveals **CSV File**. CSV URL reveals **CSV URL**.

For CSV sources, **First Row is Header** is enabled by default; the header row is displayed only when **Show** under Header Cells is also enabled. If First Row is Header is turned off, the first CSV row is treated as data and appears in the table body. The Columns collection maps to CSV columns by position.

For Manual data, **Rows** sets the number of body rows and defaults to 3.

**Columns Collection**

Each column provides:

* **Cell Mode** — Text or Dropzone for Manual data. Text is the default.
* **Width** — Defaults to Auto.
* **Alignment** — Default, Left, Centre, or Right.
* **Sortable** — Enables sorting for that column and is off by default.
* **Hidden** — Hides the column and is off by default.
* **Classes** and **ID** — Advanced values for the column.

#### Interactive

Sorting is enabled per column in the Columns collection.

**Search** is off by default. Enabling it reveals **Placeholder**, which defaults to “Search…”.

**Pagination** is off by default. Enabling it reveals **Rows Per Page**, which defaults to 10.

#### Header Cells

**Show** is enabled by default. Turning it off removes the header row — including your column titles — from the table and the editing canvas until it is re-enabled.

**Padding** defaults to theme spacing 2 on every side. **Align** offers Top, Middle, or Bottom and defaults to Top. **Background** defaults to Surface 50.

Borders provide Solid, Dashed, or Dotted Style, plus Width and Color. Style defaults to Solid and Color to Surface 200.

#### Header Text

Set Alignment, Font, Color, Size, Weight, and Spacing. Defaults include Heading font, Text 50, Base size, and weight 600.

#### Body Cells

Padding defaults to theme spacing 2 and vertical Align to Top.

**Background**

* **Color** — Sets the base row colour and defaults to Surface 50.
* **Striped** — Enables alternating rows and is off by default.
* **Even** — Appears for striped rows and defaults to Surface 100.

**Hover** is off by default. Enabling it reveals Hover Color, which defaults to Surface 200.

Body borders provide Style, Width, and Color. Style defaults to Solid and Color to Surface 200.

#### Body Text

Set Alignment, Font, Color, Size, Weight, and Spacing. Defaults include Body font, Text 50, Base size, and weight 400.

#### Footer Cells and Footer Text

**Show** is off by default. Enabling it adds a footer row with an editable cell per column (text or drop zone, following each column's Cell Mode) and reveals Padding, Align, Background, and border controls. Turning it off removes the footer row and anything placed in it from the page. Defaults include theme spacing 2, Top alignment, Surface 100 background, Solid borders, and Surface 200 border colour.

Footer Text provides Alignment, Font, Color, Size, Weight, and Spacing. Defaults include Body font, Text 50, Base size, and weight 600.

#### Search Bar

Set Padding, Margin Bottom, Font, Text Color, Size, Placeholder Color, Background, border Style, Width, Color, and Radius.

Defaults include padding 2 vertically and 3 horizontally, margin 4, Body font, Text 50, Base size, Text 300 placeholder, Surface 50 background, Solid border, Surface 200 border colour, and Medium radius.

#### Pagination Bar

**Margin Top** defaults to theme spacing 4.

**Alignment** offers Between, Centre, or End and defaults to Between.

Button controls set Font, Size, Text Color, and Disabled Color. Defaults are Body, Small, Text 50, and Text 300.

### Accessibility

Use a header row for column names and keep labels concise. Do not hide information required to understand the data. Check search, sorting, pagination, and Dropzone controls with a keyboard.

### Troubleshooting

#### Remote data does not load

Confirm that the page is PHP, the CSV URL is public, and the server can reach it. For Google Sheets, use a published CSV-compatible URL rather than an editor-only link.

#### CSV columns are mismatched

Reorder the Columns collection so its first item maps to the first CSV column, the second item to the second column, and so on.

### Related Components

* [Grid](/elements-docs/using-elements/components/layout-components/grid.md) — Builds visual card layouts rather than semantic tabular data.
* [Filter](/elements-docs/using-elements/components/data-and-organisation/filter.md) — Filters tagged components outside a Table.

| Common Control                                                                                                     | Description                                                             |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| [Link](/elements-docs/using-elements/components/common-controls/link.md)                                           | Link to a page, resource, anchor, email address, or website.            |
| [Layout](/elements-docs/using-elements/components/common-controls/layout.md)                                       | Control positioning, stacking, visibility, overflow, and isolation.     |
| [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md)                                       | Set width, height, and responsive size constraints.                     |
| [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md)                                     | Add responsive margin and padding.                                      |
| [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. |
| [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md)                             | Apply colour, image, gradient, SVG, video, and hover backgrounds.       |
| [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md)                             | Choose what animates and set its timing curve, duration, and delay.     |
| [Effects](/elements-docs/using-elements/components/common-controls/effects.md)                                     | Apply shadows, opacity, and hover effects.                              |
| [Filters](/elements-docs/using-elements/components/common-controls/filters.md)                                     | Apply blur, brightness, saturation, shadow, and backdrop effects.       |
| [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md)                               | Scale, rotate, move, and skew components.                               |
| [Borders](/elements-docs/using-elements/components/common-controls/borders.md)                                     | Set border style, colour, opacity, width, radius, and hover states.     |
| [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md)                                   | Add CSS classes and IDs, or change supported HTML tags.                 |


---

# 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.realmacsoftware.com/elements-docs/using-elements/components/data-and-organisation/table.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.