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.
2012-07-23 02:02:01 +12:00 · 2012-07-23 02:02:01 +12:00 · bacb324f9e
parent 76c7bf45bd
commit bacb324f9e
9 changed files with 528 additions and 125 deletions
--- a/modules/client_skins/skins/default/styles/tables.otui
+++ b/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
--- a/modules/corelib/ui/uiradiogroup.lua
+++ b/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
--- a/modules/corelib/ui/uitable.lua
+++ b/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)
-  if not columns or type(columns) ~= 'table' then
-    g_logger.error('UITable:addRow - table columns must be provided in a table')
+function UITable:hasHeader()
+  return self.headerRow ~= nil
+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.
-  --[[if #self.rows < 1 then
-    g_ui.createWidget(self.rowBaseStyle, self)
-  end]]
+  -- build header columns
+  local columns = {}
+  for _, column in pairs(data) do
+    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)
-  row.columns = {}
+  -- create a new header
+  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
-      col:setText(column[1])
+    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
-    if #column > 1 then
-      col:setWidth(column[2])
-    end
-    table.insert(row.columns, col)
+    self.columns[rowId] = 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
--- a/modules/game_market/market.lua
+++ b/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)
-  if table.hasKey(MarketCategoryStrings, category) then
-    return MarketCategoryStrings[category]
+local offerTableHeader = {
+    {['text'] = 'Player Name', ['width'] = 100},
+    {['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()
-  marketWindow = g_ui.createWidget('MarketWindow', rootWidget)
-  marketWindow:hide()
-
-  initMarketItems()
-
-  -- TODO: clean this up into functions
+local function initInterface()
+  -- TODO: clean this up
  -- 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:setContentWidget(marketOffersPanel:getChildById('leftTabContent'))
+  selectionTabBar = marketOffersPanel:getChildById('leftTabBar')
+  selectionTabBar:setContentWidget(marketOffersPanel:getChildById('leftTabContent'))

-      browsePanel = g_ui.loadUI('ui/marketoffers/browse.otui')
-      selectionTabBar:addTab(tr('Browse'), browsePanel)
+  browsePanel = g_ui.loadUI('ui/marketoffers/browse.otui')
+  selectionTabBar:addTab(tr('Browse'), browsePanel)

-      searchPanel = g_ui.loadUI('ui/marketoffers/search.otui')
-      selectionTabBar:addTab(tr('Search'), searchPanel)
+  searchPanel = g_ui.loadUI('ui/marketoffers/search.otui')
+  selectionTabBar:addTab(tr('Search'), searchPanel)

-    displaysTabBar = marketOffersPanel:getChildById('rightTabBar')
-    displaysTabBar:setContentWidget(marketOffersPanel:getChildById('rightTabContent'))
+  displaysTabBar = marketOffersPanel:getChildById('rightTabBar')
+  displaysTabBar:setContentWidget(marketOffersPanel:getChildById('rightTabContent'))

-      itemOffersPanel = g_ui.loadUI('ui/marketoffers/itemoffers.otui')
-      displaysTabBar:addTab(tr('Offers'), itemOffersPanel)
+  itemOffersPanel = g_ui.loadUI('ui/marketoffers/itemoffers.otui')
+  displaysTabBar:addTab(tr('Offers'), itemOffersPanel)

-      itemDetailsPanel = g_ui.loadUI('ui/marketoffers/itemdetails.otui')
-      displaysTabBar:addTab(tr('Details'), itemDetailsPanel)
+  itemDetailsPanel = g_ui.loadUI('ui/marketoffers/itemdetails.otui')
+  displaysTabBar:addTab(tr('Details'), itemDetailsPanel)

-      itemStatsPanel = g_ui.loadUI('ui/marketoffers/itemstats.otui')
-      displaysTabBar:addTab(tr('Statistics'), itemStatsPanel)
+  itemStatsPanel = g_ui.loadUI('ui/marketoffers/itemstats.otui')
+  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:setContentWidget(myOffersPanel:getChildById('offersTabContent'))
+  offersTabBar = myOffersPanel:getChildById('offersTabBar')
+  offersTabBar:setContentWidget(myOffersPanel:getChildById('offersTabContent'))

-      currentOffersPanel = g_ui.loadUI('ui/myoffers/currentoffers.otui')
-      offersTabBar:addTab(tr('Current Offers'), currentOffersPanel)
+  currentOffersPanel = g_ui.loadUI('ui/myoffers/currentoffers.otui')
+  offersTabBar:addTab(tr('Current Offers'), currentOffersPanel)

-      offerHistoryPanel = g_ui.loadUI('ui/myoffers/offerhistory.otui')
-      offersTabBar:addTab(tr('Offer History'), offerHistoryPanel)
+  offerHistoryPanel = g_ui.loadUI('ui/myoffers/offerhistory.otui')
+  offersTabBar:addTab(tr('Offer History'), offerHistoryPanel)

-  nameLabel = marketWindow:recursiveGetChildById('nameLabel')
-  selectedItem = marketWindow:recursiveGetChildById('selectedItem')
+  -- setup selected item
+  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] = {}
-
-  local buyOfferTable = marketWindow:recursiveGetChildById('buyingTable')
-  buyOfferTable:destroyChildren()
-
-  local sellOfferTable = marketWindow:recursiveGetChildById('sellingTable')
-  sellOfferTable:destroyChildren()
+  if not buyOfferTable or not sellOfferTable then
+    return
+  end
+  buyOfferTable:clearData()
+  sellOfferTable:clearData()

  for k, offer in pairs(offers) do
    if offer and offer:getAction() == MarketAction.Buy then
      local data = {
-        {offer:getPlayer(), 80},
-        {offer:getAmount(), 50},
-        {offer:getPrice()*offer:getAmount(), 80},
-        {offer:getPrice(), 60},
-        {offer:getTimeStamp(), 80}
+        {['text'] = offer:getPlayer(), ['width'] = 100},
+        {['text'] = offer:getAmount(), ['width'] = 60},
+        {['text'] = offer:getPrice()*offer:getAmount(), ['width'] = 90},
+        {['text'] = offer:getPrice(), ['width'] = 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},
-        {offer:getAmount(), 50},
-        {offer:getPrice()*offer:getAmount(), 80},
-        {offer:getPrice(), 60},
-        {offer:getTimeStamp(), 80}
+        {['text'] = offer:getPlayer(), ['width'] = 100},
+        {['text'] = offer:getAmount(), ['width'] = 60},
+        {['text'] = offer:getPrice()*offer:getAmount(), ['width'] = 90},
+        {['text'] = offer:getPrice(), ['width'] = 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
-  print(selectedItem)
-  print(selectedItem:isChecked())
-  if selectedItem then
-    print('in')
-    selectedItem:setChecked(false)
-    selectedItem:setChecked(true)
+  -- build offer table header
+  if buyOfferTable and not buyOfferTable:hasHeader() then
+    buyOfferTable:addHeaderRow(offerTableHeader)
+  end
+  if sellOfferTable and not sellOfferTable:hasHeader() then
+    sellOfferTable:addHeaderRow(offerTableHeader)
+  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)
--- a/modules/game_market/marketprotocol.lua
+++ b/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
--- a/modules/game_market/ui/marketoffers/itemdetails.otui
+++ b/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
-    !text: tr('Item Details')
+  Table
+    id: detailsTable
    anchors.top: parent.top
+    anchors.bottom: parent.bottom
    anchors.left: parent.left
-    margin-top: 45
-    margin-left: 3
+    anchors.right: parent.right
+    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
--- a/modules/game_market/ui/marketoffers/itemoffers.otui
+++ b/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.bottom: prev.bottom
-    anchors.right: prev.right
+    anchors.top: sellingTable.top
+    anchors.bottom: sellingTable.bottom
+    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.bottom: prev.bottom
-    anchors.right: prev.right
+    anchors.top: buyingTable.top
+    anchors.bottom: buyingTable.bottom
+    anchors.right: buyingTable.right
    step: 28
    pixels-scroll: true
--- a/modules/game_market/ui/marketoffers/itemstats.otui
+++ b/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
-    margin-left: 3
+    anchors.right: parent.right
+    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
--- a/modules/gamelib/market.lua
+++ b/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'
+}