Components

Viewport Shadows

Use the viewport shadows slot to render shadows for pinned sections and add visual depth.

Shadows Slot

LyteNyte Grid exports ViewportShadows. Pass it to slotShadows on the grid. ViewportShadows renders within the grid’s viewport element.

The demo below demonstrates ViewportShadows. The pinned sections show borders. Scroll horizontally or vertically to observe shadows appearing.


14 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
3
import { data } from "@1771technologies/grid-sample-data/orders";
4
import {
5
  AvatarCell,
6
  EmailCell,
7
  IdCell,
8
  PaymentMethodCell,
9
  PriceCell,
10
  ProductCell,
11
  PurchaseDateCell,
12
} from "./components.jsx";
13
import { useClientDataSource, Grid } from "@1771technologies/lytenyte-pro";
14
import { ViewportShadows } from "@1771technologies/lytenyte-pro/components";
15

16
export interface GridSpec {
17
  readonly data: OrderData;
18
}
19

20
const columns: Grid.Column<GridSpec>[] = [
21
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID", pin: "start" },
22
  { id: "product", cellRenderer: ProductCell, width: 200, name: "Product" },
23
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100, name: "Price" },
24
  { id: "customer", cellRenderer: AvatarCell, width: 180, name: "Customer" },
25
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 130 },
26
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
27
  { id: "email", cellRenderer: EmailCell, width: 220, name: "Email", pin: "end" },
28
];
29

30
export default function ComponentDemo() {
31
  const ds = useClientDataSource({
32
    data: data.slice(2, -2),
33
    topData: data.slice(0, 2),
34
    botData: data.slice(-2),
35
  });
36

37
  return (
38
    <>
39
      <div className="ln-grid" style={{ height: 500 }}>
40
        <Grid rowHeight={50} columns={columns} rowSource={ds} slotShadows={ViewportShadows} />
41
      </div>
42
    </>
43
  );
44
}

1
import { format } from "date-fns";
2
import { type JSX, type ReactNode } from "react";
3
import type { Grid } from "@1771technologies/lytenyte-pro";
4
import type { GridSpec } from "./demo.jsx";
5

6
export function ProductCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
7
  if (!api.rowIsLeaf(row) || !row.data) return;
8

9
  const url = row.data?.productThumbnail;
10
  const title = row.data.product;
11
  const desc = row.data.productDescription;
12

13
  return (
14
    <div className="flex h-full w-full items-center gap-2">
15
      <img className="border-ln-border-strong h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
16
      <div className="text-ln-text-dark flex flex-col gap-0.5">
17
        <div className="font-semibold">{title}</div>
18
        <div className="text-ln-text-light text-xs">{desc}</div>
19
      </div>
20
    </div>
21
  );
22
}
23

24
export function AvatarCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
25
  if (!api.rowIsLeaf(row) || !row.data) return;
26

27
  const url = row.data?.customerAvatar;
28

29
  const name = row.data.customer;
30

31
  return (
32
    <div className="flex h-full w-full items-center gap-2">
33
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
34
      <div className="text-ln-text-dark flex flex-col gap-0.5">
35
        <div>{name}</div>
36
      </div>
37
    </div>
38
  );
39
}
40

41
const formatter = new Intl.NumberFormat("en-Us", {
42
  minimumFractionDigits: 2,
43
  maximumFractionDigits: 2,
44
});
45
export function PriceCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
46
  if (!api.rowIsLeaf(row) || !row.data) return;
47

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

51
  return (
52
    <div className="flex h-full w-full items-center justify-end">
53
      <div className="flex items-baseline tabular-nums">
54
        <span className="text-ln-text font-semibold">${dollars}</span>.
55
        <span className="relative text-xs">{cents}</span>
56
      </div>
57
    </div>
58
  );
59
}
60

61
export function PurchaseDateCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
62
  if (!api.rowIsLeaf(row) || !row.data) return;
63

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

66
  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
67
}
68
export function IdCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
69
  if (!api.rowIsLeaf(row) || !row.data) return;
70

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

74
export function PaymentMethodCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
75
  if (!api.rowIsLeaf(row) || !row.data) return;
76

77
  const cardNumber = row.data.cardNumber;
78
  const provider = row.data.paymentMethod;
79

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

84
  return (
85
    <div className="flex h-full w-full items-center gap-2">
86
      <div className="flex w-7 items-center justify-center">{Logo}</div>
87
      <div className="flex items-center gap-px">
88
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
89
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
90
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
91
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
92
      </div>
93
      <div className="tabular-nums">{cardNumber}</div>
94
    </div>
95
  );
