---
id: Data list
section: components
---

import { Fragment, useState } from 'react';

import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { css } from '@patternfly/react-styles';

import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';

## Demos

### Basic

```ts file="DataList/examples/DataListBasic.tsx" isFullscreen

```

### Expandable control in toolbar

```ts file="DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen

```

### Actionable

```ts file="DataList/examples/DataListActionable.tsx" isFullscreen

```

### Static bottom pagination

```ts file="DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen

```