@rc-component/listy

_{Part of the Ant Design ecosystem.}

📜 Virtualized React list component with grouping and sticky header support.

English | 简体中文

Highlights

Area	Support
Purpose	Virtualized React list component with grouping and sticky header support.
Package	@rc-component/listy
Release	@rc-component/np / rc-np

Install

npm install @rc-component/listy

Usage

import Listy from '@rc-component/listy';
import '@rc-component/listy/assets/index.css';

const items = Array.from({ length: 100 }, (_, index) => ({ id: index, name: `Item ${index}` }));

export default () => (
  <Listy
    items={items}
    height={240}
    itemHeight={32}
    rowKey="id"
    itemRender={(item) => <div>{item.name}</div>}
  />
);

API

Prop	Description	Type	Default
items	List data source.	T[]	[]
rowKey	Resolve item identity.	keyof T | (item: T) => React.Key	required
itemRender	Render each item.	(item: T, index: number) => React.ReactNode	required
height	Viewport height.	number	-
itemHeight	Estimated item height.	number	-
group	Group configuration.	{ key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode }	-
sticky	Enable sticky group headers.	boolean	false
virtual	Enable virtual scrolling.	boolean	true
scrollWidth	Real content width. Only takes effect when virtual is enabled; a horizontal scrollbar shows up once set.	number	-
direction	Layout direction; set rtl for right-to-left.	'ltr' | 'rtl'	'ltr'
onScroll	Triggered when the inner scroll container scrolls.	React.UIEventHandler<HTMLElement>	-
prefixCls	Component class name prefix.	string	rc-listy

ListyRef

Method	Description
scrollTo(config)	Scroll to a position, item key, or group key.

Development

npm install
npm start
npm test
npm run lint
npm run compile

The dumi site runs at http://localhost:8000.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command when the package uses the shared release flow.

License

@rc-component/listy is released under the MIT license.