Render a table of contacts and allow user to specify sort order
The file data/contacts.js
contains an array of 50 faux contacts
- DDD
makeContactRow
template function - Add Contacts Component
- File
contacts-component.js
- Move
makeContactRow
function here (named export for testing); - Reference (make a variable) for
<tbody>
where rows will go - exports default
loadContacts(contacts)
function loadContacts
function loops contacts and creates a table row for each one (don't worry about clearing rows yet).
- File
- Load Contacts Component in
index.js
- import
contacts
- import
loadContacts
- call
loadContacts
withcontacts
- import
- TDD
sort-contacts
function- takes array of contacts and sort object with field
- returns sorted array
- when done, move to
sort-contacts.js
file
- Add Sort Component
- File
sort-component.js
- Reference (make a variable for)
<select>
element - exports default
loadSort(callback)
function loadSort
listens for select change and- creates a
sortChoices
object - calls callback with
sortChoices
object
- creates a
- File
- Load Sort Component in
index.js
- import
loadSort
- import
sortContacts
- call
loadSort
with callback function - callback function
- calls
sortContacts
withcontacts
andsortChoice
- call
loadContacts
with new array
- calls
- import
- Contacts Component
- clear rows when
loadContacts
is called
- clear rows when