FrameworkJavaScript

Database block: schema, views, and rows

A multi-view database block supporting board (Kanban) and list views. Stores a schema of typed properties (text, select, multiSelect, date, checkbox, etc.) and view configurations. Rows are stored as child `database-row` blocks. Supports grouping, drag-and-drop reordering, inline editing, and an optional backend sync adapter. (`sorts` and `filters` are persisted in the view config but are not applied yet.)

Import

TypeScript

import { Database } from '@bloklabs/core/tools';

Configuration

Option	Type	Default	Description
`adapter`	`DatabaseAdapter`	`undefined`	Optional backend sync adapter for persisting schema, row, and view changes to an external data source.

Save Data

TypeScript

interface DatabaseData {
  title?: string;                      // Database title
  schema: PropertyDefinition[];        // Column definitions (id, name, type, position, config)
  views: DatabaseViewConfig[];         // View configs — only 'board' and 'list' are rendered
                                       // ('table' and 'gallery' exist in the ViewType union
                                       // but fall back to the board renderer)
  activeViewId: string;                // Currently active view ID
}
// Rows are NOT stored here — they are child database-row blocks.

JSON

{
  "id": "db001",
  "type": "database",
  "data": {
    "title": "Tasks",
    "schema": [
      { "id": "prop1", "name": "Name", "type": "title", "position": "a0" },
      { "id": "prop2", "name": "Status", "type": "select", "position": "a1" }
    ],
    "views": [
      {
        "id": "v1",
        "name": "Board",
        "type": "board",
        "position": "a0",
        "sorts": [],
        "filters": [],
        "visibleProperties": ["prop1", "prop2"]
      }
    ],
    "activeViewId": "v1"
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Database, DatabaseRow } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    database: {
      class: Database,
    },
    // Required: the Database tool inserts `database-row` blocks for its rows.
    'database-row': {
      class: DatabaseRow,
    },
  },
});