As a react dash developer, I'd like to be able to make tables to contain data and/or text, that resize correctly at different widths, so that I can make dashboards that are correctly responsive.

• Avoid using data for state. Prefer properties.
• Check for data changes prior to updating the DOM
• Write tests for methods.
• Fix is Mounted warning
• Add remaining configuration options for table and row settings.

• 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",
   

Connects #12
Connects #13

• Add Jasmine tests
• Setup react demo page.
• See why loader does not work.
• Add bootstrap grid and style loading to react demo page.
• Add configurable options for settings.js
• Integrate some generic fixes for console errors in React Dash

QA: pull down branch:

1. https://github.com/alexiscott/react-dash/tree/integrate-responsive-datatables-library
2. Run yarn install
3. Run npm start

• [ ] confirm that you can see a data table (Responsive DataTables) on the example page: http://localhost:3000/
• Confirm that it behaves responsively on different browser widths
• [ ] confirm that you can see a fixed data table on the example page:

connects to NuCivic/ga_gbpw#156
Is react-dash adding bootstrap? normally we have radix (which adds bootstrap css) then nuboot_radix on top to modify, then client/dashboard css on top of that, but looks like we have bootstrap being added on top of nuboot_radix

The Problem

To reproduce the issue: visit /dashboard/summary and change the school filter to "Dubois integrity academy".

Technical

The issue seems to relate to the fact that the year options can be different from one school to another. When the tables are rebuilt i.e. after a filter change the expectations data tables is still expecting the previous year values. The issue I have traced to dt.rows.add

  updateDataTable(data) {
    let dt = $(this.refs.main).DataTable();
    dt.rows.add(data); 
    dt.columns.adjust().draw();
  }

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.

From @kimwdavidson on September 26, 2017 18:5

User Story:

As a site visitor, when I visit a react dashboard, if my older browser is not compatible with react dash, I should see a message informing me that my browser might be out of date, and I should update it, so that I know why I can't see dashboards.

Copied from original issue: GetDKAN/dkan#2136

• Remove default hover on table rows (Bootstrap) or override to simplify opacity fade.
• Have React-dash demo display data in a logical and useful way.
  • This means mapping through data to consolidate state data to average for all states
  • Display by year and not month.

As a user, when I print a dashboard, I should see images, text, and charts logically grouped and aligned, so that I can easily read my print out.