Work on the Market Interface (feel free to test it out so far, can't purchase items through the UI yet), More on UITable (needs work on headers still).

* Tables can now have headers (the layouts will require some more work before read to be used formally).
* Finished Market offers display, Item details display, and Item statistics display.
* Added getSelectedWidget to UIRadioGroup class.

Market TODO:
* Create buy/sell offer.
* Purchase sale offer or accept purchase offer.
* More item filtering features (weapons, types, depot only, vocation, etc).
* Item searching feature.
* View your offers (history/current).
* UI touch ups and optimizations.

modules/client_skins/skins/default/styles/tables.otui

@@ -1,13 +1,26 @@
 Table < UITable
   layout: verticalBox
+  header-column-style: HeaderTableColumn
+  header-row-style: HeaderTableRow
   column-style: TableColumn
   row-style: TableRow
+  
+TableData < UIScrollArea
+  layout: verticalBox
 
 TableRow < Label
-  id: defaultRow
   layout: horizontalBox
   height: 10
+  text-wrap: true
 
 TableColumn < Label
-  id: defaultColumn
   width: 30
+  text-wrap: true
+
+TableHeaderRow < Label
+  layout: horizontalBox
+  height: 10
+  text-wrap: true
+
+TableHeaderColumn < Button
+  width: 30

modules/corelib/ui/uiradiogroup.lua

@@ -4,6 +4,7 @@ UIRadioGroup = newclass()
 function UIRadioGroup.create()
   local radiogroup = UIRadioGroup.internalCreate()
   radiogroup.widgets = {}
+  radiogroup.selectedWidget = nil
   return radiogroup
 end
 
@@ -43,3 +44,7 @@ function UIRadioGroup:selectWidget(selectedWidget)
 
   signalcall(self.onSelectionChange, self, selectedWidget, previousSelectedWidget)
 end
+
+function UIRadioGroup:getSelectedWidget()
+  return self.selectedWidget
+end

modules/corelib/ui/uitable.lua

@@ -1,27 +1,51 @@
 -- @docclass
-UITable = extends(UIScrollArea)
+--[[
+  TODO:
+    * Make table headers more robust.
+    * Get dynamic row heights working with text wrapping.
+    * Every second row different background color applied.
+]]
+UITable = extends(UIWidget)
+
+local HEADER_ID = 'row0'
 
 function UITable.create()
   local table = UITable.internalCreate()
+
+  table.headerRow = nil
+  table.dataSpace = nil
+
   table.rows = {}
-  table.rows.columns = {}
   table.rowBaseStyle = nil
+
+  table.columns = {}
   table.columBaseStyle = nil
+
+  table.headerRowBaseStyle = nil
+  table.headerColumnBaseStyle = nil
+
   table.selectedRow = nil
   return table
 end
 
-function UITable:destroy()
+function UITable:onDestroy()
   for k,row in pairs(self.rows) do
     row.onClick = nil
   end
   self.rows = {}
+  self.columns = {}
+  self.headerRow = {}
+  self.selectedRow = nil
+  self.dataSpace = nil
 end
 
 function UITable:onStyleApply(styleName, styleNode)
-  UIScrollArea.onStyleApply(self, styleName, styleNode)
   for name, value in pairs(styleNode) do
-    if name == 'column-style' then
+    if name == 'table-data' then
+      addEvent(function()
+        self:setTableData(self:getParent():getChildById(value))
+      end)
+    elseif name == 'column-style' then
       addEvent(function()
         self:setColumnStyle(value)
       end)
@@ -29,32 +53,101 @@ function UITable:onStyleApply(styleName, styleNode)
       addEvent(function()
         self:setRowStyle(value)
       end)
+    elseif name == 'header-column-style' then
+      addEvent(function()
+        self:setHeaderColumnStyle(value)
+      end)
+    elseif name == 'header-row-style' then
+      addEvent(function()
+        self:setHeaderRowStyle(value)
+      end)
     end
   end
 end
 
-function UITable:addRow(columns)
+function UITable:hasHeader()
-  if not columns or type(columns) ~= 'table' then
+  return self.headerRow ~= nil
-    g_logger.error('UITable:addRow - table columns must be provided in a table')
+end
+
+function UITable:clearData()
+  if not self.dataSpace then
+    return
+  end
+  self.dataSpace:destroyChildren()
+end
+
+function UITable:addHeaderRow(data)
+  if not data or type(data) ~= 'table' then
+    g_logger.error('UITable:addHeaderRow - table columns must be provided in a table')
+    return
   end
 
-  -- TODO: table header rows as buttons.
+  -- build header columns
-  --[[if #self.rows < 1 then
+  local columns = {}
-    g_ui.createWidget(self.rowBaseStyle, self)
+  for _, column in pairs(data) do
-  end]]
+    local col = g_ui.createWidget(self.headerColumnBaseStyle)
+    for type, value in pairs(column) do
+      if type == 'width' then
+        col:setWidth(value)
+      elseif type == 'height' then
+        col:setHeight(value)
+      elseif type == 'text' then
+        col:setText(value)
+      end
+    end
+    table.insert(columns, col)
+  end
 
-  local row = g_ui.createWidget(self.rowBaseStyle, self)
+  -- create a new header
-  row.columns = {}
+  local headerRow = g_ui.createWidget(self.headerRowBaseStyle, self)
+  local newHeight = (self.dataSpace:getHeight()-headerRow:getHeight())-self.dataSpace:getMarginTop()
+  self.dataSpace:applyStyle({ height = newHeight })
 
+  headerRow:setId(HEADER_ID)
   for _, column in pairs(columns) do
+    headerRow:addChild(column)
+    self.columns[HEADER_ID] = column
+  end
+
+  headerRow.onClick = function(headerRow) self:selectRow(headerRow) end
+  self.headerRow = headerRow
+  return headerRow
+end
+
+function UITable:removeHeaderRow()
+  self.headerRow:destroy()
+  self.headerRow = nil
+end
+
+function UITable:addRow(data, height)
+  if not self.dataSpace then
+    g_logger.error('UITable:addRow - table data space has not been set, cannot add rows.')
+    return
+  end
+  if not data or type(data) ~= 'table' then
+    g_logger.error('UITable:addRow - table columns must be provided in a table.')
+    return
+  end
+
+  local row = g_ui.createWidget(self.rowBaseStyle, self.dataSpace)
+  if height then row:setHeight(height) end
+  local rowId = #self.rows
+  if rowId < 1 then rowId = 1 end
+  rowId = 'row'..rowId
+  row:setId(rowId)
+
+  for _, column in pairs(data) do
     local col = g_ui.createWidget(self.columBaseStyle, row)
-    if column[1] then
+    for type, value in pairs(column) do
-      col:setText(column[1])
+      if type == 'width' then
+        col:setWidth(value)
+      elseif type == 'height' then
+        col:setHeight(value)
+      elseif type == 'text' then
+        col:setText(value)
+      end
     end
-    if #column > 1 then
+    self.columns[rowId] = col
-      col:setWidth(column[2])
-    end
-    table.insert(row.columns, col)
   end
   row.onClick = function(row) self:selectRow(row) end
   table.insert(self.rows, row)
@@ -86,16 +179,35 @@ function UITable:selectRow(selectedRow)
   signalcall(self.onSelectionChange, self, selectedRow, previousSelectedRow)
 end
 
+function UITable:setTableData(tableData)
+  self.dataSpace = tableData
+  self.dataSpace:applyStyle({ height = self:getHeight() })
+end
+
 function UITable:setRowStyle(style)
   self.rowBaseStyle = style
-  --[[for k, row in pairs(self.rows) do
+  for _, row in pairs(self.rows) do
     row:setStyle(style)
-  end]]
+  end
 end
 
 function UITable:setColumnStyle(style)
   self.columBaseStyle = style
-  --[[for k, col in pairs(self.rows.columns) do
+  for _, col in pairs(self.columns) do
     col:setStyle(style)
-  end]]
+  end
+end
+
+function UITable:setHeaderRowStyle(style)
+  self.headerRowBaseStyle = style
+  if self.headerRow then
+    self.headerRow:setStyle(style)
+  end
+end
+
+function UITable:setHeaderColumnStyle(style)
+  self.headerColumnBaseStyle = style
+  if table.hasKey(HEADER_ID) then
+    self.columns[HEADER_ID]:setStyle(style)
+  end
 end

modules/game_market/market.lua

@@ -29,15 +29,28 @@ local depot = {}
 local information ={}
 local selectedItem
 local nameLabel
+local buyOfferTable
+local sellOfferTable
+local detailsTable
+local buyStatsTable
+local sellStatsTable
 
 local currentItems = {}
 local itemsPanel
 local radioItemSet
 local filterBox
 
-local function getMarketCategoryName(category)
+local offerTableHeader = {
-  if table.hasKey(MarketCategoryStrings, category) then
+    {['text'] = 'Player Name', ['width'] = 100},
-    return MarketCategoryStrings[category]
+    {['text'] = 'Amount', ['width'] = 60},
+    {['text'] = 'Total Price', ['width'] = 90},
+    {['text'] = 'Peice Price', ['width'] = 80},
+    {['text'] = 'Ends at', ['width'] = 120}
+  }
+
+local function getMarketCategoryName(id)
+  if table.hasKey(MarketCategoryStrings, id) then
+    return MarketCategoryStrings[id]
   end
 end
 
@@ -48,13 +61,31 @@ local function getMarketCategoryId(name)
   end
 end
 
+local function getMarketDescriptionName(id)
+  if table.hasKey(MarketItemDescriptionStrings, id) then
+    return MarketItemDescriptionStrings[id]
+  end
+end
+
+local function getMarketDescriptionId(name)
+  local id = table.find(MarketItemDescriptionStrings, name)
+  if id then
+    return id
+  end
+end
+
 local function clearSelectedItem()
   if selectedItem and selectedItem.item.ptr then
     Market.updateOffers({})
     radioItemSet:selectWidget(nil)
-    nameLabel:clearText()
+    nameLabel:setText('No item selected.')
+
     selectedItem:setItem(nil)
     selectedItem.item = {}
+
+    detailsTable:clearData()
+    buyStatsTable:clearData()
+    sellStatsTable:clearData()
   end
 end
 
@@ -80,7 +111,7 @@ local function updateItemsWidget()
     return
   end
 
-  itemsPanel = marketWindow:recursiveGetChildById('itemsPanel')
+  itemsPanel = browsePanel:recursiveGetChildById('itemsPanel')
   local layout = itemsPanel:getLayout()
   layout:disableUpdates()
 
@@ -128,13 +159,8 @@ local function loadDepotItems(depotItems)
   end
 end
 
-function Market.init()
+local function initInterface()
-  marketWindow = g_ui.createWidget('MarketWindow', rootWidget)
+  -- TODO: clean this up
-  marketWindow:hide()
-
-  initMarketItems()
-
-  -- TODO: clean this up into functions
   -- setup main tabs
   mainTabBar = marketWindow:getChildById('mainTabBar')
   mainTabBar:setContentWidget(marketWindow:getChildById('mainTabContent'))
@@ -143,44 +169,46 @@ function Market.init()
   marketOffersPanel = g_ui.loadUI('ui/marketoffers.otui')
   mainTabBar:addTab(tr('Market Offers'), marketOffersPanel)
 
-    selectionTabBar = marketOffersPanel:getChildById('leftTabBar')
+  selectionTabBar = marketOffersPanel:getChildById('leftTabBar')
-    selectionTabBar:setContentWidget(marketOffersPanel:getChildById('leftTabContent'))
+  selectionTabBar:setContentWidget(marketOffersPanel:getChildById('leftTabContent'))
 
-      browsePanel = g_ui.loadUI('ui/marketoffers/browse.otui')
+  browsePanel = g_ui.loadUI('ui/marketoffers/browse.otui')
-      selectionTabBar:addTab(tr('Browse'), browsePanel)
+  selectionTabBar:addTab(tr('Browse'), browsePanel)
 
-      searchPanel = g_ui.loadUI('ui/marketoffers/search.otui')
+  searchPanel = g_ui.loadUI('ui/marketoffers/search.otui')
-      selectionTabBar:addTab(tr('Search'), searchPanel)
+  selectionTabBar:addTab(tr('Search'), searchPanel)
 
-    displaysTabBar = marketOffersPanel:getChildById('rightTabBar')
+  displaysTabBar = marketOffersPanel:getChildById('rightTabBar')
-    displaysTabBar:setContentWidget(marketOffersPanel:getChildById('rightTabContent'))
+  displaysTabBar:setContentWidget(marketOffersPanel:getChildById('rightTabContent'))
 
-      itemOffersPanel = g_ui.loadUI('ui/marketoffers/itemoffers.otui')
+  itemOffersPanel = g_ui.loadUI('ui/marketoffers/itemoffers.otui')
-      displaysTabBar:addTab(tr('Offers'), itemOffersPanel)
+  displaysTabBar:addTab(tr('Offers'), itemOffersPanel)
 
-      itemDetailsPanel = g_ui.loadUI('ui/marketoffers/itemdetails.otui')
+  itemDetailsPanel = g_ui.loadUI('ui/marketoffers/itemdetails.otui')
-      displaysTabBar:addTab(tr('Details'), itemDetailsPanel)
+  displaysTabBar:addTab(tr('Details'), itemDetailsPanel)
 
-      itemStatsPanel = g_ui.loadUI('ui/marketoffers/itemstats.otui')
+  itemStatsPanel = g_ui.loadUI('ui/marketoffers/itemstats.otui')
-      displaysTabBar:addTab(tr('Statistics'), itemStatsPanel)
+  displaysTabBar:addTab(tr('Statistics'), itemStatsPanel)
 
   -- setup 'My Offer' section tabs
   myOffersPanel = g_ui.loadUI('ui/myoffers.otui')
   mainTabBar:addTab(tr('My Offers'), myOffersPanel)
     
-    offersTabBar = myOffersPanel:getChildById('offersTabBar')
+  offersTabBar = myOffersPanel:getChildById('offersTabBar')
-    offersTabBar:setContentWidget(myOffersPanel:getChildById('offersTabContent'))
+  offersTabBar:setContentWidget(myOffersPanel:getChildById('offersTabContent'))
 
-      currentOffersPanel = g_ui.loadUI('ui/myoffers/currentoffers.otui')
+  currentOffersPanel = g_ui.loadUI('ui/myoffers/currentoffers.otui')
-      offersTabBar:addTab(tr('Current Offers'), currentOffersPanel)
+  offersTabBar:addTab(tr('Current Offers'), currentOffersPanel)
 
-      offerHistoryPanel = g_ui.loadUI('ui/myoffers/offerhistory.otui')
+  offerHistoryPanel = g_ui.loadUI('ui/myoffers/offerhistory.otui')
-      offersTabBar:addTab(tr('Offer History'), offerHistoryPanel)
+  offersTabBar:addTab(tr('Offer History'), offerHistoryPanel)
 
-  nameLabel = marketWindow:recursiveGetChildById('nameLabel')
+  -- setup selected item
-  selectedItem = marketWindow:recursiveGetChildById('selectedItem')
+  nameLabel = marketOffersPanel:recursiveGetChildById('nameLabel')
+  selectedItem = marketOffersPanel:recursiveGetChildById('selectedItem')
   selectedItem.item = {}
 
+  -- populate filter combo box
   filterBox = browsePanel:getChildById('filterComboBox')
   for i = MarketCategory.First, MarketCategory.Last do
     filterBox:addOption(getMarketCategoryName(i))
@@ -190,6 +218,21 @@ function Market.init()
   filterBox.onOptionChange = function(combobox, option)
     Market.loadMarketItems(getMarketCategoryId(option))
   end
+
+  -- get tables
+  buyOfferTable = itemOffersPanel:recursiveGetChildById('buyingTable')
+  sellOfferTable = itemOffersPanel:recursiveGetChildById('sellingTable')
+  detailsTable = itemDetailsPanel:recursiveGetChildById('detailsTable')
+  buyStatsTable = itemStatsPanel:recursiveGetChildById('buyStatsTable')
+  sellStatsTable = itemStatsPanel:recursiveGetChildById('sellStatsTable')
+end
+
+function Market.init()
+  marketWindow = g_ui.createWidget('MarketWindow', rootWidget)
+  marketWindow:hide()
+
+  initInterface() -- build interface
+  initMarketItems()
 end
 
 function Market.terminate()
@@ -218,6 +261,11 @@ function Market.terminate()
   currentItems = {}
   itemsPanel = nil
   nameLabel = nil
+  buyOfferTable = nil
+  sellOfferTable = nil
+  detailsTable = nil
+  buyStatsTable = nil
+  sellStatsTable = nil
   radioItemSet = nil
   selectedItem = nil
   filterBox = nil
@@ -246,33 +294,32 @@ end
 function Market.updateOffers(offers)
   marketOffers[MarketAction.Buy] = {}
   marketOffers[MarketAction.Sell] = {}
-
+  if not buyOfferTable or not sellOfferTable then
-  local buyOfferTable = marketWindow:recursiveGetChildById('buyingTable')
+    return
-  buyOfferTable:destroyChildren()
+  end
-
+  buyOfferTable:clearData()
-  local sellOfferTable = marketWindow:recursiveGetChildById('sellingTable')
+  sellOfferTable:clearData()
-  sellOfferTable:destroyChildren()
 
   for k, offer in pairs(offers) do
     if offer and offer:getAction() == MarketAction.Buy then
       local data = {
-        {offer:getPlayer(), 80},
+        {['text'] = offer:getPlayer(), ['width'] = 100},
-        {offer:getAmount(), 50},
+        {['text'] = offer:getAmount(), ['width'] = 60},
-        {offer:getPrice()*offer:getAmount(), 80},
+        {['text'] = offer:getPrice()*offer:getAmount(), ['width'] = 90},
-        {offer:getPrice(), 60},
+        {['text'] = offer:getPrice(), ['width'] = 80},
-        {offer:getTimeStamp(), 80}
+        {['text'] = offer:getTimeStamp(), ['width'] = 120}
       }
-      local row = buyOfferTable:addRow(data)
+      buyOfferTable:addRow(data)
       table.insert(marketOffers[MarketAction.Buy], offer)
     else
       local data = {
-        {offer:getPlayer(), 80},
+        {['text'] = offer:getPlayer(), ['width'] = 100},
-        {offer:getAmount(), 50},
+        {['text'] = offer:getAmount(), ['width'] = 60},
-        {offer:getPrice()*offer:getAmount(), 80},
+        {['text'] = offer:getPrice()*offer:getAmount(), ['width'] = 90},
-        {offer:getPrice(), 60},
+        {['text'] = offer:getPrice(), ['width'] = 80},
-        {offer:getTimeStamp(), 80}
+        {['text'] = offer:getTimeStamp(), ['width'] = 120}
       }
-      local row = sellOfferTable:addRow(data)
+      sellOfferTable:addRow(data)
       table.insert(marketOffers[MarketAction.Sell], offer)
     end
   end
@@ -289,7 +336,61 @@ function Market.updateDetails(itemId, descriptions, purchaseStats, saleStats)
     saleStats = saleStats
   }
 
