Skip to main content

scroll

Description​

Fires when scrolling

Usage​

"scroll": ({
    column?: string | number,
    row?: string | number
}) => boolean | void;

Parameters​

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

  • column - (optional) the id of a column the table is scrolled to
  • row - (optional) the id of a row the table is scrolled to

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

Example​

The example below shows how to enable scrolling to the first row and column 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);

export default function Example() {
  const api = useRef(null);

  function doScroll(row, column) {
    api.current?.exec("scroll", { row, column });
  }

  return (
    <>
      <Button type="primary" onClick={() => doScroll(data[4].id, columns[4].id)}>
        Scroll to First Row / Column
      </Button>

      <Grid ref={api} data={data} columns={columns} />
    </>
  );
}

Related sample: Scroll

Related articles: