Webix JavaScript library through the eyes of a freshman. Part 5. Working with data on the user's side 
Tags: javascript, webdev, devops
Published: 2020-04-01 06:33:23

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3krerfunituoh6g76j37.png)
<p>I have just started my career in IT. Currently I am studying web-ui development with the<a href="http://www.webix.com/">&nbsp;JS Webix library</a>. Here is a short description of what I have learnt so far.</p>
<p>FIFTH TASK</p>
<p>In this article, I will consider the following tasks:</p>
<ul>
<li data-aria-posinset="1" data-aria-level="2"><a href="https://docs.webix.com/datatable__filtering.html#text">filtering</a>&nbsp;and<a href="https://docs.webix.com/datatable__sorting.html">&nbsp;sorting</a>&nbsp;table data;&nbsp;</li>
<li data-aria-posinset="2" data-aria-level="2">filtering and sorting via the API;&nbsp;</li>
<li data-aria-posinset="3" data-aria-level="2"><a href="https://docs.webix.com/desktop__grouping.html">grouping data</a>&nbsp;in the tree table;&nbsp;</li>
<li data-aria-posinset="4" data-aria-level="2"><a href="https://docs.webix.com/desktop__data_binding.html">synchronizing</a>&nbsp;components;&nbsp;</li>
</ul>
<p>Learn more about the<a href="https://docs.webix.com/desktop__list.html">&nbsp;List widget</a>, the<a href="https://docs.webix.com/desktop__treetable.html">&nbsp;Treetable widget</a>&nbsp;and the<a href="https://docs.webix.com/datatable__index.html">&nbsp;DataTable widget</a>&nbsp;used in the article.</p>
<p>The source code is<a href="https://github.com/sashko-web/webix/tree/master/webix%20sourses%20for%205%20article">here</a>.</p>
<p>You can find the finished application&nbsp;<a href="https://snippet.webix.com/njqcjz0b">here</a>.</p>
<p><strong>Filtering and sorting table data</strong></p>
<p>We start with tables. There is a&nbsp;<a href="https://docs.webix.com/datatable__filtering.html">number of built-in filters</a>&nbsp;embedded directly into the header of the<a href="https://docs.webix.com/api__refs__ui.datatable.html">&nbsp;DataTable</a>&nbsp;and TreeTable widgets.</p>
<p>I use two options in the Table widget: a simple text filter (<a href="https://docs.webix.com/datatable__filtering.html#text">textFilter</a>)&nbsp;and a filter with a set of options in the drop-down list&nbsp;(<a href="https://docs.webix.com/datatable__filtering.html#select">selectFilter</a>).&nbsp;I add one filter for the columns title and year. I set the Header in them as an array instead of a row to fit the header and filter. The second element in the array is an object with the content property and the filter name.</p>
<p><em>The code of the Table widget is located in the table.js file and is rendered in the Dashboard tab.</em></p>
<p>The data is filtered by substring match, when characters are added in "textFilter". When selecting an option in "selectFilter", it will be filtered by the selected value.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qf7krfjuc0mneuazeczp.jpg)
<p>Here is the result of filtering by substring "star”:</p> 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ubo1t80y5li9hafxue9.jpg)
<p>Sorting.&nbsp;To tune column sorting, add the<a href="https://docs.webix.com/desktop__filter_sort.html#sorting" target="_blank" rel="">&nbsp;sort</a>&nbsp;property to the column configuration. There are several ready-made sorting types: by numeric values, by date and by row. For the 'year', 'votes', and 'rating' columns I will set the sort:"int&rdquo; setting for sorting by numeric values. For the title column, the value will be "string".</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fci8sz3rygm4rly4z9q8.jpg)
<p>When clicking the column header, the data will be sorted according to its type. Here is the result of sorting by rating:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o7r8wl2pk0fdxzrcmh5w.jpg)
<h2>Sorting and filtering via the API</h2>
<p>All Webix widgets support the features of&nbsp;filtering and&nbsp;sorting elements via the API methods. I will demonstrate programmatic filtering and sorting in the<a href="https://docs.webix.com/desktop__list.html">&nbsp;List</a>&nbsp;widget.&nbsp; </p>
<p><em>The code of the List widget is located in the users_module.js file and is drawn in the "Users" tab.</em> </p>
<p><strong>Filtering.</strong>&nbsp;In the "<strong>Users</strong>" tab, after the &ldquo;Add new person " button, I will place the<a href="https://docs.webix.com/desktop__text.html">&nbsp;Text</a>&nbsp;widget, for filtering names in the list.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ymo6icxtdtrmft0fnsc.jpg)
<p>Now in the script.js file I'll add the logic for filtering elements. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v56ewubaehvptgcv3six.jpg)
<p>Elements are filtered in the following way:</p>
<ul>
<li data-aria-posinset="1" data-aria-level="2">using the<a href="https://docs.webix.com/api__link__ui.vscroll_attachevent.html">&nbsp;attachEvent</a>&nbsp;method I add a handler to the<a href="https://docs.webix.com/api__ui.view_ontimedkeypress_event.html">&nbsp;onTimedKeyPress</a>&nbsp;event;&nbsp;</li>
<li data-aria-posinset="2" data-aria-level="2">the onTimedKeyPress event is triggered by entering characters in the text field, but with a short delay so that the filter is not activated every time you press the keys;&nbsp;</li>
<li data-aria-posinset="3" data-aria-level="2">I get the entered text and use the<a href="https://docs.webix.com/datatable__filtering.html">&nbsp;filter</a>&nbsp;method to start filtering.</li>
</ul>
<p>Here is the result of filtering via the text input:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v5c8xlfju93y2uoa99ps.jpg)
<p><strong>Sorting</strong>. The List widget elements will be sorted by clicking the &ldquo;Sort asc&rdquo; and &ldquo;Sort desc&rdquo; buttons.</p>
<p>To create buttons in the "<strong>Users</strong>" tab, I will add two<a href="https://docs.webix.com/desktop__button.html">&nbsp;Button</a>&nbsp;widgets with the<a href="https://docs.webix.com/api__ui.button_click_config.html">&nbsp;click</a>&nbsp;event handler after the text field.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j7yfqyb6rl5zds7svh9i.jpg)
<p>Inside the click handler, the<a href="https://docs.webix.com/api__link__ui.proto_sort.html">&nbsp;sort</a>&nbsp;method accepts the name of the field to sort data by, and the sorting directions: &ldquo;asc&ldquo; (ascending) and&rdquo; desc" (descending). By default, data elements represent rows and sorted accordingly.&nbsp;</p>
<p>As a result, names in the list are sorted alphabetically:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qfdx5mb91lsdzxkermkk.jpg)
<h2>Grouping data in the tree table</h2>
<p>Now let's look at the data grouping by random parameters on&nbsp;the example of the TreeTable widget.&nbsp;</p>
<p><em>The code of the TreeTable widget is located in the products_module.js file and is rendered in the &ldquo;Products" tab.</em></p>
<p>I will change&nbsp;hierarchical data in the tree table&nbsp;to get a linear array. I will get rid of the hierarchy and move the &ldquo;category&rdquo; field from it to each record.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o12lacxvub1xuy77koxm.jpg)
<p>There are two ways to group data in a table:&nbsp;</p>
<ul>
<li data-aria-posinset="1" data-aria-level="2">immediately after loading them;&nbsp;</li>
<li data-aria-posinset="2" data-aria-level="2">dynamically, using the&nbsp;<a href="https://docs.webix.com/api__groupstore_group.html">group</a>&nbsp;and&nbsp;<a href="https://docs.webix.com/api__groupstore_ungroup.html">ungroup</a>&nbsp;methods.&nbsp;</li>
</ul>
<p>I use the first option, as&nbsp;I need to group the data as soon as it is available.&nbsp;</p>
<p>In the TreeTable widget configuration, I will add the&nbsp;<a href="https://docs.webix.com/desktop__data_scheme.html">scheme</a>&nbsp;property. It determines the way of&nbsp;processing&nbsp;data.&nbsp;I use&nbsp;the&nbsp;<a href="https://docs.webix.com/api__group_group.html">$group</a>&nbsp;method&nbsp;to group data.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/854s9ih68rdjffcslg0m.jpg)
<p>Two parameters are used inside the $group handler:&nbsp;</p>
<ul>
<li data-aria-posinset="1" data-aria-level="2">a required parameter&nbsp;<strong>by</strong>, which groups the data.&nbsp;&nbsp;</li>
<li data-aria-posinset="2" data-aria-level="2">the&nbsp;<strong>map</strong>&nbsp;object, where we will describe the data fields for the created groups. Grouping splits the source data by the specified parameters and creates "parent records" for them . We can use map to add new fields to these records. To display the data correctly, I will add the "title" field. Its value will be the parameter that is used for grouping.&nbsp;</li>
</ul>
<p>Additionally, I set the<a href="https://docs.webix.com/api__datastore_sort.html">&nbsp;$sort</a>&nbsp;function to sort the grouped data in alphabetical order.&nbsp;</p>
<p>The result of the grouping is as follows:&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ryd3i2adxgeeb3joxf0p.jpg)
<h2>Synchronizing components</h2>
<p><em>The task uses the&nbsp;</em><em>Chart and List widgets. Their code is in the&nbsp;</em><em>users_module.js file and they are rendered in the "Users" tab.</em> </p>
<p>The<a href="https://docs.webix.com/desktop__data_binding.html#syncingcomponents">&nbsp;sync</a>&nbsp;method allows you to copy data from one component and pass it to another. Thus, changes in the main component, such as adding, deleting, and so on, are immediately reflected in another.&nbsp;</p>
<p>First, in the<a href="https://docs.webix.com/api__refs__ui.chart.html">&nbsp;Chart</a>&nbsp;widget I will delete the link to the data.&nbsp;</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8lm8e0qmhm0kicex9gje.jpg)
<p>Now, in the script.js file using the sync method, I synchronise the Chart widget with the List widget. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iebb1clcw3zjfs4z0zlc.jpg)
<p>In the addPerson function, we add data only for the List widget.</p>  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l001zrlapxs2jbhuu0dr.jpg)
<p>Now, when you add or remove entries from the list, changes will also occur in the Chart. Sorting and filtering in the List widget will now affect data in the Chart as well. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jved4u355wpjtzgaqcnt.jpg)
<h2>Summary</strong>&nbsp;<h2>
<p>Thus, I have shown how to improve the user experience on practical examples. We have learnt the built-in means to sort and filter data in the DataTable and TreeTable widgets with a single setting. We have grouped data in a table, and the synchronization example expanded the ability to improve the performance of widgets that use the same data source.&nbsp;</p>
<p>You can find the finished application&nbsp;<a href="https://snippet.webix.com/njqcjz0b">here</a>.&nbsp;</p>
<p><strong>Webix JavaScript library through the eyes of a freshman.&nbsp;</strong>&nbsp;</p>
<p><strong>Part 5. Working with data on the user's side</strong>&nbsp;</p>