Prototype of DataTables in React Dash and follow on work

[alexiscott]

This ticket relates to #11 . In order to know whether DataTables will resolve the responsive issues that we have had with Fixed Data Table on Georgia Schools we wanted to try using a JS library that handled responsiveness as well as large amounts of data, accessibility and internationalisation.

[alexiscott]

Table of Contents

1. DKAN
   1. Prototype of DataTables
      1. Documentation
   2. NOTES FROM DEMO and follow up work.
   3. JS options
   4. Style options
      1. For large data use server side:
   5. Beyond the prototype
      1. React Dash example page of responsive data tables.
      2. SCSC demo of responsive data tables

DKAN

Prototype of DataTables

Documentation

1. How to load datatables.

   This required the responsive extension, which can be got via the Builder

   $('#myTable').DataTable( {
       responsive: true
   } );
   

   https://datatables.net/blog/2014-07-16

   Shows different type of responsive display:

   https://datatables.net/extensions/responsive/examples/

2. Bootstrap modal

   https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
   https://datatables.net/reference/option/responsive

3. Mobile stacking

   https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

4. With react

   https://medium.com/@zbzzn/integrating-react-and-datatables-not-as-hard-as-advertised-f3364f395dfa

5. JSON use

   https://datatables.net/examples/ajax/simple.html

6. Data Flow

   Data is fed in from different settings.js example operationSettings.js files in custom_dash, then we have a
   structure like Regions > Region > type > data and an array like this:

   data: [
     [
       {'Scoring Criteria': 'Meets Standard: The school meets all mission-specific goals included in its charter contract.', Points: 5},
       {'Scoring Criteria': 'Does Not Meet Standard: The school fails to meet at least one mission-specific goal included in its charter contract.', Points: 0}
     ]
   ],
   

   What is then received in react dash src/components/DataTable.js is a single
   array with each of the object as per above, like this.

   [
       {'Scoring Criteria': 'Meets Standard: The school meets all mission-specific goals included in its charter contract.', Points: 5},
       {'Scoring Criteria': 'Does Not Meet Standard: The school fails to meet at least one mission-specific goal included in its charter contract.', Points: 0}
     ]
   [[file+sys:///Users/alex/workspace/DKAN/DASH/12/prototype/STATIC/script.js][script.js]]
   

   Which is then pulled from it's array so we just have the objects, like so:
   let data = this.props.data[0] || [];

   {'Scoring Criteria': 'Meets Standard: The school meets all mission-specific goals included in its charter contract.', Points: 5},
   {'Scoring Criteria': 'Does Not Meet Standard: The school fails to meet at least one mission-specific goal included in its charter contract.', Points: 0}
   

   We can have enough information to form the table, as we can see that in each
   object the key is the table header.

NOTES FROM DEMO and follow up work.

• Wrapping text.
• Breakpoints
• Child node immediate.
• https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html
• Vizwit comparison

JS options

$(this.refs.main).DataTable({
     dom: '<"data-table-wrapper"t>',
     "paging":   false,
     "ordering": false,
     "info":     false,
     searching: false,
     autoWidth: false,
     data: data,
     "columns": cols,
     responsive:  {
       details: {
         display: $.fn.dataTable.Responsive.display.childRowImmediate,
         type: ''
       }
     }
   });
 }

These are currently used, and could be seen if re-usable

hideControls: true,
hideFilterHeader: true,

Style options

Set defaults, othewise configirable:
table-striped table-bordered
https://datatables.net/examples/styling/bootstrap.html

For large data use server side:

https://datatables.net/examples/data_sources/

Beyond the prototype

React Dash example page of responsive data tables.

• Setup react demo page.
• See why loader does not work.
• Add boostrap grid and style loading to react demo page.
• Add configurable options for settings.js

SCSC demo of responsive data tables

• reduce default font size to 14px in charter.css
• Set background color of table header in charter.css, and white stripe.
• Vertical center alignment
• package.json changes in Dkan dash.
• Add "data table libraries" packages to DKAN dash

1. Dkan Dash package.json

   +    "datatables.net": "^1.10.16",
   +    "datatables.net-responsive": "^2.2.0",
   +    "datatables.net-responsive-bs": "^2.2.0",
   

[alexiscott]

@kimwdavidson no need for QA here, unless you or @erogray or @janette have any comments that you want to be taken into consideration for follow up work.
Follow up tickets are
#13 and #14