96
}
97

98
export function EmailCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
99
  if (!api.rowIsLeaf(row) || !row.data) return;
100

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

104
const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
105
  <svg xmlns="http://www.w3.org/2000/svg" width={2500} height={812} viewBox="0.5 0.5 999 323.684" {...props}>
106
    <path
107
      fill="#1434cb"
108
      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"
109
    />
110
  </svg>
111
);
112

113
const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
114
  <svg
115
    xmlns="http://www.w3.org/2000/svg"
116
    width={2500}
117
    height={1524}
118
    viewBox="55.2 38.3 464.5 287.8"
119
    {...props}
120
  >
121
    <path
122
      fill="#f79f1a"
123
      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"
124
    />
125
    <path
126
      fill="#ea001b"
127
      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"
128
    />
129
    <path
130
      fill="#ff5f01"
131
      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"
132
    />
133
  </svg>
134
);

The code for the viewport shadows is shown below. Note that the slotShadows property must be provided a component function and does not accept a React Element.

1
<Grid rowHeight={50} columns={columns} rowSource={ds} slotShadows={ViewportShadows} />

The ViewportShadows component uses CSS to remain visible regardless of the grid’s scroll position. This behavior makes the component useful for drawing pin area shadows. The shadows also avoid CSS stacking issues, which makes the component well suited for adding visual depth without shadows being clipped.

Styling Viewport Shadows

LyteNyte Grid components are unstyled by default. The ViewportShadows component requires custom CSS to display visual feedback. If you are using a prebuilt LyteNyte Grid theme, the required styles are already applied.

To style or adjust the ViewportShadows component, target its data attributes. The CSS used by the prebuilt themes is shown below and can be used as a reference for custom styling.

The data-ln-y-status and data-ln-x-status data attributes have one of the following values:

"none": Set when the grid has no scroll applied. x represents horizontal scroll and y represents vertical scroll.
"partial": Set when some scroll has been applied to the grid.
"full": Set when the grid is fully scrolled in the direction. x represents horizontal scroll and y represents vertical scroll.

1
[data-ln-viewport="true"] {
2
  & [data-ln-start-shadow],
3
  & [data-ln-end-shadow] {
4
    width: 5px;
5
    opacity: 0;
6
    transition: opacity 200ms ease-in-out;
7
    pointer-events: none;
8
  }
9

10
  & [data-ln-top-shadow],
11
  & [data-ln-bottom-shadow] {
12
    height: 8px;
13
    opacity: 1;
14
    transition: opacity 200ms ease-in-out;
15
    pointer-events: none;
16
  }
17

18
  & [data-ln-end-shadow] {
19
    transform: translateX(-5px);
20
  }
21

22
  &[data-ln-y-status="full"] [data-ln-top-shadow],
23
  &[data-ln-y-status="partial"] [data-ln-top-shadow] {
24
    opacity: 1;
25
    background-image: linear-gradient(to bottom, var(--ln-border), transparent);
26
  }
27
  &[data-ln-y-status="none"] [data-ln-bottom-shadow],
28
  &[data-ln-y-status="partial"] [data-ln-bottom-shadow] {
29
    opacity: 1;
30
    background-image: linear-gradient(to top, var(--ln-border), transparent);
31
    transform: translateY(-8px);
32
  }
33

34
  &[data-ln-x-status="full"] [data-ln-start-shadow],
35
  &[data-ln-x-status="partial"] [data-ln-start-shadow] {
36
    opacity: 1;
37
    background-image: linear-gradient(to right, var(--ln-border), transparent);
38
  }
39

40
  &[data-ln-x-status="none"] [data-ln-end-shadow],
41
  &[data-ln-x-status="partial"] [data-ln-end-shadow] {
42
    opacity: 1;
43
    background-image: linear-gradient(to left, var(--ln-border-strong) 0, transparent);
44
  }
45
}

Shadows Properties

The ViewportShadows component accepts the properties listed below. To apply these properties, create an intermediate component. For example:

1
function MyShadows() {
2
  return <ViewportShadows start={false} />;
3
}
4

5
<Grid rowHeight={50} columns={columns} rowSource={ds} slotShadows={MyShadows} />;

Next Steps

Grid Overlays: LyteNyte Grid can display overlay content over the viewport or over the rows.
Smart Select: Streamline data selection using a versatile combobox or select element.
Pill Manager: Create and manage grid interactions using label pills.

Viewport Shadows

Shadows Slot

Viewport Shadows

Styling Viewport Shadows

Shadows Properties

Next Steps

On this page