@lumea/database

Tier 1 pure-UI database browser for React. Supabase-Studio-like experience: schema navigation, table inspection, paginated data grids, row editing, and a SQL editor — all adapter-driven with zero ORM or database driver dependencies.

Quick start

import {
 DatabaseProvider,
 DatabaseBrowser,
 type DbAdapter,
} from "@lumea/database";

const adapter: DbAdapter = {
 listSchemas: async () => [{ name: "public", tableCount: 12 }],
 listTables: async (schema) => { /* ... */ },
 selectRows: async (schema, table, opts) => { /* ... */ },
 // Every method is optional — capabilities auto-derive.
};

export default function DatabasePage() {
 return (
 <DatabaseProvider adapter={adapter}>
 <DatabaseBrowser />
 </DatabaseProvider>
 );
}

Capabilities

Every adapter method is optional. The UI auto-hides controls when a capability is missing — no broken buttons, no consumer-side guards.

| Capability | Adapter method | UI gated | |---|---|---| | canBrowseSchemas | listSchemas | Schema sidebar | | canBrowseTables | listTables | Table list | | canReadRows | selectRows | Data grid tab | | canInsertRow | insertRow | "Add row" button | | canUpdateRow | updateRow | Row edit in detail drawer | | canDeleteRow | deleteRow | "Delete" action in row detail | | canRunSql | runSql | SQL editor tab |

Labels

All user-facing strings are overridable via the labels prop on <DatabaseProvider>. Spread defaultDbLabels and override what you need:

import { defaultDbLabels } from "@lumea/database";

<DatabaseProvider
 adapter={adapter}
 labels={{ ...defaultDbLabels, title: "My Database" }}
>