-  -- TODO: refresh all widget windows
+  -- update item details
+  detailsTable:clearData()
+  for k, desc in pairs(descriptions) do
+    local columns = {
+      {['text'] = getMarketDescriptionName(desc[1])..':', ['width'] = 100},
+      {['text'] = desc[2], ['width'] = 330}
+    }
+    detailsTable:addRow(columns)
+  end
+
+  -- update sale item statistics
+  sellStatsTable:clearData()
+  if table.empty(saleStats) then
+    sellStatsTable:addRow({{['text'] = 'No information', ['width'] = 110}})
+  else
+    for k, stat in pairs(saleStats) do
+      if not table.empty(stat) then
+        sellStatsTable:addRow({{['text'] = 'Total Transations:', ['width'] = 110}, 
+          {['text'] = stat[1], ['width'] = 270}})
+
+        sellStatsTable:addRow({{['text'] = 'Highest Price:', ['width'] = 110}, 
+          {['text'] = stat[3], ['width'] = 270}})
+
+        print(stat[2] .. '/' ..stat[1])
+        sellStatsTable:addRow({{['text'] = 'Average Price:', ['width'] = 110}, 
+          {['text'] = math.floor(stat[2]/stat[1]), ['width'] = 270}})
+
+        sellStatsTable:addRow({{['text'] = 'Lowest Price:', ['width'] = 110}, 
+          {['text'] = stat[4], ['width'] = 270}})
+      end
+    end
+  end
+
+  -- update buy item statistics
+  buyStatsTable:clearData()
+  if table.empty(purchaseStats) then
+    buyStatsTable:addRow({{['text'] = 'No information', ['width'] = 110}})
+  else
+    for k, stat in pairs(purchaseStats) do
+      if not table.empty(stat) then
+        buyStatsTable:addRow({{['text'] = 'Total Transations:', ['width'] = 110}, 
+          {['text'] = stat[1], ['width'] = 270}})
+
+        buyStatsTable:addRow({{['text'] = 'Highest Price:', ['width'] = 110}, 
+          {['text'] = stat[3], ['width'] = 270}})
+
+        print(stat[2] .. '/' ..stat[1])
+        buyStatsTable:addRow({{['text'] = 'Average Price:', ['width'] = 110}, 
+          {['text'] = math.floor(stat[2]/stat[1]), ['width'] = 270}})
+
+        buyStatsTable:addRow({{['text'] = 'Lowest Price:', ['width'] = 110}, 
+          {['text'] = stat[4], ['width'] = 270}})
+      end
+    end
+  end
 end
 
 function Market.updateSelectedItem(newItem)
