Kottster Docs

Appearance

Table pages ​

Kottster table pages let you view and manage data in your database tables.

Table features in Kottster

The table pages support a variety of actions, including:

  • Viewing records
  • Creating, updating, and deleting records
  • Filtering, searching and sorting
  • Paginating results
  • Viewing and selecting related records
  • Creating, updating, and deleting related records

Page structure ​

Each table page requires a page.json configuration file in its own directory under app/pages/<pageKey>. The <pageKey> becomes the URL path where your page will be accessible (e.g., /users for a page in ./app/pages/users/).

Configuration file (page.json) ​

This file defines the table page configuration and is the only required file. You can edit it using the visual builder or modify the file manually.

Example:

app/pages/users/page.json
json
{
  "type": "table",
  "title": "User Management",
  ...
  "config": {
    // Table configuration goes here
    "table": "users",
    "dataSource": "postgres-db-1",
    "fetchStrategy": "databaseTable",
    ...
  }
}

Optional customization files ​

If you need additional customization beyond what the visual builder provides, you can add these optional files:

Backend controller (api.server.js) ​

This file handles custom backend logic and database interactions. You can modify it when you need custom fetching logic, validations, or hooks beyond what's configured in page.json.

Example:

app/pages/users/api.server.js
js
import { app } from '../../_server/app';

const controller = app.defineTableController({});

export default controller;

You basically extend the base configuration from page.json with custom logic using defineTableController.

Frontend component (index.jsx) ​

The file should export the TablePage component, which renders the table page and automatically connects to your backend configuration. You can customize the UI and add additional components by passing props to the TablePage component.

Example:

app/pages/users/index.jsx
jsx
import { TablePage } from '@kottster/react'; 

export default () => (
  <TablePage />
);

Creating table pages ​

You have two options for creating table pages:

The fastest way to create table pages is using Kottster's visual builder. It connects to your database, analyzes tables and relationships, and generates fully functional pages with a single click.

Adding a table page using the visual builder

When you use the visual builder, it creates a page.json file with your table configuration. It contains your page configuration and is automatically managed by the visual builder. If you need additional customization beyond what the visual builder offers, you can create optional api.server.js and index.jsx files as described above.

INFO

The visual builder manages the page.json file automatically. Even though you can edit it manually, it's recommended to use the visual builder for creating and configuring table pages. This ensures that all necessary configurations are correctly set up and reduces the risk of errors.

Option 2: Manual creation ​

For more control or custom requirements, you can manually create the page.json file in your ./app/pages/<pageKey> directory. Add optional api.server.js and index.jsx files if needed.

Examples ​

Here are some live examples of table pages to see them in action: