Column Pinning

LyteNyte Grid supports pinning columns to the start or end of the viewport. Pinned columns stay visible as the user scrolls horizontally.

LyteNyte Grid uses the start and end terminology for column position instead of left or right. This matches logical CSS properties like paddingInlineStart, ensuring pinned column behavior works consistently in both LTR and RTL modes.

Pinning Columns to Start

Set a column's pin property to "start" to pin it to the beginning of the grid's viewport. In LTR mode, start-pinned columns appear on the left; in RTL mode, they appear on the right.

Column Pinning Start

"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 type { OrderData } from "@1771technologies/grid-sample-data/orders";
import { data } from "@1771technologies/grid-sample-data/orders";
import {
  AvatarCell,
  EmailCell,
  IdCell,
  PaymentMethodCell,
  PriceCell,
  ProductCell,
  PurchaseDateCell,
  tw,
} from "./components";

const columns: Column<OrderData>[] = [
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID", pin: "start" },
  { id: "product", cellRenderer: ProductCell, width: 200, pin: "start" },
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100 },
  { id: "customer", cellRenderer: AvatarCell, width: 180 },
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 120 },
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
  { id: "email", cellRenderer: EmailCell, width: 220 },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 50,
    columnBase: {
      uiHints: {
        movable: true,
      },
    },
  });

  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 text-nowrap px-3 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="flex h-full w-full items-center px-3 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { format } from "date-fns";
import type { JSX, ReactNode } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

export function ProductCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.productThumbnail;
  const title = row.data.product;
  const desc = row.data.productDescription;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div className="font-semibold">{title}</div>
        <div className="text-ln-gray-70 text-xs">{desc}</div>
      </div>
    </div>
  );
}

export function AvatarCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.customerAvatar;

  const name = row.data.customer;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-full border" src={url} alt={name} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div>{name}</div>
      </div>
    </div>
  );
}

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
export function PriceCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const price = formatter.format(row.data.price);
  const [dollars, cents] = price.split(".");

  return (
    <div className="flex h-full w-full items-center justify-end">
      <div className="flex items-baseline tabular-nums">
        <span className="text-ln-gray-80 font-semibold">${dollars}</span>.
        <span className="relative text-xs">{cents}</span>
      </div>
    </div>
  );
}

export function PurchaseDateCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");

  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
}
export function IdCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-xs tabular-nums">{row.data.id}</div>;
}

export function PaymentMethodCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const cardNumber = row.data.cardNumber;
  const provider = row.data.paymentMethod;

  let Logo: ReactNode = null;
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <div className="flex w-7 items-center justify-center">{Logo}</div>
      <div className="flex items-center">
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
      </div>
      <div className="tabular-nums">{cardNumber}</div>
    </div>
  );
}

export function EmailCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
}

const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={812}
    viewBox="0.5 0.5 999 323.684"
    {...props}
  >
    <path
      fill="#1434cb"
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
    />
  </svg>
);

const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={1524}
    viewBox="55.2 38.3 464.5 287.8"
    {...props}
  >
    <path
      fill="#f79f1a"
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
    />
    <path
      fill="#ea001b"
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
    />
    <path
      fill="#ff5f01"
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
    />
  </svg>
);

In the demo, the ID and Product columns are pinned to the start of the viewport:

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

Pinning Columns to End

Set a column's pin property to "end" to pin it to the end of the grid's viewport. In LTR mode, end-pinned columns appear on the right; in RTL mode, they appear on the left.

Column Pinning End

"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 type { OrderData } from "@1771technologies/grid-sample-data/orders";
import { data } from "@1771technologies/grid-sample-data/orders";
import {
  AvatarCell,
  EmailCell,
  IdCell,
  PaymentMethodCell,
  PriceCell,
  ProductCell,
  PurchaseDateCell,
  tw,
} from "./components";

const columns: Column<OrderData>[] = [
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID", pin: "end" },
  { id: "product", cellRenderer: ProductCell, width: 200, pin: "end" },
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100 },
  { id: "customer", cellRenderer: AvatarCell, width: 180 },
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 120 },
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
  { id: "email", cellRenderer: EmailCell, width: 220 },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 50,
    columnBase: {
      uiHints: {
        movable: true,
      },
    },
  });

  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 text-nowrap px-3 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="flex h-full w-full items-center px-3 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { format } from "date-fns";
import type { JSX, ReactNode } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

export function ProductCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.productThumbnail;
  const title = row.data.product;
  const desc = row.data.productDescription;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div className="font-semibold">{title}</div>
        <div className="text-ln-gray-70 text-xs">{desc}</div>
      </div>
    </div>
  );
}

