LAB/kottster_kottster
1
0
Fork 0
mirror of https://github.com/kottster/kottster.git synced 2026-01-09 06:12:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Update README, texts, remove relationships page

Browse Source
This commit is contained in:
Arthur 2025-10-04 08:17:59 +03:00
parent 2afeb3a96d
commit b9ccbfa41f
26 changed files with 458 additions and 720 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -10,8 +10,8 @@
# Instant admin panel for your app
Get a custom Node.js admin panel. Create pages to **view and manage data in your database**, <br />
or **build fully custom pages** from scratch. Secure, self-hosted, and easy to set up.
Get a custom Node.js admin panel. Create pages to **view and manage data in your database tables**, <br />
**compose dashboards**, or build fully custom pages. Secure, self-hosted, and easy to set up.
</div>

12
docs/.vitepress/config.mts
View File

@ -124,15 +124,7 @@ export default defineConfig({
}
},
plugins: [
groupIconVitePlugin({
// customIcon: {
// vitepress: localIconLoader(
// import.meta.url,
// '../public/vitepress-logo-mini.svg'
// ),
// firebase: 'logos:firebase'
// }
}),
groupIconVitePlugin({}),
]
},
})
@ -187,7 +179,7 @@ function sidebarDocs(): DefaultTheme.SidebarItem[] {
{ text: 'Raw SQL queries', link: '/table/configuration/raw-sql-queries' },
{ text: 'Custom data fetcher', link: '/table/configuration/custom-data-fetcher' },
{ text: 'Calculated columns', link: '/table/configuration/calculated-columns' },
{ text: 'Relationships', link: '/table/configuration/relationships' },
// { text: 'Relationships', link: '/table/configuration/relationships' },
],
},
{ text: 'TablePage component', link: '/ui/table-page-component' },

1
docs/.vitepress/theme/index.ts
View File

