Introduce

Hello everyone, as everyone knows, handling display and interacting with data tables (datatable) is an important part of Website applications, especially data management applications (e.g. : Admin page, …). Many libraries were created to support programmers to quickly and fully fill these data tables with necessary functions.

And in VueJs , there are also many packages that support displaying and interacting with data tables quickly, fully supporting functions such as searching, sorting, exporting, … data. In this article, I will introduce to you such a package, which is vue-materialize-datatable , let’s learn about it.

Setting

You need to copy and paste the following command into the terminal to install vue-materialize-datatable :

Note: vue-materialize-datatable requires VueJs 2 and materialize-css library.

In addition, vue-materialize-datatable also requires you to import Material Design icons . You can import directly via Google’s CDN link or install the package and import files into the application:

• CDN: import in Html file or Css / Sass file:
  • Html:
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    1 2	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  • Css / Sass:
    
    @import url(http://fonts.googleapis.com/icon?family=Material+Icons);

    1 2	@import url(http://fonts.googleapis.com/icon?family=Material+Icons);

• NPM package:
  • Setting
    
    npm i material-design-icons-iconfont -S

    1 2	npm i material-design-icons-iconfont -S

  • Import:
    
    @import "~material-design-icons-iconfont/dist/material-design-icons";

    1 2	@import "~material-design-icons-iconfont/dist/material-design-icons";

Use

After installing vue-materialize-datatable , you just need to import and declare it into your Vue application. And then you can use it via the <datatable> component:

A simple example using vue-materialize-datatable :

Properties

vue-materialize-datatable gives us the following properties to use and customize:

• title : The title of the data sheet (Ex: “List Student”)
• columns : Set the information of the column headers (headers) of the data table, which is an array of objects. For example:
  
  [ { label: "Name", // Tên cột field: "name", // Tên trường sẽ hiển thị từ dữ liệu của mỗi hàng numeric: false, // Ảnh hưởng đến sorting html: false // Có hiển thị dữ liệu html hay không. }, ... ];

  1 2 3 4 5 6 7 8 9 10

  [   {         label: "Name", // Tên cột     field: "name", // Tên trường sẽ hiển thị từ dữ liệu của mỗi hàng     numeric: false,  // Ảnh hưởng đến sorting     html: false    // Có hiển thị dữ liệu html hay không.   },   ... ];

• rows : Set up the data information of rows (body) in the data table, whose values ​​are an array of objects. For example:
  
  [ { name: 'test', // "name" sẽ mapping với data của "field" của các cột ở trên. age: 23, ... }, ... ];

  1 2 3 4 5 6 7 8 9

  [   {         name: 'test', // "name" sẽ mapping với data của "field" của các cột ở trên.     age: 23,     ...   },   ... ];

• perPage : Set the value for the selectBox showing the number of records of the data table on the page. (The default value is [10, 20, 30, 40, 50] ).
• defaultPerPage : Set the default record number on the page (The default value is 10 ). If not set, then by default it will be the first value of perPage .
• initSortCol : Set the column in which data will be sorted at initialization. (The default value is -1 – the table of data will not sort by any column.)
• onClick : Listen for the click event on the data rows.
• clickable : Set to allow click events on the data row (The default value is true ).
• sortable : sortable whether or not to sort the data on the table (The default value is true ).
• searchable : Set the display of the search function (default value is true ).
• exactSearch : Disable fuzzy search (Default value is true ).
• serverSearch : Used when you want to search and retrieve data from the server (The default value is false ).
• serverSearchFunc : Function used to search and retrieve data from the server. Note to use this function, you need to set the serverSearch above to true .
• paginate : Sets the display of next / prev buttons at the bottom of the data table (The default value is true ).
• exportable : Set to show the export function of data (The default value is true ).
• printable : Set to display the print function (default value is true ).
• customButtons : Custom setting of buttons, whose value is an array of objects. For example:
  
  [ { hide: false, // Có ẩn button không icon: "search", // Materialize icon onclick: aFunc() // Lắng nghe sự kiện onclick của button }, ... ];

  1 2 3 4 5 6 7 8 9

  [   {     hide: false, // Có ẩn button không     icon: "search", // Materialize icon     onclick: aFunc() // Lắng nghe sự kiện onclick của button   },   ... ];

Localization

vue-materialize-datatable also supports multiple languages, you can set the display language via locale attribute. Available languages ​​that vue-materialize-datatable support:

• en (English, default)
• ar (Arabic)
• es (Spanish)
• cat (Catalan)
• br (Brazilian Portuguese)
• nl (Netherlands)
• fr (French)

Row-click Event

If you set the clickable property to true (the default), you can bind the event row-click as shown below:

Row buttons

vue-materialize-datatable also allows you to easily add button actions to the data table like this:

Demo

I did a small demo using vue-materialize-datatable as follows

Conclude

Through this article, I have introduced you to vue-materialize-datatable , a package used to display and interact with data tables (datatable) in VueJs applications quickly, simply, and fully. Full of necessary functions and easy customization.

Hope this article will be helpful for you

Refer

https://github.com/MicroDroid/vue-materialize-datatable