# Titanium.UI.TableViewRow > A table view row is an individual item in a table, organized into table view sections. - Source: https://titaniumsdk.com/docs/sdk/13.3.1/Titanium.UI.TableViewRow - Titanium SDK version: 13.3.1 - Kind: view - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 0.9 - Extends: Titanium.UI.View - Inheritance: Titanium.UI.View > Titanium.Proxy Use the [Titanium.UI.createTableViewRow](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createTableViewRow) method or **``** Alloy element to create a table view row. These may be explicitly added to [TableViewSection](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewSection.md) objects, which are applied to a [TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md). If a table section is not specified, one will be automatically created. A row's contents can be as simple as a single line of text, or comprised of a completely customized layout of child views. #### Creating Table View Rows Rows may be created using the properties directly available on the `TableViewRow` object, to achieve the following: * Row title to display the text content in the row. * Background color and background image. * Images on the left and right sides of the row. * System decorations, such as checkboxes. Alternatively, custom layouts of multiple lines of text, different fonts, and additional images or controls can be created by adding child views to the row. In this case, the row's `title` property should not be set. As events automatically bubble/propogate to parent views, a listener may be placed on the table view to detect events fired from the rows. The benefit is that it is not necessary to explicitly create a listener for every individual row. See the [TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md) description and examples section for more information about creating table rows. #### Platform Implementation Notes The `top`, `left` and other positional parameters are not used for their usual purposes, because the table view row is automatically positioned by its parent. On Android, these properties are used to position the content (title) inside the row. For example, setting `top` to 20 moves the title down from the top of the row. On iOS, these values have no effect. Also, note that the selected text color, `selectedColor`, can only be set on iOS. On Android, the text color does not change when the row is selected. #### Row Swipe Gestures (Android and iOS) A common requirement is to enable the user to interact with table rows using swipe gestures. As this event is not available for the `TableViewRow` object, it will not "bubble up" to the `TableView`, where a [Titanium.UI.TableView.swipe](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#swipe) is recognized. A typical solution is to use a standard view as a container, or wrapper, for all each row's child views, because it recognizes [Titanium.UI.View.swipe](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#swipe) events and allows them to pass to the table. Each child view should have touch events disabled, so that the container view provides a reliable source for these events. Refer to the "Row Swipe Gestures" example for a demonstration. For iOS, read the [Row Editing and Moving Modes notes on TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md) regarding the interactions between edit modes and swipes. ## Example: Simple Table View Row example Create a table view row containing a red square view. ``` js var row = Titanium.UI.createTableViewRow(); var view = Titanium.UI.createView({ backgroundColor:'red', width: 20, height: 20 }); row.add(view); ``` ## Example: Row Swipe Gestures Create a table of rows. When a row is swiped, output its ID to the log. ``` js var tableData = []; var win = Ti.UI.createWindow({ backgroundColor: 'white' }); var table = Ti.UI.createTableView({ objName: 'table' }); for (var i = 0; i <= 20; i++){ var row = Ti.UI.createTableViewRow({ className: 'row', objName: 'row', touchEnabled: true, height: 100 }); var enabledWrapperView = Ti.UI.createView({ backgroundColor:'#008FD5', objName: 'enabledWrapperView', rowID: i, width: Ti.UI.FILL, height: '100%' }); var disabledWrapperView = Ti.UI.createView({ backgroundColor:'#A2E0FF', objName: 'disabledWrapperView', touchEnabled: false, width: 300, height: '80%' }); enabledWrapperView.add(disabledWrapperView); var label = Ti.UI.createLabel({ backgroundColor:'#313F48', color: 'white', objName: 'label', text: i, touchEnabled: false, left: 0, width: 200 }); disabledWrapperView.add(label); row.add(enabledWrapperView); tableData.push(row); } table.data = tableData; table.addEventListener('swipe', function(e){ if (e.source && e.source.objName !== 'table'){ Ti.API.info('Row swiped: ' + e.source); Ti.API.info('Row swiped: ' + e.source.objName); Ti.API.info('Row ID : ' + e.source.rowID); } }); win.add(table); win.open(); ``` ## Example: Alloy XML Markup Previous simple table view row example as an Alloy view. ``` xml ``` ## Properties ### accessibilityLabel - Type: String - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 3.0.0 A succinct label associated with the table row for the device's accessibility service. See [Titanium.UI.View.accessibilityLabel](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#accessibilityLabel) description. ### backgroundSelectedColor - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 10.0.0 Background color to render when the row is selected, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). ### backgroundSelectedImage - Type: String - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 10.0.0 Background image to render when the row is selected. ### className - Type: String - Platforms: Android Class name for the row. A class name represents a unique row layout. A table view row must have a unique class name if the row layout is unique. However, use the same name for rows that have the same structural layout (even if the content is different) to provide maximum rendering performance. For example, if some rows include images and some rows do not, you would have two class names, one for image rows and one for plain rows. This property exists on iOS, but is ignored. ### color - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS Default text color of the row when not selected, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). On Android, the default text color is black if the background color is closer to white otherwise the default text color is white also `selectedColor` is not supported so the text is always displayed in this color. ### deleteButtonTitle - Type: String - Platforms: Android, iPhone, iPad, macOS Text to display on the delete button when editable is enabled When [editable](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewRow.md#editable) is enabled on the TableViewRow, use this property to change the title of the delete button. ### editable - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK Android 9.3.0, iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0 - Default: `undefined` Determines the rows' editable behavior, which allows them to be deleted by the user when the table is in `editing` or `moving` mode. If this property is not explicitly set, it will return `undefined` and the row's editable behavior will be determined by its parent table's [editable](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#editable) property. See the [Titanium.UI.TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md) description section for a full explanation of the TableView's row `editing` and `moving` modes. If you want to change the title of the delete button, use the [deleteButtonTitle](Titanium.UI.TableViewRow.deleteButtonTitle] property ### editActions - Type: Array - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 12.4.0 Specifies custom action items to be shown when when a list item is edited. For more information see the "Editing Support" section of [Titanium.UI.TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md). ### filterAlwaysInclude - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 12.2.0 - Default: `false` This row will always be visible when you filter your content. ### font - Type: Font - Platforms: Android, iPhone, iPad, macOS - Default: `System default font.` Font to use for the row title. ### footer - Type: String - Platforms: Android, iPhone, iPad, macOS - DEPRECATED since 10.0.0. Use the property instead. The footer title of the row. The `footer` property is used to assign a footer title to a row. It has the same effect as setting the `footerTitle` property of a [Titanium.UI.TableViewSection](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewSection.md). ### footerTitle - Type: String - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 10.0.0 The footer title of the row. The `footerTitle` property is used to assign a footer title to a row. It has the same effect as setting the `footerTitle` property of a [Titanium.UI.TableViewSection](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewSection.md). ### hasCheck - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Default: `false` Determines whether a system-provided checkmark is displayed on the right-hand side of the row. ### hasChild - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Default: `false` Determines whether a system-provided arrow is displayed on the right-hand side of the row. The `hasChild` flag is used to indicate to the user that clicking on the row displays more detailed information. On iOS, this is specifically used when clicking on the row navigates to the next table view in a hierarchy of table views. ### hasDetail - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 9.3.0 - Default: `false` Determines whether a system-provided detail disclosure button is displayed on the right-hand side of the row. The `hasDetail` flag is used to indicate to the user that more details are available on the row. Specifically on iOS the detail disclosure button indicates that clicking on the row results in a detail view of that item. The `detail` property in the click event is set to `true` if the click occurred on the detail button itself, `false` if the click occurs anywhere else in the row. For rows that have `hasDetail` set to false, the `detail` flag is always `false`. ### header - Type: String - Platforms: Android, iPhone, iPad, macOS - DEPRECATED since 10.0.0. Use the property instead. The header title of the row. The `header` property is used to assign a header title to a row. It has the same effect as setting the `headerTitle` property of a [Titanium.UI.TableViewSection](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewSection.md). ### headerTitle - Type: String - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 10.0.0 The header title of the row. The `headerTitle` property is used to assign a header title to a row. It has the same effect as setting the `headerTitle` property of a [Titanium.UI.TableViewSection](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewSection.md). ### indentionLevel - Type: Number - Platforms: iPhone, iPad, macOS - Default: `0` Indention level for the row. Indentation values greater than 0 indent the row text. ### leftImage - Type: String - Platforms: Android, iPhone, iPad, macOS Image to render in the left image area of the row, specified as a local path or URL. ### moveable - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK Android 9.3.0, iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0 - Default: `undefined` Determines the rows' moveable behavior, which allows them to be re-ordered by the user when the table is in `editing` or `moving` mode. If this property is not explicitly set, it will return `undefined` and the row's moveable behavior will be determined by its parent table's [moveable](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#moveable) property. See the [Titanium.UI.TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md) description section for a full explanation of the TableView's row `editing` and `moving` modes. ### opacity - Platforms: Android To set the opacity of a row on iOS, specify an aRGB value with the [Titanium.UI.TableViewRow.backgroundColor](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableViewRow.md#backgroundColor) property. ### rightImage - Type: String - Platforms: Android, iPhone, iPad, macOS Image to render in the right image area of the row, specified as a local path or URL. ### selectedBackgroundColor - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS - DEPRECATED since 10.0.0. This property has been deprecated in favor of . Background color to render when the row is selected, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). ### selectedBackgroundImage - Type: String - Platforms: Android, iPhone, iPad, macOS - DEPRECATED since 10.0.0. This property has been deprecated in favor of . Background image to render when the row is selected. ### selectedColor - Type: String | Titanium.UI.Color - Platforms: iPhone, iPad, macOS Color of the row text when the row is selected, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). ### selectionStyle - Type: Number - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK Android 10.1.0, iPhone 5.4.0, iPad 5.4.0, macOS 9.2.0 Selection style constant to control the selection color. Specify one of the constants from . Accepts: `Titanium.UI.SELECTION_STYLE_DEFAULT`, `Titanium.UI.SELECTION_STYLE_NONE` ### title - Type: String - Platforms: Android, iPhone, iPad, macOS Text to display on the row. Do not specify if using views as children of the row. ## Events ### click - Platforms: Android, iPhone, iPad, macOS Fired when a table row is clicked by the user. Event properties: - `detail` (Boolean): Indicates whether the detail button was clicked. Only `true` if `row.hasDetail` is `true` and the detail button was clicked. - `index` (Number): Row index. - `row` (Titanium.UI.TableViewRow): Table view row object. - `rowData` (Dictionary): Dictionary containing the properties set on the row. - `searchMode` (Boolean): Boolean to indicate if the table is in search mode. - `section` (Titanium.UI.TableViewSection): Table view section object, if the clicked row is contained in a section. - `x` (Number): X coordinate of the event from the `source` view's coordinate system. - `y` (Number): Y coordinate of the event from the `source` view's coordinate system. ### touchcancel - Platforms: iPhone, iPad, macOS Fired when a touch gesture is interrupted by the device. Generated in various circumstances, including an incoming call to allow the UI to clean up state. On Android and iOS, be aware that a row or table touch event and a table [scroll](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#scroll) event cannot occur concurrently. If a table begins to scroll during a touch event, the appropriate row or table `touchcancel` event fire before the `scroll` event begins. Event properties: - `x` (Number): X coordinate of the event from the `source` view's coordinate system. - `y` (Number): Y coordinate of the event from the `source` view's coordinate system. ### touchend - Platforms: iPhone, iPad, macOS Fired when a touch gesture is complete. On Android and iOS, be aware that a row or table touch event and a table [scroll](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#scroll) event cannot occur concurrently. If a table begins to scroll during a touch event, the appropriate row or table `touchcancel` event fire before the `scroll` event begins. Event properties: - `x` (Number): X coordinate of the event from the `source` view's coordinate system. - `y` (Number): Y coordinate of the event from the `source` view's coordinate system. ### touchstart - Platforms: iPhone, iPad, macOS Fired as soon as the device detects a touch gesture against this view. On Android and iOS, be aware that a row or table touch event and a table [scroll](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md#scroll) event cannot occur concurrently. If a table begins to scroll during a touch event, the appropriate row or table `touchcancel` event fire before the `scroll` event begins. Event properties: - `x` (Number): X coordinate of the event from the `source` view's coordinate system. - `y` (Number): Y coordinate of the event from the `source` view's coordinate system. ## Inherited members 89 members are inherited. Each is documented on the type that declares it. - [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.3.1/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener` - [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.3.1/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityValue`, `add`, `anchorPoint`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `children`, `clearMotionEffects`, `clipMode`, `convertPointToView`, `elevation`, `filterTouchesWhenObscured`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepHardwareMode`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longclick`, `overrideCurrentAnimation`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `remove`, `removeAllChildren`, `replaceAt`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `swipe`, `tintColor`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex` --- - This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1. - Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.