Scroll Table

Component stability: Beta

Scroll Table

Scroll Table is a special widget based on LibScrollingTable.

Code was rewritten and it is not compatible with original!

Initialization

local scrollTable = StdUi:ScrollTable(parent, cols, numRows, rowHeight);

Description

Creates a advanced scrolling table that is perfect for tabular data.

Arguments

Argument	Type	Optional	Description
parent	Frame	-	Object that should be a parent of scrolling table
cols	table	-	Column definition object, explained below
numRows	number	-	Number of visible rows
rowHeight	number	-	Height of a row

Returns

• Frame

Column definition

Columns definition (parameter cols) is basically an array of objects. Each object is a column definition as follows:

local col = {
	name         = 'Item',
	width        = 32,
	align        = 'LEFT',
	index        = 'texture',
	format       = 'icon',
	sortable     = false,
	color        = {r = 1, g = 1, b = 1, a = 1},
	events	     = {
		OnEnter = function(rowFrame, cellFrame, data, cols, row, realRow, column, table, button, ...)
			-- event handler
		end,
		onLeave = function(rowFrame, cellFrame, data, cols, row, realRow, column, table, button, ...)
			-- event handler
		end
	},
}

Possible column options

Property	Type	Optional	Description
name	string	-	Header text
width	number	-	Column width
index	string or number	-	Data index of cell (row can have either numeric keys or string keys)
format	string	-	Defines how ScrollTable should display cells in this column. Available formats:
align	string	Y	Align of text in cell, can be one of: 'LEFT' (default), 'RIGHT', 'MIDDLE'
color	color or function	Y	Color of text in this column, either of:
sortable	boolean	Y	If you set this to false, column will not be sortable
compareSort	function	Y	Custom sorting function for this column. More about it in section below
events	table	Y	table of custom events

Color values

Either static color in following format:

{r = 1, g = 1, b = 1, a = 1}

Or function color(table, value, rowData, columnData) with parameters:

Argument	Type	Description
table	ScrollTable	Current instance of scrollTable
value	any	Value of cell
rowData	table	Table with all row data
columnData	table	Table with all column data

Column Format

• 'text' - cell will be displayed and sorted as string
• 'number' - cell will be displayed and sorted as number
• 'money' - cell will be displayed as colored money string and sorted as number
• 'icon' - cell will be displayed as texture and sorted as string
• function - cell will execute a custom function that was provided in column definition

Table data format

This widget as opposed to LibScrollingTable supports only one but very flexible data format. Basically each row is table that can have any data in it. You decide which of them are being displayed by defining index (Data index of cell). Example data format:

local data = {
	{columnSomething = 'My data', column2 = 23, notVisibleData = 'abc'},
	{columnSomething = 'My data2', column2 = 12, notVisibleData = 'abc'},
	{columnSomething = 'My data3', column2 = 43, notVisibleData = 'abc'},
};

If there is no column that has index = 'notVisibleData' then it will not be visible in table. Columns index can be number as well.

Events

There are 2 types of events in this widget:

1. Cell Events - executed on each cell
2. Header Events - executed on each header

Handlers are NOT limited to OnEnter, OnLeave, OnClick. It can be anything that is supported by Button. Possible event types:

• OnAttributeChanged
• OnChar
• OnClick
• OnDoubleClick
• OnDragStart
• OnDragStop
• OnEnter
• OnEvent
• OnHide
• OnKeyDown
• OnKeyUp
• OnLeave
• OnLoad
• OnMouseDown
• OnMouseUp
• OnMouseWheel
• OnReceiveDrag
• OnShow
• OnSizeChanged
• OnUpdate
• PostClick
• PreClick

Keep in mind that setting OnEnter, OnLeave, OnClick on cell events or OnClick on header events will override default handlers. If you wish to prevent that behavior your event handler function should return true.

Custom sort function

If you decide to provide your own custom sorting function, it will be used to compare 2 rows in sorting method. Original function looks like this:

CompareSort = function(self, rowA, rowB, sortBy)
	local a = self:GetRow(rowA);
	local b = self:GetRow(rowB);
	local column = self.columns[sortBy];
	local idx = column.index;

	local direction = column.sort or column.defaultSort or 'asc';

	if direction:lower() == 'asc' then
		return a[idx] > b[idx];
	else
		return a[idx] < b[idx];
	end
end

So your function needs to return true if A row is higher than B row in ascending sort mode. And reverse in descending mode.

Custom sort arguments

Argument	Type	Description
self	ScrollTable	Instance of ScrollTable.
rowA	number	Index of row A to compare
rowB	number	Index of row B to compare
sortBy	number	Index of column that was sort requested (it will be always the same number)

Demo

local StdUi = LibStub('StdUi');

local window = StdUi:Window(UIParent, 'Title', 500, 500);
window:SetPoint('CENTER');

local btn = StdUi:Button(window, 100, 24, 'Random Data');
StdUi:GlueTop(btn, window, 0, -40);

local function showTooltip(frame, show, spellId)
	if show then
		GameTooltip:SetOwner(frame);
		GameTooltip:SetPoint('RIGHT');
		GameTooltip:SetSpellByID(spellId)
	else
		GameTooltip:Hide();
	end

end


local data = {};
local cols = {

	{
		name         = 'Index',
		width        = 40,
		align        = 'LEFT',
		index        = 'i',
		format       = 'number',
	},

	{
		name         = 'Spell Id',
		width        = 60,
		align        = 'LEFT',
		index        = 'spellId',
		format       = 'number',
		color        = function(table, value)
			local x = value/200000;
			return {r=x, g=1-x, b=0, a=1};
		end
	},
	{
		name         = 'Text',
		width        = 180,
		align        = 'LEFT',
		index        = 'name',
		format       = 'string',
	},

	{
		name         = 'Icon',
		width        = 40,
		align        = 'LEFT',
		index        = 'icon',
		format       = 'icon',
		sortable     = false,
		events         = {
			OnEnter = function(table, cellFrame, rowFrame, rowData, columnData, rowIndex)
				local cellData = rowData[columnData.index];
				showTooltip(cellFrame, true, rowData.spellId);
				return false;
			end,
			OnLeave = function(rowFrame, cellFrame)
				showTooltip(cellFrame, false);
				return false;
			end
		},
	},
}


local st = StdUi:ScrollTable(window, cols, 14, 24);
st:EnableSelection(true);
StdUi:GlueTop(st, window, 0, -100);

local function getRandomSpell()
	local name = nil;
	local icon, castTime, minRange, maxRange, spellId;

	while name == nil do
		name, _, icon, castTime, minRange, maxRange, spellId =
		GetSpellInfo(math.random(100, 200000));
	end

	return {
		name = name,
		icon = icon,
		castTime = castTime,
		minRange = minRange,
		maxRange = maxRange,
		spellId = spellId;
	};
end

local function randomizeData()
	local lx = math.random(1000, 6000);
	data = {};

	for i=1, lx do
		local r = getRandomSpell()
		r.i = i;
		tinsert(data, r);
	end

	-- update scroll table data
	st:SetData(data);
end

btn:SetScript('OnClick', randomizeData);