search

NuCivic / react-dash

A framework for building data visualization dashboards using react. Docs: http://react-dashboard.readthedocs.io/en/latest/
MIT License
98 stars 22 forks source link

Investigate Data Table options other than fixed data table #92

Closed alexiscott closed 6 years ago

alexiscott commented 6 years ago

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.

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 commented 6 years ago

Closing, as we decided to push ahead with data tables.