JSFiddle - React, Tailwind, and code Playground

by Thunder Hemlock

HTML

<div ng-app="myApp">
    <div ng-controller="groupColumns">
        <button ng-click="addItem()">Add Item</button> <button ng-click="changeItem()">Modify Item 1</button> <button ng-click="moveItem()">Move Item 2</button>
        <div ng-repeat="g in items | groupBy:'column' | orderBy:'column'">
            <h2>{{g.column}}</h2>
            <ul>
                <li ng-repeat="item in g.items | orderBy:'title'">{{item.id}}. {{item.label}}</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

angular.module("myApp", []).
controller("groupColumns", ['$scope', function($scope) {
    var createGroupTitle = function() {
        var columns = ['column1', 'column2', 'column3', 'column4'];
        return columns[Math.min(Math.floor(Math.random()*4),3)];
    };
    $scope.items = [
        { id: 1, label: "column1-label1", column: "column1" },
        { id: 2, label: "column2-label1", column: "column2" },
        { id: 3, label: "column2-label2", column: "column2" },
        { id: 4, label: "column3-label1", column: "column3" }
    ];
    $scope.addItem = function() {
        
        $scope.items.push({id: $scope.items.length, label: 'column4 '+$scope.items.length, group: createGroupTitle()});
    };
    $scope.changeItem = function() {
        $scope.items[0].label += "!";
    };
    $scope.moveItem = function() {
        var g = createGroupTitle();
        while($scope.items[1].column  == g) {
            g = createGroupTitle();
        }
        $scope.items[1].group = g;
    };
}]).
filter("groupBy", function() {
    var mArr = null,
        mGroupBy = null,
        mRetArr = null,
        getMemoArr = function(arr, groupBy) {
            var ret = {};
            angular.forEach(arr, function(item){
                var groupValue = item[groupBy];
                if(ret[groupValue]) {
                    ret[groupValue].push(item);
                } else {
                    ret[groupValue] = [item];
                }
            });
            return ret;
        };
    return function(arr, groupBy) {
        var newMemoArr = getMemoArr(arr, groupBy);
        if(mGroupBy !== groupBy || !angular.equals(mArr, newMemoArr)) {
            console.log("resorting...");
            mArr = newMemoArr;
            mGroupBy = groupBy;
            mRetArr = [];
            var groups = {};
            angular.forEach(arr, function(item) {
                var groupValue = item[groupBy]
                if(groups[groupValue]) {
                   ...