āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(introduction)/intro-installation-shadcn ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Before adding LyteNyte Grid components, ensure your project is set up with shadcn. Follow the shadcn/ui installation guide for your framework to get started.
LyteNyte Grid components are available under the @lytenyte namespace.
The shadcn CLI automatically locates the 1771 Technologies public registry. Run the following command to get started:
<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} className="bg-fd-card">
<Tab value="pnpm" className="p-0 rounded-t-[0px] [&>div]:rounded-t-[0px]">pnpm dlx shadcn@latest add @lytenyte/lytenyte-core
npx shadcn@latest add @lytenyte/lytenyte-core
yarn shadcn@latest add @lytenyte/lytenyte-core
bunx --bun shadcn@latest add @lytenyte/lytenyte-core
If you're using the PRO edition of LyteNyte Grid, run the following instead:
<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} className="bg-fd-card">
<Tab value="pnpm" className="p-0 rounded-t-[0px] [&>div]:rounded-t-[0px]">pnpm dlx shadcn@latest add @lytenyte/lytenyte-pro
npx shadcn@latest add @lytenyte/lytenyte-pro
yarn shadcn@latest add @lytenyte/lytenyte-pro
bunx --bun shadcn@latest add @lytenyte/lytenyte-pro
After you run the command, shadcn adds a lytenyte-core.tsx or lytenyte-pro.tsx component file,
along with a corresponding hook file (use-lytenyte-core.tsx or use-lytenyte-pro.tsx).
Each component file includes the preconfigured, headless LyteNyte Grid parts for your project. Modify these as needed for your application. Depending on your import path configuration, importing the components is as simple as:
<Tabs items={['Core', 'PRO']} className="bg-fd-card">
<Tab value="Core" className="rounded-t-[0px] p-0 [&>div]:rounded-t-[0px]">import { LyteNyte } from "@/components/lytenyte-core";
import { useLyteNyte } from "@/hooks/use-lytenyte-core";
import { LyteNyte } from "@/components/lytenyte-pro";
import { useLyteNyte } from "@/hooks/use-lytenyte-pro";
Add @1771technologies/lytenyte-core or @1771technologies/lytenyte-pro to your project dependencies:
@1771technologies/lytenyte-core
@1771technologies/lytenyte-pro
Next copy and paste the following code into your project:
<Tabs items={['Core', "PRO"]} className="bg-fd-card">
<Tab value="PRO" className="p-0 rounded-t-[0px] [&>div]:rounded-t-[0px]">import "@1771technologies/lytenyte-pro/grid.css";
import type {
Grid as G,
RowLayout,
RowNormalRowLayout,
} from "@1771technologies/lytenyte-pro/types";
import { Grid } from "@1771technologies/lytenyte-pro";
import { memo, type ReactNode } from "react";
export function LyteNyte<T>({ grid }: { grid: G<T> }) {
const view = grid.view.useValue();
return (
<div className="lng-grid lng1771-shadcn h-full w-full">
<Grid.Root grid={grid}>
<Grid.Viewport>
<Grid.Header>
{view.header.layout.map((headerRow, i) => {
return (
<Grid.HeaderRow headerRowIndex={i} key={i}>
{headerRow.map((headerCell) => {
if (headerCell.kind === "group")
return (
<Grid.HeaderGroupCell cell={headerCell} key={headerCell.idOccurrence} />
);
return (
<Grid.HeaderCell
className="flex items-center px-2"
cell={headerCell}
key={headerCell.id}
/>
);
})}
</Grid.HeaderRow>
);
})}
</Grid.Header>
<Grid.RowsContainer>
<Grid.RowsTop>
<RowHandler rows={view.rows.top} />
</Grid.RowsTop>
<Grid.RowsCenter>
<RowHandler rows={view.rows.center} />
</Grid.RowsCenter>
<Grid.RowsBottom>
<RowHandler rows={view.rows.bottom} />
</Grid.RowsBottom>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
);
}
const RowHandler = <T,>(props: { rows: RowLayout<T>[] }) => {
return props.rows.map((row) => {
if (row.kind === "full-width") return <Grid.RowFullWidth key={row.id} row={row} />;
return <Row key={row.id} row={row} />;
});
};
function RowImpl<T>({ row }: { row: RowNormalRowLayout<T> }) {
return (
<Grid.Row key={row.id} row={row}>
{row.cells.map((cell) => {
return <Grid.Cell className="flex items-center px-2" cell={cell} key={cell.id} />;
})}
</Grid.Row>
);
}
const Row = memo(RowImpl) as <T>(props: { row: RowNormalRowLayout<T> }) => ReactNode;
import "@1771technologies/lytenyte-core/grid.css";
import type {
Grid as G,
RowLayout,
RowNormalRowLayout,
} from "@1771technologies/lytenyte-core/types";
import { Grid } from "@1771technologies/lytenyte-core";
import { memo, type ReactNode } from "react";
export function LyteNyte<T>({ grid }: { grid: G<T> }) {
const view = grid.view.useValue();
return (
<div className="lng-grid lng1771-shadcn h-full w-full">
<Grid.Root grid={grid}>
<Grid.Viewport>
<Grid.Header>
{view.header.layout.map((headerRow, i) => {
return (
<Grid.HeaderRow headerRowIndex={i} key={i}>
{headerRow.map((headerCell) => {
if (headerCell.kind === "group")
return (
<Grid.HeaderGroupCell cell={headerCell} key={headerCell.idOccurrence} />
);
return (
<Grid.HeaderCell
className="flex items-center px-2"
cell={headerCell}
key={headerCell.id}
/>
);
})}
</Grid.HeaderRow>
);
})}
</Grid.Header>
<Grid.RowsContainer>
<Grid.RowsTop>
<RowHandler rows={view.rows.top} />
</Grid.RowsTop>
<Grid.RowsCenter>
<RowHandler rows={view.rows.center} />
</Grid.RowsCenter>
<Grid.RowsBottom>
<RowHandler rows={view.rows.bottom} />
</Grid.RowsBottom>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
);
}
const RowHandler = <T,>(props: { rows: RowLayout<T>[] }) => {
return props.rows.map((row) => {
if (row.kind === "full-width") return <Grid.RowFullWidth key={row.id} row={row} />;
return <Row key={row.id} row={row} />;
});
};
function RowImpl<T>({ row }: { row: RowNormalRowLayout<T> }) {
return (
<Grid.Row key={row.id} row={row}>
{row.cells.map((cell) => {
return <Grid.Cell className="flex items-center px-2" cell={cell} key={cell.id} />;
})}
</Grid.Row>
);
}
const Row = memo(RowImpl) as <T>(props: { row: RowNormalRowLayout<T> }) => ReactNode;
Then copy and paste the following code into your hooks folder:
<Tabs items={['Core', 'PRO' ]} className="bg-fd-card">
<Tab value="PRO" className="p-0 rounded-t-[0px] [&>div]:rounded-t-[0px]">import {
Grid,
useClientRowDataSource,
useClientRowDataSourcePaginated,
useClientTreeDataSource,
useServerDataSource,
} from "@1771technologies/lytenyte-pro";
const useLyteNyte = Grid.useLyteNyte;
export {
useLyteNyte,
useClientRowDataSource,
useClientRowDataSourcePaginated,
useServerDataSource,
useClientTreeDataSource,
};
import {
Grid,
useClientRowDataSource,
useClientRowDataSourcePaginated,
} from "@1771technologies/lytenyte-core";
const useLyteNyte = Grid.useLyteNyte;
export { useLyteNyte, useClientRowDataSource, useClientRowDataSourcePaginated };
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā