### Pinning Columns to Start (TypeScript)

Source: https://www.1771technologies.com/docs/column-pinning

Demonstrates how to pin columns to the start of a data grid viewport using the 'pin' property in column definitions. This ensures columns like 'ID' and 'Product' remain visible.

```typescript
const columns: Column<OrderData>[] = [

  { id: "id", pin: "start" },

  { id: "product", pin: "start" },

  // other definitions

];
```

--------------------------------

### Optimistic Update Handler Example (JavaScript)

Source: https://www.1771technologies.com/docs/server-data-loading-cell-editing

An example of how to implement a cell update handler for LyteNyte Grid, demonstrating the use of optimistic updates for instant client-side feedback. It includes refreshing the grid after an update.

```javascript
cellUpdateHandler: async (updates) => {
  // send update to server
  await handleUpdate(updates);

  // refresh after the update
  ds.refresh();
};
```

--------------------------------

### LyteNyte Grid Cell Inline Styling Example

Source: https://www.1771technologies.com/docs/grid-theming

This example shows how to apply inline styles directly to a `Grid.Cell` component in LyteNyte Grid. It demonstrates setting display, alignment, padding, justification based on column type, font size, background, color, and bottom border.

```jsx
<Grid.Cell

  key={c.id}

  cell={c}

  style={{

    display: "flex",

    alignItems: "center",

    paddingInline: "8px",

    justifyContent: c.column.type === "number" ? "flex-end" : "flex-start",

    fontSize: 14,

    background: cellBg,

    color: cellFg,

    borderBottom: "1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1))",

  }}

/>
```

--------------------------------

### Minimal LyteNyte Grid Setup in React

Source: https://www.1771technologies.com/docs/intro-getting-started

This code snippet demonstrates the minimal setup for LyteNyte Grid within a React application. It includes necessary imports, type definitions, column configurations, and the basic structure for rendering the grid using Grid.Root, Grid.Viewport, Grid.Header, and Grid.RowsContainer components. It utilizes the useLyteNyte hook for grid initialization.

```jsx
"use client";



import { Grid } from "@1771technologies/lytenyte-pro";

import type { Column, RowLayout } from "@1771technologies/lytenyte-pro/types";

import { memo, useId } from "react";



type RequestData = {

  Date: string;

  Status: number;

  Method: string;

  Pathname: string;

  Latency: number;

  "region.shortname": string;

  "region.fullname": string;

  "timing-phase.dns": number;

  "timing-phase.tls": number;

  "timing-phase.ttfb": number;

  "timing-phase.connection": number;

  "timing-phase.transfer": number;

};



const columns: Column<RequestData>[] = [

  { id: "Date", name: "Date", type: "datetime" },

  { id: "Status", name: "Status" },

  { id: "Method", name: "Method" },

  { id: "timing-phase", name: "Timing Phase" },

  { id: "Pathname", name: "Pathname" },

  { id: "Latency", name: "Latency" },

  { id: "region", name: "Region" },

];



export function GettingStartedDemo() {

  const grid = Grid.useLyteNyte({

    gridId: useId(),

    columns,

  });



  const view = grid.view.useValue();



  return (

    <div style={{ width: "100%", height: "400px" }}>

      <Grid.Root grid={grid}>

        <Grid.Viewport>

          <Grid.Header>

            {view.header.layout.map((row, i) => (

              <Grid.HeaderRow headerRowIndex={i} key={i}>

                {row.map((c) => {

                  if (c.kind === "group") {

                    return <Grid.HeaderGroupCell cell={c} key={c.idOccurrence} />;

                  }

                  return <Grid.HeaderCell cell={c} key={c.column.id} />;

                })}

              </Grid.HeaderRow>

            ))}

          </Grid.Header>



          <Grid.RowsContainer>

            <Grid.RowsCenter>

              {view.rows.center.map((row) => {

                if (row.kind === "full-width") {

                  return <Grid.RowFullWidth row={row} key={row.id} />;

                }



                return (

                  <Grid.Row key={row.id} row={row} accepted={["row"]}>

                    {row.cells.map((cell) => (

                      <Grid.Cell cell={cell} key={cell.id} />

                    ))}

                  </Grid.Row>

                );

              })}

            </Grid.RowsCenter>

          </Grid.RowsContainer>

        </Grid.Viewport>

      </Grid.Root>

    </div>

  );

}

```

--------------------------------

### Example of Tree Shaking with LyteNyte Grid (JavaScript)

Source: https://www.1771technologies.com/docs/prodready-bundling

Demonstrates how unused imports like `useServerDataSource` are automatically excluded from the bundle by modern bundlers when using LyteNyte Grid. This example highlights the benefits of static analysis for code optimization.

