       <div className='course-scores-wrap'>
           <span className='course-scores-title'>Student Scores</span>
           <ScoresExport courseId={courseId} className='pull-right'/>
-          <CoursePeriodsNavShell
-            handleSelect={@selectPeriod}
-            handleKeyUpdate={@setPeriodIndex}
-            intialActive={period_id}
-            courseId={courseId} />
+          {periodNav}
           <div className='course-scores-container' ref='tableContainer'>
             <Table
               onColumnResizeEndCallback={@onColumnResizeEndCallback}

      </div>
    else
      <div className='course-scores-wrap'>
        <span className='course-scores-title'>No Assignments Yet</span>
        <CoursePeriodsNavShell
          handleSelect={@selectPeriod}
          handleKeyUpdate={@setPeriodIndex}
          intialActive={period_id}
          courseId={courseId} />
          <div className='course-scores-container' ref='tableContainer'></div>
      </div>




    data = @getStudentRowData()

    periodNav =
      <CoursePeriodsNavShell
        handleSelect={@selectPeriod}
        handleKeyUpdate={@setPeriodIndex}
        intialActive={period_id}
        courseId={courseId} />

    rowGetter = (rowIndex) =>
      @renderStudentRow(data.rows[rowIndex])

