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

import { Fragment, useState } from 'react';

import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-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 ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';

## Demos

### Basic

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

```

### Expandable control in toolbar

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

```

### Actionable

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

```

### Static bottom pagination

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

```