@ -1,5 +1,6 @@
import DefaultTheme from 'vitepress/theme';
import mixpanel from 'mixpanel-browser';
import 'virtual:group-icons.css';
export default {
...DefaultTheme,

2
docs/app-configuration/brendning.md
View File

@ -61,5 +61,5 @@ For better performance and reliability, you can store your logo locally:
```
::: tip
Make sure your logo image is optimized for web use and works well at different sizes across your application.
Make sure your logo image is optimized for web use and works well at different sizes across your application. Use PNG with transparency or SVG for best results.
:::

2
docs/dashboard/configuration/api.md
View File

@ -25,7 +25,7 @@ export default controller;
### Extending page configuration
When you need customization beyond what the visual editor provides, you can add additional configuration to the `page.json` settings in the controller file.
When you need customization beyond what the visual builder provides, you can add additional configuration to the `page.json` settings in the controller file.
**Example:**

73
docs/dashboard/configuration/calculated-columns.md
View File

@ -1,73 +0,0 @@
---
description: "Learn how to define calculated columns in Kottster using SQL queries to display derived data in your tables."
---
# Calculated columns
For table pages in Kottster, you can define custom columns that are calculated by executing a SQL query. This is useful for displaying aggregated data, computed values, or any other derived information that is not directly stored in the database.
## SQL query for calculated columns
Imagine for a table of `users`, you want to add a custom column that will display the full name of the user, which is a combination of first and last names. You can define a calculated column like this:
::: code-group
```sql [MySQL]
SELECT CONCAT(first_name, ' ', last_name) FROM users
```
```sql [PostgreSQL]
SELECT first_name || ' ' || last_name FROM users
```
```sql [SQLite]
SELECT first_name || ' ' || last_name FROM users
```
```sql [Microsoft SQL Server]
SELECT first_name + ' ' + last_name FROM users
```
:::
The SQL query you provide should return a single value and will be inserted into the SQL query like this:
``` [Example]
SELECT
id,
name,
<your_calculated_column> AS <alias>
FROM users AS main
```
## Using main table alias
If you need to reference the main table in your query, you can use the `main` alias. For example, imagine you have `users` and `orders` tables, and you want to calculate the total purchase amount for each user:
::: code-group
```sql [MySQL]
SELECT SUM(o.amount)
FROM orders o
WHERE o.user_id = main.id
```
```sql [PostgreSQL]
SELECT SUM(o.amount)
FROM orders o
WHERE o.user_id = main.id
```
```sql [SQLite]
SELECT SUM(o.amount)
FROM orders o
WHERE o.user_id = main.id
```
```sql [Microsoft SQL Server]
SELECT SUM(o.amount)
FROM orders o
WHERE o.user_id = main.id
```
:::

2
docs/dashboard/configuration/custom-data-fetcher.md
View File

@ -6,7 +6,7 @@ description: "Learn how to use custom data fetchers in Kottster to fetch data fo
For dashboard pages in Kottster, you can define custom data fetchers to retrieve data from any source, including external APIs or unsupported databases. This is useful when you want to fetch data that is not directly available in your database or when you need to implement custom logic for data retrieval.
To set up a custom data fetcher, you need to use custom fetch (`customFetch`) as a fetch strategy for your stats or charts in the dashboard configuration. This can be configured using the visual editor or by adding a `customDataFetcher` function for a stat or chart config before passing it to [`defineTableController`](./api.md).
To set up a custom data fetcher, you need to use custom fetch (`customFetch`) as a fetch strategy for your stats or charts in the dashboard configuration. This can be configured using the visual builder or by adding a `customDataFetcher` function for a stat or chart config before passing it to [`defineTableController`](./api.md).
## customDataFetcher function

2
docs/dashboard/configuration/raw-sql-queries.md
View File

@ -6,7 +6,7 @@ description: "Learn how to use custom SQL queries in Kottster dashboard pages to
Dashboard pages in Kottster support custom SQL queries to fetch and aggregate data directly from your database for stats and visualizations.
When creating a dashboard page using the visual editor, raw SQL query (`rawSqlQuery`) is set as the default fetch strategy. You can configure queries through the visual editor or by manually editing the `sqlQuery` parameter in [`defineDashboardController`](./api.md).
When creating a dashboard page using the visual builder, raw SQL query (`rawSqlQuery`) is set as the default fetch strategy. You can configure queries through the visual builder or by manually editing the `sqlQuery` parameter in [`defineDashboardController`](./api.md).
## Stats

196
docs/dashboard/configuration/relationships.md
View File

@ -1,196 +0,0 @@
---
description: "Define custom relationships between tables in Kottster. Learn how to set up one-to-one, one-to-many, and many-to-many relationships."
---
# Relationships
By default, **Kottster automatically detects relationships between tables based on their foreign keys**. However, you can also define relationships manually if you need to override the default behavior or if your database schema doesn't follow the standard conventions.
To set this up, include the relationship configuration in the `relationships` object inside [`defineTableController`](../../table/introduction.md).
## One-to-one
A one-to-one relationship links one record in a table to exactly one record in another table. To define this relationship in Kottster, provide the following object in `relationships`:
```typescript
{
relation: 'oneToOne',
/** The unique key for the relationship, used to access it in the table configuration */
key: '',
/** Foreign key column in the current table */
foreignKeyColumn: '',
/** The name of the target table */
targetTable: '',
/** The primary key column in the target table
that the foreign key refers to */
targetTableKeyColumn: ''
}
```
### Example
For example, consider a `users` table with a `workspace_id` column linking to a `workspaces` table. Each user is assigned exactly one workspace.
Imagine we want to create a page to view and manage data in the `users` table. By defining a one-to-one relationship with the `workspaces` table, we can display detailed workspace information instead of just showing `workspace_id`.
This also simplifies forms for creating or updating users. Instead of typing a `workspace_id`, people can select a workspace from a dropdown or list, making the form more intuitive and reducing errors.
**Here's an example of the page files:**
```js [app/pages/users/api.server.js]
import { app } from '../../_server/app';
import page from './page.json';
const controller = app.defineTableController({
...page.config,
relationships: [
{
relation: 'oneToOne',
key: 'user_workspace',
foreignKeyColumn: 'workspace_id',
targetTable: 'workspaces',
targetTableKeyColumn: 'id'
},
],
});
export default controller;
```
As shown above, the page includes a `relationships` object with the key `"user_workspace"`. This key can have any name and is defined for convenience.
The relation we specified enables two features:
- **Displaying Data**: Adds a Workspace column that shows preview of records from the `workspaces` table instead of just displaying the `workspace_id`.
- **Inserting/Updating Data**: Allows people to select a workspace from a list, improving usability and reducing errors.
## One-to-many
A one-to-many relationship links one record in a table to multiple records in another table. To define this relationship in Kottster, include the following object in `relationships`:
```typescript
{
relation: 'oneToMany',
/** The unique key for the relationship, used to access it in the table configuration */
key: '',
/** The name of the target table */
targetTable: '',
/** The primary key column in the target table */
targetTableKeyColumn: '',
/** The foreign key column in the target table
that refers to the current table */
targetTableForeignKeyColumn: ''
}
```
### Example
For example, consider a `projects` table and a `tasks` table, where each project can have multiple tasks.
Imagine we want to create a page to view data in the `projects` table. By defining a one-to-many relationship, we can display an additional column showing how many tasks are associated with each project and their details.
**Here's how the page files might look:**
```js [app/pages/projects/api.server.js]
import { app } from '../../_server/app';
import page from './page.json';
const controller = app.defineTableController({
...page.config,
relationships: [
{
relation: 'oneToMany',
key: 'project_tasks',
targetTable: 'tasks',
targetTableKeyColumn: 'id',
targetTableForeignKeyColumn: 'project_id',
columns: ['id', 'title', 'status'],
searchableColumns: ['title', 'status'],
},
],
});
export default controller;
```
## Many-to-many
A many-to-many relationship links multiple records in one table to multiple records in another table. This is implemented using a junction table (also called a join table) to connect the two tables.
To define this relationship in Kottster, include the following object in `relationships`:
```typescript
{
relation: 'manyToMany';
/** The unique key for the relationship, used to access it in the table configuration */
key: '',
/** Name of the table being referenced/joined */
targetTable: '',
/** The primary key column in the target table */
targetTableKeyColumn: '',
/** Name of the intermediate table that connects the source and target tables */
junctionTable: '',
/** Foreign key in the junction table referencing the source table */
junctionTableSourceKeyColumn: '',
/** Foreign key in the junction table referencing the target table */
junctionTableTargetKeyColumn: '',
/** The array of columns in the target table to include
in queries and display by default */
columns: [],
/** The array of columns in the target table available for search */
searchableColumns: []
}
```
### Example
Consider an `authors` table and a `books` table, where an author can write multiple books, and a book can have multiple authors. To represent this many-to-many relationship, we use a junction table called `author_books`, which links `author_id` in the authors table to `book_id` in the books table.
Imagine we want to create a page to view data in the `books` table. By defining a many-to-many relationship with authors as the target table and `author_books` as the junction table, we can add a column to show how many and which authors are associated with each book.
**Here's how the page files might look:**
```js [app/pages/books/api.server.js]
import { app } from '../../_server/app';
import page from './page.json';
const controller = app.defineTableController({
...page.config,
relationships: [
{
relation: 'manyToMany',
key: 'book_authors',
// Junction table details
junctionTable: 'author_books',
junctionTableSourceKeyColumn: 'book_id',
junctionTableTargetKeyColumn: 'author_id',
// Target table details
targetTable: 'authors',
targetTableKeyColumn: 'id',
columns: ['id', 'full_name'],
searchableColumns: ['full_name'],
},
],
});
export default controller;
```

14
docs/dashboard/introduction.md
View File

@ -20,7 +20,7 @@ Kottster dashboard pages let you **visualize and monitor data** through statisti
Each dashboard 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., `/analytics` for a page in `./app/pages/analytics/`).
### Configuration file (`page.json`)
This file defines the dashboard page configuration and is the only required file. You can edit it using the visual editor or modify the file manually.
This file defines the dashboard page configuration and is the only required file. You can edit it using the visual builder or modify the file manually.
**Example:**
@ -41,7 +41,7 @@ This file defines the dashboard page configuration and is the only required file
### Optional customization files
If you need additional customization beyond what the visual editor provides, you can add these optional 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 data processing. Use this when you need custom data fetching, aggregations, or calculations beyond what's configured in `page.json`.
@ -82,16 +82,16 @@ The frontend component returns the [`DashboardPage`](../ui/dashboard-page-compon
You have two options for creating dashboard pages:
### Option 1: Visual editor (recommended)
### Option 1: Using visual builder (recommended)
The fastest way to create dashboard pages is using Kottster's visual editor. It connects to your database, analyzes available data, and helps you configure statistics and charts with a point-and-click interface.
The fastest way to create dashboard pages is using Kottster's visual builder. It connects to your database, analyzes available data, and helps you configure statistics and charts with a point-and-click interface.
<!-- ![Adding a dashboard page using the visual editor](./adding-dashboard-page.png) -->
<!-- ![Adding a dashboard page using the visual builder](./adding-dashboard-page.png) -->
When you use the visual editor, it creates a `page.json` file with your dashboard configuration. It contains your page configuration and is automatically managed by the visual editor. If you need additional customization beyond what the visual editor offers, you can create optional `api.server.js` and `index.jsx` files as described above.
When you use the visual builder, it creates a `page.json` file with your dashboard 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 editor manages the `page.json` file automatically. Even though you can edit it manually, it's recommended to use the visual editor for creating and configuring dashboard pages. This ensures that all necessary configurations are correctly set up and reduces the risk of errors.
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 dashboard pages. This ensures that all necessary configurations are correctly set up and reduces the risk of errors.
:::
### Option 2: Manual creation

16
docs/data-sources.md
View File

@ -28,7 +28,7 @@ After creating an app, you’ll land on the "**Getting Started**" page, where yo
On the same "**Getting Started**" page, you can choose "**Add file manually**" option to get instructions on how to add a data source using the CLI.
After you execute the command, a folder with the data source will be created in the `_server/data-sources/` directory.
After you execute the command, a folder with the data source will be created in the `app/_server/data-sources/` directory.
This method is extremely useful if you want to set additional parameters for connection, such as SSL or custom connection options.
@ -37,11 +37,11 @@ This method is extremely useful if you want to set additional parameters for con
Each data source configuration contains a `tablesConfig` object that allows you to define restrictions and permissions for each table globally. This configuration should be specified in the `dataSource.json` file. By default, if table configuration is not provided, the table is included in all requests.
The following table configuration options are available:
- **`excluded`**: Excludes the table from any requests. By default, all tables are included.
- **`excludedColumns`**: Excludes the specified columns from any requests. By default, all columns are included.
- **`preventInsert`**: Prevents insert operations. By default, insert operations are allowed.
- **`preventUpdate`**: Prevents update operations. By default, update operations are allowed.
- **`preventDelete`**: Prevents delete operations. By default, delete operations are allowed.
- **`excluded`**: Excludes the table from any requests. If not specified, the table is included by default.
- **`excludedColumns`**: Excludes the specified columns from any requests. If not specified, all columns are included by default.
- **`preventInsert`**: Prevents insert operations. If not specified, insert operations are allowed by default.
- **`preventUpdate`**: Prevents update operations. If not specified, update operations are allowed by default.
- **`preventDelete`**: Prevents delete operations. If not specified, delete operations are allowed by default.
Example of a data source configuration:
@ -62,6 +62,6 @@ Example of a data source configuration:
}
```
In the example above, access to the `payment_methods` table is completely excluded, including all its columns. Even in development mode, this table will not be visible in the visual editor.
In the example above, access to the `payment_methods` table is completely excluded, including all its columns. Even in development mode, this table will not be visible in the visual builder.
The `users` table is still accessible, but with certain restrictions. The `password` column is excluded from all requests, it won't be returned in any queries and won't be available in the visual editor. Additionally, insert, update, and delete operations are prevented for this table.
The `users` table is still accessible, but with certain restrictions. The `password` column is excluded from all requests, it won't be returned in any queries and won't be available in the visual builder. Additionally, insert, update, and delete operations are prevented for this table.

4
docs/package.json
View File

@ -6,7 +6,7 @@
},
"dependencies": {
"mixpanel-browser": "^2.68.0",
"vitepress": "^1.6.3",
"vitepress-plugin-group-icons": "^1.6.0"
"vitepress": "^1.6.4",
"vitepress-plugin-group-icons": "^1.6.3"
}
}

