Module:ResponsiveTable

Module documentation[view] [edit] [history] [purge]

This table can be created in three separate ways.

From wikitext

To create the table from wikitext, follow the following example:

{{#invoke:Lua|invoke|module=ResponsiveTable|fn=start|col1=Col 1|col2=Col 2|width1=100px|leftalign2=true|header=Header|footer=Footer}}
{{#invoke:Lua|invoke|module=ResponsiveTable|fn=row|content1=Row 1 Col 1|content2=Row 1 Col 2}}
{{#invoke:Lua|invoke|module=ResponsiveTable|fn=row|content1=Row 2 Col 1|content2=Row 2 Col 2}}
{{#invoke:Lua|invoke|module=ResponsiveTable|fn=end}}

Header

Footer

Col 1	Col 2
Row 1 Col 1	Row 1 Col 2
Row 2 Col 1	Row 2 Col 2

Using wrapper templates

The same table using wrapper templates:

{{ResponsiveTableStart|col1=Col 1|col2=Col 2|width1=100px|leftalign2=true|header=Header|footer=Footer}}
{{ResponsiveTableRow|content1=Row 1 Col 1|content2=Row 1 Col 2}}
{{ResponsiveTableRow|content1=Row 2 Col 1|content2=Row 2 Col 2}}
{{ResponsiveTableEnd}}

From lua

The same table from within lua:

local rT = require("Module:ResponsiveTable").lua

local output = ""
output = output .. rT.startTable({
	col1 = "Col 1",
	col2 = "Col2",
	width1 = "100px",
	leftalign2 = true,
	header = "Header",
	footer = "Footer"
})
output = output .. rT.row({
	content1 = "Row 1 Col 1",
	content2 = "Row 1 Col 2"
})
output = output .. rT.row({
	content1 = "Row 2 Col 1",
	content2 = "Row 2 Col 2",
})
output = output .. rT.endTable()

---

local p = {}

local getArgs = require('Module:Arguments').getArgs
local Logic = require('Module:Logic')
local Variables = require('Module:Variables')

local MAXCOL = 15

-- aliases for invoking the table functions

---@param frame Frame
---@return string
p['start'] = function(frame) return p.lua.startTable(getArgs(frame)) end

---@param frame Frame
---@return string
p['row'] = function(frame) return p.lua.row(getArgs(frame)) end

---@param frame Frame
---@return string
p['end'] = function(frame) return p.lua.endTable(getArgs(frame)) end

-- function aliases to not break backwards compatibility
p.ResponsiveTableStart = p['start']
p.ResponsiveTableRow = p['row']
p.ResponsiveTableEnd = p['end']

-- nest lua accessible functions
p.lua = {}

-- function to start table
function p.lua.startTable(args)
	-- function to check if arg exist and is not an empty string
	local hasArg = function(key) return not Logic.isEmpty(args[key]) end

	-- Create the table
	local style = (hasArg("width") and "width:" .. args.width .. ";" or "")
		.. (hasArg("cell_width") and "table-layout:auto;" or "")
	local output = '<table class="rl-responsive-table ' .. (args.class or "") .. '"' .. (style ~= "" and ' style="' .. style .. '"' or "") .. '>'

	-- header
	if hasArg("header") then
		output = output .. '<caption style="caption-side: top;">' .. args.header .. "</caption>"
	end

	-- footer
	if hasArg("footer") then
		output = output .. '<caption style="caption-side: bottom;">' .. args.footer .. "</caption>"
	end

	local header = mw.html.create('tr')

	for i = 1, MAXCOL do
		-- fill in the headers
		if hasArg("col" .. i) then
			-- declare variables
			Variables.varDefine("left_align" .. i, hasArg("leftalign" .. i) and "1" or "0")
			Variables.varDefine("columnlabel" .. i, args["col" .. i])

			-- create th
			local col = mw.html.create('th')
				:attr('scope', 'col')
				:node(args["col" .. i])
			if hasArg("width" .. i) then
				col:css("width", args["width" .. i])
			end
			header:node(col)
		else
			break
		end
	end

	return output .. tostring(header)
end

-- function to create table row
function p.lua.row(args)
	-- function to check if arg exist and is not an empty string
	local hasArg = function(key) return not Logic.isEmpty(args[key]) end

	-- Create the row
	local output = mw.html.create('tr')

	if hasArg("bgcolor") then
		output:css("background-color", args.bgcolor)
	end

	-- Fill in the cells
	for i = 1, MAXCOL do
		label = Variables.varDefault("columnlabel" .. i, args["label" .. i])
		if not Logic.isEmpty(label) then
			local td = mw.html.create('td')
				:attr('data-label', label)
				:node(args['content' .. i])
			if Variables.varDefault("left_align" .. i) == "1" then
				td:addClass("rl-responsive-table-left-align")
			end
			output:node(td)
		else
			break
		end
	end

 	return tostring(output)
end

-- function to end table
function p.lua.endTable()
	local output = '</table>'

	-- clear variables
	for i = 1, MAXCOL do
		Variables.varDefine("left_align" .. i, "")
		Variables.varDefine("columnlabel" .. i, "")
	end

	return output
end

return p