# GridList A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions. ## Content `GridList` follows the [Collection Components API](collections.html?component=GridList), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. ```tsx import {GridList, GridListItem} from 'vanilla-starter/GridList'; function Example() { let options = [ { id: 1, name: 'Aardvark' }, { id: 2, name: 'Cat' }, { id: 3, name: 'Dog' }, { id: 4, name: 'Kangaroo' }, { id: 5, name: 'Koala' }, { id: 6, name: 'Penguin' }, { id: 7, name: 'Snake' }, { id: 8, name: 'Turtle' }, { id: 9, name: 'Wombat' } ]; return ( /*- begin highlight -*/ {(item) => {item.name}} /*- end highlight -*/ ); } ``` ### Asynchronous loading Use [renderEmptyState](#empty-state) to display a spinner during initial load. To enable infinite scrolling, render a `` at the end of the list. Use whatever data fetching library you prefer – this example uses `useAsyncList` from `react-stately`. ```tsx import {Collection, GridListLoadMoreItem} from 'react-aria-components'; import {GridList, GridListItem} from 'vanilla-starter/GridList'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; import {useAsyncList} from '@react-stately/data'; interface Character { name: string } function AsyncLoadingExample() { let list = useAsyncList({ async load({ signal, cursor }) { if (cursor) { cursor = cursor.replace(/^http:\/\//i, 'https://'); } let res = await fetch( cursor || `https://swapi.py4e.com/api/people/?search=`, { signal } ); let json = await res.json(); return { items: json.results, cursor: json.next }; } }); return ( ( )}> {(item) => {item.name}} {/*- begin highlight -*/} {/*- end highlight -*/} ); } ``` ### Links Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=GridList#selection-behavior) for more details. ```tsx import {GridList, GridListItem} from 'vanilla-starter/GridList'; {/*- begin highlight -*/} Adobe {/*- end highlight -*/} Apple Google Microsoft ``` ### Empty state ```tsx import {GridList} from 'vanilla-starter/GridList'; 'No results found.'}> {[]} ``` ## Selection and actions Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.html?component=GridList) for more details. ```tsx import type {Selection} from 'react-aria-components'; import {GridList, GridListItem} from 'vanilla-starter/GridList'; import {useState} from 'react'; function Example(props) { let [selected, setSelected] = useState(new Set()); return (
alert(`Clicked ${key}`)} > Lettuce Tomato Cheese Tuna Salad Egg Salad Ham

Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}

); } ``` ## Drag and drop GridList supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the `useDragAndDrop` hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the [drag and drop guide](dnd.html?component=GridList) to learn more. ```tsx import {useListData} from 'react-stately'; import {GridList, GridListItem} from 'vanilla-starter/GridList'; import {useDragAndDrop} from 'react-aria-components'; function Example() { let list = useListData({ initialItems: [ {id: 1, name: 'Adobe Photoshop'}, {id: 2, name: 'Adobe XD'}, {id: 3, name: 'Adobe Dreamweaver'}, {id: 4, name: 'Adobe InDesign'}, {id: 5, name: 'Adobe Connect'} ] }); let {dragAndDropHooks} = useDragAndDrop({ getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).name})), onReorder(e) { if (e.target.dropPosition === 'before') { list.moveBefore(e.target.key, e.keys); } else if (e.target.dropPosition === 'after') { list.moveAfter(e.target.key, e.keys); } } }); return ( {item => {item.name}} ); } ``` ## API ```tsx