d2l-insights-table

Provides insights classlist table react component

Usage no npm install needed!

<script type="module">
  import d2lInsightsTable from 'https://cdn.skypack.dev/d2l-insights-table';
</script>

README

insights-table

NPM version Build status

Overview

This library contains the React component for the class grid (currently a data table) used in the class insights page.

Input Props

data: REQUIRED - must match the following data structure. Extra properties can be present but will be ignored. No initial sort order is required - the table will sort by the user's lastname, firstname by default.

Note: the isSelected property is required in each data point (cannot be undefined or null). This component checks other properties for undefined or null values and appropriate messages are displayed in those cases.

Note: the predictedGrade column will only be displayed if there is at least one student with a predicted grade, and if the user has permission to see S3. Reasons for no data would include not having permission to see S3 data, not having a model defined for the course, or no event data existing yet in the BDP.

"data": {
  "students": [
    {
      "key": "unique",
      "firstName": "string",
      "lastName": "string",
      "studentId": "string",
      "studentNumber": "string",
      "currentGrade": "int",
      "predictedGrade": "int",
      "lastCourseAccess": "moment.js object with timezone and locale settings already set",
      "threadsStarted": "int",
      "postsRepliedTo": "int",
      "isSelected": "bool"
    }
  ]
}

Note: Two additional properties ("fullName" and "discussions") are added by the class-grid component for sorting purposes, for only insights-table to use.

updateStudentSelectCb: REQUIRED - Callback function that accepts at least two parameters: studentKey (matching key in students array defined above) isSelected (bool)

context: REQUIRED - object contain contextual information about the user and page. Must contain the following properties:

  • permissions: Object containing boolean permissions values for 'canAccessS3' and 'canSeeUserProgressForAllUsers'
  • orgUnit: Object that contains a definition for OrgUnitId

Outstanding Work

  • VUI style alignment (table style only looks close for now)

Version Handling

This repository has a github action that will patch version and publish the project to npm.