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.