Fixing the headers when the user scrolls through the list

The items in the ListView widget can be grouped by a property. For example, assume that the list contains a set of names or contacts in your directory. These contacts can be grouped by the letter the contact name begins with. When you render the list, you would see that these contacts are grouped and on scrolling, the header is fixed.

How to do it…

To create fixed headers, that is, data grouped by a particular attribute, each object in the collection or the array should include that attribute. Let's create a sample array where each object contains two properties, name and startsWith; the startsWith attribute will be used to group the names in the list:

var actors = [
  {"name": "Leonardo DiCaprio", "startsWith": "L"},
  {"name": "Johnny Depp", "startsWith": "J"},
  {"name": "Al Pacino", "startsWith": "A"},
  {"name": "Bradley Cooper", "startsWith": "B"},
  {"name": "Tom Cruise", "startsWith": "T"},
  {"name": "Jude Law", "startsWith...