@@ -322,13 +423,18 @@ function Market.onMarketEnter(depotItems, offers, balance)
   end
   loadDepotItems(depotItems)
 
-  -- TODO: if you are already viewing an item on market enter it must recheck the current item
+  -- build offer table header
-  print(selectedItem)
+  if buyOfferTable and not buyOfferTable:hasHeader() then
-  print(selectedItem:isChecked())
+    buyOfferTable:addHeaderRow(offerTableHeader)
-  if selectedItem then
+  end
-    print('in')
+  if sellOfferTable and not sellOfferTable:hasHeader() then
-    selectedItem:setChecked(false)
+    sellOfferTable:addHeaderRow(offerTableHeader)
-    selectedItem:setChecked(true)
+  end
+
+  local currentItem = radioItemSet:getSelectedWidget()
+  if currentItem then
+     -- Uncheck selected item, cannot make protocol calls to resend marketBrowsing
+    clearSelectedItem()
   end
   marketWindow:show()
 end
@@ -339,28 +445,6 @@ end
 
 function Market.onMarketDetail(itemId, descriptions, purchaseStats, saleStats)
   Market.updateDetails(itemId, descriptions, purchaseStats, saleStats)
-
-  print('')
-  print('[onMarketDetail]')
-  print('itemId: '..itemId)
-  print('descriptions:')
-  for k, desc in pairs(descriptions) do
-    print('  type: '..desc[1]..' | description: '..desc[2])
-  end
-  print('purchaseStats:')
-  for k, stat in pairs(purchaseStats) do
-    print('  transactions: '..stat[1])
-    print('  total price: '..stat[2])
-    print('  highest price: '..stat[3])
-    print('  lowest price: '..stat[4])
-  end
-  print('saleStats:')
-  for k, stat in pairs(saleStats) do
-    print('  transactions: '..stat[1])
-    print('  total price: '..stat[2])
-    print('  highest price: '..stat[3])
-    print('  lowest price: '..stat[4])
-  end
 end
 
 function Market.onMarketBrowse(offers)