```javascript
import {
  useServerDataSource, // Not used
  useClientRowDataSource,
  Grid
} from "@1771technologies/lytenyte-pro"

export function TreeShakingExample() {
  const ds = useClientRowDataSource({ ... });
  const grid = Grid.useLyteNyte({ ... })

  return <Grid.Root>{...}</Grid.Root>
}
```

--------------------------------

### Basic Sort Manager Setup in React

Source: https://www.1771technologies.com/docs/component-sort-manager

Demonstrates the basic setup for the Sort Manager component using the `useSortManager` hook within a React function component. It shows how to render sort rows, column selection, value selection, direction selection, and add/remove buttons. Requires the `grid` instance to be provided.

```javascript
import { SortManager as SM } from "@1771technologies/lytenyte-pro";



// Inside a function component-call the hook and provide a grid instance

function Sort() {

  const { rootProps, rows } = SM.useSortManager({ grid });



  return (

    <SM.Root {...rootProps}>

      <SM.Rows>

        {rows.map((c) => {

          if (c.isCustom)

            return (

              <SM.Row>

                <div>Custom Sort</div>

                <SM.Add />

                <SM.Remove />

              </SM.Row>

            );



          return (

            <SM.Row row={c} key={c.index}>

              <SM.ColumnSelect />

              <SM.ValueSelect />

              <SM.DirectionSelect />

              <SM.Add />

              <SM.Remove />

            </SM.Row>

          );

        })}

      </SM.Rows>



      <SM.Clear>Clear</SM.Clear>

      <SM.Cancel>Cancel</SM.Cancel>

      <SM.Apply>Apply</SM.Apply>

    </SM.Root>

  );

}
```

--------------------------------

### GridButton JSX Example

Source: https://www.1771technologies.com/docs/grid-reactivity

A basic example of the GridButton component in JSX, showing how an onClick event handler is defined to trigger a state update.

```jsx
<GridButton
  onClick={() => {
    grid.state.rowHeight.set(20);
  }}
>
  SM
</GridButton>
```

--------------------------------

### Optimistic Update Example

Source: https://www.1771technologies.com/docs/server-data-loading-cell-editing

Demonstrates how to implement optimistic updates in a client-side handler. It shows sending an update to the server and setting a flag to enable optimistic updates, allowing the UI to reflect changes immediately.

```typescript
cellUpdateHandler: async (updates) => {
  // send update to server
  await handleUpdate(updates);
},
cellUpdateOptimistically: true,
```

--------------------------------

### Basic Column Manager Setup with LyteNyte Grid PRO

Source: https://www.1771technologies.com/docs/component-column-manager

This JavaScript (TypeScript) code demonstrates the basic setup for the Column Manager component. It utilizes the `useColumnManager` hook to manage column items and their lookup, rendering them in a virtualized tree structure. Users can reorder columns via drag handles and toggle visibility using checkboxes.

```typescript
import { ColumnManager as CM } from "@1771technologies/lytenyte-pro";


type TreeItem = ReturnType<typeof CM.useColumnManager<BankData>>["items"][number];

export default function ColumnManager() {
  const { items, lookup } = CM.useColumnManager({ grid });

  return (
    <CM.Root items={items} lookup={lookup}>
      <CM.Panel className="h-full w-full" style={{ position: "relative", overflow: "auto" }}>
        {items.map((c) => {
          return <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />;
        })}
        {spacer}
      </CM.Panel>
    </CM.Root>
  );
}

function RenderNode({ item, grid }: { item: TreeItem; grid: Grid<BankData> }) {
  if (item.kind === "leaf") {
    return (
      <CM.Leaf item={item}>
        <CM.MoveHandle>
          <DragDotsSmallIcon />
        </CM.MoveHandle>
        <CM.VisibilityCheckbox />
        <CM.Label />
      </CM.Leaf>
    );
  }

  const values = [...item.children.values()];

  return (
    <CM.Branch
      item={item}
      label={
        <div style={{ display: "flex", gap: "2px" }}>
          <CM.VisibilityCheckbox />
          <CM.Label />
        </div>
      }
    >
      {values.map((c) => {
        return <RenderNode item={c} grid={grid} key={c.kind === "branch" ? c.id : c.data.id} />;
      })}
    </CM.Branch>
  );
}
```

--------------------------------

### Server-Side Data Filtering Example (JavaScript)

Source: https://www.1771technologies.com/docs/server-data-loading-row-filtering

Illustrates server-side data filtering logic using a JavaScript object. This example demonstrates how to exclude specific genres from a dataset using an 'in' operator with 'not_in' logic.

```javascript
filterInModel: {

  genre: {

    kind: "in",

    operator: "not_in",

    value: new Set(["Drama", "Animation", "Anime"]),

  },

}
```

--------------------------------

### React ContextMenu Item Example

Source: https://www.1771technologies.com/docs/component-context-menu

