Improve scrolling performance of Batch Requisition screen

Description

In the OpenLMIS-UI, we have the need to support really, really, really large tables. The HTML DOM has trouble supporting anything with that many elements. We need to support tables from 1,000 cells to around 50,000 cells.

To do this, we will create a new Angular Directive, called the OpenLMIS Table Page.

The OpenLMIS Table Page will implement virtual scrolling on the table, so that the minimum amount of table cells are rendered on the table at any given time. The page will fit in the browser window such that only the table scrolls, no other items on the page will scroll.

Mock Up

Acceptance Criteria

  • Implement cluster.js Angular Material Virtual Repeat

  • Use perfect-scrollbar to keep scrollbar always visible to users

  • Make styleguide page documenting the page and layout

  • Implement the OpenLMIS Table Page on the batch requisition screens

Changes

  • Window doesn't scroll - table vertically scrolls

    • Actions toolbar will no longer move, or overlap with table at all

    • Page header will always be visible

  • Removed border line below breadcrumbs

  • Table footer is black to be more defined

  • Better defined borders for "sticky" elements

    • A shadow that was visible when sticky elements "got stuck" is now always visible

Status

Assignee

Nick Reid

Reporter

Nick Reid

Labels

Time tracking

1h

Components

Sprint

None

Priority

Critical
Configure