Webix Datatable. From a simple table to a complex solution

This article is intended for those who are used to solving complex problems with simple methods. At first glance, working with big data may seem like a daunting challenge. With the right tools organizing and displaying large datasets will seem like little more than fun entertainment to you. Today I want to talk about one of the most extraordinary tools for working with data. It is the DataTable widget – a simple and at the same time powerful solution of the Webix UI library. Let's figure out what its strength is. Webix library and DataTable widget is a modern and powerful JavaScript library that allows you to create a user-friendly interface based on its own ui components. The range is varying from a simple button to a ready-to-use complex solution. In addition to the components, the library provides many extra tools for working with them. For example, event handling, methods of working with data, interaction with the server, styling themes and many more. You can find out more information about capabilities in the . Webix JavaScript UI documentation The is one of the most functional components of the Webix library. It allows you to display the data in the form of a table and customize it to your needs. This powerful and easy-to-use tool with a stylish design supports various data formats ( ). It is also quite fast in large datasets processing. Among other things, the widget also has a wide arsenal of APIs for filtering, sorting, paging, copying, resizing, styling and many other useful features. All these advantages make DataTable an indispensable assistant when it comes to work with huge volumes of data. DataTable widget XML, JSON, CSV, JSArray, HTML tables I can make a long speech about the convenience of working with Webix tables and their extensive capabilities. But it would be better to figure everything out in practice. For clarity, I created a small application that displays all the benefits of working with this powerful tool. You can find the full source code and live demo . here Main preparations In order to use the capabilities of the Webix library in your application, you need to include it in the main file. It is worth mentioning here that there are 2 versions of the library: the basic and the version. The basic version is free and provides a limited set of features in comparison with the Pro version. In my demo application, I use the extended Pro license to get the most out of the DataTable widget. The required files are available via the CDN at the following links: index.html Pro script type "text/javascript" src "//cdn.webix.com/pro/edge/webix.js" script link rel "stylesheet" type "text/css" href "//cdn.webix.com/pro/edge/webix.css" I just need to include them in my file. Now it looks like this: index.html Webix Booking html head title title meta charset "utf-8" script type "text/javascript" src "//cdn.webix.com/pro/edge/webix.js" script link rel "stylesheet" type "text/css" href "//cdn.webix.com/pro/edge/webix.css" head body script type "text/javascript" //... script body html Inside the code, I include the tags, where I will build the application. ... Initialization All Webix magic happens inside the constructor. I need to make sure that the code starts executing after the HTML page is fully loaded. To do this, I wrap it in . It looks like this: webix.ui() webix.ready (function(){}) webix.ready( { webix.ui({ }); }); ( ) function /*the application code*/ I have created a basic file and included the necessary tools. Now it is time to set up the DataTable component itself. index.html The power of simplicity If you are a minimalist and not eager to understand all the intricacies of setting up a widget, then the laziest configuration is provided for you. This configuration allows you to display the loaded data. In the file you need to create a widget constructor with the following three lines of code: datatable.js datatable = { : , : , : } const view "datatable" autoConfig true url "./data/data.json" The DataTable component is declared using the expression. Via the property You can set the path at which the widget loads data. It is worth clarifying that by default the widget expects to get data in format. If the data comes in a different format ( ), you need to specify it through the datatype property. In the case when the data is stored on the client-side in the form of an array, it can be passed to the component via the property or the method. view:"datatable" url JSON xml, jsarray or csv data parse() Particular attention should be paid to the property. It is designed for the laziest programmers. With its help, the data is automatically distributed among the corresponding rows and columns of the table. It's more convenient just to do nothing at all. autoConfig Now you can render the component in the browser and see the result you get. For convenience, you can save the widget constructor into the variable and use it for assembly in the file. datatable index.html Using the following code, you can include the file with the DataTable component into the file: index.html script src "js/datatable.js" type "text/javascript" charset "utf-8" script In the application constructor, you need to specify a variable that stores the widget settings: script type "text/javascript" webix.ready( { webix.ui( datatable ); }); function () script In the browser, you can see the following result: So now you know how to display a table with the corresponding data using just 3 lines of code. In this situation, the structure of the table depends on the structure of the loaded data directly. In fact, autoconfiguration is little used in real projects. It is much more practical to customize the table columns manually. In the next section, I will show you how to do this. Subtleties of Table Settings If autoconfiguration seems too trivial to you, there is an ability to set individual settings for each column separately. This can be done in the array of the property. For each column, you need to specify an object with the corresponding settings. Bear in mind that the order in which the columns are displayed in the table depends on the order of the objects with settings in the array. columns First of all, you need to specify the unique id for each column object. It must match the key under which the data is stored in the database. After this you can specify the “ ” of the column using the property. header header Now you can set the width of each column. For this, there are properties such as , , and . To make the DataTable fill the entire width, you should define the property to for at least one of its columns. The column with this property fills the whole remaining space. Now the column settings look like this: width minWidth maxWidth fillspace fillspace true { : , :[ { : , : , : }, { : , : , : , : , : }, { : , : , : , : }, ], : } view "datatable" columns id "rank" header "Rank" width 45 //... id "vin_code" header "VIN" minWidth 50 width 180 maxWidth 300 //... id "address" header "Address" minWidth 200 fillspace true //... url "./data/data.json" In the browser, you can see the following result: As you can see, the columns are arranged in the desired order with the specified width. The column names correspond to those specified in the settings as the values for the property. header Besides the individual width settings for each column, you can specify the global width for all columns. For this, there are the and properties. The first one adjusts the width of Datatable to its content. The second one defines the fixed width for all columns. By default, the column width is 100px. autowidth columnWidth To complete the picture, let's give users the ability to resize the columns. To do this, I set the property to . I also set the borders for rows, columns and their headers using the property and corresponding classes: and . resizeColumn true css webix_data_border webix_header_border Since the table has many columns, it would be a good idea to provide horizontal and vertical scrolling. This can be done using the property. By default, it is set to , but I need to set it to “ ”. scroll false xy So now I can resize the columns by dragging their right border in the desired direction, as well as scroll the table horizontally and vertically. Working with Templates By default, table cells are filled with data, the keys of which are specified as id in the column objects. But the widget allows me to control their look using the property. So I can set the required template according to which the data will be displayed in the cell. The value can be specified either as a string or as a function. To use incoming data in a string template, their keys must be specified as . There are several columns for which I need to set templates. template #data_key# I want to start with the first column. It will include a star icon. You may have a reasonable question, why do I need such a column with stars? The answer is easy. I will make it so that the potential user can mark the options he likes by clicking on the star. Let's implement it using a template function. The code looks like this: { : , : , columns:[ { : , : , : { ; }, ..., }, ] } view "datatable" id "car_rental_table" //... id "stared" header "" template ( ) function obj return ` ` //... I set the template-function that returns a span element with certain classes to the property. This function will change the corresponding "star" and "star-outline" classes when the user clicks on the star icon. The code of the function looks like this: template { table = $$( ); item = table.getItem(id); star = item.star? : ; item.star = star; } ( ) function selectStar id const "car_rental_table" const const 0 1 The handler takes the of the selected row as an argument. I get the widget instance by its via the method. Using the table method, which takes the item id as a parameter, I get the data object of the selected row. Then I check for the existence of the star key and set it to 0 (if it exists) or 1 (if it does not ). id id $$("car_rental_table") getItem() To make the switching work, I need to call this function upon clicking on the star icon. To set a handler on any table element with a certain css class, the table has a special property: onClick url: , :{ : selectStar(id) }, //... "./data/data.json" onClick "star" ( ) => e,id //... Теперь мы можем отмечать нужные нам ряды при клике по звездочке в первом столбце таблицы. В браузере это выглядит следующим образом: The table includes the "Available" column. Its cells store the and values, which indicate the availability of a car at the current time. I need to define a template that changes the cell values to the corresponding “Yes” and “No” text. true false To do this, I create a special function that changes the needed values. It looks like this: { (value){ ; } { ; } } ( ) function customCheckbox obj, common, value if return " YES " else return " NO " Note, you don't need to call it. Just pass its name as a value to the template property of the “Available” column. columns:[ { : , : , :customCheckbox, ...,}, ] //... id "active" header "Available" template In the browser, you can see the following result: It looks pretty good already. Since the first three columns contain the data that should always be in sight, let's fix it on the left side of the table. To do this, I need to add the property to the widget constructor and specify the number of desired columns ( ). So now the user can see these columns on top of other elements when scrolling horizontally. leftSplit in our case, 3 Now I want to configure the “Color” column, which displays the HEX codes of the car color. For the average user, such information means nothing at all. So I need to add some visual representation of the color for each cell. Guess what I'm going to use? Right! The template property. The code looks like this: columns:[ { : , : , : }, ] //... id "color" header "Color" template ` &nbsp #color#` //... In this code I use a in which I set the background of a non-breaking space ( ) with a HEX color value. In the browser, you can see the following result: string template &nbsp Working with Collections In some cases, the data come in and are displayed as numbers that indicate the s of certain elements in other data collections. But it doesn't quite suit me. In such cases, the widget can replace the numbers with the corresponding names from other collections. id For example, let's look at a column that should display car brands. The data for its cells are stored as numbers from 1 to 24. [ { : , : , : , ..., : , : , ..., }, { : , : , : , ..., : , : , ..., }, { : , : , : , ..., : , : , ..., }, ] //data.json "id" 1 "rank" 1 "car_make" 22 "country" 1 "company" 1 "id" 2 "rank" 2 "car_make" 10 "country" 2 "company" 3 "id" 3 "rank" 3 "car_make" 16 "country" 1 "company" 2 //... To replace the numbers with the corresponding car brands, I need to store an object with these brands: [ { : , : }, ..., { : , : }, ..., { : , : }, ..., ] //car_make.json "id" 22 "value" "Toyota" "id" 10 "value" "GMC" "id" 16 "value" "Mazda" //... Now I need to include the property into the column settings and set to it the path to the required object: collection columns:[ { : , : , : , ...,}, ] //... id "car_make" header "Car make" collection "./data/car_make.json" //... Thus, the widget displays car brands instead of numeric values in the cells of the “Car make” column. In the same way, I replace the values for the “Company”, “Country” and “Card” columns. In the browser, you can see the following result: Working with Data Formats When working with data, sometimes there is a need to change the format of their display. For this case, the table has a special property. With its help I can set the desired display format for numbers and dates. There are special methods for doing this. I need to set the display format for columns with dates and order prices: format columns:[ { : , : , :webix.i18n.longDateFormatStr, ..., }, { : , : , :webix.i18n.priceFormat, ..., }, ] //... id "date" header "Date" format id "price" header "Price" format //... The dates are loaded in the form of strings like “05/26/2021”. But I need to display them like “26 May 2021”. There is the special method, which I have used in the “Date” column settings. It has to take the object and return a string in the required format. But now it only takes a string like “05/26/2021”, so the result may be unexpected. I need to change the incoming dates and convert them to the corresponding Date objects webix.i18n.longDateFormatStr Date For this, the table has the special property. In the object of this property, I change the date string to the corresponding object using the method. The code looks like this: scheme webix.i18n.dateFormatDate { : , scheme:{ : { obj.date = webix.i18n.dateFormatDate(obj.date) } }, :[...] } view "datatable" //... $init ( ) function obj columns I think the date formatting is clear for you. Now I want to show you how to change the price format. But here everything is even easier. The method takes a number (for example 199) and returns a string with a dollar sign at the beginning: “$199”. That's the whole trick. webix.i18n.priceFormat In the browser, you can see the following result: In article you can read more about the data formatting capabilities of the Webix library. this Sorting data Sorting is one of the most frequently used operations when it comes to working with data. If the conditions were typical, I would need to create handlers, catch events and do a lot of tricky manipulations. The DataTable widget solves this problem with the property. All I need to do is just include it in the settings of the required column and set the correct mode. Since I am going to sort dates, numbers and strings, I need the following sorting types: sort "int" - compares numeric values "date" - compares dates "string" - compares string values as they are loaded "text" - compares the text of the element that is displayed in the cell (including the template) columns:[ { : , : , : , ..., : , }, ..., { : , : , : , ..., : }, ..., { : , : , : , ..., : }, ..., { : , : , : , ..., : }, ..., ] id "car_model" header "Model" width 120 sort "string" id "car_year" header "Year" width 85 sort "int" id "country" header "Country" width 140 sort "text" id "date" header "Date" width 150 sort "date" Now the column data will be sorted when clicking on the header of this column. Moreover, I can set a mode that allows users to sort data by several criteria at once. To do this, I need to set the property of the constructor to " ". To sort data by several conditions, the user needs to press the key and click on the headers of several columns. sort multi Ctrl/Command If you want to apply a custom sorting behavior, you can define the desired logic in a separate function and set it for the property. sort If you need to sort the data when clicking on any external button, you can use the table sort() method. In article you can read more on what sorting in the Webix library is capable of. this Filtering data It is hard to imagine a full-fledged table without data filtering. And the Webix DataTable provides such an ability. You can add one of several built-in filters or set your own filtering conditions using the property. It allows you to filter data on a client or server-side by one or more criteria. content Depending on the data type in the columns, I need to apply different types of filters to them. I can add a with a drop-down list of options to the header of the “Company” column. For this column, I previously specified the property. It replaces the numeric values with the corresponding company names. The filter pulls up the data of this collection and forms a list of options. In the column settings, it looks like this: selectFilter collection columns:[ { : , :[ ,{ : }], : , ..., }, ..., ] //... id "company" header "Company" content "selectFilter" collection "./data/company.json" In the browser, you can see the following result: For the “Car make” column I need to add a filter, which looks like a plain input field. This filter compares the entered values with the data in the column. I want to remind you that the data comes here in the form of numbers and are converted into the corresponding names of car models. The fact is that the filter compares the entered values with incoming numbers, but it does not quite suit me. So I need to change the default filter behavior and make sure that the entered values are compared with the data from the collection. For this, I need to apply a special function to the filter: textFilter columns:[ { : , :[ , { : , : , : { colValue = cars_make_data.getItem(item).value; toFilter = colValue.toLowerCase(); value = value.toString().toLowerCase(); toFilter.indexOf(value) !== ; } }], :cars_make_data, ..., }, ] //... id "car_make" header "Car make" content "textFilter" placeholder "Type car make" compare ( ) function item, value, data const const return -1 collection //... I apply the same filter to the “Model” column. Its data comes in the form of strings, so I don't need to set any extra conditions: columns:[ { : , :[ , { : , : }, ...,], ] //... id "car_model" header "Model" content "textFilter" placeholder "Type model" //... In the browser, you can see the following result: Now let's move on to the “Year” column. Its cells display the year of the car. Here I apply an filter. Its peculiarity lies in the fact that I can enter data in the input field and set some extra conditions. I can also exclude unwanted elements from filtering via a special checkbox. The column settings look like this: excelFilter columns:[ { : , :[{ : , : , : }], ...,}, ] //... id "car_year" header text "Year" content "excelFilter" mode "number" //... The expression allows comparing numbers only. Instead of an input field or selector, there is a special icon next to the header. When clicking on it, the widget displays a pop-up window for setting conditions. In the browser, you can see the following result: mode:“number” Among the columns there is one that displays the available car rental dates. For working with dates, the widget has a special filter. It allows users to select the desired date via the compact pop-up calendar. The column settings look like this: datepickerFilter columns:[ { : , :[ , { : }], ..., }, ] //... id "date" header "Date" content "datepickerFilter" //... In the browser, you can see the following result: The examples above show you how to apply the filters the user needs to search for data in columns. In article you can read more on data sorting of the Webix library is capable of. this Editing data The widget functionality allows users to edit data directly in the cells of the table. To enable this option, I have to set the property to in the table constructor. I can also define the action that opens the editor in the cell. By default, the editor opens when clicking on a cell. But I can also define the opening by double click ( ) or specify my own action ( ). editable true “dblclick” “custom” When the editing mode is activated, I need to set the required editor type in the column settings. Depending on the data type, each column will have an appropriate editor. I want to start with the most commonly used editor. It turns the cell into an input field where the user can enter the data he needs. Let's add it to a few columns in the table. It is pretty simple: I just need to specify the corresponding editor type to the property in the column settings. It looks like this: text editor { : , editable: , : , :[ { : , : , : , ..., }, { : , : , : , ..., }, { : , : , : , ..., }, ], } view "datatable" //... true editaction "dblclick" columns id "rank" header "Rank" editor "text" id "car_model" header "Model" editor "text" id "manager" header "Manager" editor "text" //... //... When the user double-clicks on any of cells in these columns, he will see the following result in the browser: If the cell contains a large text, it won't be very convenient to edit it in a small input field. For such cases, the widget has a editor. It allows users to edit data in a special pop-up window. Let's add this editor to the “Address” column settings: popup columns:[ { : , : , : , ...,}, ], id "address" header "Address" editor "popup" //... //... When the user double-clicks on any cell in the “Address” column, he will see the following result in the browser: Now let's move on to the “Available” column. As you remember, I have set up a template for it that turns the and values into the corresponding and strings. Let's make it so that the user can switch between these values. For this I need to use a special editor. It allows users to change the values in a cell when they click on it. But to make it work, I also need to set the property to in the table constructor. This property controls the checkbox editors work in the table. The column settings look like this: true false YES NO inline-checkbox checkboxRefresh true { checkboxRefresh: columns:[ { : , : , : , :customCheckbox, ..., }, ], } //... true //... id "active" header "Available" editor "inline-checkbox" template //... //... When the user clicks on any cell in this column, its value will change to the opposite. There are columns, which data is pulled up from collections. For these columns I use the editor. It allows users to select the desired option from the drop-down list. The list is formed automatically based on the data of its collection. The column settings look like this: combo columns:[ { : , : , : , : , ..., }, { : , : , : , :cars_make_data, ..., }, { : , : , : , : , ..., }, ], id "company" header "Company" editor "combo" collection "./data/company.json" id "car_make" header "Car make" editor "combo" collection id "country" header "Country" editor "combo" collection "./data/country.json" //... //... When the user double-clicks on any of cells in these columns, he will see the following result in the browser: The “Color” column deserves special attention. I would like to remind you that the incoming data are HEX codes of different colors. The Webix table has a special editor that allows users to select the desired color in a special pop-up window. The column settings look like this: color columns:[ { : , : , : , :..., }, ], id "color" header "Color" editor "color" template //... //... When the user double-clicks on any cell in the “Color” column, he will see the following result in the browser: Now I need to figure out how to edit the data in the “Date” column. To work with dates, the table has a special editor. As in the case with the filter, the widget displays a compact calendar near the cell, where users can select the desired date. This date will immediately appear in the edited cell. The column settings look like this: date columns:[ { : , : , : , :webix.i18n.longDateFormatStr, ..., }, ], id "date" header "Date" editor "date" format //... //... When the user double-clicks on any cell in the “Date” column, he will see the following result in the browser: In article you can read more on what data editing in the Webix library is capable of. this Validation After editing, the data should be saved on the server. It is good practice to check the changed values before saving. You can ask me how to do it at the table? But everything is extremely simple. The Webix library has special rules that can be applied to each editable field. Depending on the type of data, I need to apply different rules. There are several columns with numeric values for which I will set the rule. So now, when editing the cell the widget will check whether its value is a number. webix.rules.isNumber There is also a column that contains email addresses. I will check its values using the rule. webix.rules.isEmai For the “Price” column, I want to apply custom validation conditions. Let's make it so that the user can only enter data in the range of $20 to $500. To do this, I need to create a special function: { (obj> && obj< ); } ( ) function obj return 20 500 I will check all the other columns using the rule. It means that these columns must be filled in anyway. webix.rules.isNotEmpty For applying all of these rules, the table has a special property. Inside its object, I need to specify the s of the required columns and set the appropriate rules to them. It looks like this: rules id column:[...], :{ :webix.rules.isNumber, :webix.rules.isNotEmpty, :webix.rules.isEmail, : { (obj> && obj< ) }, } rules rank company email price ( ) function obj return 20 500 By default, the validation starts after the editor is closed. If the entered values do not correspond to the rules, the whole row will turn in red. In the upper right corner of the edited cell there will appear a red mark. Headers and Footers When working with big data sets they are divided into many columns in the table. For convenience, I can group their headers into specific categories. This approach helps to structure the table and makes it easier to find the information the user wants. The DataTable widget allows me to combine headers using the and properties. They are similar to the regular HTML table. For example, I can show you how to combine the , and columns into the category. To do this, I need to slightly change the property of the corresponding columns: colspan rowspan Price Card IBAN Payment information header column:[ { : , :[{ : , : }, ], ..., }, { : , :[ , ], ..., }, { : , :[ , ], ..., }, ] //... id "price" header text "Payment information" colspan 3 "Price" id "credit_card" header "" "Card" id "iban" header "" "IBAN" //... In the browser, you can see the following result: The headers are enabled by default. The footers need to be activated separately. To do this, I need to set the property to in the widget constructor. Let's define a footer name for the first column and combine it with the second column using the property. In the footer of the “Available” column I will count and display the number of available cars. The column settings look like this: footer true colspan column:[ { : , :[...], ..., :{ : , : } }, { : , :[...], ..., :{ : }, ..., }, ] //... id "stared" header footer text "Available:" colspan 2 //... id "active" header footer content "summColumn" //... The expression counts all the values and displays their number in the footer. All changes in the “Available” column will immediately appear in its footer. In the browser, you can see the following result: {content:"summColumn"} true Column visibility If the table consists of many columns, it would be very convenient to hide some options that are unnecessary at the moment. The Webix developers took care of this problem and implemented the feature. With its help, the user can control the visibility of columns via a special interface. You can also customize it to your needs. headerMenu I want to add the icon as a header for the first two columns and customize its popup menu. The code looks like this: headerMenu headermenu:{ : , :[ { : , : }, { : , : }, { : , : }, { : , : }, ] }, :[ { : , :[{ : , : , ...,}], ..., }, { : , :[ , ], ..., }, ] //... width 210 data id "car_year" value "Year" id "color" value "Color" id "vin_code" value "VIN" id "phone_number" value "Phone" //... column id "stared" header content "headerMenu" colspan 2 id "rank" header "" "" //... In the object of the property I can set the width of the pop-up window and an array of columns that can be hidden by clicking on the special eye icon. headermenu In the browser, you can see the following result: Now the user can easily hide and show the required columns. All he needs is to click on the icon in the upper left corner and select the required items in the drop-down list. Paging If the number of rows in the table is large enough, it is not very convenient to use long vertical scrolling. Let's give users an ability to page through the data. For this, I need to create a paging module in the file. Its code looks like this: pager.js pager = { : , : , : , : , : }; //pager.js const view "pager" id "pager" size 20 group 5 template `{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}` Using the and properties I can set the number of visible items on the page (20) and the number of visible buttons on the pager (5). It is all settings. I can also set the template property, which defines buttons for switching pages ( ). size group other than number buttons Now I need to connect the module with the component into the file. I also need to include the variable with the pager into the application constructor: index.html //index.html //... script src "js/datatable.js" type "text/javascript" charset "utf-8" script script src "js/pager.js" type "text/javascript" charset "utf-8" script script type "text/javascript" webix.ready( { webix.ui({ rows:[ datatable, {cols:[ {},pager,{} ]} ] }); }); function () script Finally, it is necessary to connect the pager to a table. To do this, I need to set the property to the pager in the table constructor. These simple manipulations are used to implement a pager for a table in the Webix library. In the browser, you can see the following result: pager id So now, when the user clicks on some pager button, the widget will display the corresponding 20 elements on the page. Operating with Rows Let's give users an ability to add, delete and drag-n-drop the rows. To do this, I want to add 2 separate columns with corresponding icons for deleting and dragging. In the header of these columns, I will place an icon for adding new rows. It is worth noting that the Webix library has several ways for adding icons into the component. For example, I can use icons from the built-in font ( ), or special built-in elements ( ). common.trashIcon() To do this, I need to go back to the property and specify the following settings: columns column:[ { :[{ : , : }], : , : }, { :[ , ], : , : } ] //... header text " " colspan 2 width 50 template " " header "" "" width 50 template "{common.trashIcon()}" Now at the end of the table there are 2 additional columns with icons for deleting and drag-n-drop. Since the table has a lot of columns, let's fix these 2 columns with icons at the end of the table. To do this, I need to set the property to 2 in the widget constructor. So now the user can see these columns on the right part on top of other elements when scrolling horizontally. In the browser, you can see the following result: rightSplit The icons are ready. Now I need to set handlers for the click event of these icons. To catch a click event on any table element with a specific css class, I need to use the property. In the object of this property I need to specify the icon class and set the corresponding handler. In my case, I need to catch a click on the icons with the and classes: onClick wxi-plus-circle wxi-trash onClick:{ : addNewElement(), : removeElement(id), } "wxi-plus-circle" => () "wxi-trash" ( ) => e,id //..., Now let's create these handlers. The function for adding new data looks like this: { table = $$( ); id_new_elem = table.add({ : , : , : ()}); table.showItem(id_new_elem); } ( ) function addNewElement const "car_rental_table" const "active" 0 "color" "#1c1919" "date" new Date Using the method of the table, I can add new data to it. This method returns the id of the new element. To show a new item in the table, I need to pass its to the method of the table. add() id showItem() The function for deleting data looks like this: { $$( ).remove(id); } ( ) function removeElement id "car_rental_table" The method takes the of the selected element and removes it from the table. remove() id So now I need to implement drag-n-drop the rows. To activate this option I need to set the property to in the table constructor. After this, the user can drag any row to the desired location. drag "Order" Now the user can drag an element by any part of it. Let's define a special drag area for dragging the rows. It will be an icon with the class . wxi-drag For doing this, there is a special property. Inside of its object I need to set the handler for the event: on onBeforeDrag on:{ : { (e.target||e.srcElement).className == ; } } onBeforeDrag ( ) function data, e return "webix_icon wxi-drag" In the browser, you can see the following result: Now the user can add, delete and drag-n-drop rows of the table using the special icons. Toolbar with Controls Let's allow users to clear filters, add new columns and export data to Excel format. To do this, I need to create a toolbar with corresponding buttons. In the file I create a toolbar component. Inside this component I define the , and buttons. It looks like this: toolbar.js Reset filters Add column Export to Excel toolbar = { : , : , : , cols:[ { : , : , :resetFilters }, { : , : , :addColumn }, { : , : , :exportToExcel } ] }; const view "toolbar" css "webix_dark" height 50 //... //... view "button" label "Reset filters" click view "button" label "Add column" click view "button" label "Export to Excel" click Using the property, I can set handlers for the button click event. Let's create these handlers. And I want to start from the function that resets the filtering of the data and the filters themselves. The code looks like this: click { table = $$( ); table.filter(); table.showItem(table.getFirstId()); table.setState({ :{}}); } ( ) function resetFilters const "car_rental_table" filter If I call the method without parameters, the widget will display the data in the initial order. I also use the method of the table to clear the fields of its filters. filter() setState() The next function can add a new column. Its code looks like this: { table = $$( ); table.config.columns.splice( , ,{ : +webix.uid(), : , : , : }); table.refreshColumns(); } ( ) function addColumn const "car_rental_table" 3 0 id "c" header ` Extra column` editor "text" width 120 Using the property of the table, I get an array with column settings. Using the method I add an object with new column settings to the 4th position there. When the column configurations are changed, I need to refresh the columns view using the method of the table. config.columns splice() refreshColumns() And there is a function left that exports the table data to format. Its code looks like this: Excel { webix.toExcel( , { : , : , : }); } ( ) function exportToExcel "car_rental_table" filename "Car Rental Table" filterHTML true styles true Inside this function I use the method, which takes the table and an object with certain settings. That's the whole trick. webix.toExcel() id When everything is ready, I need to include the file into the and add the variable to the application constructor: toolbar.js index.html toolbar script type "text/javascript" webix.ready( { webix.ui({ rows:[ toolbar, datatable, {cols:[ {},pager,{} ]} ] }); }); function () script In the browser, you can see the following result: Now the user can reset data filtering, add new columns, and also export data to Excel format. There is one more nuance left. When creating a new column, I have added an icon with the class to its header. So now I need to set a handler on the click event for this icon, to delete the column. I can do it via the property: wxi-close-circle onClick onClick:{ : deleteColumn(id) } //... "wxi-close-circle" ( ) => e,id Now let's create this handler: { table = $$( ); table.clearSelection(); table.editStop(); table.refreshColumns(table.config.columns.filter( i.id !== id.column)); } ( ) function deleteColumn id const "car_rental_table" => i I get an array with column settings via the property, filter unnecessary elements out from it and pass the updated array to the method. config.columns refreshColumns() In the browser, you can see the following result: Now the user can delete a new column by clicking on a special icon in the upper right corner of its header. Conclusion In this article, I have shown you how to create an application based on the DataTable widget of the Webix UI library. Now you know how to customize the table using a wide variety of properties and methods. As you can see, all settings are intuitive and easy to use. In fact, it is only a small part of everything that the Webix table can offer you. To read more about the DataTable features, visit its page. There you can find a detailed description of all capabilities with related samples. documentation You can find the full source code and live demo . here Disclaimer: The author provides this code and software “AS IS”, without warranty of any kind, express or implied, including but not limited to fitness for a particular purpose and non-infringement. In no event shall the author be liable for any claim, damages or other liability in connection with the software or code provided here