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

# DataViews

```tsx
import { DataViews } 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 >[]` | — |  |
| `search` | `boolean` | `true` |  |
| `searchLabel` | `string` | `undefined` |  |
| `actions` | `Action< Item >[]` | `[]` |  |
| `data` *(required)* | `Item[]` | — |  |
| `isLoading` | `boolean` | `false` |  |
| `paginationInfo` *(required)* | `{ 	totalItems: number; 	totalPages: number; }` | — |  |
| `defaultLayouts` | `SupportedLayouts` | `{ table: {}, grid: {}, list: {} }` |  |
| `selection` | `string[]` | — |  |
| `onChangeSelection` | `( items: string[] ) => void` | — |  |
| `onClickItem` | `( item: Item ) => void` | — |  |
| `renderItemLink` | `( 	props: { 		item: Item; 	} & ComponentProps< 'a' > ) => ReactElement` | — |  |
| `isItemClickable` | `( item: Item ) => boolean` | `() => true` |  |
| `header` | `ReactNode` | — |  |
| `getItemLevel` | `( item: Item ) => number` | — |  |
| `children` | `ReactNode` | — |  |
| `config` | `{ 	perPageSizes: number[]; }` | `{ perPageSizes: [ 10, 20, 50, 100 ] }` |  |
| `empty` | `ReactNode` | — |  |
| `onReset` | `( () => void ) \| false` | — |  |
| `getItemId` | `unknown` | `( item: ItemWithId ) => item.id` |  |


## Examples

### Layout Table

```tsx
const LayoutTable = () => <DataViews
    containerHeight="auto"
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;
```

### Layout Grid

```tsx
const LayoutGrid = () => <DataViews
    containerHeight="auto"
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;
```

### Layout List

```tsx
const LayoutList = () => <DataViews
    containerHeight="auto"
    fullWidth={false}
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;
```

### Layout Activity

```tsx
const LayoutActivity = () => <DataViews
    containerHeight="auto"
    fullWidth={false}
    groupBy={false}
    groupByLabel
    hasClickableItems
    perPageSizes={[ 10, 25, 50, 100 ]}
    showMedia />;
```

### Layout Custom

```tsx
const LayoutCustom = () => <DataViews containerHeight="auto" />;
```

### Empty

```tsx
const Empty = () => <DataViews containerHeight="auto" customEmpty={false} isLoading={false} />;
```

### Minimal UI

```tsx
const MinimalUI = () => <DataViews containerHeight="auto" />;
```

### Free Composition

```tsx
const FreeComposition = () => <DataViews containerHeight="auto" />;
```

### With Card

```tsx
const WithCard = () => <DataViews containerHeight="auto" />;
```

### Infinite Scroll

```tsx
const InfiniteScroll = () => <DataViews containerHeight="auto" />;
```