Skip to main content

scroll-to

Description​

Scrolls the table to a specified pixel offset

Use scroll-to for pixel-based scrolling. To scroll to a specific row or column by ID, use the scroll action instead.

Usage​

"scroll-to": ({
    top?: number,
    left?: number,
}) => boolean | void;

Parameters​

The callback of the action takes an object with the following parameters:

  • top - (optional) the vertical scroll offset in pixels
  • left - (optional) the horizontal scroll offset in pixels

Returning false from the event handler will block scrolling within the table.

Example​

The example below shows how to scroll the table to a specific pixel offset on a button click.

import { useRef } from "react";
import { Button } from "@svar-ui/react-core";
import { Grid } from "@svar-ui/react-grid";
import { repeatData, repeatColumns } from "./common/data";

const data = repeatData(1000);
const columns = repeatColumns(100);

const apiRef = useRef(null);
function doScrollTo(top, left) {
    apiRef.current.exec("scroll-to", { top, left });
}

<Button type="primary" onClick={() => doScrollTo(5000, 0)}>
    Scroll to top: 5000
</Button>
<Button type="primary" onClick={() => doScrollTo(0, 2000)}>
    Scroll to left: 2000
</Button>
<Button type="primary" onClick={() => doScrollTo(0, 0)}>
    Scroll to top-left corner
</Button>

<Grid ref={apiRef} data={data} columns={columns} split={{ left: 1 }} />

Related articles: