anchor.diff:  
     // The table of groups on the right.
     var GroupsTable = React.createClass({
  +    getDefaultProps: function() {
  +      return {
  +        columns: [
  +          {
  +            id: 'name',
  +            content: '<%= j raw I18n.t('groups.group_name') %>',
  +            sortable: true,
  +            searchable: true
  +           },
  +           {
  +             id: 'links',
  +             content: '<%= j raw I18n.t('actions') %>',
  +             sortable: false,
  +             searchable: false
  +           },
  +           {
  +             id: 'members',
  +             content: '<%= j raw I18n.t('members') %>',
  +             sortable: false,
  +             searchable: false
  +           },
  +        ],
  +        filters: [
  +          {
  +            name: 'all',
  +            text: '<%= j raw I18n.t('groups.all_grouping_counts') %>',
  +            func: function(group) {
  +              return true;
  +            }
  +          },
  +          {
  +            name: 'valid',
  +            text: '<%= j raw I18n.t('groups.valid_grouping_counts') %>',
  +            func: function(group) {
  +              return group.valid;
  +            }
  +          },
  +          {
  +            name: 'not_valid',
  +            text: '<%= j raw I18n.t('groups.not_valid_grouping_counts') %>',
  +            func: function(group) {
  +            return !group.valid;
  +            }
  +          },
  +        ]
  +      };
  +    },
       studentCheckboxClicked: function(event) {
         var value = event.currentTarget.checked;
         var group_student_id = parseInt(event.currentTarget.getAttribute('id'), 10);
  
positive.code:     }
    });
  
    AddGroupButton = React.createClass({
      <% if @assignment.group_name_autogenerated %>
        createGroup: function() {
          jQuery.ajax({
  
negative.code: 
    // Table of students, on the left.
    var GroupsStudentsTable = React.createClass({
      getDefaultProps: function() {
        return {
          columns: [
            {
              id: 'user_name',
              content: '<%= j raw I18n.t('user.user_name') %>',
              sortable: true,
              searchable: true
            },
            {
              id: 'last_name',
              content: '<%= j raw I18n.t('user.last_name') %>',
              sortable: true,
              searchable: true,
            },
            {
              id: 'first_name',
              content: '<%= j raw I18n.t('user.first_name') %>',
              sortable: true,
              searchable: true
            }
          ],
          filters: [
            {
              name: 'all',
              text: '<%= j raw I18n.t('groups.all_students') %>',
              func: function(student) {
                return student;
              }
            },
            {
              name: 'unassigned',
              text: '<%= j raw I18n.t('groups.unassigned_students') %>',
              func: function(student) {
                return !student.assigned;
              }
            },
            {
              name: 'assigned',
              text: '<%= j raw I18n.t('groups.assigned_students') %>',
              func: function(student) {
                return student.assigned;
              }
            },
            {
              name: 'inactive',
              text: '<%= j raw I18n.t('groups.inactive_students') %>',
              func: function(student) {
                return student.hidden;
              }
            }
          ]
        };
      },
      render: function() {
        var students_data = this.props.students.map(function(student) {
          var s = {};
          s['id'] = student.id;
  