Examples
Back to Examples

Column filters

Enable column filters on your javascript dynamic tables.



Source code

<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>
var data = [
    ['US', 'Cheese', '2019-02-12'],
    ['CA', 'Apples', '2019-03-01'],
    ['CA', 'Carrots', '2018-11-10'],
    ['BR', 'Oranges', '2019-01-12'],
];

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