modules/game_market/marketprotocol.lua

@@ -6,7 +6,6 @@ local protocol
 
 local function send(msg)
   if protocol then
-    print(msg:getMessageSize())
     protocol:send(msg)
   end
 end

modules/game_market/ui/marketoffers/itemdetails.otui

@@ -1,10 +1,55 @@
+DetailsTableRow < TableRow
+  font: verdana-11px-monochrome
+  background-color: alpha
+  focusable: true
+  color: #cccccc
+  height: 45
+  focusable: false
+  padding: 2
+
+DetailsTableColumn < TableColumn
+  font: verdana-11px-monochrome
+  background-color: alpha
+  text-offset: 5 2
+  color: #cccccc
+  width: 80
+  focusable: false
+
 Panel
   background-color: #22283399
   margin: 1
 
-  Label
+  Table
-    !text: tr('Item Details')
+    id: detailsTable
     anchors.top: parent.top
+    anchors.bottom: parent.bottom
     anchors.left: parent.left
-    margin-top: 45
+    anchors.right: parent.right
-    margin-left: 3
+    margin-top: 55
+    margin-left: 6
+    margin-bottom: 45
+    margin-right: 6
+    padding: 1
+    focusable: false
+    background-color: #222833
+    border-width: 1
+    border-color: #191f27
+    table-data: detailsTableData
+    row-style: DetailsTableRow
+    column-style: DetailsTableColumn
+
+  TableData
+    id: detailsTableData
+    anchors.top: detailsTable.top
+    anchors.bottom: detailsTable.bottom
+    anchors.left: detailsTable.left
+    anchors.right: detailsTable.right
+    vertical-scrollbar: detailsTableScrollBar
+
+  VerticalScrollBar
+    id: detailsTableScrollBar
+    anchors.top: detailsTable.top
+    anchors.bottom: detailsTable.bottom
+    anchors.right: detailsTable.right
+    step: 28
+    pixels-scroll: true

