brandquad table

Create a VUE Table component that will read JSON then it should be collected from all the ancestors of this field (name.firstName, name.lastName) Client pagination: data must be displayed page by page, maximum 10 elements per page. You must provide custom navigation to navigate through the pages; Sort by columns: when you click on the column name, the rows of the table are sorted in ascending order, and when you click again, in descending order. Filtering: the component provides a text box in which the user can enter text. In this case, the rows of the table, the data of which does not contain a substring entered by the user, are hidden. Search is carried out by pressing any button in this field. Spaces are not counted; When double clicking on a cell, it must be replaced by an input field to set a parameter in this cell, the field is deleted and the value is saved when the focus is lost or by pressing Enter. Pressing Esc deletes the field and the value that was before editing remains; Serialization of the table in JSON data and downloading them when you click on the button. The downloaded data should contain all the changes that the user made with the table cells.   To demonstrate the operation of the component, you need to make a simple HTML page. Put everything on the githab and customize the output of the example of the component through the link.   Remarks: Particular attention should be paid to the speed of work. The interface hangs when performing data loading, filtering, sorting operations is not allowed; During data loading, it is worthwhile to show some kind of indicator (loader); Allowed libraries: Lodash / Underscore, their own ready-made libraries. Using third-party libraries will be a plus only if it is justified and you can explain the reason for the choice; Layout can be the simplest. Visualization and decoration do to your taste. In development, use the framework Vue, api for tables to do based on ES6 modules and ES6 classes. Third-party Vue plug-ins / widgets / other use is prohibited.

brandquad

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.