DataTable

Features

• Pagination
• Automatic column and row resizing
• Customizable row count
• Selectable rows
• cell text styling
• row styling
• Row context menu
• Support for adding and removing rows
• cell border styling
• conditional row rendering
• conditional row styling

Properties and functions

.rows - integer //the number of rows you want each table page to have
.data - table array
.columns - table array
.rowStyle - table
.style - table
.contextMenu - table
.onRowClick(row) - function //when the user clicks a row this function will be called with the row that was clicked
.renderRow(row) - function //attach a function that returns a boolean, this function will be called for every row and can be used to conditionally render a row ( return true to render the row or false to not render it )
.indexOfRow(row) - function // will return the index of a specific row
.addRow(row) - function
.removeRow(row) - function
.setPage(integer pageIndex) - function
.removeRowBorders() - function
.changeHeader(oldHeaderText, newHeaderText) - function
.beforePageChange(oldPage, newPage) - function/event //will be called just before a page is changed
.afterPageChange(oldPage, newPage) - function/event //will be called just after a page is changed

Styling

You can style the DataTable by creating a style table and passing it to the .style property when creating the DataTable. Below is an example of a style table and a DataTable using it:

local styleTable = {
	background = Colour(51,57, 61,200),
	headerTextColor = Colour(51,150,255),
	cellTextColor = Colour(255,255,255),
	headerTextSize =  20,
	cellTextSize =  12,
	selectedRowColor = Colour(52,129,216,80)
}
// creating a datable and applying the style table
UI.DataTable({
	id="tbl",
	align =  "center",
	rows =  10,
	style = styleTable
	columns = [
		{ header =  "Column1", field =  "col1"},
		{ header =  "Column2", field =  "col2" },
		{ header =  "Column3", field =  "col3" },
		{ header =  "Column4", field =  "col4" },
		{ header =  "Column5", field =  "col5" }
	]
	data = [
		{ col1 =  "val1", col2 =  "val22" , col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val2", col2 =  "abc", col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val3", col2 =  "val2", col3 =  "val3", col4 =  "val4", col5 =  "asds" }
	]
});

Conditionally styling a row

You can also conditionally style a specifc row by providing a row style. This style will override the table style. On the example below we will create a row style and apply it to all the rows where "Column2" equals "abc":

local styleTable = {
	background = Colour(51,57, 61,200),
	headerTextColor = Colour(51,150,255),
	cellTextColor = Colour(255,255,255),
	headerTextSize =  20,
	cellTextSize =  12,
	selectedRowColor = Colour(52,129,216,80)
}; 

UI.DataTable({
	id="tbl",
	align =  "center",
	rows =  10,
	style = styleTable
	rowStyle = {
		style ={
			cellTextColor = Colour(255,255,255),
			rowColor = Colour(230,0,20,100),
			cellTextSize =  12,
			borderColor =Colour(255,255,255),
			borderSize =  1
		},
		condition =  function(row){
			return row.col2 ==  "abc";
		}
	}
	columns = [
		{ header =  "Column1", field =  "col1"},
		{ header =  "Column2", field =  "col2" },
		{ header =  "Column3", field =  "col3" },
		{ header =  "Column4", field =  "col4" },
		{ header =  "Column5", field =  "col5" }
	]
	data = [
		{ col1 =  "val1", col2 =  "val22" , col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val2", col2 =  "abc", col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val3", col2 =  "val2", col3 =  "val3", col4 =  "val4", col5 =  "asds" },
	]
});

Conditionally rendering rows

You can conditionally render a row by attaching a function to the .renderRow property that returns a boolean. When true, the row will be rendered and when false the row will be ignored (not rendered) . Using the same code from the previous examples, we will now only render rows where the column5 value is equal to "val5":

UI.DataTable({
	id="tbl",
	align =  "center",
	rows =  10,
	style = styleTable
	renderRow =  function(row){
		return row.col5 ==  "val5";
	}
	columns = [
		{ header =  "Column1", field =  "col1"},
		{ header =  "Column2", field =  "col2" },
		{ header =  "Column3", field =  "col3" },
		{ header =  "Column4", field =  "col4" },
		{ header =  "Column5", field =  "col5" }
	]
	data = [
		{ col1 =  "val1", col2 =  "val22" , col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val2", col2 =  "abc", col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val3", col2 =  "val2", col3 =  "val3", col4 =  "val4", col5 =  "asds" },
	]
});

Right click row context menu

You can attach a right click context menu to each row by using the .contextMenu property and specifying the options and click listeners for each option:

UI.DataTable({
	id="tbl",
	align =  "center",
	rows =  10,
	onRowClick =  function(row){
		local idx =this.indexOfRow(row);
		Console.Print("clicked row "+this.indexOfRow(row));
	},
	contextMenu = {
		options = [
			{
				name =  "Delete",
				color = Colour(255,0,0),
				onClick =  function() {
					local row =  this.data.row;  // the row that was right-clicked
					UI.DataTable("tbl").removeRow(row);
				}
			},
			{
				name =  "Option 2",
				onClick =  function() {
					Console.Print("option2");
				}
			},
			{
				name =  "Option 3",
				onClick =  function() {
					Console.Print("option3");
				}
			}
		]
	},
	style = styleTable
	columns = [
		{ header =  "Column1", field =  "col1"},
		{ header =  "Column2", field =  "col2" },
		{ header =  "Column3", field =  "col3" },
		{ header =  "Column4", field =  "col4" },
		{ header =  "Column5", field =  "col5" }
	]
	data = [
		{ col1 =  "val1", col2 =  "val22" , col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val2", col2 =  "abc", col3 =  "val3", col4 =  "val4", col5 =  "val5"},
		{ col1 =  "val3", col2 =  "val2", col3 =  "val3", col4 =  "val4", col5 =  "asds" }
	]
});