search

unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Search sortable tables #919

Open dNitza opened 7 years ago

dNitza commented 7 years ago

This PR adds filtering and searching to the sortable-table view.

In order to search a column, a data-sortable-search-type='some_type' must be added to its th.

Right now there are a handful of search "types". text: will display a search input select: will show a select box with options aggregated from the given column multi-select: will show a button top open a multi-select dialog with options aggregated from the given column

In the case that no search type is given, a td with an hidden field is inserted so that when we collect search criteria, the index of each bit of data is the same as the column number.

The filtering is preformed by:

  1. Create a copy of the table body as a documentFragment.
  2. Duplicate that fragment
  3. Compare each of the rows with an array of input data
  4. If the text from every field is present in every cell, we consider that row a match
  5. If it is not, we remove it from the copied fragment
  6. Once we have compared every row, we replace the table body with the copied fragment
  7. rebuild the store we use for sorting

multi-select

tomstringer commented 7 years ago

@axelboc This PR is needed for the Handbook work that's kinda pressing. Would be great if we could get this incorporated asap.