---
name: DataViewsPicker
package: '@wordpress/dataviews'
category: DataViews
status: stable
canonical: 'https://system.automattic.design/components/dataviewspicker/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviewspicker--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/dataviews/src/dataviews-picker'
---

# DataViewsPicker

```tsx
import { DataViewsPicker } from '@wordpress/dataviews';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `view` *(required)* | `\| ViewList \| ViewGrid \| ViewTable \| ViewPickerGrid \| ViewPickerTable \| ViewPickerActivity \| ViewActivity` | — |  |
| `onChangeView` *(required)* | `( view: View ) => void` | — |  |
| `fields` *(required)* | `Field< Item >[]` | — |  |
| `actions` | `ActionButton< Item >[]` | `[]` |  |
| `search` | `boolean` | `true` |  |
| `searchLabel` | `string` | `undefined` |  |
| `data` *(required)* | `Item[]` | — |  |
| `isLoading` | `boolean` | `false` |  |
| `paginationInfo` *(required)* | `{ 	totalItems: number; 	totalPages: number; }` | — |  |
| `defaultLayouts` | `SupportedLayouts` | `{ 	pickerGrid: true, 	pickerTable: true, }` |  |
| `selection` *(required)* | `string[]` | — |  |
| `onChangeSelection` *(required)* | `( items: string[] ) => void` | — |  |
| `children` | `ReactNode` | — |  |
| `config` | `{ 	perPageSizes: number[]; }` | `{ perPageSizes: [ 10, 20, 50, 100 ] }` |  |
| `itemListLabel` | `string` | — |  |
| `empty` | `ReactNode` | — |  |
| `onReset` | `( () => void ) \| false` | — |  |
| `getItemId` | `unknown` | `( item: ItemWithId ) => item.id` |  |


## Examples

### Default

```tsx
const Default = ( {
	perPageSizes = [ 10, 25, 50, 100 ],
	isMultiselectable,
	isGrouped,
	infiniteScrollEnabled,
}: {
	perPageSizes: number[];
	isMultiselectable: boolean;
	isGrouped: boolean;
	infiniteScrollEnabled: boolean;
} ) => (
	<DataViewsPickerContent
		perPageSizes={ perPageSizes }
		isMultiselectable={ isMultiselectable }
		isGrouped={ isGrouped }
		infiniteScrollEnabled={ infiniteScrollEnabled }
	/>
);
```

### With Modal

```tsx
const WithModal = ( {
	perPageSizes = [ 10, 25, 50, 100 ],
	isMultiselectable,
	isGrouped,
	infiniteScrollEnabled,
}: {
	perPageSizes: number[];
	isMultiselectable: boolean;
	isGrouped: boolean;
	infiniteScrollEnabled: boolean;
} ) => {
	const [ isModalOpen, setIsModalOpen ] = useState( false );
	const [ selectedItems, setSelectedItems ] = useState< SpaceObject[] >( [] );

	const modalActions: ActionButton< SpaceObject >[] = [
		{
			id: 'cancel',
			label: 'Cancel',
			supportsBulk: isMultiselectable,
			callback() {
				setIsModalOpen( false );
			},
		},
		{
			id: 'confirm',
			label: 'Confirm',
			isPrimary: true,
			supportsBulk: isMultiselectable,
			callback( items ) {
				setSelectedItems( items );
				setIsModalOpen( false );
			},
		},
	];

	return (
		<>
			<Stack direction="row" justify="left" gap="sm">
				<Button
					variant="primary"
					__next40pxDefaultSize
					onClick={ () => setIsModalOpen( true ) }
				>
					Open Picker Modal
				</Button>
				<Button
					onClick={ () => setSelectedItems( [] ) }
					disabled={ ! selectedItems.length }
					accessibleWhenDisabled
					__next40pxDefaultSize
				>
					Clear Selection
				</Button>
			</Stack>
			{ selectedItems.length > 0 && (
				<p>
					Selected:{ ' ' }
					{ selectedItems
						.map( ( item ) => item.name.title )
						.join( ', ' ) }
				</p>
			) }
			{ isModalOpen && (
				<>
					<style>{ `
						.components-modal__content {
							padding: 0;
						}
						.components-modal__frame.is-full-screen .components-modal__content {
							margin-bottom: 0;
						}
					` }</style>
					<Modal
						title="Select Items"
						onRequestClose={ () => setIsModalOpen( false ) }
						isFullScreen={ false }
						size="fill"
					>
						<DataViewsPickerContent
							perPageSizes={ perPageSizes }
							isMultiselectable={ isMultiselectable }
							isGrouped={ isGrouped }
							infiniteScrollEnabled={ infiniteScrollEnabled }
							actions={ modalActions }
							selection={ selectedItems.map( ( item ) =>
								String( item.id )
							) }
						/>
					</Modal>
				</>
			) }
		</>
	);
};
```