Demonstrates the usage of `ContextMenu.Item` component from Radix UI within a React application. These items are typically used to render options in a context menu.

```jsx
<ContextMenu.Item className="py-1 text-sm">Item 1</ContextMenu.Item>

        <ContextMenu.Item className="py-1 text-sm">Item 2</ContextMenu.Item>

        <ContextMenu.Item className="py-1 text-sm">Item 3</ContextMenu.Item>
```

--------------------------------

### Install LyteNyte Core Edition with npm

Source: https://www.1771technologies.com/docs/intro-installation

Installs the free, open-source LyteNyte Grid Core Edition using npm. This edition includes essential grid features.

```bash
npm install @1771technologies/lytenyte-core
```

--------------------------------

### Install LyteNyte PRO Edition with npm

Source: https://www.1771technologies.com/docs/intro-installation

Installs the paid LyteNyte Grid PRO Edition using npm. This edition includes all Core features plus advanced capabilities.

```bash
npm install @1771technologies/lytenyte-pro
```

--------------------------------

### LyteNyte Grid Column Pinning Configuration

Source: https://www.1771technologies.com/docs/column-pinning

Configures column pinning in LyteNyte Grid, specifying which columns to pin and their position (start or end). This example shows pinning the 'id' column to the end and the 'product' column to the start.

```typescript
const columns: Column<OrderData>[] = [
  { id: "id", pin: "end" },
  { id: "product", pin: "start" },
  // other definitions
];
```

--------------------------------

### LyteNyte Grid Setup and Rendering in React (TypeScript)

Source: https://www.1771technologies.com/docs/grid-container

This snippet demonstrates how to set up and render the LyteNyte Grid component in a React application using TypeScript. It includes defining columns, using a client-side data source, and rendering the grid header and rows. Dependencies include '@1771technologies/lytenyte-pro' and '@1771technologies/grid-sample-data'.

```typescript
"use client";



import "@1771technologies/lytenyte-pro/grid.css";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";

import type { Column } from "@1771technologies/lytenyte-pro/types";

import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

import { useId } from "react";

import { BalanceCell, DurationCell, NumberCell } from "./components";

import type { ClassValue } from "clsx";

import clsx from "clsx";

import { twMerge } from "tailwind-merge";




type BankData = (typeof bankDataSmall)[number];



const columns: Column<BankData>[] = [

  { id: "job", width: 120 },

  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },

  { id: "balance", type: "number", cellRenderer: BalanceCell },

  { id: "education" },

  { id: "marital" },

  { id: "default" },

  { id: "housing" },

  { id: "loan" },

  { id: "contact" },

  { id: "day", type: "number", cellRenderer: NumberCell },

  { id: "month" },

  { id: "duration", type: "number", cellRenderer: DurationCell },

  { id: "poutcome", name: "P Outcome" },

  { id: "y" },

];



export default function PixelHeightContainer() {

  const ds = useClientRowDataSource({ data: bankDataSmall });



  const grid = Grid.useLyteNyte({

    gridId: useId(),

    rowDataSource: ds,

    columns,

    columnBase: { width: 100 },

  });



  const view = grid.view.useValue();



  return (

    <div className="lng-grid" style={{ height: 500 }}>

      <Grid.Root grid={grid}>

        <Grid.Viewport>

          <Grid.Header>

            {view.header.layout.map((row, i) => {

              return (

                <Grid.HeaderRow key={i} headerRowIndex={i}>

                  {row.map((c) => {

                    if (c.kind === "group") return null;



                    return (

                      <Grid.HeaderCell

                        key={c.id}

                        cell={c}

                        className={tw(

                          "flex h-full w-full items-center px-2 text-sm capitalize",

                          c.column.type === "number" && "justify-end",

                        )}

                      />

                    );

                  })}

                </Grid.HeaderRow>

              );

            })}

          </Grid.Header>

          <Grid.RowsContainer>

            <Grid.RowsCenter>

              {view.rows.center.map((row) => {

                if (row.kind === "full-width") return null;



                return (

                  <Grid.Row row={row} key={row.id}>

                    {row.cells.map((c) => {

                      return (

                        <Grid.Cell

                          key={c.id}

                          cell={c}

                          className={tw(

                            "flex h-full w-full items-center px-2 text-sm",

                            c.column.type === "number" && "justify-end",

                          )}

                        />

                      );

                    })}

                  </Grid.Row>

                );

              })}

            </Grid.RowsCenter>

          </Grid.RowsContainer>

        </Grid.Viewport>

      </Grid.Root>

    </div>

  );

}



function tw(...c: ClassValue[]) {

  return twMerge(clsx(...c));

}

```

--------------------------------

### Example Data Response for Scrollable Rows (JSON)

Source: https://www.1771technologies.com/docs/server-data-loading-interface

