Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://mdbootstrap.com/docs/vue/data/datatables/ below:

Vue Datatables - examples & tutorial

Vue Datatable is a component which mix tables with advanced options like searching, sorting and pagination.

Note: Read the API tab to find all available options and advanced customization

Vue Datatable component can render your data in three ways. In the first one, you simply create a HTML markup for your table inside MDBDatatable component - you can customize your table later by adding props to the component. Some of the more advanced options for columns, described in the Advanced Data Structure section can be also used by setting proper attritube directly to a column (f.e. sort:"false").

Vue Datatable collects information from HTML markup to create a data structure - the <table> element will be replaced in the DOM with a different node after component initializes.

The second option is a very basic data structure, where columns are represented by an array of strings and so is each row. The table will match each string in a row to a corresponding index in a columns array. This data structure, as it's based on indexes, not key-value pairs, can be easily used for displaying data from the CSV format.

The last and most advanced data structure allows customizing each column (sort, width, fixed, field) and matches values from each row to a column in which the field equals to a given key value. This data format can be easily used to display JSON data.

You can also use a mixed version, where columns are an array of object and each row is an array of strings.

The search field is not a part of the Datatable - place an MDBInput component on your page and use search property to filter entries.

When using the searching method, you can specify which columns it should take under consideration - pass an array of fields as searchColumns property. By default, searching will apply to all columns.

When the selectable property is set to true, user can interact with your table by selecting rows - you can get the selected rows by listening to the selected-rows emitted event.

Setting maximum height/width will enable vertical/horizontal scrolling.

Making a column sticky requires setting two options - width and fixed. A first option is a number of pixels, while the other one can be either a true (in which case the column will stick on the left) or a string right.

Loading content asynchronously is an important part of working with data tables - with Vue Datatable you can easily display content after fetching it from API by updating the dataset object. The component watches dataset object and updates on each change. Additionally, setting a loading option to true will disable all interactions and display a simple loader while awaiting data.

With the Datatable it's possible to render custom content, such as action buttons and attach listeners to their events. Keep in mind, that the component rerenders content when various actions occur (f.e. sort, search) and event listeners need to be updated. To make it possible, the components emits a custom event render.

Click on the row to preview the message.

Selecting the row with checkbox doesn't emit the row-click event.

Note: To prevent this action with other clickable elements within the row, call stopPropagation() method.

Note: This feature cannot be used simultaneously with edit option.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4