Column filters
Enable column filters on your javascript dynamic tables.
<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
let data = [
['US', 'Cheese', '2019-02-12'],
['CA', 'Apples', '2019-03-01'],
['CA', 'Carrots', '2018-11-10'],
['BR', 'Oranges', '2019-01-12'],
];
jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type: 'autocomplete', url:'/jspreadsheet/countries', width:'200px', },
{ type: 'text', width:'200px', },
{ type: 'calendar', width:'200px', }
],
filters: true,
license: 'ZjdmYzJjZmI1ZmU2NTNiY2IzODZjNTQ3YTIzMWYwY2I3YTI3MGU5OTI4MzIxODU1YzA4MWI2MzRhYzg0ZTRjNWZjZGRiNzBkOTkyNDE2ZGQwZTQ4YTllNjBlMGNiYzcwNGFkZmQ3ODMyNWY5NjYzMzQ0NTZiYjA0ZmQzOTQ5YWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3pNakkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</script>
</html>
Related methods
| Method | Description |
|---|---|
| filter | filter(integer columnNumber, Object values)Apply filters programatically. |
Related events
| Events | Description |
|---|---|
| onbeforefilter | onbeforefilter(DOMElement el, Array filters, Array data)Action to be executed before filtering rows. It can cancel the action by returning false. |
| onfilter | onfilter(DOMElement el, Array filters, Array data)After the filter has been applied to the rows. |