Skip to content

feat: add highlight selection to S2 TableView #9811

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

Open
yihuiliao wants to merge 14 commits into
base: main
Choose a base branch
from
+238 −81
Open

feat: add highlight selection to S2 TableView #9811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3b4b145
add selectionStyle prop
yihuiliao Mar 13, 2026
9adcfb2
current state of highlight which sorta works but idk if i like the im…
yihuiliao Mar 18, 2026
6a79fa6
fix lint
yihuiliao Mar 18, 2026
e38fa30
Merge branch 'main' into highlight-selection-tableview
yihuiliao Mar 18, 2026
7ae2ed2
Merge branch 'main' into highlight-selection-tableview
yihuiliao Mar 23, 2026
e59fe39
code cleanup + comments
yihuiliao Mar 24, 2026
0cb910e
fix lint
yihuiliao Mar 24, 2026
33cbc66
add highlight selection to the docs
yihuiliao Mar 24, 2026
8646952
add jsdoc comment
yihuiliao Mar 24, 2026
042ce49
update hcm
yihuiliao Mar 24, 2026
a31ba79
add chromatic stories
yihuiliao Mar 24, 2026
54cf8ad
Merge branch 'main' into highlight-selection-tableview
yihuiliao Mar 24, 2026
d7be568
add ids to table with links to fix styles
yihuiliao Mar 25, 2026
8a2ea10
minor cleanup
yihuiliao Mar 25, 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
30 changes: 29 additions & 1 deletion packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const meta: Meta<typeof TableView> = {
export default meta;

const StaticTable = (args: TableViewProps): ReactElement => (
<TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
<TableView aria-label="Files" styles={style({width: 320, height: 320})} {...args}>
<TableHeader>
<Column isRowHeader>Name</Column>
<Column>Type</Column>
Expand Down Expand Up @@ -106,6 +106,34 @@ let items = [
{id: 10, foo: 'Foo 10', bar: 'Bar 10', baz: 'Baz 10', yah: 'Yah long long long 10'}
];

export const CheckboxSelection: StoryObj<typeof StaticTable> = {
render: StaticTable,
args: {
selectionMode: 'multiple',
selectionStyle: 'checkbox',
selectedKeys: ['1', '2'],
styles: style({width: 500}),
onResize: undefined,
onResizeStart: undefined,
onResizeEnd: undefined,
onLoadMore: undefined
}
};

export const HighlightSelection: StoryObj<typeof StaticTable> = {
...Example,
args: {
selectionMode: 'multiple',
selectionStyle: 'highlight',
selectedKeys: ['1', '2'],
styles: style({width: 500}),
onResize: undefined,
onResizeStart: undefined,
onResizeEnd: undefined,
onLoadMore: undefined
}
};

const DynamicTable = (args: TableViewProps): ReactElement => (
<TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
<TableHeader columns={columns}>
Expand Down
32 changes: 1 addition & 31 deletions packages/@react-spectrum/s2/src/ListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,16 @@ import {
import {IconContext} from './Icon';
import {ImageContext} from './Image';
import intlMessages from '../intl/*.json';
import {isFirstItem, isLastItem, isNextSelected, isPrevSelected, useScale} from './utils';
import {Key} from '@react-types/shared';
import LinkOutIcon from '../ui-icons/LinkOut';
import {ListLayout} from 'react-stately/private/layout/ListLayout';
// @ts-ignore
import {ListState} from 'react-stately/useListState';
import {ProgressCircle} from './ProgressCircle';
import {Text, TextContext} from './Content';
import {useActionBarContainer} from './ActionBar';
import {useDOMRef} from './useDOMRef';
import {useLocale} from 'react-aria/I18nProvider';
import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
import {useScale} from './utils';
import {useSpectrumContextProps} from './useSpectrumContextProps';
import {Virtualizer} from 'react-aria-components/Virtualizer';

Expand Down Expand Up @@ -707,34 +705,6 @@ function ListSelectionCheckbox({isDisabled}: {isDisabled: boolean}) {
);
}

function isNextSelected(id: Key | undefined, state: ListState<unknown>) {
Copy link
Copy Markdown
Member Author

@yihuiliao yihuiliao Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to the utils file since it was being shared by ListView, TreeView, and TableView

if (id == null || !state) {
return false;
}
let keyAfter = state.collection.getKeyAfter(id);
return keyAfter != null && state.selectionManager.isSelected(keyAfter);
}
export function isPrevSelected(id: Key | undefined, state: ListState<unknown>) {
if (id == null || !state) {
return false;
}
let keyBefore = state.collection.getKeyBefore(id);
return keyBefore != null && state.selectionManager.isSelected(keyBefore);
}

export function isFirstItem(id: Key | undefined, state: ListState<unknown>) {
if (id == null || !state) {
return false;
}
return state.collection.getFirstKey() === id;
}
function isLastItem(id: Key | undefined, state: ListState<unknown>) {
if (id == null || !state) {
return false;
}
return state.collection.getLastKey() === id;
}

export function ListViewItem(props: ListViewItemProps): ReactNode {
let ref = useRef(null);
let {hasChildItems, ...otherProps} = props;
Expand Down
Loading
Loading