gregtyler / filtie.js Goto Github PK

You should be able to determine which columns have sortie on them and which do not.

This could be done with attributes on the table, options, or data- attributes on the relevant .

Document API methods and events, and how to interact with them.

Currently, Filtie just uses the hidden attribute to toggle rows. However, as can be seen in the demo provided with the software, this messes up using CSS's nth-child selector to highlight alternate rows. It probably also causes problems with other software which doesn't expect the rows to be hidden (e.g. if counting the rows in a table).

Instead, Filtie should actually remove the rows from the DOM and reinsert them as required. This means that the contents of the DOM are reflective of what the user sees.

I would expect we'd do this by tracking all of the rows in an array and testing that array to determine which need to be added/removed.

Problems:

• How do we know where to reinsert the rows?
• What if a row has been removed (upsetting indices and relative positioning)?
• What if a table has been sorted, changing the order of the visible rows?

Developers should be able to attach a callback when an input is added. Either through an option in the config:

Filtie.create({
  onAddInput: function($input) {...}
});

Or as a custom event:

$table.addEventListener('filtie:addInput', function() {
  ...
});

This will allow developers to add classes to the input, or custom listeners or attributes.

Developers should be able to configure an external field to filter a particular column. This would allow you to e.g. have a select box in the page header that determines which product groups to show.

Expected markup would be:

var filtieInstance = Filtie.create($table);
filtieInstance.addFilter(4, $selectBox);

Which would make $selectBox a filter for column 4 (0-indexed).

Write unit tests to ensure Filtie's features work as expected