Overview

Pages with tables let you view and manage data in your database.

They support a variety of actions, including:

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

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:

Example file

import { Page, usePage } from '@kottster/react'; 
import { Table } from '@kottster/react';
import { app } from '../.server/app';
import dataSource from '../.server/data-sources/${dataSource.type}';

// Defines the backend logic.
// It sets up the table's data and actions, such as selecting rows,
// and enabling insert, update, and delete operations.
export const action = 
  app.createTableRpc(dataSource, {
    table: 'users',
    primaryKeyColumn: 'id',
    select: {
      pageSize: 30,
    },
    insert: true,
    update: true,
    delete: true
  });
  

// Defines the user interface.
// The Table component displays data and handles interactions.
// The Table.RecordModal component is optional 
// and provides modals for creating and updating records.
export default () => {
  return (
    <Page title='Users'>
      <Table>
          <Table.RecordModal />
      </Table>
    </Page>
  );
};

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

Backend logic: The action export uses createTableRpc to define how the Table 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 defines the page layout, with the Table component displaying data and optional Table.RecordModal component handling record creation and updates.

Auto-generation

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

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.

Learn more

PreviousDeploy to production NextcreateTableRpc

Last updated 11 days ago

import { Page, usePage } from '@kottster/react'; import { Table } from '@kottster/react'; import { app } from '../.server/app'; import dataSource from '../.server/data-sources/${dataSource.type}'; // Defines the backend logic. // It sets up the table's data and actions, such as selecting rows, // and enabling insert, update, and delete operations. export const action = app.createTableRpc(dataSource, { table: 'users', primaryKeyColumn: 'id', select: { pageSize: 30, }, insert: true, update: true, delete: true }); // Defines the user interface. // The Table component displays data and handles interactions. // The Table.RecordModal component is optional // and provides modals for creating and updating records. export default () => { return ( <Page title='Users'> <Table> <Table.RecordModal /> </Table> </Page> ); };