Discovery: Improve table responsiveness: Experiment with different libraries

[erogray]

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.

[alexiscott]

Note. an issue seems to exist with text fitting vertically in a cell. I am not sure if this related to the the text getting cut off horizontally but capturing it here for now.

With URL:
https://dkan.docker:32771/dashboard/financials/scsc?School%20Name=Graduation%20Achievement%20Charter%20High%20School&School%20Year=2015-16

[alexiscott]

@erogray from what I can see the vertical cut off, tested on my simple prototype, or rather the lack of built in vertical responsiveness would be an additional bug to the existing "width resizing calculation issue". For the vertical height issue it would be necessary to measure the the content height of the cell that holds the text and report that back to the rendering. It looks like it's not impossible though. There is some information about it here:
schrodinger/fixed-data-table-2#125
schrodinger/fixed-data-table-2#21
This code looks like a reasonable implementation:
https://github.com/vaiRk/responsive-fixed-data-table/blob/master/src/responsive-fixed-data-table.js
Also, we might want to consider whether a work around could be an option, such as in the case of longer cells, a link being provided that when rolled over would render the full cell data in an overlay. I am not sure at this stage whether that would be easier or harder to implement.

If we are to work on it it would make sense I think to add it to a separate but related issue. Let me know if that works?

And, that said. My understanding is that one of the features of "Fixed data table" is that it allows for lazy loading of data, so you can have vast amounts of rows in a query. https://github.com/facebookarchive/fixed-data-table . If that is not important then it might well make sense investigating other table building options or supplying a choice. Also, Gerardo pointed out that on one of his projects they had used a library which they had some success with.

CC @kimwdavidson

[alexiscott]

Iceboxing this for the moment in favour of this shorter term solution for Georgia in #142 Table responsiveness: reduce width of columns with less data.

[alexiscott]

Discussed with @erogray and moving back into in progress. Testing this out with an implementation of https://github.com/vaiRk/responsive-fixed-data-table/blob/master/src/responsive-fixed-data-table.js
Two principal issues that I am aware of are:

• Table row height is still getting set from settings in the *settings.js. This should be easy enough to override with a height: auto.
• Columns are no longer fitting as the table width is now 100% in all scenarios. See screenshot below:
  

CC @kimwdavidson

[alexiscott]

@kimwdavidson

I took an initial look into this and I don't think that we will find a complete responsive solution while still using fixed data table 2. Facebook no longer maintains the fixed data table 1.
Interesting to note that one of the developers that had written some of the responsive work arounds for fixed data table 2 is no longer using the library but has switched to another one that he believes has better responsive handling: https://github.com/digidem/react-dimensions, see react virtualized.

I would suggest that the best way forward would be to try out / prototype some of the alternatives which could work with React dash.

CC @erogray

[alexiscott]

Introduction

Objectives

To aid in choosing a data table library which
could be used with react dash. Up until now we have have been using *Fixed data
table*. The problem we have accounted has been related to it's lack of
responsive theming capabilities, as described on the Fixed data table 2 github
page: "FixedDataTable does not provide a layout reflow mechanism or calculate
content layout information such as width and height of the cell contents. The
developer has to provide the layout information to the table instead."

It would have been nice to have found more react libraries to compare, and it
might be the case that I have missed some out. The other two libraries are
jQuery and will need a bit of extra work to integrate them into React.

What is a data table?

Data tables present tabular data. Data tables should contain table header cells that identify the content of their respective row and/or columns. Tables with proper table headers provide additional information and navigation for screen reader users.

Criteria used for choosing a library

Accessibility

Optimally, we would be 508 compliant:
https://webaim.org/standards/508/checklist#standardn

Table headers

Table headers describe the content of their respective row or column. They can be identified by screen readers when data cells are encountered.

Aria describe by

This is a pointer to a DOM element that describes the table.

• Examples and more information

  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
  https://www.w3.org/WAI/tutorials/tables/caption-summary/

Scope

https://webaim.org/techniques/tables/data#scope

Responsiveness

The library should include responsive components that will work well at
different resolutions, including print.

JSON consumption

The library that we choose will need to be able to work within different APIs
to consume JSON data.

Handling of large data sets

This could mean using lazy loading of data and/or AJAX to make make requests to
the server for new data sets to present.

Internationalization

This is the capacity to internationalize the interface.

DataTables evaluation

Based on use of the WAVE web accessibility tool.

Data Table	Value
DataTables	[-]
Accessibility	[-]
table header tag	[X]
scope attribute	[ ]
aria-describedby can be added.	[X]
Key navigation	[X]
Responsiveness	[X]
JSON consumption	[X]
Large data set handling AJAX	[X]
Excellent documentation	[X]
Internationalization	[X]

Accessibility

https://datatables.net/new/1.9
DataTables tables are now fully accessible and controllable by keyboard navigation and suitable markup and WAI-ARIA attributes are used for screenreaders. This works "out of the box" with no configuration required. To try it out, load any 1.9 example and press the tab key to navigate through the table controls. Note that this accessibility work as required updating the pagination elements. Please see the upgrade notes for further information.
Though scope is not included out of the box it does look like it should be
possible to add it, at least in the case of a simple table structure. See this page. Making the data table 508 compliant

Documentation

https://datatables.net/manual/ajax

Internationalization

Via plugin
https://datatables.net/plug-ins/i18n/

Conclusion

Project seems the most robust of the three.

Table saw evaluation

Table saw	Value
Table Saw	[-]
Accessibility	[-]
table header tag	[X]
scope attribute	[ ]
aria-describedby	[ ]
Keyboard navigation	[X]
Responsiveness	[X]
JSON consumption	[ ]
Large data set handling AJAX	[ ]
Good documentation	[X]
Internationalization	[X]

Demo URL

http://filamentgroup.github.io/tablesaw/demo/stack.html

Accessibility

Has scope, but it is not applied to the the td cell, so would not pass 508 in
it's current state.

Responsive

Is capable of hiding selected columns for narrower screens.

Documentation

https://www.filamentgroup.com/lab/tablesaw.html
https://github.com/filamentgroup/tablesaw#getting-started

Conclusion

Might need a little work for 508 passing. Table Saw uses progressive
enhancement. So, the table data needs to be written to to HTML. This is good in
the sense of not requiring JavaScript in all use cases, but would probably mean
separate page requests for retrieving large data sets.

React virtualized evaluation

React Virtualized	Value
React virtualized	[-]
Accessibility	[-]
table header tag	[ ]
scope attribute	[ ]
aria-describedby can be added.	[X]
Key navigation	[X]
IE9 support OTB	[ ]
Responsiveness	[ ]
JSON consumption	[X]
Large data set handling AJAX	[X]
Excellent documentation	[ ]
Internationalization	[ ]

React virtualized

Responsiveness

Does not seem to be fully responsive in the demo.

JSON consumption

Large data set handling AJAX

Excellent documentation

Internationalization

Conclusion

Data Tables stands out as the most complete of these three libraries. React Saw
seems solid in the sense that it builds on an actual HTML table (progressive
enhancement), though I don't see how it would handle large datasets without
separate page requests which could reduce the user experience.

[alexiscott]

@kimwdavidson I have created a React Dash issue for this here: NuCivic/react-dash#92

I would like to start a new ticket for investigating using the DataTables library with Georgia Schools data, so that we can compare it to Fixed Data Tables.

Estimating 15 hours for the prototype.