JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">    
    <script type="text/html" id="content-template">  

        <tr data-bind="css: { 'firstRow': $index() % 2 }">
            <td><span data-bind="text: $index() + 1"></span></td>
            <td><span data-bind="visible: $parent.showItem($index()), text: Folder"></span></td>
            <td><span data-bind="text: Location"></span></td>                    
        </tr>
    </script>
</table>
<div data-bind="visible: loaded()">        
    <div id="data" data-bind="template: { name: 'content-template', foreach: contents }"></div> 
</div>

JavaScript

ko.applyBindings({
    loaded: ko.observable(true),
    contents: [
        { Folder: 'aaa', Location: 'loc1' },
        { Folder: 'ccc', Location: 'loc2' },
        { Folder: 'bbb', Location: 'loc3' }
        ],
    showItem: function(index) {
        if( index == 0 )
            return true;
        
        return this.contents[index - 1].Folder != this.contents[index].Folder;
    }
});