Introduction

Kottster tables let you view and manage data in the database tables.

They support a variety of actions, including:

• Viewing data
• Filtering and searching
• Paginating results
• Creating new records
• Updating existing records
• Deleting records

Page file

With Kottster, since it's a full-stack app, you can setup all this by creating a single file in the ./app/routes directory. It would look something like this:

import { TablePage } from '@kottster/react'; 
import { app } from '../.server/app';
import dataSource from '../.server/data-sources/${dataSource.type}';

// Defines the backend controller for the table.
// It's responsible for handling requests from the TablePage component.
export const action = app.defineTableController(dataSource, {
  table: 'users',
  primaryKeyColumn: 'id',
  select: {
    pageSize: 30,
  },
  insert: true,
  update: true,
  delete: true
});

// Defines the page layout.
export default () => (
  <TablePage />
);

As you can see, a typical page in Kottster consists of two main parts:

• Backend logic: The action export uses defineTableController to define how the TablePage component interacts with the database, specifying the table, primary key, and available actions like selecting, inserting, updating, and deleting records.

• User interface: The default export returns the TablePage component, which displays the table and form.

Auto-generation

With Kottster, you don’t need to manually create pages for every table in your database tables.

Kottster’s key feature is its ability to automatically generate pages like the one shown above. It connects to your database, analyzes its tables, columns, and relationships, and lets you generate pages for them with just a click. In just seconds, you can generate a fully functional customizable admin panel that will allow you to view and manage data in your database tables.