# Data List
The **DataList** widget is designed to display a collection of items in a scrollable list format. Each item in the list is rendered as a miniature, configurable form, making it an ideal choice for displaying and editing detailed records in a compact space.
It supports searching, selection, and inline editing, providing a rich, interactive experience for managing lists of complex data.
## Data Binding
Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.
### Input
| **Property** | **Type** | **Description** |
| ----------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **`onChange`** | `Object` | Fired when a field within a list item is updated. The payload is the complete data object for the modified item. |
| **`onSelectionChange`** | `Object` or `Array` | Fired when a user selects an item. The payload is the selected item's data object or an array of objects if multi-selection is enabled. |
| **`onDelete`** | `Object` or `String` | Fired when an item is deleted. The payload is the key of the deleted item. |
### Output
| **Property** | **Type** | **Description** |
| ----------------- | --------- | -------------------------------------------------------------------------------------- |
| **`data`** | `Array` | An array of data objects to be displayed in the list. |
| **`searchValue`** | `String` | Programmatically sets the search value to filter the list. |
| **`editable`** | `Boolean` | Programmatically enables or disables the editing capability for all items in the list. |
#### Automatic Configuration
If you provide data to the widget without pre-defining any data fields, the widget will automatically inspect the first data record. It will generate a field for each property, infer the data type (`text`, `number`, `dateTime`, etc.), and apply default settings. These automatically generated fields will then appear in the configuration panel for you to customize further.
## Configuration
### Settings
#### Appearance
These properties control the layout and styling of the fields within each list item.
| **Label** | **Description** | **Type** | **Property** |
| ------------------ | ----------------------------------------------------------------------------- | -------- | --------------------- |
| **Column Count** | Sets the number of columns used to arrange fields within each list item. | String | `colCount` |
| **Label Location** | Specifies where to display field labels relative to the editors. | String | `labelLocation` |
| **Label Mode** | Defines how labels are displayed (`Static`, `Floating`, `Hidden`, `Outside`). | String | `labelMode` |
| **Show Colon** | If `true`, adds a colon after each field label text. | Boolean | `showColonAfterLabel` |
#### Data Handling
These properties control the interactive features of the list.
| **Label** | **Description** | **Type** | **Property** |
| --------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | --------------------- |
| **Selection Mode** | Allows `single` or `multiple` item selection. | String | `selectionMode` |
| **Allow Searching** | Adds a search box to filter the list based on user input. | Boolean | `allowSearching` |
| **Allow Updating** | Allows users to edit the fields within each list item. | Boolean | `allowUpdating` |
| **Allow Deleting** | Allows users to delete items from the list. | Boolean | `allowDeleting` |
| **Show All Fields On Edit** | If `true`, the data payload for update events will include all fields from the item, not just the modified one. | Boolean | `showAllFieldsOnEdit` |
### Data Fields
This is where you define the fields that make up the content of each item in your list.
| **Label** | **Description** | **Type** | **Property** |
| ----------------- | ----------------------------------------------------------------------- | -------- | ------------ |
| **Data Field** | The field from your data source that this item is bound to. | String | `dataField` |
| **Label** | The user-friendly text displayed as the field's label. | String | `label` |
| **Column Span** | The number of columns the field should occupy within the item's layout. | Integer | `colSpan` |
| **Visible** | Toggles the visibility of the field. | Boolean | `visible` |
| **Editor Widget** | The editor to use for displaying and editing this field. | String | `widget` |
#### Editor Widget Options
Each `widget` type has its own set of specific configuration options.
**Number (`number`) / Slider (`slider`)**
| **Label** | **Description** | **Type** | **Property** |
| ------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------------------- |
| **Minimum** | The minimum allowed value. | Number | `min` |
| **Maximum** | The maximum allowed value. | Number | `max` |
| **Default Value** | The initial value of the editor. | Number | `defaultValue` |
| **Precision** | (`number` only) The number of decimal places to allow. | Number | `precision` |
| **Currency** | (`number` only) A currency symbol or code to display (e.g., $, €, EUR). | String | `currency` |
| **Handle Large Numbers** | (`number` only) Formats large numbers with abbreviations (e.g., 1,200,000 becomes 1.2M). | Boolean | `handleLargeNumber` |
**Dropdown (`dropdown`) / Tags (`tags`)**
| **Label** | **Description** | **Type** | **Property** |
| -------------------- | ----------------------------------------------------------------------------------------------------- | -------- | -------------- |
| **Discover Options** | If `true`, automatically populates the dropdown options from the unique values in this column's data. | Boolean | `discover` |
| **Options** | A comma-separated list of predefined options. | String | `options` |
| **Default Value** | The initial selected value. | String | `defaultValue` |
**Switch (`switch`)**
| **Label** | **Description** | **Type** | **Property** |
| --------------------- | -------------------------------------- | -------- | ----------------- |
| **Switched On Text** | Text displayed when the switch is ON. | String | `switchedOnText` |
| **Switched Off Text** | Text displayed when the switch is OFF. | String | `switchedOffText` |
**Date/Time (`dateTime`)**
| **Label** | **Description** | **Type** | **Property** |
| ---------------------- | -------------------------------------------------------------------------- | -------- | ------------------- |
| **Date Type** | The type of picker to display: `Date Only`, `Time Only`, or `Date & Time`. | String | `dateType` |
| **Format Description** | Choose between a `Preset` format or an `Explicit`, custom format. | String | `formatDescription` |
**Media (`media`)**
| **Label** | **Description** | **Type** | **Property** |
| ---------------------- | ------------------------------------------------------------------------------- | -------- | ------------------ |
| **Is Central Element** | If `true`, the media is displayed as a large, central element in the edit form. | Boolean | `isCentralElement` |
| **Thumbnail Size** | The height (in pixels) of the media thumbnail displayed in the grid cell. | Integer | `thumbnailSize` |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets/display-widgets/data-list.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.