How to correctly use enter/update/exit pattern for flexbox I've created w/ d3.js?

I've created a flexbox w/ d3, and want to be able to search and sort it. I got search and sort working separately-- see here: https://jsfiddle.net/yx4o0gj8/1/ -- but not together.

I got help on the sorting via the last question I posted on Stack Overflow, and it was noted that I wasn't using the enter/edit/update pattern for d3. That's why search and sort don't work together.

I've tried moving to the enter/update/exit pattern, but I'm missing something. Now the data doesn't show up at all. I've looked at examples, but they are mostly showing charts where there is a .transition().duration() attribute added. I'm not sure what the equivalent 'update' portion would be here.

        data = [
            {
                "name": "Dave",
                "dept": "Marketing",
                "region": "South",
                "items": 28
            },
            {
                "name": "Amy",
                "dept": "IT",
                "region": "West",
                "items": 46
            },
            {
                "name": "John",
                "dept": "Sales",
                "region": "North",
                "items": 35
            },
            {
                "name": "Sarah",
                "dept": "Communications",
                "region": "North",
                "items": 13
            }
        ]

        drawTable(data)
        sortTable(data)

        function drawTable(data) {

            sortTable(data)

            let table = d3.select('#datatable')

            let row = table.selectAll('.row')
                .data(data)
                .enter()
                .append('div')
                .attr('class', (d, i) => 'row row' + i)

            let grid = row
                .append('div')
                .attr('class', 'grid')

            let name = grid.append('div')
                .attr('class', 'box')
                .html(d => d.name)

            let dept = grid.append('div')
                .attr('class', 'box')
                .html(d => d.dept)

            let state = grid.append('div')
                .attr('class', 'box')
                .html(d => d.region)

            let initiative = grid.append('div')
                .attr('class', 'box')
                .html(d => d.items)

            row.exit().remove()

            let searchCell = d3.selectAll('.box')

            $('#search').keyup(debounce(function () {
                let val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

                let gridText
                let grid = d3.selectAll('.grid').each(function (j, i) {
                    if (j !== undefined) {
                        gridText = Object.values(j).toString().toLowerCase().replace(/,/g, ' ') + ' row' + i
                        let index = gridText.indexOf(val)

                        let resultRow = gridText.split(' ')
                        let rowReturn = resultRow.at(-1).replace(/\D/g, '')

                        if (index !== -1) {
                            d3.select('.row' + (rowReturn - 1)).style('display', 'contents')
                        } else {
                            d3.select('.row' + (rowReturn - 1)).style('display', 'none')
                        }
                    }

                })
            }, 300));

        }

        function sortTable(data) {
            d3.selectAll(".name,.dept,.region,.items").on('click', function () {
                d3.select(this).classed("sortAsc", d3.select(this).classed("sortAsc") ? false : true);

                let sortClasses = d3.select(this).attr("class")
                let splitSortClasses = sortClasses.split(' ')
                let sortVar = splitSortClasses[2]

                if (sortClasses.includes('sortAsc')) {
                    data.sort((a, b) => d3.ascending(a[sortVar], b[sortVar]))
                } else {
                    data.sort((a, b) => d3.descending(a[sortVar], b[sortVar]))
                }

                drawTable(data)
            })
        }

        function debounce(func, wait, immediate) {
            let timeout;
            return function () {
                let context = this, args = arguments;
                let later = function () {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                let callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };

    html,
    body {
      height: 100%;
      margin: 0;
    }

    .grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }

    .grid>div {
      display: flex;
      flex-basis: calc(100%/4 - 28px);
      justify-content: center;
      flex-direction: column;
      padding: 10px;
    }

    .box {
      margin: 0;
    }

    .box {
      color: #000;
      border: .5px solid #ccc;
    }

    .hrbox {
      background-color: #333;
      color: #fff;
    }

    input#search {
      border: 1px solid #aaa;
      padding: 10px;
      border-radius: 3px;
      width: 300px;
      margin: 15px 10px;
    }

  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  
<input type="text" id="search" placeholder="Type to search">

  <div id="table">
    <div class="grid">
      <div class="box hrbox name">
        <div>name</div>
      </div>
      <div class="box hrbox dept">
        <div>dept</div>
      </div>
      <div class="box hrbox region">
        <div>region</div>
      </div>
      <div class="box hrbox items">
        <div>items</div>
      </div>
    </div>
    <div id="data-table"></div>
  </div>

All help greatly welcomed.

Thanks.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW