Basic example

Basic example with sorting, pagination, printing, excel export turned on by default.

<datatable
	title="Basic table"
	:columns="tableColumns1"
	:rows="tableRows1"
/>
						

data() {
	return {
		tableColumns1: [
			{
				label: "Character name",
				field: "charName",
				numeric: false,
				html: false
			},
			{
				label: "First appearance",
				field: "firstAppearance",
				numeric: false,
				html: false
			},
			{
				label: "Created by",
				field: "createdBy",
				numeric: false,
				html: false
			},
			{
				label: "Voiced by",
				field: "voicedBy",
				numeric: false,
				html: false
			}
		],
		tableRows1: [
			{
				charName: "Abu",
				firstAppearance: "Alladin (1992)",
				createdBy: "Joe Grant",
				voicedBy: "Frank Welker"
			},
			{
				charName: "Magic Carpet",
				firstAppearance: "Alladin (1992)",
				createdBy: "Randy Cartwright",
				voicedBy: "N/A"
			},
			{
				charName: "The Sultan",
				firstAppearance: "Alladin (1992)",
				createdBy: "Navid Negahban",
				voicedBy: "Douglas Seale"
			}
		],
	}
}
						

Minimal table

Table with all possible options set to false

<datatable
	title="Minimal table"
	:columns="tableColumns1"
	:rows="tableRows1"
	:clickable="false"
	:sortable="false"
	:exactSearch="false"
	:searchable="false"
	:paginate="false"
	:exportable="false"
	:printable="false"
/>
						

Dont forget to set :rows and :columns in your data()!

Localization

Specified language of table controls with locale prop.

<datatable
	title="Localized table"
	:columns="tableColumns1"
	:rows="tableRows2"
	locale="es"
/>
						

tableRows2: [
	{
		charName: "Abu",
		firstAppearance: "Alladin (1992)",
		createdBy: "Joe Grant",
		voicedBy: "Frank Welker"
	},
	{
		charName: "Magic Carpet",
		firstAppearance: "Alladin (1992)",
		createdBy: "Randy Cartwright",
		voicedBy: "N/A"
	},
	{
		charName: "The Sultan",
		firstAppearance: "Alladin (1992)",
		createdBy: "Navid Negahban",
		voicedBy: "Douglas Seale"
	}
]
						

Interactive rows

Table with interactive rows, REACTing👀 on every click with materialize modal window.

<datatable
	title="Click on row!"
	:columns="tableColumns1"
	:rows="tableRows3"
	v-on:row-click="onRowClick"
/>
						

Setting html code of modal Materialize window anywhere in the code. More info.

<div id="modal1" class="modal">
	<div class="modal-content">
		<h4></h4>
		<p></p>
	</div>
	<div class="modal-footer">
		<a class="modal-close waves-effect waves-green btn-flat"
			href="#!">
			Ok
		</a>
	</div>
</div>
						

Set row content and data variables for modal windows.

data () {
	return {
		currentModalTitle: "",
		currentModalText: "",
		tableRows3: [
			{
				charName: "Abu",
				firstAppearance: "Alladin (1992)",
				createdBy: "Joe Grant",
				voicedBy: "Frank Welker",
				desc:
				"Abu is Aladdin's kleptomaniac monkey partner with a high-pitched voice and can talk a little. The animators filmed monkeys at the San Francisco Zoo to study the movements Abu would have. The character is based on the similarly named Abu the thief, played by Sabu Dastagir in the 1940 version of The Thief of Bagdad. Abu also appears in Kingdom Hearts and Kingdom Hearts II, playing a large role in the latter with his kleptomanic habits getting him into trouble during Sora's first return visit to Agrabah."
			},
			{
				charName: "Magic Carpet",
				firstAppearance: "Alladin (1992)",
				createdBy: "Randy Cartwright",
				voicedBy: "N/A",
				desc:
				'The Magic Carpet is an ancient carpet that was found by Aladdin in the Cave of Wonders treasure room. It is a character without a voice, and expresses itself entirely through pantomime and movements. It is genderless, but is often assumed to be male by Genie and other characters. It is playful, as it reacts with Abu, intelligent, as it beats Genie at chess (and most other things), and helpful, as it helps Aladdin romance Princess Jasmine during the song "A Whole New World". It sometimes uses its tassels as hands and feet to accentuate its feelings.'
			},
			{
				charName: "The Sultan",
				firstAppearance: "Alladin (1992)",
				createdBy: "Navid Negahban",
				voicedBy: "Douglas Seale",
				desc:
				"The Sultan (real name: Hamed Bobolonius II) is Princess Jasmine's father and the pompous but kind ruler of Agrabah. Some aspects of the character were inspired in the Wizard of Oz, to create a bumbling authority figure. He was voiced by Douglas Seale in the first film, by Val Bettin in the sequels and the TV series, and by Jeff Bennett in Disney Princess Enchanted Tales: Follow Your Dreams. In the 2019 film, the Sultan was protrayed by Navid Negahban."
			}
		],
	}
}
						