export function AvatarCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.customerAvatar;

  const name = row.data.customer;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-full border" src={url} alt={name} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div>{name}</div>
      </div>
    </div>
  );
}

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
export function PriceCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const price = formatter.format(row.data.price);
  const [dollars, cents] = price.split(".");

  return (
    <div className="flex h-full w-full items-center justify-end">
      <div className="flex items-baseline tabular-nums">
        <span className="text-ln-gray-80 font-semibold">${dollars}</span>.
        <span className="relative text-xs">{cents}</span>
      </div>
    </div>
  );
}

export function PurchaseDateCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");

  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
}
export function IdCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-xs tabular-nums">{row.data.id}</div>;
}

export function PaymentMethodCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const cardNumber = row.data.cardNumber;
  const provider = row.data.paymentMethod;

  let Logo: ReactNode = null;
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <div className="flex w-7 items-center justify-center">{Logo}</div>
      <div className="flex items-center">
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
      </div>
      <div className="tabular-nums">{cardNumber}</div>
    </div>
  );
}

export function EmailCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
}

const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={812}
    viewBox="0.5 0.5 999 323.684"
    {...props}
  >
    <path
      fill="#1434cb"
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
    />
  </svg>
);

const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={1524}
    viewBox="55.2 38.3 464.5 287.8"
    {...props}
  >
    <path
      fill="#f79f1a"
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
    />
    <path
      fill="#ea001b"
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
    />
    <path
      fill="#ff5f01"
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
    />
  </svg>
);

In the demo, the ID and Product columns are pinned to the end of the viewport:

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

Pinning Columns Start & End

LyteNyte Grid supports pinning columns to both the start and end. The demo below shows this behavior. Pin columns on both sides by assigning some columns pin: "start" and others pin: "end".

Column Pinning Start & End

"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 type { OrderData } from "@1771technologies/grid-sample-data/orders";
import { data } from "@1771technologies/grid-sample-data/orders";
import {
  AvatarCell,
  EmailCell,
  IdCell,
  PaymentMethodCell,
  PriceCell,
  ProductCell,
  PurchaseDateCell,
  tw,
} from "./components";

const columns: Column<OrderData>[] = [
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID", pin: "start" },
  { id: "product", cellRenderer: ProductCell, width: 200, pin: "end" },
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100 },
  { id: "customer", cellRenderer: AvatarCell, width: 180 },
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 120 },
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
  { id: "email", cellRenderer: EmailCell, width: 220 },
];

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

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 50,
    columnBase: {
      uiHints: {
        movable: true,
      },
    },
  });

  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 text-nowrap px-3 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="flex h-full w-full items-center px-3 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { format } from "date-fns";
import type { JSX, ReactNode } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

export function ProductCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.productThumbnail;
  const title = row.data.product;
  const desc = row.data.productDescription;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div className="font-semibold">{title}</div>
        <div className="text-ln-gray-70 text-xs">{desc}</div>
      </div>
    </div>
  );
}

export function AvatarCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.customerAvatar;

  const name = row.data.customer;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-full border" src={url} alt={name} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div>{name}</div>
      </div>
    </div>
  );
}

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
export function PriceCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const price = formatter.format(row.data.price);
  const [dollars, cents] = price.split(".");

  return (
    <div className="flex h-full w-full items-center justify-end">
      <div className="flex items-baseline tabular-nums">
        <span className="text-ln-gray-80 font-semibold">${dollars}</span>.
        <span className="relative text-xs">{cents}</span>
      </div>
    </div>
  );
}

export function PurchaseDateCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");

  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
}
export function IdCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-xs tabular-nums">{row.data.id}</div>;
}

export function PaymentMethodCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const cardNumber = row.data.cardNumber;
  const provider = row.data.paymentMethod;

  let Logo: ReactNode = null;
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <div className="flex w-7 items-center justify-center">{Logo}</div>
      <div className="flex items-center">
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
      </div>
      <div className="tabular-nums">{cardNumber}</div>
    </div>
  );
}

export function EmailCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
}

const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={812}
    viewBox="0.5 0.5 999 323.684"
    {...props}
  >
    <path
      fill="#1434cb"
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
    />
  </svg>
);

const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={1524}
    viewBox="55.2 38.3 464.5 287.8"
    {...props}
  >
    <path
      fill="#f79f1a"
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
    />
    <path
      fill="#ea001b"
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
    />
    <path
      fill="#ff5f01"
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
    />
  </svg>
);

In the demo, the ID and Product columns are pinned to the start and end of the viewport respectively:

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

Column Pinning Considerations

When using both start-pinned and end-pinned columns, ensure enough space remains for unpinned columns to scroll between them. LyteNyte Grid does not prevent pinned regions from overlapping. If they overlap, columns pinned to "end" appear above those pinned to "start".

Next Steps

Column Resizing: Change column widths programmatically or through user interaction.
Column ID & Name: Define user-friendly column names and ensure unique IDs.
Column Floating Header: Add a secondary header row for extra header features.
Column Visibility: Control which columns are visible.

Column PinningCopy Page