Create tables, fields, rows, and relations

Model the content before styling it #

Create one table for one kind of record: products, posts, team members, events, locations or pricing plans. Each row is one record and each column describes one property shared by those records.

Name fields for meaning rather than appearance. Use price, published and hero_image, not right_text or blue_box. A durable data model survives a redesign.

Choose inline data or a database table #

Inline collection data and a database table are different sources. Moving a collection to a table replaces its inline source; it does not keep two synchronized copies. Decide which one is authoritative before connecting anything.

Edit a collection's inline rows and columns #

1. Select the collection on the canvas and choose Edit data from its floating toolbar. The same action is available from the collection's data control in Attributes.
2. Edit a cell directly. Each cell edit, added or removed row, and added column updates the component and queues the page for saving; there is no separate Save button inside the grid.
3. Choose Add row for another record. Use the floating Add column control at the grid's top-right, then enter a unique name and choose its editing type.
4. Use Export to download a formatted .json backup. Import accepts JSON only and replaces the current data; it does not append. Export first when the existing rows matter.
5. Close the dialog and wait for the editor status to reach Saved. Reopen Edit data and verify a representative row before publishing.

Inline Add column offers Text, Long text, Number, Currency, Percent, Rating, Date, Date & time, Select (single), Select (multi), Image, Icon, Color, Checkbox, Link, Email, Phone, and JSON. These types control grid editing and formatting. Inline JSON has no persistent schema, so values are re-inferred when the editor is reopened.

Choose field types that preserve meaning #

{
  "altitude": 1950,
  "process": "washed",
  "notes": ["cocoa", "fig"]
}

Add representative rows and relations #

1. Create the table and its fields before connecting a component.
2. Add at least three realistic rows: a normal case, a long-content case, and a missing-optional-value case.
3. Create a second table only when the related record has its own lifecycle. Connect it with a relation rather than copying the same value into many rows.
4. Sort, filter and search the grid to confirm the chosen types behave correctly.
5. Check plan usage before a large import. Validate a small sample first.

Use AI data actions safely #

In Edit data, choose Suggest data. When rows already exist, choose one exact mode:

• Add new rows keeps the current rows and appends generated ones.
• Replace all rows swaps the entire current row set.
• Fill empty cells only works within existing rows and therefore has no row-count control.

Add and replace accept a count from 1 to 50. When the collection is empty, Fronty proposes a starter shape and row count instead of showing the three modes. Structured components keep their required columns; open collections may adopt new AI-created columns.

AI-generated seed data is for layout and workflow testing. Replace invented people, claims, addresses, prices and images before publishing. Never paste secrets, payment data, health information or credentials into a public-site content table.

Connect the collection to a database #

1. Select the collection and choose Connect a database from its toolbar, or open Edit data and choose Connect database.
2. Choose Create a new table from this data to copy the current rows and columns into a named table. This requires at least one usable row and column.
3. Or choose Use a table I already have. The collection starts showing that table's rows; the existing inline rows are replaced, not copied, and the chosen table is left unchanged. An empty collection can use this path.
4. Read the outcome summary, then choose Create table or Use this table. After connection, the collection's Edit data action opens the embedded Database Manager.

To manage tables without selecting a collection, open Editor settings and choose Manage Data. The Database Manager heading also has an Open in new tab link. Table edits are shared by every connected page, so verify the affected lists and item pages after changing a field.

Verify the database result #

A value sorts incorrectly

Check that the column uses number or date rather than text.

A relation appears empty

Confirm the referenced row still exists and the component maps the resolved field.

A public list is empty

Check the table binding, filters, published state, row allowance and public read token.