An example JSON object conforming to the DataResponse interface. It illustrates the expected format for scrollable row data, including 'kind', 'data', 'size', 'asOfTime', 'path', 'start', and 'end' properties.

```json
{
  kind: "center",
  data: [
    { kind: "leaf", id: "1", data: [1,2,3] },
    // More rows as
  ],
  size: 230000,
  asOfTime: 1759391811069, // Some Unix Timestamp
  path: [],
  start: 0,
  end: 100
}
```

--------------------------------

### Upgrade LyteNyte Grid from Core to PRO

Source: https://www.1771technologies.com/docs/intro-installation

Demonstrates how to upgrade from LyteNyte Grid Core to PRO by changing the import statement in your React components. This is a simple package name swap.

```javascript
import { Grid } from "@1771technologies/lytenyte-core";
```

```javascript
import { Grid } from "@1771technologies/lytenyte-pro";
```

--------------------------------

### Configure Column Group Expansions (JavaScript)

Source: https://www.1771technologies.com/docs/column-groups

Demonstrates how to set initial expansion states for column groups in LyteNyte Grid. Group IDs are formed by joining the 'groupPath' array with a delimiter (default is '-->'). This example shows how to explicitly set the expansion state for the 'Market Info' group to false.

```javascript
const grid = Grid.useLyteNyte({
  // Other grid props
  columnGroupExpansions: { "Market Info": false },
});
```

--------------------------------

### Enable and Configure LyteNyte Grid Column Marker

Source: https://www.1771technologies.com/docs/marker-column

Demonstrates how to enable the marker column in LyteNyte Grid and define a custom cell renderer for it. The marker column is pinned to the start and affects column display order.

```typescript
const grid = Grid.useLyteNyte({
  // Other grid properties...
  columnMarkerEnabled: true,
  columnMarker: {
    cellRenderer: (p) => {
      return <div>{p.rowIndex + 1}</div>;
    },
  },
});
```

--------------------------------

### Grid Rendering with LyteNyte Grid Component

Source: https://www.1771technologies.com/docs/export-clipboard

This code illustrates the structure for rendering a grid using the LyteNyte Grid component. It includes setting up the grid's root, viewport, header rows, and individual cells. This example focuses on the component structure rather than specific data manipulation.

```jsx
<div className="lng-grid" style={{ height: 500 }}>
  <Grid.Root grid={grid}>
    <Grid.Viewport>
      <Grid.Header>
        {view.header.layout.map((row, i) => {
          return (
            <Grid.HeaderRow key={i} headerRowIndex={i}>
              {row.map((c) => {
                if (c.kind === "group") return null;

                return (
                  <Grid.HeaderCell
                    key={c.id}
                    cell={c}
                    className="flex h-full w-full items-center px-2 capitalize"
                  />
                );
              })}
            </Grid.HeaderRow>
          );
        })}
      </Grid.Header>
      <Grid.RowsContainer>
        <Grid.RowsCenter>
          {view.rows.center.map((row) => {
            if (row.kind === "full-width") return null;

            return (
              <Grid.Row row={row} key={row.id}>
                {row.cells.map((c) => {
                  return (
                    <Grid.Cell
                      key={c.id}
                      cell={c}
                      className="flex h-full w-full items-center px-2 text-sm"
                    />
                  );
                })}
              </Grid.Row>
            );
          })}
        </Grid.RowsCenter>
      </Grid.RowsContainer>
    </Grid.Viewport>
  </Grid.Root>
</div>
```

--------------------------------

### LyteNyte Grid: CSS Styling with Data Attributes

Source: https://www.1771technologies.com/docs/grid-theming

Applies styles to LyteNyte Grid components using CSS attribute selectors. This example demonstrates styling for data cells, alternate rows, and header cells, with variations for dark/light themes.

```css
.data-styles {

  [data-ln-cell="true"] {

    display: flex;

    align-items: center;

    padding-inline: 8px;

    background-color: light-dark(white, hsla(190, 32%, 6%, 1));

    color: light-dark(hsla(175, 6%, 38%, 1), hsla(175, 10%, 86%, 1));

    font-size: 14px;

    border-bottom: 1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1));

  }



  [data-ln-alternate="true"] [data-ln-cell="true"] {

    background-color: light-dark(hsl(0, 27%, 98%), hsl(184, 33%, 8%));

  }



  [data-ln-header-cell="true"] {

    display: flex;

    align-items: center;

    padding-inline: 8px;

    background-color: light-dark(hsla(175, 12%, 92%, 1), hsla(177, 19%, 17%, 1));

    color: light-dark(hsla(177, 19%, 17%, 1), hsla(175, 12%, 92%, 1));

    text-transform: capitalize;

    font-size: 14px;

  }

}
```

--------------------------------

### Implement Quick Filter in React with LyteNyte Grid

