Spreadsheet grid is a production-ready tables component from BJORK UI, packaged for shadcn registries.
"use client";
import { SpreadsheetGrid, type SpreadsheetCells } from "@/components/ui/bjork-spreadsheet-grid";
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tableTheme = previewTheme === "light" || previewTheme === "dark" ? previewTheme : "auto";
const handleChange = (_cells: SpreadsheetCells, changes: { address: string; value: string }[]) => {
console.log("Changed", changes);
};
return <>
<SpreadsheetGrid
// The scroll region has no intrinsic width, so the card needs a definite one inside the shrink-to-fit stage.
className={isPreview ? "w-[1040px]" : "w-[420px] lg:w-[1040px] lg:max-w-full"}
theme={tableTheme}
enableAnimations={!isPreview}
defaultActiveCell="B9"
maxHeight={isPreview ? 420 : 520}
onChange={handleChange}
/>
</>;
}
export default function BjorkRegistryPreview(){return <div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div>}