Grid Events

LyteNyte Grid fires events in response to specific user interactions or when imperative API methods run. For example, when a cell enters edit mode, the grid fires the editBegin event.

This guide explains how to respond to events from LyteNyte Grid and shows methods to trigger events imperatively when needed.

For a complete list of available events and their triggers, see the Events API Reference Page.

Listening to Events

The Grid.Root component accepts event listeners for all events LyteNyte Grid may fire. Add listeners as you would any other props in React. This familiar approach is the recommended way to add event listeners.

Furthermore, like native events, some events have a preventDefault property that will stop the default action of that event from happening. For example, we can prevent odd rows from being selected by listening to the rowSelectBegin event and calling preventDefault when it fires.

Event Listener

Row selection events recorded: 0

"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/sample-data/bank-data-smaller";
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" },
  { id: "y" },
];

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

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

    rowSelectionMode: "multiple",
    rowSelectionActivator: "single-click",
  });

  const [events, setEvents] = useState(0);

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ display: "flex", flexDirection: "column" }}>
      <div>Row selection events recorded: {events}</div>
      <div style={{ height: 500 }}>
        <Grid.Root
          grid={grid}
          onRowSelectBegin={({ preventDefault, selected }) => {
            if (Number.parseInt(selected) % 2) preventDefault();
          }}
          onRowSelectEnd={() => setEvents((prev) => prev + 1)}
        >
          <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>
  );
}

The `api.eventAddListener` Method

Sometimes you may need to add an event listener to LyteNyte Grid outside a render function. Use the api.eventAddListener method in such cases. This method adds a listener for the specified event and returns a function to remove it. You can also call api.eventRemoveListener to remove a listener explicitly.

When using api.eventAddListener, you must handle cleanup yourself. The example below demonstrates correct usage with proper cleanup.

Imperative Event Listeners

Row selection events recorded: 0

"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/sample-data/bank-data-smaller";
import { useEffect, 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" },
  { id: "y" },
];

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

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

    rowSelectionMode: "multiple",
    rowSelectionActivator: "single-click",
  });

  const [events, setEvents] = useState(0);

  const view = grid.view.useValue();

  useEffect(() => {
    return grid.api.eventAddListener("rowSelectBegin", ({ selected, preventDefault }) => {
      if (Number.parseInt(selected) % 2) preventDefault();
    });
  }, [grid.api]);

  useEffect(() => {
    return grid.api.eventAddListener("rowSelectEnd", () => {
      setEvents((prev) => prev + 1);
    });
  });

  return (
    <div className="lng-grid" style={{ display: "flex", flexDirection: "column" }}>
      <div>Row selection events recorded: {events}</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="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>
  );
}

Triggering Events

The LyteNyte Grid API provides the eventFire method, which lets you manually trigger an event as if it originated from the grid. This is useful when building custom functionality that mimics grid event behavior, but you should avoid it unless necessary.

Grid EventsCopy Page

Listening to Events

Event Listener

The api.eventAddListener Method

Imperative Event Listeners

Triggering Events

On this page

The `api.eventAddListener` Method