Explore

A two-pane data browser: a searchable list of every attached table on the left, the selected table's rows on the right. A whole schema browser from a single tag.

Connecting…

<Explore />

Pin a table and cap the height

defaultTable selects a table on first render, maxHeight caps the right-pane grid, and readonly forces browse-only even when the source would allow edits.

<Explore defaultTable="db.iris" maxHeight={360} readonly />

c.Explore(defaultTable="db.iris", maxHeight=360, readonly=True)

Props

Prop	Type	Notes
`defaultTable`	`string`	Fully-qualified table (`catalog.schema.name`) selected on first render.
`maxHeight`	`number` \| `string`	Caps the height of the right-pane data grid.
`readonly`	`bool`	Force browse-only, regardless of the source's metadata.
`className`	`string`	Classes merged onto the outer grid.

Installation

Explore ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Explore, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}