Source: https://www.1771technologies.com/docs/filter-quick-filter

This snippet demonstrates how to set up a LyteNyte Grid in a React application with a quick search input. It utilizes the `useClientRowDataSource` and `Grid.useLyteNyte` hooks to manage data and grid state. The `quickSearchIgnore` property on columns controls which fields are searchable. The input's value is bound to `grid.state.quickSearch` for real-time filtering.

```tsx
"use client";



import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";

import "@1771technologies/lytenyte-pro/grid.css";

import type { Column } from "@1771technologies/lytenyte-pro/types";

import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

import { useId } from "react";



type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { id: "age", type: "number" },
  { id: "job", quickSearchIgnore: false },
  { id: "balance", type: "number" },
  { id: "education", quickSearchIgnore: false },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];



export default function FilterQuick() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });



  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      quickSearchIgnore: true,

    },
  });



  const view = grid.view.useValue();



  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div className="flex gap-2 py-2">
        <label className="flex gap-2 px-2">
          Quick Search
          <input
            className="rounded border border-gray-500/20 px-2"
            placeholder="search..."
            value={grid.state.quickSearch.useValue() ?? ""}
            onChange={(e) => grid.state.quickSearch.set(e.target.value)}
          />
        </label>
      </div>
      <div className="lng-grid" style={{ height: 500 }}>
        <Grid.Root grid={grid}>
          <Grid.Viewport>
            <Grid.Header>
              {view.header.layout.map((row, i) => {
                return (
                  <Grid.HeaderRow key={i} headerRowIndex={i}>
                    {row.map((c) => {
                      if (c.kind === "group") return null;


                      return (
                        <Grid.HeaderCell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 capitalize"
                        />
                      );

                    })}
                  </Grid.HeaderRow>
                );

              })}
            </Grid.Header>
            <Grid.RowsContainer>
              <Grid.RowsCenter>
                {view.rows.center.map((row) => {
                  if (row.kind === "full-width") return null;


                  return (
                    <Grid.Row row={row} key={row.id}>
                      {row.cells.map((c) => {
                        return (
                          <Grid.Cell
                            key={c.id}
                            cell={c}
                            className="flex h-full w-full items-center px-2 text-sm"
                          />
                        );

                      })}
                    </Grid.Row>
                  );

                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );

}
```

--------------------------------

### Install LyteNyte Grid PRO with shadcn CLI

Source: https://www.1771technologies.com/docs/intro-installation-shadcn

Installs the PRO edition of LyteNyte Grid components using the shadcn CLI. This command is compatible with pnpm, npx, yarn, and bun. It's recommended to have shadcn/ui already configured in your project.

```pnpm
pnpm dlx shadcn@latest add @lytenyte/lytenyte-pro
```

```npx
npx shadcn@latest add @lytenyte/lytenyte-pro
```

```yarn
yarn shadcn@latest add @lytenyte/lytenyte-pro
```

```bun
bunx --bun shadcn@latest add @lytenyte/lytenyte-pro
```

--------------------------------

### LyteNyte Grid with Context Menu (React)

Source: https://www.1771technologies.com/docs/component-context-menu

This React component demonstrates the integration of a LyteNyte Grid with a Radix UI Context Menu. It sets up a grid with sample bank data and configures the context menu to appear on right-click, displaying the position of the clicked element. Dependencies include '@1771technologies/lytenyte-pro', '@1771technologies/grid-sample-data', and 'radix-ui'.

