## Examples

### Basic


import DataListBasic from "./DataListBasic.tsx?raw"

<LiveExample src={DataListBasic} />

### Compact


import DataListCompact from "./DataListCompact.tsx?raw"

<LiveExample src={DataListCompact} />

### Checkboxes, actions and additional cells


import DataListCheckboxes from "./DataListCheckboxes.tsx?raw"

<LiveExample src={DataListCheckboxes} />

### Actions: single and multiple


import DataListActions from "./DataListActions.tsx?raw"

<LiveExample src={DataListActions} />

### Expandable


import DataListExpandable from "./DataListExpandable.tsx?raw"

<LiveExample src={DataListExpandable} />

### Mixed expandable


import DataListMixedExpandable from "./DataListMixedExpandable.tsx?raw"

<LiveExample src={DataListMixedExpandable} />

### Width modifiers


import DataListWidthModifiers from "./DataListWidthModifiers.tsx?raw"

<LiveExample src={DataListWidthModifiers} />

### Clickable rows


import DataListClickableRows from "./DataListClickableRows.tsx?raw"

<LiveExample src={DataListClickableRows} />

### Controlling text


import DataListControllingText from "./DataListControllingText.tsx?raw"

<LiveExample src={DataListControllingText} />

### Draggable

To enable drag and drop, wrap the `<DataList>` component with `<DragDropSort>`, define the `variant` property as "DataList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children should not be passed to the wrapped component.

Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.

```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx"

```

### Draggable with multiple drop zones

To enable multiple drop zones, and create the desired amount of `<Droppable>` components within a `<DragDropContainer>`.

Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DataList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DataList".

Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.

```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx"

```

### Small grid breakpoint


import DataListSmGridBreakpoint from "./DataListSmGridBreakpoint.tsx?raw"

<LiveExample src={DataListSmGridBreakpoint} />