modules/game_market/ui/marketoffers/itemoffers.otui

@@ -1,7 +1,6 @@
 OfferTableRow < TableRow
   font: verdana-11px-monochrome
   background-color: alpha
-  text-offset: 2 0
   focusable: true
   color: #cccccc
   height: 15
@@ -11,11 +10,30 @@ OfferTableRow < TableRow
     color: #ffffff
 
 OfferTableColumn < TableColumn
+  font: verdana-11px-monochrome
+  background-color: alpha
+  text-offset: 5 0
+  color: #cccccc
+  width: 80
+  focusable: false
+
+OfferTableHeaderRow < TableHeaderRow
+  font: verdana-11px-monochrome
+  focusable: false
+  color: #cccccc
+  height: 20
+
+OfferTableHeaderColumn < TableHeaderColumn
   font: verdana-11px-monochrome
   background-color: alpha
   text-offset: 2 0
   color: #cccccc
   width: 80
+  focusable: true
+
+  $focus:
+    background-color: #294f6d
+    color: #ffffff
 
 Panel
   background-color: #22283399
@@ -50,15 +68,25 @@ Panel
     background-color: #222833
     border-width: 1
     border-color: #191f27
-    vertical-scrollbar: sellingTableScrollBar
+    table-data: sellingTableData
     row-style: OfferTableRow
     column-style: OfferTableColumn
