Component for representing a list. It takes an array called datasource and calls renderRow(row, index) for every row. Furthermore, the header and the footer can be specified with renderRow
and renderHeader
respectivly.
To render a list the List
component is used. The items in the list are rendered using the renderRow
prop and the data for the row is specified using the dataSource
prop.
The list items are created using the ListItem
component.
<List
dataSource={this.state.data}
renderRow={(row) => <ListItem>{row}</ListItem>}
/>
There are also two props called renderHeader
and renderFooter
that can be used to render an element at the top or bottom of the list. The ListHeader
component can be used to render a header.
<List
dataSource={this.state.data}
renderRow={this.renderRow}
renderHeader={() => <ListHeader>Stuff</ListHeader>}
/>
Name | Type Default Value | Description |
---|---|---|
modifier | string | Specify modifier name to specify custom styles. Optional. |
dataSource |
string
[] |
Source of the list data. Should be an array. Optional. |
renderRow |
function
() => null |
Function to specify the rendering function for every element in in the dataSource. Optional. |
renderHeader |
function
() => null |
Function to specify the rendering function for the header Optional. |
renderFooter |
function
() => null |
Function to specify the rendering function for the footer Optional. |
Name | Description |
---|---|
inset | Inset list that doesn’t cover the whole width of the parent. |
noborder | A list with no borders at the top and bottom. |
If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.