Components

Grid Overlays

LyteNyte Grid can display overlay content over the viewport or over the rows.

Use these properties to render overlays in the grid:

slotViewportOverlay: Renders an overlay anchored to the viewport.
slotRowsOverlay: Renders an overlay anchored to the grid’s rows container.

Both properties accept a React element or a function that returns one.

Viewport Overlays

Set slotViewportOverlay to a React element to render an overlay over the entire grid. Use this for overlays that block pointer interaction, such as loading screens.

The demo below shows a loading overlay. Toggle the switch to show or hide it.

Display Loading Overlay

Show Loading Overlay

demo.tsx
components.tsx


15 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
  SwitchToggle,
13
} from "./components.jsx";
14
import { useClientDataSource, Grid } from "@1771technologies/lytenyte-pro";
15
import { useState } from "react";
16

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

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

31
export default function ComponentDemo() {
32
  const [showOverlay, setShowOverlay] = useState(true);
33
  const ds = useClientDataSource({ data: data });
34

35
  return (
36
    <>
37
      <div className="border-ln-border flex w-full border-b px-2 py-2">
38
        <SwitchToggle
39
          label="Show Loading Overlay"
40
          checked={showOverlay}
41
          onChange={() => {
42
            setShowOverlay((prev) => !prev);
43
          }}
44
        />
45
      </div>
46
      <div className="ln-grid" style={{ height: 500 }}>
47
        <Grid
48
          rowHeight={50}
49
          columns={columns}
50
          rowSource={ds}
51
          slotViewportOverlay={
52
            showOverlay ? (
53
              <div className="z-12 sticky left-0 top-0 flex h-0 w-0">
54
                <div className="bg-ln-gray-30/30 w-(--ln-vp-width) h-(--ln-vp-height) absolute left-0 top-0 flex animate-pulse items-center justify-center text-lg">
55
                  Loading...
56
                </div>
57
              </div>
58
            ) : null
59
          }
60
        />
61
      </div>
62
    </>
63
  );
64
}

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

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

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

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

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

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

30
  const name = row.data.customer;
31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

137
export function SwitchToggle(props: { label: string; checked: boolean; onChange: (b: boolean) => void }) {
138
  const id = useId();
139
  return (
140
    <div className="flex items-center gap-2">
141
      <label className="text-ln-text-dark text-sm leading-none" htmlFor={id}>
142
        {props.label}
143
      </label>
144
      <Switch.Root
145
        className="bg-ln-gray-10 data-[state=checked]:bg-ln-primary-50 h-5.5 w-9.5 border-ln-border-strong relative cursor-pointer rounded-full border outline-none"
146
        id={id}
147
        checked={props.checked}
148
        onCheckedChange={(c) => props.onChange(c)}
149
        style={{ "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)" } as CSSProperties}
150
      >
151
        <Switch.Thumb className="size-4.5 block translate-x-0.5 rounded-full bg-white/95 shadow transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-4 data-[state=checked]:bg-white" />
152
      </Switch.Root>
153
    </div>
154
  );
155
}

The loading overlay code appears below. The overlay uses absolute positioning and fills the viewport to sit above all grid content.

The grid header and rows are positioned elements with a maximum z-index of 11. Since the overlay renders inside the viewport div element, set its z-index to 12 or higher to ensure it sits on top.

1
<Grid
2
  rowHeight={50}
3
  columns={columns}
4
  rowSource={ds}
5
  slotViewportOverlay={
6
    showOverlay ? (
7
      <div className="z-12 sticky left-0 top-0 flex h-0 w-0">
8
        <div className="bg-ln-gray-30/30 w-(--ln-vp-width) h-(--ln-vp-height) absolute left-0 top-0 flex animate-pulse items-center justify-center text-lg">
9
          Loading...
10
        </div>
11
      </div>
12
    ) : null
13
  }
14
/>

Row Overlay

Set the slotRowsOverlay property to a React element when you want the overlay to appear above the row content of the grid. The slotRowsOverlay element is rendered inside the grid’s rows container.

The demo below shows a rows overlay that displays a “No Rows” indicator.

No Rows Overlay


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

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

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

