JSFiddle - React, Tailwind, and code Playground

Copyright © 2018 by Isaac J. Lee, all rights reserved.

HTML

<div id='myInstructions'>
    You can click on the table headers to sort.
</div>

<div id='mySearchBar'>
    <label for='myInput'>Search in Description: </label>
    <input id='myInput' type='text' onkeyup='searchDescription();' autofocus/>
</div>

<table id='myTable'>
    <thead>
        <tr>
            <th title='Click to sort by name' onclick='sortBy("name");'>Name</th>
            <th title='Click to sort by description' onclick='sortBy("description");'>Description</th>
            <th title='Click to sort by child ID' onclick='sortBy("child.id");'>Child ID</th>
        </tr>
    </thead>

    <tbody id='myTableBody'>
        <!-- Will be dynamically generated -->
    </tbody>
</table>

SCSS

#myInstructions {
    margin-bottom: 24px;

    color: steelblue;
    font-family: 'Arial';
    font-size: 24px;
    font-weight: bold;
}

#mySearchBar {
    margin-bottom: 24px;

    label {
        font-family: 'Arial';
        font-size: 16px;
        font-weight: bold;
    }

    input {
        width: 240px;
        font-size: 16px;
    }
}

#myTable {
    th, td {
        border-bottom: 1px solid #ddd;
        padding: 8px 12px;
        
        font-family: 'Arial';
    }

    th {
        background-color: #eee;

        &:hover {
            background-color: #ddd;
            cursor: pointer;
        }
    }
}

JavaScript

/**************************************************

    Get mock data

**************************************************/
// `data` is what we get from the backend.
// `dataFiltered` is what we display on the table.
const data = [
    {
        id: 0,
        name: 'V',
        description: 'v is for victory',
        child: {
            id: 'A273',
            name: 'dog'
        }
    },
    {
        id: 1,
        name: 'e',
        description: undefined,
        child: {
            id: 'A48',
            name: 'cat'
        }
    },
    {
        id: 2,
        name: 'o',
        description: undefined,
        child: {
            id: 'B415',
            name: 'dodo'
        }
    },
    {
        id: 3,
        name: 'h',
        description: 'h is for hello world, this is my first program',
        child: {
            id: 'B30',
            name: 'bison'
        }
    },
    {
        id: 4,
        name: 'U',
        description: 'u is for user experience',
        child: {
            id: 'A706',
            name: 'bear'
        }
    },
    {
        id: 5,
        name: 'y',
        description: 'y is for yo-yo',
        child: {
            id: 'B261',
            name: 'alligator'
        }
    }
];

// Initially, display all data
let dataFiltered = data.slice();


/**************************************************

    Update the table

**************************************************/
let myTableBody = document.getElementById('myTableBody');

const displayTable = (data) => {
    myTableBody.innerHTML = '';

    data.forEach((datum, index) => {
        let row = myTableBody.insertRow();

        // Display name
        let cell_name = row.insertCell(0);
        let node_name = document.createTextNode(datum.name);

        cell_name.appendChild(node_name);


        // TODO #1:
        // 
        // Based on the code above, let's display the
        // `description` and `child's id`, too.
        // 
        // Note, because description is...