2
docs/project-structure.md
View File

@ -49,7 +49,7 @@ This page explains the purpose of each file and folder in your project.
- #### `app.js`
The file with app initialization logic. It creates a new Kottster app instance and sets up data sources.
The file with app initialization logic. It creates a new Kottster app instance with all the configuration.
- #### `server.js`

6
docs/security/database-access.md
View File

@ -35,15 +35,15 @@ Your local Kottster app automatically extracts and stores database schema inform
**How it works in development:**
In visual editor, you can use features that requires making requests to our platform (external API), such as generating SQL queries or exploring ready-to-use page templates.
In visual builder, you can use optional features that requires making requests to our platform (external API), such as generating SQL queries using AI or create pages using ready-to-use page templates.
When you use such features, your local app includes this locally-stored schema information in the request to Kottster API.
This approach ensures that database schema information is only shared when you actively use features that require it. <span style="color: #099268;">**Your actual database credentials, connection details or stored data are never shared with our platform or any external services.**</span>
This approach ensures that database schema information is only shared when you actively use features that require it. <span style="color: #099268;">**Your actual database credentials, connection details or stored data are not accessible by our platform or any external services.**</span>
### Complete control
The content of these connection files can be modified according to your development needs. You have full control over:
The content of these data source connection files in `app/_server/data-sources/` can be modified according to your development needs. You have full control over:
- Connection parameters
- Authentication details