29
export default function ComponentDemo() {
30
  const ds = useClientDataSource({ data: [] });
31

32
  return (
33
    <>
34
      <div className="ln-grid" style={{ height: 500 }}>
35
        <Grid
36
          rowHeight={50}
37
          columns={columns}
38
          rowSource={ds}
39
          slotRowsOverlay={
40
            <div className="z-12 sticky left-0 top-0 flex h-0 w-0">
41
              <div className="w-(--ln-vp-width) absolute left-0 top-0 flex flex-col items-center justify-center pt-12 text-lg">
42
                <div className="dark:hidden">
43
                  <NoRowsSvgLight />
44
                </div>
45
                <div className="hidden dark:block">
46
                  <NoRowsSvgDark />
47
                </div>
48
                <div className="relative -top-4 text-lg font-bold">No Rows</div>
49
              </div>
50
            </div>
51
          }
52
        />
53
      </div>
54
    </>
55
  );
56
}

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

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

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

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

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

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

30
  const name = row.data.customer;
31

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

137
export function SwitchToggle(props: { label: string; checked: boolean; onChange: (b: boolean) => void }) {
138
  const id = useId();
139
  return (
140
    <div className="flex items-center gap-2">
141
      <label className="text-ln-text-dark text-sm leading-none" htmlFor={id}>
142
        {props.label}
143
      </label>
144
      <Switch.Root
145
        className="bg-ln-gray-10 data-[state=checked]:bg-ln-primary-50 h-5.5 w-9.5 border-ln-border-strong relative cursor-pointer rounded-full border outline-none"
146
        id={id}
147
        checked={props.checked}
148
        onCheckedChange={(c) => props.onChange(c)}
149
        style={{ "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)" } as CSSProperties}
150
      >
151
        <Switch.Thumb className="size-4.5 block translate-x-0.5 rounded-full bg-white/95 shadow transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-4 data-[state=checked]:bg-white" />
152
      </Switch.Root>
153
    </div>
154
  );
155
}

