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: 'YWJmMzlmMmM5NmM2NjJjMzI2NjQ0MDc4YWJiOThhMmNmZTA2MWI4OWJhZTIyMWRhYWFlNjU2NjBhOWUzZDE0NzRjMmRmYWRlNTRkMzkwOGI5YTI4ZWFhZmRjNGM2ZTgzNDMzNDQ1OTQ4NzU3MGRhMDI0ZTZiZmM2ZDRlOWZiNGMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeE5UWTJNamMzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});
</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. |