10
docs/security/database-usage.md
View File

@ -24,16 +24,8 @@ After the initial schema extraction, Kottster app doesn't need to query your dat
**Table views**: When a user opens a table view, Kottster runs multiple SELECT queries to the target table and its related tables to display the data.
**CRUD operations**: All basic Create, Update, and Delete operations run as single queries to your database.
**CRUD operations**: All basic Create, Update, and Delete operations run as single queries to your database. It happens only when users intentionally perform these actions.
### Data privacy
Your database credentials and connection details are stored locally within your Kottster app and are never shared with our platform or any external services. Learn more about [how Kottster accesses your database](./database-access.md). The database data is only accessible by your app’s backend, ensuring that all data operations are secure and private.
## Database-friendly approach
- **Query only on interaction**: No background processes or automatic data syncing
- **Efficient caching**: Schema information is cached to minimize database requests
- **On-demand loading**: Data is fetched only when users request it
This approach ensures Kottster works with your existing database without any performance overhead or interference with your other apps.

2
docs/security/roles-and-permissions.md
View File

@ -17,7 +17,7 @@ Based on these roles, you can define which parts of your app users have access t
## Setting up page access
You can control which roles have access to specific pages using the visual editor. This can be done when creating a new page or editing an existing one. For [table pages](../table/introduction.md), you can control permissions for creating, updating, and deleting records based on user roles.
You can control which roles have access to specific pages using the visual builder. This can be done when creating a new page or editing an existing one. For [table pages](../table/introduction.md), you can additionally control permissions for creating, updating, and deleting records based on user roles.
## Root user

