Melvor Idle:How to edit/Lua

mw.html

In wikicode, we use the table syntax to create tables. However, in Lua, using the html library is preferred. This is because the mw.html is a fluent interface that can be used to very easily add, remove or customise specific parts of a table (or otherwise html element).

Creating a basic table

A table can be created by simply using mw.html.create('table'). This returns a fluent interface that can then be expanded upon. The following is a basic example of how to create a table using mw.html

-- Create a table and add the wikitable css class.
local html = mw.html.create('table')
		:addClass('wikitable') --

-- Define header row.
html:tag('tr')
        :tag('th'):wikitext('Name')
		:tag('th'):wikitext('Cost')

-- Define 2 data rows.
html:tag('tr')
        :tag('td'):wikitext('Item 1')
		:tag('td'):wikitext('123')
    :tag('tr')
        :tag('td'):wikitext('Item 2')
		:tag('td'):wikitext('31')

return tostring(html)

The above code will return the following table:

Name	Cost
Item 1	123
Item 2	31

One does not have to use the base html object every time. Since it is a fluent interface, extra tags and content can be continously added to the previous tags. An example of this can be seen when adding the two data rows. The following tags are used:

• tr is a table row tag. This adds a new row to the table.
• th is a table header tag. This defines one table header cell.
• td is a table data tag. This defines one table data cell.

attr tag

Adds a specific attribute to the current tag, such as 'colspan' for a column span.

wikitext

Adds wikicode text to the current tag. Can be regular text or any valid wikicode text (as one would use when writing on a mediawiki page).

addClass

Adds a css class to the current tag. For tables, 'wikitable' is always used to create a mediawiki formatted table.

css

Adds a specific css style to the current tag. For instance, to align the text right, :css('text-align', 'right') is used.

node

The node tag allows other html elements to be added as a nested element to the current tag. This can, for instance, be used to add a nested table to a table, or add an already formatted html element to a table.

Advanced example

local html = mw.html.create('table')
		:addClass('wikitable sortable stickyHeader')

	html:tag('tr')
			:tag('th'):attr('colspan', 2)
					  :wikitext('Purchase')
			:tag('th'):wikitext(gainedName .. ' Value')
			:tag('th'):wikitext(gainedName .. ' per ' .. spentName)

	for loop pseudocode do
		html:tag('tr')
				:tag('td'):addClass('table-img')
						  :wikitext(Common.getPurchaseIcon({purchase, notext=true, size='50'}))
				:tag('td'):attr('data-sort-value', name)
						  :wikitext(expansionIcon)
						  :wikitext(Common.getPurchaseIcon({purchase, noicon=true}))
				:tag('td'):wikitext(Common.getRequirementString(purchase.purchaseRequirements, 'None'))
				:tag('td'):attr('data-sort-value', v.gainedValue)
						  :css('text-align', 'right')
						  :wikitext(Icons._Currency(gainedCurrencyID, v.gainedValue))
	end

return tostring(html)

As can be seen above, content can be added to an html element in a for loop. The fluent interface that is defined outside of the loop should be used to additional items.