Mantine DataTable

const scrollRowIntoView = (selector: string) => {
  document.querySelector(selector)?.scrollIntoView({ block: 'end', behavior: 'smooth' });
  // 👇 if you don't want smooth scrolling, you could simply use this instead:
  // document.querySelector(selector)?.scrollIntoView(false);
};

return (
  <>
    <Grid mb="md">
      <GridCol span={{ md: 4, lg: 3 }}>
        <Button fullWidth onClick={() => scrollRowIntoView('[data-row-index="0"]')}>
          Scroll to first row
        </Button>
      </GridCol>
      <GridCol span={{ md: 4, lg: 6 }}>
        <Button fullWidth onClick={() => scrollRowIntoView('[data-row-first-name="Alicia"]')}>
          Scroll to first “Alicia”
        </Button>
      </GridCol>
      <GridCol span={{ md: 4, lg: 3 }}>
        <Button fullWidth onClick={() => scrollRowIntoView(`[data-row-index="${employees.length - 1}"]`)}>
          Scroll to last row
        </Button>
      </GridCol>
    </Grid>
    <DataTable
      records={employees}
      customRowAttributes={({ firstName }, recordIndex) => ({
        'data-row-first-name': firstName,
        'data-row-index': recordIndex,
      })}
      // more table props...
    />
  </>
);