+    header-row-style: OfferTableHeaderRow
+    header-column-style: OfferTableHeaderColumn
+
+  TableData
+    id: sellingTableData
+    anchors.bottom: sellingTable.bottom
+    anchors.left: sellingTable.left
+    anchors.right: sellingTable.right
+    margin-top: 2
+    vertical-scrollbar: sellingTableScrollBar
 
   VerticalScrollBar
     id: sellingTableScrollBar
-    anchors.top: prev.top
+    anchors.top: sellingTable.top
-    anchors.bottom: prev.bottom
+    anchors.bottom: sellingTable.bottom
-    anchors.right: prev.right
+    anchors.right: sellingTable.right
     step: 28
     pixels-scroll: true
 
@@ -92,14 +120,23 @@ Panel
     background-color: #222833
     border-width: 1
     border-color: #191f27
-    vertical-scrollbar: buyingTableScrollBar
+    table-data: buyingTableData
     row-style: OfferTableRow
     column-style: OfferTableColumn
+    header-row-style: OfferTableHeaderRow
+    header-column-style: OfferTableHeaderColumn
+
+  TableData
+    id: buyingTableData
+    anchors.bottom: buyingTable.bottom
+    anchors.left: buyingTable.left
+    anchors.right: buyingTable.right
+    vertical-scrollbar: buyingTableScrollBar
 
   VerticalScrollBar
     id: buyingTableScrollBar
-    anchors.top: prev.top
+    anchors.top: buyingTable.top
-    anchors.bottom: prev.bottom
+    anchors.bottom: buyingTable.bottom
-    anchors.right: prev.right
+    anchors.right: buyingTable.right
     step: 28
     pixels-scroll: true

modules/game_market/ui/marketoffers/itemstats.otui

@@ -1,10 +1,100 @@
+StatsTableRow < TableRow
+  font: verdana-11px-monochrome
+  background-color: alpha
+  focusable: true
+  color: #cccccc
+  height: 20
+  focusable: false
+
+StatsTableColumn < TableColumn
+  font: verdana-11px-monochrome
+  background-color: alpha
+  text-offset: 5 0
+  color: #cccccc
+  width: 80
+  focusable: false
+
 Panel
   background-color: #22283399
   margin: 1
 
   Label
-    !text: tr('Item Stats')
+    !text: tr('Buy Offers')
     anchors.top: parent.top
     anchors.left: parent.left
-    margin-top: 45
+    anchors.right: parent.right
-    margin-left: 3
+    margin-top: 44
+    margin-left: 6
+
+  Table
+    id: buyStatsTable
+    anchors.top: prev.bottom
+    anchors.left: prev.left
+    anchors.right: prev.right
+    margin-top: 6
+    margin-bottom: 5
+    margin-right: 6
+    height: 121
+    padding: 1
+    focusable: false
+    background-color: #222833
+    border-width: 1
+    border-color: #191f27
+    table-data: buyStatsTableData
+    row-style: StatsTableRow
+    column-style: StatsTableColumn
+
+  TableData
+    id: buyStatsTableData
+    anchors.top: buyStatsTable.top
+    anchors.bottom: buyStatsTable.bottom
+    anchors.left: buyStatsTable.left
+    anchors.right: buyStatsTable.right
+    vertical-scrollbar: buyStatsTableScrollBar
+
+  VerticalScrollBar
+    id: buyStatsTableScrollBar
+    anchors.top: buyStatsTable.top
+    anchors.bottom: buyStatsTable.bottom
+    anchors.right: buyStatsTable.right
+    step: 28
+    pixels-scroll: true
+
+  Label
+    !text: tr('Sell Offers')
+    anchors.top: buyStatsTable.bottom
+    anchors.left: parent.left
+    margin-top: 9
+    margin-left: 6
+
+  Table
+    id: sellStatsTable
+    anchors.top: prev.bottom
+    anchors.left: buyStatsTable.left
+    anchors.right: buyStatsTable.right
+    margin-top: 6
+    height: 122
+    padding: 1
+    focusable: false
+    background-color: #222833
+    border-width: 1
+    border-color: #191f27
+    table-data: sellStatsTableData
+    row-style: StatsTableRow
+    column-style: StatsTableColumn
+
+  TableData
+    id: sellStatsTableData
+    anchors.top: sellStatsTable.top
+    anchors.bottom: sellStatsTable.bottom
+    anchors.left: sellStatsTable.left
+    anchors.right: sellStatsTable.right
+    vertical-scrollbar: sellStatsTableScrollBar
+
+  VerticalScrollBar
+    id: sellStatsTableScrollBar
+    anchors.top: sellStatsTable.top
+    anchors.bottom: sellStatsTable.bottom
+    anchors.right: sellStatsTable.right
+    step: 28
+    pixels-scroll: true

modules/gamelib/market.lua

@@ -92,3 +92,21 @@ MarketItemDescription = {
 }
 MarketItemDescription.First = MarketItemDescription.Armor
 MarketItemDescription.Last = MarketItemDescription.Weight
+
+MarketItemDescriptionStrings = {
+  [1] = 'Armor',
+  [2] = 'Attack',
+  [3] = 'Container',
+  [4] = 'Defense',
+  [5] = 'Description',
+  [6] = 'Use Time',
+  [7] = 'Combat',
+  [8] = 'Min Level',
+  [9] = 'Min Magic Level',
+  [10] = 'Vocation',
+  [11] = 'Rune',
+  [12] = 'Ability',
+  [13] = 'Charges',
+  [14] = 'Weapon Type',
+  [15] = 'Weight'
+}