Add scroll row into view example

app/config.ts

@@ -122,6 +122,11 @@ export const ROUTES: RouteInfo[] = [
     title: 'Scrollable vs. auto-height',
     description: `Example: how to make ${PRODUCT_NAME} vertically scrollable`,
   },
+  {
+    href: '/examples/scrolling-a-row-into-view',
+    title: 'Scrolling a row into view',
+    description: `Example: how to scroll a ${PRODUCT_NAME} row into view`,
+  },
   {
     href: '/examples/empty-state',
     title: 'Empty state',

app/examples/scrolling-a-row-into-view/ScrollRowIntoViewExample.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Button, Grid, GridCol } from '@mantine/core';
+import { DataTable } from '__PACKAGE__';
+import { employees } from '~/data';
+
+export function ScrollRowIntoViewExample() {
+  // example-start
+  const scrollToFirstRow = () => {
+    document.querySelector('[data-row-index="1"]')?.scrollIntoView(false);
+  };
+
+  const scrollToFirstAlicia = () => {
+    document.querySelector('[data-row-first-name="Alicia"]')?.scrollIntoView(false);
+  };
+
+  const scrollToLastRow = () => {
+    document.querySelector(`[data-row-index="${employees.length - 1}"]`)?.scrollIntoView(false);
+  };
+
+  return (
+    <>
+      <Grid mb="md">
+        <GridCol span={{ md: 4, lg: 3 }}>
+          <Button fullWidth onClick={scrollToFirstRow}>
+            Scroll to first row
+          </Button>
+        </GridCol>
+        <GridCol span={{ md: 4, lg: 6 }}>
+          <Button fullWidth onClick={scrollToFirstAlicia}>
+            Scroll to first “Alicia”
+          </Button>
+        </GridCol>
+        <GridCol span={{ md: 4, lg: 3 }}>
+          <Button fullWidth onClick={scrollToLastRow}>
+            Scroll to last row
+          </Button>
+        </GridCol>
+      </Grid>
+      <DataTable
+        records={employees}
+        customRowAttributes={({ firstName }, recordIndex) => ({
+          'data-row-first-name': firstName,
+          'data-row-index': recordIndex,
+        })}
+        // example-skip more table props
+        height={500}
+        withTableBorder
+        withColumnBorders
+        striped
+        columns={[
+          { accessor: 'firstName' },
+          { accessor: 'lastName' },
+          { accessor: 'email' },
+          { accessor: 'department.name', title: 'Department' },
+          { accessor: 'department.company.name', title: 'Company', noWrap: true },
+          { accessor: 'department.company.streetAddress', title: 'Address', noWrap: true },
+          { accessor: 'department.company.city', title: 'City' },
+          { accessor: 'department.company.state', title: 'State', textAlign: 'right' },
+        ]}
+        rowColor={({ firstName }, index) =>
+          index === 0 || index === employees.length - 1 || firstName === 'Alicia' ? 'red' : undefined
+        }
+        // example-resume
+      />
+    </>
+  );
+  // example-end
+}

app/examples/scrolling-a-row-into-view/page.tsx

@@ -0,0 +1,57 @@
+import { Code, Text } from '@mantine/core';
+import type { Route } from 'next';
+import { CodeBlock } from '~/components/CodeBlock';
+import { ExternalLink } from '~/components/ExternalLink';
+import { InternalLink } from '~/components/InternalLink';
+import { PageNavigation } from '~/components/PageNavigation';
+import { PageTitle } from '~/components/PageTitle';
+import { Txt } from '~/components/Txt';
+import { readCodeFile } from '~/lib/code';
+import { getRouteMetadata } from '~/lib/utils';
+import { ScrollRowIntoViewExample } from './ScrollRowIntoViewExample';
+
+const PATH: Route = '/examples/scrolling-a-row-into-view';
+
+export const metadata = getRouteMetadata(PATH);
+
+export default async function ScrollableVsAutoHeightExamplePage() {
+  const code = await readCodeFile<string>(`${PATH}/ScrollRowIntoViewExample.tsx`);
+
+  return (
+    <>
+      <PageTitle of={PATH} />
+      <Txt>
+        One possible way to scroll a specific row into view is to use the{' '}
+        <InternalLink to="/examples/custom-row-or-cell-attributes">
+          <Code>customRowAttributes</Code> property
+        </InternalLink>{' '}
+        to add a custom <Code>data-*</Code> attribute to the row, and then use{' '}
+        <ExternalLink to="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector">
+          <Code>document.querySelector</Code>
+        </ExternalLink>{' '}
+        to find the row and call{' '}
+        <ExternalLink to="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView">
+          <Code>scrollIntoView</Code>
+        </ExternalLink>{' '}
+        on it.
+      </Txt>
+      <ScrollRowIntoViewExample />
+      <Txt idea title="Keep in mind">
+        <Text inherit mb="xs">
+          Due to the fact that the <Code>DataTable</Code> header is fixed, using <Code>scrollIntoView()</Code> with no
+          arguments, or the equivalent{' '}
+          <Code style={{ whiteSpace: 'nowrap' }}>{"scrollIntoView({ block: 'start' })"}</Code>, will not work as
+          expected.
+        </Text>
+        <Text inherit>
+          You should use <Code>scrollIntoView(false)</Code>, or the equivalent{' '}
+          <Code style={{ whiteSpace: 'nowrap' }}>{"scrollIntoView({ block: 'end' })"}</Code> instead.
+        </Text>
+      </Txt>
+      <Txt>Here is the code:</Txt>
+      <CodeBlock code={code} />
+      <Txt>Head over to the next example to discover more features.</Txt>
+      <PageNavigation of={PATH} />
+    </>
+  );
+}