Integration Guide

# Core packages
npm install @marlinjai/data-table-core @marlinjai/data-table-react

# Choose your database adapter
npm install @marlinjai/data-table-adapter-d1      # For Cloudflare D1
npm install @marlinjai/data-table-adapter-memory  # For testing

# Optional: File storage adapter
npm install @marlinjai/data-table-file-adapter-storage-brain

import { DataTableProvider, TableView, useTable } from '@marlinjai/data-table-react';
import { D1Adapter } from '@marlinjai/data-table-adapter-d1';

// Create adapter (in API route or server component)
const dbAdapter = new D1Adapter(env.DB);

function App() {
  return (
    <DataTableProvider dbAdapter={dbAdapter} workspaceId={userId}>
      <MyTable />
    </DataTableProvider>
  );
}

function MyTable() {
  const {
    table,
    columns,
    rows,
    updateCell,
    addRow,
    deleteRow,
  } = useTable({ tableId: 'my-table-id' });

  return (
    <TableView
      columns={columns}
      rows={rows}
      onCellChange={updateCell}
      onAddRow={addRow}
      onDeleteRow={deleteRow}
    />
  );
}

import { StorageBrainFileAdapter } from '@marlinjai/data-table-file-adapter-storage-brain';
import { StorageBrain } from '@marlinjai/storage-brain-sdk';

const storageBrain = new StorageBrain({
  apiKey: process.env.STORAGE_BRAIN_API_KEY,
});

const fileAdapter = new StorageBrainFileAdapter({
  client: storageBrain,
  defaultContext: 'default',
});

<DataTableProvider
  dbAdapter={dbAdapter}
  fileAdapter={fileAdapter}
  workspaceId={userId}
>
  ...
</DataTableProvider>

npm install @marlinjai/storage-brain-sdk

import { StorageBrain } from '@marlinjai/storage-brain-sdk';

const client = new StorageBrain({
  apiKey: process.env.STORAGE_BRAIN_API_KEY,   // sk_live_... or sk_test_...
  baseUrl: 'https://your-worker.workers.dev',  // Optional
  workspaceId: 'my-workspace',                 // Optional default workspace
});

// Upload a file
const result = await client.upload(file, {
  context: 'documents',
  tags: { category: 'invoice' },
  onProgress: (percent) => console.log(`${percent}% uploaded`),
});

console.log(result);
// {
//   id: 'file-123',
//   url: 'https://...',
//   originalName: 'invoice.pdf',
//   fileType: 'application/pdf',
//   sizeBytes: 123456,
//   workspaceId: 'my-workspace',
//   processingStatus: 'completed'
// }

// Get a signed URL (time-limited access)
const { url, expiresAt } = await client.getSignedUrl('file-123', 3600);

// Workspace-scoped client
const wsClient = client.withWorkspace('other-workspace');
const files = await wsClient.listFiles();

// Create a workspace
const ws = await client.createWorkspace({
  name: 'Team Files',
  slug: 'team-files',
});

// List all workspaces
const workspaces = await client.listWorkspaces();

npm install @marlinjai/data-brain-sdk

import { DataBrain } from '@marlinjai/data-brain-sdk';

const client = new DataBrain({
  apiKey: process.env.DATA_BRAIN_API_KEY,      // sk_live_... or sk_test_...
  baseUrl: 'https://your-worker.workers.dev',  // Optional
  workspaceId: 'my-workspace',                 // Optional default workspace
});

// Create a table
const table = await client.createTable({
  name: 'Contacts',
  columns: [
    { name: 'Name', type: 'text' },
    { name: 'Email', type: 'text' },
    { name: 'Status', type: 'select' },
  ],
});

// Insert rows
const row = await client.createRow({
  tableId: table.id,
  cells: { Name: 'Jane Doe', Email: 'jane@example.com' },
});

// Query with filters
const results = await client.getRows(table.id, {
  filter: { field: 'Status', operator: 'eq', value: 'active' },
  sort: [{ field: 'Name', direction: 'asc' }],
  limit: 50,
});

import { DataBrainAdapter } from '@marlinjai/data-table-adapter-data-brain';

const adapter = new DataBrainAdapter({
  baseUrl: process.env.DATA_BRAIN_URL!,
  apiKey: process.env.DATA_BRAIN_API_KEY!,
});

-- dt_tables
CREATE TABLE dt_tables (
  id TEXT PRIMARY KEY,
  workspace_id TEXT NOT NULL,
  name TEXT NOT NULL,
  description TEXT,
  icon TEXT,
  created_at TEXT DEFAULT (datetime('now')),
  updated_at TEXT DEFAULT (datetime('now'))
);

-- dt_columns
CREATE TABLE dt_columns (
  id TEXT PRIMARY KEY,
  table_id TEXT NOT NULL REFERENCES dt_tables(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  type TEXT NOT NULL,
  position INTEGER NOT NULL,
  width INTEGER DEFAULT 200,
  is_primary INTEGER DEFAULT 0,
  config TEXT,
  created_at TEXT DEFAULT (datetime('now'))
);

-- dt_rows
CREATE TABLE dt_rows (
  id TEXT PRIMARY KEY,
  table_id TEXT NOT NULL REFERENCES dt_tables(id) ON DELETE CASCADE,
  cells TEXT NOT NULL DEFAULT '{}',
  computed TEXT DEFAULT '{}',
  parent_row_id TEXT,
  archived INTEGER DEFAULT 0,
  created_at TEXT DEFAULT (datetime('now')),
  updated_at TEXT DEFAULT (datetime('now'))
);

-- dt_select_options
CREATE TABLE dt_select_options (
  id TEXT PRIMARY KEY,
  column_id TEXT NOT NULL REFERENCES dt_columns(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  color TEXT,
  position INTEGER DEFAULT 0
);

-- dt_views
CREATE TABLE dt_views (
  id TEXT PRIMARY KEY,
  table_id TEXT NOT NULL REFERENCES dt_tables(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  type TEXT NOT NULL,
  is_default INTEGER DEFAULT 0,
  position INTEGER DEFAULT 0,
  config TEXT DEFAULT '{}',
  created_at TEXT DEFAULT (datetime('now')),
  updated_at TEXT DEFAULT (datetime('now'))
);

-- Indexes
CREATE INDEX idx_tables_workspace ON dt_tables(workspace_id);
CREATE INDEX idx_columns_table ON dt_columns(table_id);
CREATE INDEX idx_rows_table ON dt_rows(table_id);
CREATE INDEX idx_rows_parent ON dt_rows(parent_row_id);
CREATE INDEX idx_select_options_column ON dt_select_options(column_id);
CREATE INDEX idx_views_table ON dt_views(table_id);

// app/providers.tsx
'use client';

import { DataTableProvider } from '@marlinjai/data-table-react';

export function Providers({
  children,
  dbAdapter,
  fileAdapter,
  workspaceId,
}) {
  return (
    <DataTableProvider
      dbAdapter={dbAdapter}
      fileAdapter={fileAdapter}
      workspaceId={workspaceId}
    >
      {children}
    </DataTableProvider>
  );
}

// app/api/data-table/route.ts
import { D1Adapter } from '@marlinjai/data-table-adapter-d1';

export const runtime = 'edge';

export async function GET(request: Request) {
  const adapter = new D1Adapter(process.env.DB);
  // ... handle requests
}

:root {
  --dt-bg-primary: #ffffff;
  --dt-bg-secondary: #f9fafb;
  --dt-bg-hover: #f3f4f6;
  --dt-border-color: #e5e7eb;
  --dt-text-primary: #111827;
  --dt-text-secondary: #6b7280;
  --dt-accent-primary: #2563eb;
}

/* Dark mode */
.dark {
  --dt-bg-primary: #1f2937;
  --dt-bg-secondary: #111827;
  --dt-text-primary: #f9fafb;
  /* ... */
}

import '@marlinjai/data-table-react/styles/variables.css';
import '@marlinjai/data-table-react/styles/base.css';

npm install @marlinjai/email-editor

import { EmailEditorReact } from '@marlinjai/email-editor/react';
import '@marlinjai/email-editor/styles.css';

function App() {
  return (
    <EmailEditorReact
      initialTemplate={myTemplate}
      onChange={(template) => saveTemplate(template)}
      onExport={(template) => compileOnServer(template)}
    />
  );
}

import { MJMLExporter } from '@marlinjai/email-editor-core/server';

const exporter = new MJMLExporter();

export async function POST(request: Request) {
  const template = await request.json();
  const { html, errors } = exporter.export(template);
  return Response.json({ html, errors });
}

npm install @marlinjai/clearify --save-dev
npx clearify init

npx clearify dev    # Dev server at localhost:4747
npx clearify build  # Static site output