# virtualize

> Applies `content-visibility: auto` with `contain-intrinsic-size` so the browser skips rendering off-screen rows in a long list or table, using `intrinsicSize` as a placeholder so the scrollbar doesn't jump on mount.

```ts
import { virtualize } from "@sdxc/u/layout";
```

Applies `content-visibility: auto` with `contain-intrinsic-size` so the
browser skips rendering off-screen rows in a long list or table, using
`intrinsicSize` as a placeholder so the scrollbar doesn't jump on mount.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.virtualize("auto var(--ui-table-row-size, 2.5rem)")` | `css({ contentVisibility: "auto", containIntrinsicSize: "auto var(--ui-table-row-size, 2.5rem)" })` |

## Examples

### Basic example

Use `virtualize(size)` on the rows of a long list so the browser skips rendering the ones off screen, using `size` as their placeholder height:

```tsx
<div mix={[overflow("auto"), is(72), bs(64), ...]}>
	{Array.from({ length: 1000 }, (_, index) => (
		<div mix={[virtualize("auto 2.75rem"), p(2, 4), ...]}>Row {index + 1}</div>
	))}
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.virtualize("auto var(--ui-table-row-size, 2.5rem)"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.virtualize("auto var(--ui-table-row-size, 2.5rem)"))
```

## Signature

```ts
u.virtualize(intrinsicSize: string)
```