Skip to content

feat: scrollTo add align support #1469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 11 commits into from
Apr 7, 2026
Merged

feat: scrollTo add align support #1469

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b4bc3f7
feat: scrollTo add align
Mar 31, 2026
65f7b76
Update README.md
EmilyyyLiu Mar 31, 2026
74f51a1
Update src/Table.tsx
EmilyyyLiu Mar 31, 2026
1027f17
Update src/interface.ts
EmilyyyLiu Mar 31, 2026
833f5ce
fix: virtual table scrollTo align support
Apr 1, 2026
c71b494
fix: implement real nearest behavior with offset in Table scrollTo
Apr 1, 2026
ec47eb8
fix: improve virtual table align handling
Apr 1, 2026
e2c1aea
test: add test for nearest align with element above viewport
Apr 2, 2026
3230c6b
refactor: unify align handling with switch statement
Apr 2, 2026
d31bfef
fix: refine scrollIntoView with offset handling
Apr 2, 2026
9820b38
fix: simplify offset handling - scrollIntoView first then add offset
Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,25 @@ React.render(<Table columns={columns} data={data} />, mountNode);
| summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
| rowHoverable | boolean | true | Table hover interaction |

### Methods

#### scrollTo

Table component exposes `scrollTo` method to scroll to a specific position:

```js
const tblRef = useRef();
tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });
```

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| index | number | - | Row index to scroll to |
| top | number | - | Scroll to specific top position (in px) |
| key | string | - | Scroll to row by row key |
| offset | number | - | Additional offset from target position |
| align | `start` \| `center` \| `end` \| `nearest` | `nearest` | Alignment of the target element within the scroll container. `start` aligns to top, `center` to middle, `end` to bottom, `nearest` automatically chooses the closest alignment |

## Column Props