Initialize modal window. More info.

mounted() {
	document.addEventListener("DOMContentLoaded", function() {
		var elems = document.querySelectorAll(".modal");
		var instances = M.Modal.init(elems);
	});
}
						

Define method which fires up after click on a row and setting up modal window content.

methods: {
	onRowClick: function(row) {
		this.currentModalTitle = row.charName;
		this.currentModalText = this.tableRows3.find(
			x => x.charName === row.charName
		).desc;

		var elem = document.querySelectorAll(".modal")[0];
		var instance = M.Modal.getInstance(elem);
		instance.open();
	}
}
						

Custom pagination

Table with custom amount of rows on every page.

<datatable
	title="Table with custom pagination"
	:columns="tableColumns1"
	:rows="tableRows4"
	:perPage="[3, 5, 10]"
/>
						

data() {
	return {
		tableRows4: [
			{
				charName: "Abu",
				firstAppearance: "Alladin (1992)",
				createdBy: "Joe Grant",
				voicedBy: "Frank Welker"
			},
			{
				charName: "Magic Carpet",
				firstAppearance: "Alladin (1992)",
				createdBy: "Randy Cartwright",
				voicedBy: "N/A"
			},
			{
				charName: "The Sultan",
				firstAppearance: "Alladin (1992)",
				createdBy: "Navid Negahban",
				voicedBy: "Douglas Seale"
			},
			{
				charName: "Razoul",
				firstAppearance: "Alladin (1992)",
				voicedBy: "Jim Cummings"
			},
			{
				charName: "Fazahl",
				firstAppearance: "Alladin (1992)",
				voicedBy: "Jim Cummings"
			},
			{
				charName: "Hakim",
				firstAppearance: "Alladin (1992)",
				voicedBy: "Numan Acar"
			},
			{
				charName: "Zagoolien",
				firstAppearance: "Alladin (1992)",
				voicedBy: "Jeff Bennett"
			},
			{
				charName: "The Peddler",
				firstAppearance: "Alladin (1992)",
				voicedBy: "Frank Welker"
			}
		],
	}
}
						

Loading animation

Table with empty array of rows

<datatable
	title="Table with loading animation"
	:columns="tableColumns1"
	:rows="[]"
	:perPage="[3, 5, 10]"
/>
						

Row buttons

Table with delete buttons on every row.

<datatable title="Do not press the red buttons!"
	:columns="tableColumns1"
	:rows="tableRows5">
	<th slot="thead-tr">
		Actions
	</th>
	<template slot="tbody-tr" scope="props">
		<td>
			<button class="btn red darken-2 waves-effect waves-light compact-btn"
				@click="e => deleteItem(props.row, e)">
				<i class="material-icons white-text">delete</i>
			</button>
		</td>
	</template>
</datatable>
						

data() {
	return {
		tableRows5: [
			{
				charName: "Abu",
				firstAppearance: "Alladin (1992)",
				createdBy: "Joe Grant",
				voicedBy: "Frank Welker"
			},
			{
				charName: "Magic Carpet",
				firstAppearance: "Alladin (1992)",
				createdBy: "Randy Cartwright",
				voicedBy: "N/A"
			},
			{
				charName: "The Sultan",
				firstAppearance: "Alladin (1992)",
				createdBy: "Navid Negahban",
				voicedBy: "Douglas Seale"
			}
		]
	}
}