-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #555 from icflorescu/next
Update dev deps, add scroll row into view example
- Loading branch information
Showing
6 changed files
with
875 additions
and
731 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
app/examples/scrolling-a-row-into-view/ScrollRowIntoViewExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.