JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
Hi
</h1>

<table class="table">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Decedent</th>
                    <th>Date Opened</th>
                    <th>Personal Rep</th>
                    <th>Attorney</th>
                </tr>
            </thead>
            <tbody id="tbodyMatterList">
         
            </tbody>
        </table>

JavaScript

const lcAppdata = {

    matters: [{
        mid: 100,
        title: "Matter1",
        dateOpened: "01/01/17",
        decedent: "Elvis Presley",
        personalRepresentative: "Alexis Texas",
        attorneyAccountInfo: "John Holmes"
    }, {
        mid: 200,
        title: "Matter2",
        dateOpened: "01/02/16",
        decedent: "Kurt Cobain",
        personalRepresentative: "Kagney Linn Karter",
        attorneyAccountInfo: "Simon Rex"
    }, {
        mid: 300,
        title: "Matter3",
        dateOpened: "01/03/15",
        decedent: "Bob Marley",
        personalRepresentative: "Nikki Benz",
        attorneyAccountInfo: "Ron Jeremy"
    }],
    currentMatter: ''
};


function showDetail(mid){
    console.log(mid);
};

(function init(){
    for(let matter of lcAppdata.matters){
    $('#tbodyMatterList').append(`<tr onclick="showDetail( 		${matter.mid})"><th scope="row" >${matter.title}</th>
            <td bind>${matter.decedent}</td>
            <td bind>${matter.dateOpened}</td>
            <td bind>${matter.personalRepresentative}</td>
            <td bind>${matter.attorneyAccountInfo}</td></tr>`);
        
    }
    

})();