2
docs/table/configuration/api.md
View File

@ -12,7 +12,7 @@ This function is used in the optional `api.server.js` file within a page directo
### Configuring the main table
When you need customization beyond what the visual editor provides, you can add additional configuration to the `page.json` settings in the controller file.
When you need customization beyond what the visual builder provides, you can add additional configuration to the `page.json` settings in the controller file.
**Example:**

5
docs/table/configuration/custom-data-fetcher.md
View File

@ -6,7 +6,7 @@ description: "Learn how to use custom data fetchers in Kottster to fetch data fo
For table pages in Kottster, you can define custom data fetchers to retrieve data from any source, including external APIs or unsupported databases. This is useful when you want to fetch data that is not directly available in your database or when you need to implement custom logic for data retrieval.
To set up a custom data fetcher, you need to use custom fetch (`customFetch`) as a fetch strategy. This can be configured using the visual editor or by adding a `customDataFetcher` function inside [`defineTableController`](./api.md).
To set up a custom data fetcher, you need to use custom fetch (`customFetch`) as a fetch strategy. This can be configured using the visual builder or by adding a `customDataFetcher` function inside [`defineTableController`](./api.md).
## customDataFetcher function
@ -88,7 +88,8 @@ export default controller;
## Adding search functionality
To enable search functionality in your table, you can use the [withSearch](../../ui/table-page-component.md#withsearch) property.
To enable search functionality in your table, you can use the [withSearch](../../ui/table-page-component.md#withsearch) property.
This will enable a search input in the table UI and pass the `search` parameter to your `customDataFetcher` function.
```js [app/pages/products/api.server.js]
import { app } from '../../_server/app';

2
docs/table/configuration/raw-sql-queries.md
View File

@ -8,7 +8,7 @@ For table pages in Kottster, you can define custom SQL queries to fetch data dir
To set up custom SQL queries, you need to use raw SQL query (`rawSqlQuery`) as a fetch strategy. You can define both the main query to fetch records and an optional count query for pagination.
All of this can be set up using the visual editor or by manually editing the `customSqlQuery` and `customSqlCountQuery` parameters inside [`defineTableController`](./api.md).
All of this can be set up using the visual builder or by manually editing the `customSqlQuery` and `customSqlCountQuery` parameters inside [`defineTableController`](./api.md).
## Basic SQL queries

8
docs/table/configuration/relationships.md
View File

@ -2,6 +2,9 @@
description: "Define custom relationships between tables in Kottster. Learn how to set up one-to-one, one-to-many, and many-to-many relationships."
---
<!-- TODO: This page is hidden because it's outdated. Update the content and unhide it later. -->
# Relationships
By default, **Kottster automatically detects relationships between tables based on their foreign keys**. However, you can also define relationships manually if you need to override the default behavior or if your database schema doesn't follow the standard conventions.
@ -113,7 +116,6 @@ const controller = app.defineTableController({
targetTableKeyColumn: 'id',
targetTableForeignKeyColumn: 'project_id',
columns: ['id', 'title', 'status'],
searchableColumns: ['title', 'status'],
},
],
});
@ -152,9 +154,6 @@ To define this relationship in Kottster, include the following object in `relati
/** The array of columns in the target table to include
in queries and display by default */
columns: [],
/** The array of columns in the target table available for search */
searchableColumns: []
}
```
@ -186,7 +185,6 @@ const controller = app.defineTableController({
targetTable: 'authors',
targetTableKeyColumn: 'id',
columns: ['id', 'full_name'],
searchableColumns: ['full_name'],
},
],
});

2
docs/table/customization/add-custom-columns.md
View File

@ -45,7 +45,7 @@ Learn more about **columns and their parameters** in the [API reference](../conf
## Calculated columns
**Using the visual editor or the `calculatedColumns` in the `defineTableController` function**
**Using the visual builder or the `calculatedColumns` in the `defineTableController` function**
For more complex scenarios where you need to perform SQL calculations on the server side, you can use the [`calculatedColumns`](../configuration/api.md#calculatedcolumns) configuration. This is particularly useful for aggregate functions like counting related records or performing mathematical operations.

14
docs/table/introduction.md
View File

@ -22,7 +22,7 @@ Kottster table pages let you **view and manage data** in your database tables.
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 editor or modify the file manually.
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:**
@ -43,7 +43,7 @@ This file defines the table page configuration and is the only required file. Yo
### Optional customization files
If you need additional customization beyond what the visual editor provides, you can add these optional 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. Use this when you need custom fetching logic, validations, or hooks beyond what's configured in `page.json`.
@ -84,16 +84,16 @@ The frontend component returns the [`TablePage`](../ui/table-page-component.md)
You have two options for creating table pages:
### Option 1: Visual editor (recommended)
### Option 1: Using visual builder (recommended)
The fastest way to create table pages is using Kottster's visual editor. It connects to your database, analyzes tables and relationships, and generates fully functional pages with a single click.
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 editor](./adding-table-page.png)
![Adding a table page using the visual builder](./adding-table-page.png)
When you use the visual editor, it creates a `page.json` file with your table configuration. It contains your page configuration and is automatically managed by the visual editor. If you need additional customization beyond what the visual editor offers, you can create optional `api.server.js` and `index.jsx` files as described above.
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 editor manages the `page.json` file automatically. Even though you can edit it manually, it's recommended to use the visual editor for creating and configuring table pages. This ensures that all necessary configurations are correctly set up and reduces the risk of errors.
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

2
docs/ui/dashboard-page-component.md
View File

@ -6,7 +6,7 @@ description: "DashboardPage component in Kottster displays dynamic dashboards wi
The `DashboardPage` component displays a dynamic dashboard with various statistics, charts, and data visualizations.
The component is tightly connected to the [`defineDashboardController`](../dashboard/configuration/api.md) settings, which manage both API interactions and dashboard behavior. If you want extra control over **how the dashboard looks or works on the client side**, you need to use the `DashboardPage` component.
The component is tightly connected to the [`dashboard page configuration`](../dashboard/configuration/api.md) and backend API. You need to modify the `DashboardPage` component if you want extra control over **how the dashboard looks or works on the client side**.
## Properties

2
docs/ui/table-page-component.md
View File

@ -6,7 +6,7 @@ description: "Table page component for displaying and managing data with search,
The `TablePage` component displays a dynamic table for viewing and managing data from a database table. It includes features like search, sorting, filtering, and a form for inserting or updating records.
The component is tightly connected to the [`defineTableController`](../table/configuration/api.md) settings, which manage both API interactions and table behavior. If you want extra control over **how the main table looks or works on the client side**, you need to use the `TablePage` component.
The component is tightly connected to the [`table page configuration`](../table/configuration/api.md) and backend API. You need to modify the `TablePage` component if you want extra control over **how the main table looks or works on the client side**.
## Basic usage

16
docs/what-is-kottster.md
View File

@ -4,7 +4,7 @@ description: "What is Kottster? Learn how Kottster helps you build admin panels
# What is Kottster?
Kottster helps you build admin panels fast. Connect it to your database, create pages to view and manage data in your database, or build fully custom pages from scratch.
Kottster lets you build admin panels quickly. Create pages to **view and manage data in your database tables**, compose **dashboards**, or build **fully custom pages from scratch**.
<div class="tip custom-block" style="font-weight: 500; padding-top: 8px">
Want to see Kottster in action? Check out our <a href="https://demo.kottster.app/" target="_blank">live demo</a> app.
@ -18,13 +18,13 @@ Want to see Kottster in action? Check out our <a href="https://demo.kottster.app
Connect your database and get instant admin pages. Kottster automatically creates table views with edit, create, and delete functions. It even detects relationships between tables and makes it easy to work with connected data. You can also build fully custom pages with your own logic and UI.
- **Internal Tools**
Build custom tools for your team. Use the visual editor to create exactly what you need, or start with ready-made templates. Perfect for content management, user admin, or any data entry tasks.
- **Dashboards**
Create dashboards to monitor and manage your data. Combine auto-generated table pages with custom pages to build exactly what your business needs.
Create dashboards to monitor and visualize your data. Use charts, statistics, and custom components to get insights at a glance.
- **Internal Tools**
Build custom tools for your team. Use the visual builder to create exactly what you need, or start with ready-made templates. Perfect for content management, user admin, or any data entry tasks.
## Developer experience
@ -32,7 +32,7 @@ Kottster makes building admin panels simple and fast.
- **Quick Setup:** Run one CLI command to create your app. Connect your database and start [generating admin pages](https://kottster.app/generate-admin-panel) right away.
- **Visual Editor:** Build pages without writing code using our visual editor. Or write custom code when you need more control.
- **Visual Editor:** Build pages without writing code using our visual builder. Or write custom code when you need more control.
- **Smart Database Integration:** Kottster scans your database and automatically handles relationships. Foreign keys become easy-to-use dropdowns. Related records show up where they should.
@ -48,7 +48,7 @@ Your data stays with you.
- **Deploy Anywhere**
[Deploy to any platform](./deploying.md) that runs Node.js. Your own servers, cloud platforms, or containers - it all works.
[Deploy to any platform](./deploying.md) that runs Node.js. Use cloud services, VPS, or on-premises servers. You control where your app runs.
- **Built-in Auth**

777
docs/yarn.lock
View File

File diff suppressed because it is too large Load Diff