1
export function NoRowsSvgLight() {
2
  return (
3
    <svg width="143" height="147" viewBox="0 0 143 147" fill="none" xmlns="http://www.w3.org/2000/svg">
4
      <g filter="url(#filter0_dddd_8491_48290)">
5
        <g filter="url(#filter1_i_8491_48290)">
6
          <path
7
            d="M133 24.6444V106.693C133 109.586 130.619 111.968 127.729 111.968H15.2713C12.3806 111.968 10 109.586 10 106.693V24.6444C10 21.7517 12.3806 19.3694 15.2713 19.3694H127.729C130.619 19.3694 133 21.7517 133 24.6444Z"
8
            fill="white"
9
          />
10
        </g>
11
        <path
12
          d="M15.2715 19.8694H127.729C130.343 19.8694 132.5 22.0278 132.5 24.6448V106.694C132.5 109.31 130.343 111.468 127.729 111.468H15.2715C12.6574 111.468 10.5002 109.31 10.5 106.694V24.6448C10.5 22.1097 12.5242 20.0044 15.0273 19.8752L15.2715 19.8694Z"
13
          stroke="#DADFE7"
14
        />
15
        <path d="M21.2754 39.6499H51.1518" stroke="#C3C9D5" strokeWidth="3" strokeLinecap="round" />
16
        <path
17
          d="M15.2715 19.8694H127.729C130.343 19.8694 132.5 22.0278 132.5 24.6448V27.9729H10.5V24.6448L10.5059 24.4006C10.6306 21.9757 12.6049 20.0002 15.0273 19.8752L15.2715 19.8694Z"
18
          fill="#E9EDF1"
19
          stroke="#DADFE7"
20
          strokeMiterlimit="10"
21
        />
22
        <path
23
          d="M15.5265 25.6025C16.4187 25.6025 17.1419 24.8787 17.1419 23.9859C17.1419 23.0931 16.4187 22.3694 15.5265 22.3694C14.6344 22.3694 13.9111 23.0931 13.9111 23.9859C13.9111 24.8787 14.6344 25.6025 15.5265 25.6025Z"
24
          fill="#787E8C"
25
        />
26
        <path
27
          opacity="0.6"
28
          d="M20.5421 25.6025C21.4343 25.6025 22.1575 24.8787 22.1575 23.9859C22.1575 23.0931 21.4343 22.3694 20.5421 22.3694C19.65 22.3694 18.9268 23.0931 18.9268 23.9859C18.9268 24.8787 19.65 25.6025 20.5421 25.6025Z"
29
          fill="#787E8C"
30
        />
31
        <path
32
          opacity="0.4"
33
          d="M25.6437 25.6025C26.5359 25.6025 27.2591 24.8787 27.2591 23.9859C27.2591 23.0931 26.5359 22.3694 25.6437 22.3694C24.7516 22.3694 24.0283 23.0931 24.0283 23.9859C24.0283 24.8787 24.7516 25.6025 25.6437 25.6025Z"
34
          fill="#787E8C"
35
        />
36
        <path
37
          d="M39.4328 51.6577H22.543C21.4384 51.6577 20.543 52.5531 20.543 53.6577V97.4698C20.543 98.5744 21.4384 99.4698 22.543 99.4698H39.4328C40.5374 99.4698 41.4328 98.5744 41.4328 97.4698V53.6577C41.4328 52.5531 40.5374 51.6577 39.4328 51.6577Z"
38
          fill="#F2F4F7"
39
        />
40
        <path
41
          d="M120.131 51.6577C121.787 51.6577 123.131 53.0009 123.131 54.6577V96.4698C123.131 98.1267 121.787 99.4698 120.131 99.4698H23.543C21.8861 99.4698 20.543 98.1266 20.543 96.4698V54.6577C20.543 53.0009 21.8861 51.6577 23.543 51.6577H120.131Z"
42
          stroke="#DADFE7"
43
          strokeWidth="1.5"
44
          strokeMiterlimit="10"
45
        />
46
        <path d="M20.8525 60.9717H122.82" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
47
        <path d="M20.8525 70.6997H122.82" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
48
        <path d="M20.8525 80.3245H122.82" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
49
        <path d="M20.8525 90.0522H122.82" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
50
        <path d="M41.4326 52.175V99.4697" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
51
        <path d="M62.0117 52.175V99.4697" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
52
        <path d="M82.6943 52.175V99.4697" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
53
        <path d="M103.275 52.175V99.4697" stroke="#DADFE7" strokeWidth="1.5" strokeMiterlimit="10" />
54
      </g>
55
      <g filter="url(#filter2_dd_8491_48290)">
56
        <path
57
          d="M110.166 7.61974C110.505 6.79336 111.676 6.79336 112.016 7.61974L114.454 13.5522C114.556 13.7992 114.752 13.9953 114.999 14.0969L120.931 16.5356C121.758 16.8754 121.758 18.0457 120.931 18.3854L114.999 20.8242C114.752 20.9258 114.556 21.1219 114.454 21.3689L112.016 27.3013C111.676 28.1277 110.505 28.1277 110.166 27.3013L107.727 21.3689C107.625 21.1219 107.429 20.9258 107.182 20.8242L101.25 18.3854C100.423 18.0457 100.423 16.8754 101.25 16.5356L107.182 14.0969C107.429 13.9953 107.625 13.7992 107.727 13.5522L110.166 7.61974Z"
58
          fill="white"
59
        />
60
        <path
61
          d="M110.166 7.61974C110.505 6.79336 111.676 6.79336 112.016 7.61974L114.454 13.5522C114.556 13.7992 114.752 13.9953 114.999 14.0969L120.931 16.5356C121.758 16.8754 121.758 18.0457 120.931 18.3854L114.999 20.8242C114.752 20.9258 114.556 21.1219 114.454 21.3689L112.016 27.3013C111.676 28.1277 110.505 28.1277 110.166 27.3013L107.727 21.3689C107.625 21.1219 107.429 20.9258 107.182 20.8242L101.25 18.3854C100.423 18.0457 100.423 16.8754 101.25 16.5356L107.182 14.0969C107.429 13.9953 107.625 13.7992 107.727 13.5522L110.166 7.61974Z"
62
          stroke="#949BA8"
63
          strokeWidth="2"
64
        />
65
      </g>
66
      <g filter="url(#filter3_dd_8491_48290)">
67
        <path
68
          d="M122.803 31.8011C123.142 30.9748 124.313 30.9748 124.652 31.8011L126.423 36.1093C126.525 36.3564 126.721 36.5525 126.968 36.654L131.276 38.4251C132.103 38.7648 132.103 39.9352 131.276 40.2749L126.968 42.046C126.721 42.1475 126.525 42.3436 126.423 42.5906L124.652 46.8988C124.313 47.7252 123.142 47.7252 122.803 46.8988L121.031 42.5906C120.93 42.3436 120.734 42.1475 120.487 42.046L116.179 40.2749C115.352 39.9352 115.352 38.7648 116.179 38.4251L120.487 36.654C120.734 36.5525 120.93 36.3564 121.031 36.1093L122.803 31.8011Z"
69
          fill="white"
70
        />
71
        <path
72
          d="M122.803 31.8011C123.142 30.9748 124.313 30.9748 124.652 31.8011L126.423 36.1093C126.525 36.3564 126.721 36.5525 126.968 36.654L131.276 38.4251C132.103 38.7648 132.103 39.9352 131.276 40.2749L126.968 42.046C126.721 42.1475 126.525 42.3436 126.423 42.5906L124.652 46.8988C124.313 47.7252 123.142 47.7252 122.803 46.8988L121.031 42.5906C120.93 42.3436 120.734 42.1475 120.487 42.046L116.179 40.2749C115.352 39.9352 115.352 38.7648 116.179 38.4251L120.487 36.654C120.734 36.5525 120.93 36.3564 121.031 36.1093L122.803 31.8011Z"
73
          stroke="#949BA8"
74
          strokeWidth="2"
75
        />
76
      </g>
77
      <defs>
78
        <filter
79
          id="filter0_dddd_8491_48290"
80
          x="0"
81
          y="18.3694"
82
          width="143"
83
          height="128.599"
84
          filterUnits="userSpaceOnUse"
85
          colorInterpolationFilters="sRGB"
86
        >
87
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
88
          <feColorMatrix
89
            in="SourceAlpha"
90
            type="matrix"
91
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
92
            result="hardAlpha"
93
          />
94
          <feOffset dy="2" />
95
          <feGaussianBlur stdDeviation="1.5" />
96
          <feColorMatrix
97
            type="matrix"
98
            values="0 0 0 0 0.764706 0 0 0 0 0.788235 0 0 0 0 0.835294 0 0 0 0.2 0"
99
          />
100
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8491_48290" />
101
          <feColorMatrix
102
            in="SourceAlpha"
103
            type="matrix"
104
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
105
            result="hardAlpha"
106
          />
107
          <feOffset dy="6" />
108
          <feGaussianBlur stdDeviation="3" />
109
          <feColorMatrix
110
            type="matrix"
111
            values="0 0 0 0 0.764706 0 0 0 0 0.788235 0 0 0 0 0.835294 0 0 0 0.17 0"
112
          />
113
          <feBlend mode="normal" in2="effect1_dropShadow_8491_48290" result="effect2_dropShadow_8491_48290" />
114
          <feColorMatrix
115
            in="SourceAlpha"
116
            type="matrix"
117
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
118
            result="hardAlpha"
119
          />
120
          <feOffset dy="14" />
121
          <feGaussianBlur stdDeviation="4" />
122
          <feColorMatrix
123
            type="matrix"
124
            values="0 0 0 0 0.764706 0 0 0 0 0.788235 0 0 0 0 0.835294 0 0 0 0.1 0"
125
          />
126
          <feBlend mode="normal" in2="effect2_dropShadow_8491_48290" result="effect3_dropShadow_8491_48290" />
127
          <feColorMatrix
128
            in="SourceAlpha"
129
            type="matrix"
130
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
131
            result="hardAlpha"
132
          />
133
          <feOffset dy="25" />
134
          <feGaussianBlur stdDeviation="5" />
135
          <feColorMatrix
136
            type="matrix"
137
            values="0 0 0 0 0.764706 0 0 0 0 0.788235 0 0 0 0 0.835294 0 0 0 0.03 0"
138
          />
139
          <feBlend mode="normal" in2="effect3_dropShadow_8491_48290" result="effect4_dropShadow_8491_48290" />
140
          <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_8491_48290" result="shape" />
141
        </filter>
142
        <filter
143
          id="filter1_i_8491_48290"
144
          x="10"
145
          y="18.3694"
146
          width="123"
147
          height="93.5989"
148
          filterUnits="userSpaceOnUse"
149
          colorInterpolationFilters="sRGB"
150
        >
151
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
152
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
153
          <feColorMatrix
154
            in="SourceAlpha"
155
            type="matrix"
156
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
157
            result="hardAlpha"
158
          />
159
          <feOffset dy="-5" />
160
          <feGaussianBlur stdDeviation="0.5" />
161
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
162
          <feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.956863 0 0 0 0 0.968627 0 0 0 1 0" />
163
          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_8491_48290" />
164
        </filter>
165
        <filter
166
          id="filter2_dd_8491_48290"
167
          x="92.6299"
168
          y="0"
169
          width="36.9209"
170
          height="43.9211"
171
          filterUnits="userSpaceOnUse"
172
          colorInterpolationFilters="sRGB"
173
        >
174
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
175
          <feColorMatrix
176
            in="SourceAlpha"
177
            type="matrix"
178
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
179
            result="hardAlpha"
180
          />
181
          <feOffset dy="1" />
182
          <feGaussianBlur stdDeviation="3.5" />
183
          <feColorMatrix
184
            type="matrix"
185
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.07 0"
186
          />
187
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8491_48290" />
188
          <feColorMatrix
189
            in="SourceAlpha"
190
            type="matrix"
191
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
192
            result="hardAlpha"
193
          />
194
          <feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8491_48290" />
195
          <feOffset dy="11" />
196
          <feGaussianBlur stdDeviation="5" />
197
          <feComposite in2="hardAlpha" operator="out" />
198
          <feColorMatrix
199
            type="matrix"
200
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.04 0"
201
          />
202
          <feBlend mode="normal" in2="effect1_dropShadow_8491_48290" result="effect2_dropShadow_8491_48290" />
203
          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_8491_48290" result="shape" />
204
        </filter>
205
        <filter
206
          id="filter3_dd_8491_48290"
207
          x="107.559"
208
          y="24.1814"
209
          width="32.3379"
210
          height="39.3372"
211
          filterUnits="userSpaceOnUse"
212
          colorInterpolationFilters="sRGB"
213
        >
214
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
215
          <feColorMatrix
216
            in="SourceAlpha"
217
            type="matrix"
218
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
219
            result="hardAlpha"
220
          />
221
          <feOffset dy="1" />
222
          <feGaussianBlur stdDeviation="3.5" />
223
          <feColorMatrix
224
            type="matrix"
225
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.07 0"
226
          />
227
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8491_48290" />
228
          <feColorMatrix
229
            in="SourceAlpha"
230
            type="matrix"
231
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
232
            result="hardAlpha"
233
          />
234
          <feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8491_48290" />
235
          <feOffset dy="11" />
236
          <feGaussianBlur stdDeviation="5" />
237
          <feComposite in2="hardAlpha" operator="out" />
238
          <feColorMatrix
239
            type="matrix"
240
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.04 0"
241
          />
242
          <feBlend mode="normal" in2="effect1_dropShadow_8491_48290" result="effect2_dropShadow_8491_48290" />
243
          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_8491_48290" result="shape" />
244
        </filter>
245
      </defs>
246
    </svg>
247
  );
248
}
249