```tsx
"use client";



import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";

import "@1771technologies/lytenyte-pro/grid.css";

import type { Column, PositionUnion } from "@1771technologies/lytenyte-pro/types";

import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

import { ContextMenu } from "radix-ui";

import { useId, useState } from "react";



type BankData = (typeof bankDataSmall)[number];



const columns: Column<BankData>[] = [

  { id: "age", type: "number" },

  { id: "job" },

  { id: "balance", type: "number" },

  { id: "education" },

  { id: "marital" },

  { id: "default" },

  { id: "housing" },

  { id: "loan" },

  { id: "contact" },

  { id: "day", type: "number" },

  { id: "month" },

  { id: "duration" },

  { id: "campaign" },

  { id: "pdays" },

  { id: "previous" },

  { id: "poutcome", name: "P Outcome" },

  { id: "y" },

];



export default function ContextMenuDemo() {

  const ds = useClientRowDataSource({ data: bankDataSmall });



  const grid = Grid.useLyteNyte({

    gridId: useId(),

    rowDataSource: ds,

    columns,

  });



  const view = grid.view.useValue();

  const [position, setPosition] = useState<PositionUnion | null>(null);



  return (

    <div>

      <div className="lng-grid" style={{ height: 500 }}>

        <Grid.Root grid={grid}>

          <Grid.Viewport>

            <Grid.Header>

              {view.header.layout.map((row, i) => {

                return (

                  <Grid.HeaderRow key={i} headerRowIndex={i}>

                    {row.map((c) => {

                      if (c.kind === "group") return null;



                      return (

                        <Grid.HeaderCell

                          key={c.id}

                          cell={c}

                          className="flex h-full w-full items-center px-2 capitalize"

                        />

                      );

                    })}

                  </Grid.HeaderRow>

                );

              })}

            </Grid.Header>



            <ContextMenu.Root

              modal

              onOpenChange={(b) => {

                if (!b) setPosition(null);

              }}

            >

              <ContextMenu.Trigger

                asChild

                onContextMenu={(c) => {

                  const element = c.target as HTMLElement;

                  setPosition(grid.api.positionFromElement(element));

                }}

              >

                <Grid.RowsContainer>

                  <Grid.RowsCenter>

                    {view.rows.center.map((row) => {

                      if (row.kind === "full-width") return null;



                      return (

                        <Grid.Row row={row} key={row.id}>

                          {row.cells.map((c) => {

                            return (

                              <Grid.Cell

                                key={c.id}

                                cell={c}

                                className="flex h-full w-full items-center px-2 text-sm"

                              />

                            );

                          })}

                        </Grid.Row>

                      );

                    })}

                  </Grid.RowsCenter>

                </Grid.RowsContainer>

              </ContextMenu.Trigger>

              <GridContextMenu position={position} />

            </ContextMenu.Root>

          </Grid.Viewport>

        </Grid.Root>

      </div>

    </div>

  );

}



export function GridContextMenu({ position }: { position: PositionUnion | null }) {

  return (

    <ContextMenu.Portal>

      <ContextMenu.Content

        className="bg-ln-gray-05 border-ln-gray-30 relative z-50 rounded border p-2"

        onCloseAutoFocus={(e) => e.preventDefault()}

      >

        <div className="text-ln-gray-70 pb-1 text-sm">

          Context Menu For Position: {position?.kind}

        </div>


```

--------------------------------

### Install LyteNyte Grid Core with shadcn CLI

Source: https://www.1771technologies.com/docs/intro-installation-shadcn

Installs the core LyteNyte Grid components using the shadcn CLI. This command works across multiple package managers like pnpm, npx, yarn, and bun. Ensure your project is set up with shadcn/ui before running this command.

```pnpm
pnpm dlx shadcn@latest add @lytenyte/lytenyte-core
```

```npx
npx shadcn@latest add @lytenyte/lytenyte-core
```

```yarn
yarn shadcn@latest add @lytenyte/lytenyte-core
```

```bun
bunx --bun shadcn@latest add @lytenyte/lytenyte-core
```

--------------------------------

### Install Emotion CSS

Source: https://www.1771technologies.com/docs/grid-theming-emotion

Installs the necessary `@emotion/styled` package for using Emotion's styled-component API. This is the first step to enable CSS-in-JS styling for your components.

```bash
npm install @emotion/styled
```

--------------------------------

### Grid Component Setup with LyteNyte

Source: https://www.1771technologies.com/docs/column-autosizing

Sets up and renders a grid component using LyteNyte, a React grid library. It defines columns, data sources, and event handlers for grid interactions like double-clicking to autosize columns. The component renders a grid with headers and rows, applying specific styling and cell renderers.

```javascript
export default function ColumnBase() {

  const ds = useClientRowDataSource({ data: data });



  const grid = Grid.useLyteNyte({

    gridId: useId(),

    rowDataSource: ds,

    columns,

    columnDoubleClickToAutosize: true,



    columnBase: {

      uiHints: {

        resizable: true,

      },

    },

  });



  const view = grid.view.useValue();



  return (

    <div className="lng-grid" style={{ height: 500 }}>

      <Grid.Root grid={grid}>

        <Grid.Viewport className="text-xs">

          <Grid.Header>

            {view.header.layout.map((row, i) => {

              return (

                <Grid.HeaderRow key={i} headerRowIndex={i}>

                  {row.map((c) => {

                    if (c.kind === "group") return null;



                    return (

                      <Grid.HeaderCell

                        key={c.id}

                        cell={c}

                        className={tw(

                          "text-ln-gray-60! dark:text-ln-gray-70! flex h-full w-full items-center text-nowrap px-2 text-xs capitalize",

                          c.column.type === "number" && "justify-end",

                        )}

                      />

                    );

                  })}

                </Grid.HeaderRow>

              );

            })}

          </Grid.Header>

          <Grid.RowsContainer>

            <Grid.RowsCenter>

              {view.rows.center.map((row) => {

                if (row.kind === "full-width") return null;



                return (

                  <Grid.Row row={row} key={row.id}>

                    {row.cells.map((c) => {

                      return (

                        <Grid.Cell

                          key={c.id}

                          cell={c}

                          className="text-xs! flex h-full w-full items-center px-2"

                        />

                      );

                    })}

                  </Grid.Row>

                );

              })}

            </Grid.RowsCenter>

          </Grid.RowsContainer>

        </Grid.Viewport>

      </Grid.Root>

    </div>

  );

}
```

