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:

• 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 options:

• name - string - Header text
• width - number - Column width
• index - string|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:
  • '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
• align - string (optional) - Align of text in cell, can be one of:
  • 'LEFT' (default)
  • 'RIGHT'
  • 'MIDDLE'
• color - Color|function (optional) - Color of text in this column, either of:
  • {r = 1, g = 1, b = 1, a = 1} - Static color
  • function color(table, value, rowData, columnData) - Parameters are:
    • 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
• sortable - bool (optional) - If you set this to false, column will not be sortable
• compareSort - function (optional) - Custom sorting function for this column. More about it in section below
• events - table (optional) - table of custom events

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.

Arguments:

• self - ScrollTable - instance of scroll table.
• 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:

Click to play Video:

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);