# 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` |