| Name | Type | Default | Description |
Expand Down
30 changes: 30 additions & 0 deletions docs/examples/scrollY.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,36 @@ const Test = () => {
>
Scroll To Key 6 + Offset -10
</button>
<button
onClick={() => {
tblRef.current?.scrollTo({
key: 9,
align: 'start',
});
}}
>
Scroll To key 9 (align: start)
</button>
<button
onClick={() => {
tblRef.current?.scrollTo({
key: 9,
align: 'center',
});
}}
>
Scroll To key 9 (align: center)
</button>
<button
onClick={() => {
tblRef.current?.scrollTo({
key: 9,
align: 'end',
});
}}
>
Scroll To key 9 (align: end)
</button>
<Table
ref={tblRef}
columns={columns}
Expand Down
25 changes: 18 additions & 7 deletions src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,10 @@ const EMPTY_SCROLL_TARGET = {};
export type SemanticName = 'section' | 'title' | 'footer' | 'content';
export type ComponentsSemantic = 'wrapper' | 'cell' | 'row';

export interface TableProps<RecordType = any>
extends Omit<LegacyExpandableProps<RecordType>, 'showExpandColumn'> {
export interface TableProps<RecordType = any> extends Omit<
LegacyExpandableProps<RecordType>,
'showExpandColumn'
> {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
Expand Down Expand Up @@ -349,7 +351,7 @@ const Table = <RecordType extends DefaultRecordType>(
scrollTo: config => {
if (scrollBodyRef.current instanceof HTMLElement) {
// Native scroll
const { index, top, key, offset } = config;
const { index, top, key, offset, align = 'nearest' } = config;

if (validNumberValue(top)) {
// In top mode, offset is ignored
Expand All @@ -361,12 +363,21 @@ const Table = <RecordType extends DefaultRecordType>(
);
if (targetElement) {
if (!offset) {
// No offset, use scrollIntoView for default behavior
targetElement.scrollIntoView();
targetElement.scrollIntoView({ block: align });
} else {
// With offset, use element's offsetTop + offset
const container = scrollBodyRef.current;
const elementTop = (targetElement as HTMLElement).offsetTop;
scrollBodyRef.current.scrollTo({ top: elementTop + offset });
const elementHeight = (targetElement as HTMLElement).offsetHeight;
const containerHeight = container.clientHeight;

const alignMap: Record<ScrollLogicalPosition, number> = {
start: elementTop,
end: elementTop + elementHeight - containerHeight,
center: elementTop + (elementHeight - containerHeight) / 2,
nearest: elementTop,
};
const targetTop = alignMap[align] ?? elementTop;
container.scrollTo({ top: targetTop + offset });
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
}
}
}
Expand Down
4 changes: 3 additions & 1 deletion src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@ export type ScrollConfig = {
* Additional offset in pixels to apply to the scroll position.
* Only effective when using `key` or `index` mode.
* Ignored when using `top` mode.
* When offset is set, the target element will always be aligned to the top of the container.
* When offset is set, the target element will be aligned according to the `align` parameter.
*/
offset?: number;

align?: ScrollLogicalPosition;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
};

export type Reference = {
Expand Down
42 changes: 21 additions & 21 deletions tests/__snapshots__/ExpandRow.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
/>
<th
class="rc-table-cell"
Expand Down Expand Up @@ -202,7 +202,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -230,7 +230,7 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -284,7 +284,7 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
/>
<th
class="rc-table-cell"
Expand Down Expand Up @@ -357,7 +357,7 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -385,7 +385,7 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -525,12 +525,12 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
/>
<th
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
scope="col"
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 5;"
style="inset-inline-start: 0px; --z-offset: 7; --z-offset-reverse: 5;"
>
Name
</th>
Expand All @@ -543,7 +543,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
<th
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
scope="col"
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 1;"
style="inset-inline-end: 0px; --z-offset: 3; --z-offset-reverse: 1;"
>
Gender
</th>
Expand Down Expand Up @@ -600,15 +600,15 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-expanded"
/>
</td>
<td
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 5;"
style="inset-inline-start: 0px; --z-offset: 7; --z-offset-reverse: 5;"
>
Lucy
</td>
Expand All @@ -619,7 +619,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
</td>
<td
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 1;"
style="inset-inline-end: 0px; --z-offset: 3; --z-offset-reverse: 1;"
>
F
</td>
Expand Down Expand Up @@ -647,15 +647,15 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-expanded"
/>
</td>
<td
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 7; --z-offset-reverse: 5;"
style="inset-inline-start: 0px; --z-offset: 7; --z-offset-reverse: 5;"
>
Jack
</td>
Expand All @@ -666,7 +666,7 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
</td>
<td
class="rc-table-cell rc-table-cell-fix rc-table-cell-fix-end rc-table-cell-fix-end-shadow"
style="inset-inline-end: 0; --z-offset: 3; --z-offset-reverse: 1;"
style="inset-inline-end: 0px; --z-offset: 3; --z-offset-reverse: 1;"
>
M
</td>
Expand Down Expand Up @@ -991,7 +991,7 @@ exports[`Table.Expand > work in expandable fix 1`] = `
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
/>
<th
class="rc-table-cell"
Expand Down Expand Up @@ -1064,7 +1064,7 @@ exports[`Table.Expand > work in expandable fix 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -1092,7 +1092,7 @@ exports[`Table.Expand > work in expandable fix 1`] = `
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 8; --z-offset-reverse: 4;"
style="inset-inline-start: 0px; --z-offset: 8; --z-offset-reverse: 4;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -1167,7 +1167,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
</th>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 7;"
style="inset-inline-start: 0px; --z-offset: 5; --z-offset-reverse: 7;"
/>
</tr>
</thead>
Expand Down Expand Up @@ -1237,7 +1237,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 7;"
style="inset-inline-start: 0px; --z-offset: 5; --z-offset-reverse: 7;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down Expand Up @@ -1265,7 +1265,7 @@ exports[`Table.Expand > work in expandable fix 2`] = `
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix rc-table-cell-fix-start rc-table-cell-fix-start-shadow"
style="inset-inline-start: 0; --z-offset: 5; --z-offset-reverse: 7;"
style="inset-inline-start: 0px; --z-offset: 5; --z-offset-reverse: 7;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
Expand Down
Loading