Variable PerspectiveViewer`Const`

PerspectiveViewer: React.FC<PerspectiveViewerProps> = ...

A declarative React wrapper for the <perspective-viewer> Custom Element.

<PerspectiveViewer> manages the element's imperative lifecycle: it load()s the PerspectiveViewerProps.client, restore()s the PerspectiveViewerProps.config whenever either changes, subscribes the on* callback props to the element's Custom Events, and delete()s the viewer (freeing its WebAssembly resources) on unmount. Tables and clients are created outside the component and are yours to manage — a Table passed as client survives unmount and can be shown again by a later mount.

The component is memoized, so re-rendering a parent with unchanged props does not touch the viewer.

Example

const WORKER = await perspective.worker();
const TABLE = WORKER.table(
    fetch("superstore.lz4.arrow").then((resp) => resp.arrayBuffer()),
    { name: "superstore" },
);

const App: React.FC = () => {
    const [config, setConfig] = React.useState<pspViewer.ViewerConfigUpdate>({
        group_by: ["State"],
        plugin: "Y Bar",
    });

    return (
        <PerspectiveViewer
            client={TABLE}
            config={config}
            onConfigUpdate={setConfig}
        />
    );
};

Variable PerspectiveViewerConst

Example

Settings

Variable PerspectiveViewer`Const`