--------------------------------

### Lytenyte Pro Grid with Theming and CSS Modules (React)

Source: https://www.1771technologies.com/docs/grid-theming-css-modules

This React component demonstrates how to integrate and theme the Lytenyte Pro Grid. It uses CSS Modules for custom cell styling and applies a theme class to the main grid container. Dependencies include `@1771technologies/lytenyte-pro` and `@1771technologies/grid-sample-data`.

```tsx
"use client";

import "./main.css";

import styles from "./style.module.css";

import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";

import "@1771technologies/lytenyte-pro/grid.css";

import type { Column } from "@1771technologies/lytenyte-pro/types";

import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

import { useId, useState } from "react";

import { ThemePicker } from "./ui";

import { BalanceCell, DurationCell, NumberCell } from "./components";



type BankData = (typeof bankDataSmall)[number];



const columns: Column<BankData>[] = [

  { id: "job", width: 120 },

  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },

  { id: "balance", type: "number", cellRenderer: BalanceCell },

  { id: "education" },

  { id: "marital" },

  { id: "default" },

  { id: "housing" },

  { id: "loan" },

  { id: "contact" },

  { id: "day", type: "number", cellRenderer: NumberCell },

  { id: "month" },

  { id: "duration", type: "number", cellRenderer: DurationCell },

  { id: "poutcome", name: "P Outcome" },

  { id: "y" },

];



export default function GridTheming() {

  const ds = useClientRowDataSource({ data: bankDataSmall });



  const grid = Grid.useLyteNyte({

    gridId: useId(),

    rowDataSource: ds,

    columns,

    columnBase: { width: 100 },



    cellSelectionMode: "range",

    cellSelections: [{ rowStart: 4, rowEnd: 7, columnStart: 2, columnEnd: 4 }],

  });

  const [theme, setTheme] = useState("lng1771-teal");



  const view = grid.view.useValue();



  return (

    <div className={"lng-grid" + " " + theme} style={{ display: "flex", flexDirection: "column" }}>

      <div style={{ padding: 8, display: "flex", gap: 8 }}>

        <ThemePicker theme={theme} setTheme={setTheme} />

      </div>

      <div style={{ height: 500 }}>

        <Grid.Root grid={grid}>

          <Grid.Viewport>

            <Grid.Header>

              {view.header.layout.map((row, i) => {

                return (

                  <Grid.HeaderRow key={i} headerRowIndex={i}>

                    {row.map((c) => {

                      if (c.kind === "group") return null;



                      return <Grid.HeaderCell key={c.id} cell={c} className={styles.headerCell} />;

                    })}

                  </Grid.HeaderRow>

                );

              })}

            </Grid.Header>

            <Grid.RowsContainer>

              <Grid.RowsCenter>

                {view.rows.center.map((row) => {

                  if (row.kind === "full-width") return null;



                  return (

                    <Grid.Row row={row} key={row.id}>

                      {row.cells.map((c) => {

                        return <Grid.Cell key={c.id} cell={c} className={styles.cell} />;

                      })}

                    </Grid.Row>

                  );

                })}

              </Grid.RowsCenter>

            </Grid.RowsContainer>

          </Grid.Viewport>

        </Grid.Root>

      </div>

    </div>

  );

}

```

--------------------------------

### Implement Grid Component with DEX Performance Data (TypeScript)

Source: https://www.1771technologies.com/docs/column-groups

This code snippet demonstrates how to set up and configure a Grid component using the @1771technologies/lytenyte-pro library to display Decentralized Exchange (DEX) performance data. It defines columns with custom cell renderers for various market and performance metrics, including percentages and network information. The component is designed for client-side rendering.