250
export function NoRowsSvgDark() {
251
  return (
252
    <svg width="143" height="147" viewBox="0 0 143 147" fill="none" xmlns="http://www.w3.org/2000/svg">
253
      <g filter="url(#filter0_dddd_1075_57398)">
254
        <g filter="url(#filter1_i_1075_57398)">
255
          <path
256
            d="M133 24.6444V106.693C133 109.586 130.619 111.968 127.729 111.968H15.2713C12.3806 111.968 10 109.586 10 106.693V24.6444C10 21.7517 12.3806 19.3694 15.2713 19.3694H127.729C130.619 19.3694 133 21.7517 133 24.6444Z"
257
            fill="#1C1E21"
258
          />
259
        </g>
260
        <path
261
          d="M15.2715 19.8694H127.729C130.343 19.8694 132.5 22.0278 132.5 24.6448V106.694C132.5 109.31 130.343 111.468 127.729 111.468H15.2715C12.6574 111.468 10.5002 109.31 10.5 106.694V24.6448C10.5 22.1097 12.5242 20.0044 15.0273 19.8752L15.2715 19.8694Z"
262
          stroke="#3F424A"
263
        />
264
        <path d="M21.2759 39.6498H51.1523" stroke="#525660" strokeWidth="3" strokeLinecap="round" />
265
        <path
266
          d="M15.2715 19.8694H127.729C130.343 19.8694 132.5 22.0278 132.5 24.6448V27.9729H10.5V24.6448L10.5059 24.4006C10.6306 21.9757 12.6049 20.0002 15.0273 19.8752L15.2715 19.8694Z"
267
          fill="#2F3137"
268
          stroke="#3F424A"
269
          strokeMiterlimit="10"
270
        />
271
        <path
272
          d="M15.526 25.6025C16.4182 25.6025 17.1414 24.8787 17.1414 23.9859C17.1414 23.0931 16.4182 22.3694 15.526 22.3694C14.6339 22.3694 13.9106 23.0931 13.9106 23.9859C13.9106 24.8787 14.6339 25.6025 15.526 25.6025Z"
273
          fill="#62636A"
274
        />
275
        <path
276
          opacity="0.6"
277
          d="M20.5426 25.6025C21.4348 25.6025 22.158 24.8787 22.158 23.9859C22.158 23.0931 21.4348 22.3694 20.5426 22.3694C19.6505 22.3694 18.9272 23.0931 18.9272 23.9859C18.9272 24.8787 19.6505 25.6025 20.5426 25.6025Z"
278
          fill="#62636A"
279
        />
280
        <path
281
          opacity="0.4"
282
          d="M25.6437 25.6025C26.5359 25.6025 27.2591 24.8787 27.2591 23.9859C27.2591 23.0931 26.5359 22.3694 25.6437 22.3694C24.7516 22.3694 24.0283 23.0931 24.0283 23.9859C24.0283 24.8787 24.7516 25.6025 25.6437 25.6025Z"
283
          fill="#62636A"
284
        />
285
        <path
286
          d="M39.4323 51.6578H22.5425C21.4379 51.6578 20.5425 52.5533 20.5425 53.6578V97.4699C20.5425 98.5745 21.4379 99.4699 22.5425 99.4699H39.4323C40.5369 99.4699 41.4323 98.5745 41.4323 97.4699V53.6578C41.4323 52.5533 40.5369 51.6578 39.4323 51.6578Z"
287
          fill="#282A2E"
288
        />
289
        <path
290
          d="M120.13 51.6578C121.787 51.6578 123.13 53.001 123.13 54.6578V96.4699C123.13 98.1268 121.787 99.4699 120.13 99.4699H23.5425C21.8856 99.4699 20.5425 98.1268 20.5425 96.4699V54.6578C20.5425 53.001 21.8856 51.6578 23.5425 51.6578H120.13Z"
291
          stroke="#3F424A"
292
          strokeWidth="1.5"
293
          strokeMiterlimit="10"
294
        />
295
        <path d="M20.8525 60.9719H122.82" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
296
        <path d="M20.8525 70.7H122.82" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
297
        <path d="M20.8525 80.3246H122.82" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
298
        <path d="M20.8525 90.0524H122.82" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
299
        <path d="M41.4321 52.1753V99.4699" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
300
        <path d="M62.0117 52.1753V99.4699" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
301
        <path d="M82.6943 52.1753V99.4699" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
302
        <path d="M103.274 52.1753V99.4699" stroke="#3F424A" strokeWidth="1.5" strokeMiterlimit="10" />
303
      </g>
304
      <g filter="url(#filter2_dd_1075_57398)">
305
        <path
306
          d="M110.166 7.61974C110.505 6.79336 111.676 6.79336 112.016 7.61974L114.454 13.5522C114.556 13.7992 114.752 13.9953 114.999 14.0969L120.931 16.5356C121.758 16.8754 121.758 18.0457 120.931 18.3854L114.999 20.8242C114.752 20.9258 114.556 21.1219 114.454 21.3689L112.016 27.3013C111.676 28.1277 110.505 28.1277 110.166 27.3013L107.727 21.3689C107.625 21.1219 107.429 20.9258 107.182 20.8242L101.25 18.3854C100.423 18.0457 100.423 16.8754 101.25 16.5356L107.182 14.0969C107.429 13.9953 107.625 13.7992 107.727 13.5522L110.166 7.61974Z"
307
          fill="#151519"
308
        />
309
        <path
310
          d="M110.166 7.61974C110.505 6.79336 111.676 6.79336 112.016 7.61974L114.454 13.5522C114.556 13.7992 114.752 13.9953 114.999 14.0969L120.931 16.5356C121.758 16.8754 121.758 18.0457 120.931 18.3854L114.999 20.8242C114.752 20.9258 114.556 21.1219 114.454 21.3689L112.016 27.3013C111.676 28.1277 110.505 28.1277 110.166 27.3013L107.727 21.3689C107.625 21.1219 107.429 20.9258 107.182 20.8242L101.25 18.3854C100.423 18.0457 100.423 16.8754 101.25 16.5356L107.182 14.0969C107.429 13.9953 107.625 13.7992 107.727 13.5522L110.166 7.61974Z"
311
          stroke="#676C79"
312
          strokeWidth="2"
313
        />
314
      </g>
315
      <g filter="url(#filter3_dd_1075_57398)">
316
        <path
317
          d="M122.803 31.8011C123.142 30.9748 124.313 30.9748 124.652 31.8011L126.423 36.1093C126.525 36.3564 126.721 36.5525 126.968 36.654L131.276 38.4251C132.103 38.7648 132.103 39.9352 131.276 40.2749L126.968 42.046C126.721 42.1475 126.525 42.3436 126.423 42.5906L124.652 46.8988C124.313 47.7252 123.142 47.7252 122.803 46.8988L121.031 42.5906C120.93 42.3436 120.734 42.1475 120.487 42.046L116.179 40.2749C115.352 39.9352 115.352 38.7648 116.179 38.4251L120.487 36.654C120.734 36.5525 120.93 36.3564 121.031 36.1093L122.803 31.8011Z"
318
          fill="#151519"
319
        />
320
        <path
321
          d="M122.803 31.8011C123.142 30.9748 124.313 30.9748 124.652 31.8011L126.423 36.1093C126.525 36.3564 126.721 36.5525 126.968 36.654L131.276 38.4251C132.103 38.7648 132.103 39.9352 131.276 40.2749L126.968 42.046C126.721 42.1475 126.525 42.3436 126.423 42.5906L124.652 46.8988C124.313 47.7252 123.142 47.7252 122.803 46.8988L121.031 42.5906C120.93 42.3436 120.734 42.1475 120.487 42.046L116.179 40.2749C115.352 39.9352 115.352 38.7648 116.179 38.4251L120.487 36.654C120.734 36.5525 120.93 36.3564 121.031 36.1093L122.803 31.8011Z"
322
          stroke="#676C79"
323
          strokeWidth="2"
324
        />
325
      </g>
326
      <defs>
327
        <filter
328
          id="filter0_dddd_1075_57398"
329
          x="0"
330
          y="18.3694"
331
          width="143"
332
          height="128.599"
333
          filterUnits="userSpaceOnUse"
334
          colorInterpolationFilters="sRGB"
335
        >
336
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
337
          <feColorMatrix
338
            in="SourceAlpha"
339
            type="matrix"
340
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
341
            result="hardAlpha"
342
          />
343
          <feOffset dy="2" />
344
          <feGaussianBlur stdDeviation="1.5" />
345
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
346
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1075_57398" />
347
          <feColorMatrix
348
            in="SourceAlpha"
349
            type="matrix"
350
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
351
            result="hardAlpha"
352
          />
353
          <feOffset dy="6" />
354
          <feGaussianBlur stdDeviation="3" />
355
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0" />
356
          <feBlend mode="normal" in2="effect1_dropShadow_1075_57398" result="effect2_dropShadow_1075_57398" />
357
          <feColorMatrix
358
            in="SourceAlpha"
359
            type="matrix"
360
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
361
            result="hardAlpha"
362
          />
363
          <feOffset dy="14" />
364
          <feGaussianBlur stdDeviation="4" />
365
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
366
          <feBlend mode="normal" in2="effect2_dropShadow_1075_57398" result="effect3_dropShadow_1075_57398" />
367
          <feColorMatrix
368
            in="SourceAlpha"
369
            type="matrix"
370
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
371
            result="hardAlpha"
372
          />
373
          <feOffset dy="25" />
374
          <feGaussianBlur stdDeviation="5" />
375
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
376
          <feBlend mode="normal" in2="effect3_dropShadow_1075_57398" result="effect4_dropShadow_1075_57398" />
377
          <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1075_57398" result="shape" />
378
        </filter>
379
        <filter
380
          id="filter1_i_1075_57398"
381
          x="10"
382
          y="18.3694"
383
          width="123"
384
          height="93.599"
385
          filterUnits="userSpaceOnUse"
386
          colorInterpolationFilters="sRGB"
387
        >
388
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
389
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
390
          <feColorMatrix
391
            in="SourceAlpha"
392
            type="matrix"
393
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
394
            result="hardAlpha"
395
          />
396
          <feOffset dy="-5" />
397
          <feGaussianBlur stdDeviation="0.5" />
398
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
399
          <feColorMatrix type="matrix" values="0 0 0 0 0.072 0 0 0 0 0.0752 0 0 0 0 0.088 0 0 0 0.72 0" />
400
          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1075_57398" />
401
        </filter>
402
        <filter
403
          id="filter2_dd_1075_57398"
404
          x="92.6299"
405
          y="0"
406
          width="36.9214"
407
          height="43.9211"
408
          filterUnits="userSpaceOnUse"
409
          colorInterpolationFilters="sRGB"
410
        >
411
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
412
          <feColorMatrix
413
            in="SourceAlpha"
414
            type="matrix"
415
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
416
            result="hardAlpha"
417
          />
418
          <feOffset dy="1" />
419
          <feGaussianBlur stdDeviation="3.5" />
420
          <feColorMatrix
421
            type="matrix"
422
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.07 0"
423
          />
424
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1075_57398" />
425
          <feColorMatrix
426
            in="SourceAlpha"
427
            type="matrix"
428
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
429
            result="hardAlpha"
430
          />
431
          <feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1075_57398" />
432
          <feOffset dy="11" />
433
          <feGaussianBlur stdDeviation="5" />
434
          <feComposite in2="hardAlpha" operator="out" />
435
          <feColorMatrix
436
            type="matrix"
437
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.04 0"
438
          />
439
          <feBlend mode="normal" in2="effect1_dropShadow_1075_57398" result="effect2_dropShadow_1075_57398" />
440
          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1075_57398" result="shape" />
441
        </filter>
442
        <filter
443
          id="filter3_dd_1075_57398"
444
          x="107.559"
445
          y="24.1814"
446
          width="32.3374"
447
          height="39.3373"
448
          filterUnits="userSpaceOnUse"
449
          colorInterpolationFilters="sRGB"
450
        >
451
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
452
          <feColorMatrix
453
            in="SourceAlpha"
454
            type="matrix"
455
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
456
            result="hardAlpha"
457
          />
458
          <feOffset dy="1" />
459
          <feGaussianBlur stdDeviation="3.5" />
460
          <feColorMatrix
461
            type="matrix"
462
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.07 0"
463
          />
464
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1075_57398" />
465
          <feColorMatrix
466
            in="SourceAlpha"
467
            type="matrix"
468
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
469
            result="hardAlpha"
470
          />
471
          <feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect2_dropShadow_1075_57398" />
472
          <feOffset dy="11" />
473
          <feGaussianBlur stdDeviation="5" />
474
          <feComposite in2="hardAlpha" operator="out" />
475
          <feColorMatrix
476
            type="matrix"
477
            values="0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0 0.107843 0 0 0 0.04 0"
478
          />
479
          <feBlend mode="normal" in2="effect1_dropShadow_1075_57398" result="effect2_dropShadow_1075_57398" />
480
          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1075_57398" result="shape" />
481
        </filter>
482
      </defs>
483
    </svg>
484
  );
485
}

The No Rows overlay code is shown below. The overlay is a positioned element rendered inside the grid’s rows container element.

1
<Grid
2
  rowHeight={50}
3
  columns={columns}
4
  rowSource={ds}
5
  styles={{ viewport: { style: { overflow: "hidden" } } }}
6
  slotRowsOverlay={
7
    <div className="z-12 sticky left-0 top-0 flex h-0 w-0">
8
      <div className="w-(--ln-vp-width) absolute left-0 top-0 flex flex-col items-center justify-center pt-12 text-lg">
9
        <div className="dark:hidden">
10
          <NoRowsSvgLight />
11
        </div>
12
        <div className="hidden dark:block">
13
          <NoRowsSvgDark />
14
        </div>
15
        <div className="relative -top-4 text-lg font-bold">No Rows</div>
16
      </div>
17
    </div>
18
  }
19
/>

Choosing Overlays

Use the viewport overlay for general feedback content; it is typically easier to style and implement. Use the rows overlay only if:

You need the overlay to extend across the full width and height of the scrollable area.
Your application logic requires the overlay to be rendered inside the rows container.

Next Steps

Viewport Shadows: Add visual depth to pinned columns and rows with scroll shadows.
Dialog: Present critical information or request decisions in a focused modal.
Menu Button: Display a list of actions or options in an accessible dropdown menu.