The table shown in the previous example was purely for visualization as we did not provide any callback. As soon as we add a callback function for any of the supported operations (read, update, delete, create, list), the according action button will be visible. In order to add a callback function to an operation, we have to modify the table parameters as follows:

var params = {
	dataModel: dataModel,
	uiForm: this.uiSchema,
	items: columns,
	tableLayout: tableConfig,
	data: this.tableData,
	readOperation: (selection) => {
		var options = {
			operation: "READ",
			dataModel: this.dataModel,
			uiForm: this.uiSchema,
			resource: selection,
			buttonTitle: "Close"
		};
		$('#read-form').metadataeditorForm(options, () => {
			$("#formModal").modal('hide');
		});
		$("#formModal").modal('show');
	},
	updateOperation: undefined,
	deleteOperation: undefined,
	createOperation: undefined,
	listOperation: undefined
};

The content of the callback function is very similar to what we did in the simple examples. There are only two differences:

• The form data is taken from the table selection instead of an external source
• The form is not always visible but shown as modal dialog on demand

For details on how to integrate the form as a modal dialog, please refer so the source of this file. To add the table with our read operation we finally have to call:

$('#second-table').metadataeditorTable(params);

By doing this, the table is rendered at the element with id second-table in this HTML file. As you can see, each table row now contains an eye icon in the last column, which will trigger the callback we've defined for the read operation.

---

With the last example in this section, let's come to something more complex and closer to reality. Typically, the Metadata Editor is supposed to serve as frontend to a Web-accessible service providing data and all operations to it. We will now show how to integrate data loading from a remote location including some more customized representation of the result. Therefor, we switch from showing persons to movies. Thus, we have to setup an entirely new table and we start with the column definition:

var columnsMovies = [
	{title: "", field: "image", headerSort: false, formatter:"image", formatterParams:{width:"50px"}, frozen:true, width: 70}, 
	{title: "Title", field: "title", headerSort: false},
	{title: "Release Date", field: "release_date", headerSort: false}
];

Looks quite similar to the first example, except the first column, which uses a special formatter and has a fixed size. As you can see, you have all possibilities offered by the Tabulator library to improve the user experience of your Metadata Editor-based UI. The next parameter object we have to change is the tableConfig. Instead of serving static data we now provide an ajaxURL from where the data will be fetched by Tabulator. Furthermore, we limit the page size to 6 and we provide a minimum height of the table, both only having optical impact.

var tableConfigMovies = {
	layout: "fitColumns",
	pagination: "local",
	ajaxURL: "https://ghibliapi.herokuapp.com/films",
	paginationSize: 6,
	minHeight: 300,
	paginationSizeSelector: [3, 6, 8, 10, 15, 20]
};

Finally, we have to combine everything in a parameter object for the table. Most of what is shown below was already presented before, unless we are now using different properties for dealing with movies instead of persons. The only thing worth mentioning here is, that we are not limited to the form element for using the resource selected in the table, but we can also use single elements, i.e., the image property in this case, on other UI elements easily.

var paramsMovies = {
	dataModel: this.dataModelMovies,
	uiForm: this.uiSchemaMovies,
	items: columnsMovies,
	tableLayout: tableConfigMovies,
	readOperation: (selection) => {
		var optionsMovies = {
			operation: "READ",
			dataModel: this.dataModelMovies,
			uiForm: this.uiSchemaMovies,
			resource: selection,
			buttonTitle: "Close"
		};
		$("#titleImage").attr("src", selection.image);
		$('#movie-form').metadataeditorForm(optionsMovies, (value) => {
			var resource = optionsMovies.resource;
			JSON.parse(JSON.stringify(resource));
			console.log(resource);
			$("#formModalMovies").modal('hide');
		});
		$("#formModalMovies").modal('show');
	},
	updateOperation: undefined,
	deleteOperation: undefined,
	createOperation: undefined,
	listOperation: undefined
};

That's it, after calling the following line we see what we achieved.

$('#third-table').metadataeditorTable(paramsMovies);

---