```typescript
"use client";



import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";

import "@1771technologies/lytenyte-pro/grid.css";

import type { Column } from "@1771technologies/lytenyte-pro/types";

import { useId } from "react";

import {

  ExchangeCell,

  makePerfHeaderCell,

  NetworkCell,

  PercentCell,

  PercentCellPositiveNegative,

  SymbolCell,

  tw,

} from "./components";

import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";

import { data } from "@1771technologies/grid-sample-data/dex-pairs-performance";



const columns: Column<DEXPerformanceData>[] = [

  {

    id: "symbol",

    cellRenderer: SymbolCell,

    width: 220,

    name: "Symbol",

    groupPath: ["Market Info"],

  },

  {

    id: "exchange",

    cellRenderer: ExchangeCell,

    width: 220,

    name: "Exchange",

    groupPath: ["Market Info"],

  },



  {

    id: "change24h",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Change", "24h"),

    name: "Change % 24h",

    type: "number,",

    groupPath: ["Performance"],

  },



  {

    id: "perf1w",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Perf %", "1w"),

    name: "Perf % 1W",

    type: "number,",

    groupPath: ["Performance"],

  },

  {

    id: "network",

    cellRenderer: NetworkCell,

    width: 220,

    name: "Network",

    groupPath: ["Market Info"],

  },

  {

    id: "perf1m",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Perf %", "1m"),

    name: "Perf % 1M",

    type: "number,",

    groupPath: ["Performance"],

  },

  {

    id: "perf3m",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Perf %", "3m"),

    name: "Perf % 3M",

    type: "number,",

    groupPath: ["Performance"],

  },

  {

    id: "perf6m",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Perf %", "6m"),

    name: "Perf % 6M",

    type: "number,",

    groupPath: ["Performance"],

  },

  {

    id: "perfYtd",

    cellRenderer: PercentCellPositiveNegative,

    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),

    name: "Perf % YTD",

    type: "number",

    groupPath: ["Performance"],

  },

  {
    id: "volatility",
    cellRenderer: PercentCell,
    name: "Volatility",
    type: "number"
  },

  {

    id: "volatility1m",

    cellRenderer: PercentCell,

    headerRenderer: makePerfHeaderCell("Volatility", "1m"),

    name: "Volatility 1M",

    type: "number",

  },

];


```

--------------------------------

### Import LyteNyte Core Components and Hooks

Source: https://www.1771technologies.com/docs/intro-installation-shadcn

Demonstrates how to import the LyteNyte core component and its associated hook after installation. These imports assume a specific import path configuration within your project.

```javascript
import { LyteNyte } from "@/components/lytenyte-core";
import { useLyteNyte } from "@/hooks/use-lytenyte-core";
```

--------------------------------

### Import LyteNyte PRO Components and Hooks

Source: https://www.1771technologies.com/docs/intro-installation-shadcn

Shows the import statements for the LyteNyte PRO component and its corresponding hook. These imports are based on the default paths generated by the shadcn CLI after installing the PRO edition.

```javascript
import { LyteNyte } from "@/components/lytenyte-pro";
import { useLyteNyte } from "@/hooks/use-lytenyte-pro";
```

--------------------------------

### LyteNyte-Pro Grid Configuration and Usage

Source: https://www.1771technologies.com/docs/column-autosizing

Defines the columns for a LyteNyte-Pro grid, including performance metrics and volatility. It also demonstrates the usage of the Grid component with row data source and provides buttons for column autosizing and resetting.

```javascript
const columns = [
  {
    id: "perf6m",
    cellRenderer: PercentCellPositiveNegative,
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
    name: "Perf % 6M",
    type: "number,",
  },
  {
    id: "perfYtd",
    cellRenderer: PercentCellPositiveNegative,
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
    name: "Perf % YTD",
    type: "number",
  },
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
  {
    id: "volatility1m",
    cellRenderer: PercentCell,
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
    name: "Volatility 1M",
    type: "number",
  },
];

export default function ColumnBase() {
  const ds = useClientRowDataSource({ data: data });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });

  const view = grid.view.useValue();

  return (
    <div>
      <div className="flex gap-2 border-b px-2 py-2">
        <GridButton
          onClick={() => {
            grid.api.columnAutosize({});
          }}
        >
          Autosize Cells
        </GridButton>

        <GridButton
          onClick={() => {
            grid.state.columns.set(columns);
          }}
        >
          Reset Columns
        </GridButton>
      </div>
      <div className="lng-grid" style={{ height: 500 }}>
        <Grid.Root grid={grid}>
          <Grid.Viewport className="text-xs">
            <Grid.Header>
              {view.header.layout.map((row, i) => {
                return (
                  <Grid.HeaderRow key={i} headerRowIndex={i}>
                    {row.map((c) => {
                      if (c.kind === "group") return null;

                      return (
                        <Grid.HeaderCell
                          key={c.id}
                          cell={c}
                          className={tw(
                            "text-ln-gray-60! dark:text-ln-gray-70! flex h-full w-full items-center text-nowrap px-2 text-xs capitalize",
                            c.column.type === "number" && "justify-end",
                          )}
                        />
                      );
                    })}
                  </Grid.HeaderRow>
                );
              })}
            </Grid.Header>
            <Grid.RowsContainer>
              <Grid.RowsCenter>
                {view.rows.center.map((row) => {
                  if (row.kind === "full-width") return null;

                  return (
                    <Grid.Row row={row} key={row.id}>
                      {row.cells.map((c) => {
                        return (
                          <Grid.Cell
                            key={c.id}
                            cell={c}
                            className="text-xs! flex h-full w-full items-center px-2"
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </div>
    </div>
  );
}
```