More progress on the new breakdown window

Definitions.lua

@@ -76,7 +76,7 @@
 ---@field SetDuration fun(self: animationgroup, duration: number)
 ---@field SetEndDelay fun(self: animationgroup, delay: number)
 ---@field SetLooping fun(self: animationgroup, loop: boolean)
----@field SetScript fun(self: animationgroup, event: string, handler: function)
+---@field SetScript fun(self: animationgroup, event: string, handler: function) "OnEvent"|"OnShow"
 ---@field SetSmoothProgress fun(self: animationgroup, smooth: boolean)
 ---@field Stop fun(self: animationgroup)
 
@@ -117,7 +117,7 @@
 ---@field SetPropagateKeyboardInput fun(self: frame, propagate: boolean)
 ---@field SetPropagateGamepadInput fun(self: frame, propagate: boolean)
 ---@field StartMoving fun(self: frame)
----@field StartSizing fun(self: frame, point: string)
+---@field StartSizing fun(self: frame, point: "top"|"topright"|"right"|"bottomright"|"bottom"|"bottomleft"|"left"|"topleft")
 ---@field StopMovingOrSizing fun(self: frame)
 ---@field GetAttribute fun(self: frame, name: string) : any
 ---@field GetFrameLevel fun(self: frame) : number
@@ -133,6 +133,7 @@
 ---@field CreateFontString fun(self: frame, name: string|nil, layer: "background"|"border"|"artwork"|"overlay"|"highlight", inherits: string|nil, subLayer: number|nil) : fontstring
 ---@field EnableMouse fun(self: frame, enable: boolean)
 ---@field SetResizable fun(self: frame, enable: boolean)
+---@field SetResizeBounds fun(minWidth: number, minHeight: number, maxWidth: number, maxHeight: number)
 
 ---@class button : frame
 ---@field SetNormalTexture fun(self: button, texture: texture)
@@ -155,12 +156,29 @@
 ---@field GetButtonState fun(self: button, state: string) : boolean
 ---@field RegisterForClicks fun(self: button, button1: nil|"AnyUp"|"AnyDown"|"LeftButtonDown"|"LeftButtonUp"|"MiddleButtonUp"|"MiddleButtonDown"|"RightButtonDown"|"RightButtonUp"|"Button4Up"|"Button4Down"|"Button5Up"|"Button5Down", button2: nil|"AnyUp"|"AnyDown"|"LeftButtonDown"|"LeftButtonUp"|"MiddleButtonUp"|"MiddleButtonDown"|"RightButtonDown"|"RightButtonUp"|"Button4Up"|"Button4Down"|"Button5Up"|"Button5Down")
 
----@class fontstring : uiobject
+---@class statusbar : frame
+---@field SetStatusBarColor fun(self: statusbar, r: red|number, g: green|number, b: blue|number, a: alpha|number)
+---@field SetStatusBarTexture fun(self: statusbar, path: string)
+---@field SetMinMaxValues fun(self: statusbar, minValue: number, maxValue: number)
+---@field SetValue fun(self: statusbar, value: number)
+---@field SetValueStep fun(self: statusbar, valueStep: number)
+---@field SetOrientation fun(self: statusbar, orientation: string)
+---@field SetReverseFill fun(self: statusbar, reverseFill: boolean)
+---@field GetMinMaxValues fun(self: statusbar) : number, number
+---@field GetValue fun(self: statusbar) : number
+---@field GetValueStep fun(self: statusbar) : number
+---@field GetOrientation fun(self: statusbar) : string
+---@field GetReverseFill fun(self: statusbar) : boolean
+
+---@class region : uiobject
+
+---@class fontstring : region
 ---@field SetDrawLayer fun(self: fontstring, layer: "background"|"border"|"artwork"|"overlay"|"highlight", subLayer: number|nil)
 ---@field SetFont fun(self: fontstring, font: string, size: number, flags: string)
 ---@field SetText fun(self: fontstring, text: string|number)
 ---@field GetText fun(self: fontstring) : string
 ---@field GetFont fun(self: fontstring) : string, number, string
+---@field GetStringWidth fun(self: fontstring) : number return the width of the string in pixels
 ---@field SetShadowColor fun(self: fontstring, r: red|number, g: green|number, b: blue|number, a: alpha|number)
 ---@field GetShadowColor fun(self: fontstring) : number, number, number, number
 ---@field SetShadowOffset fun(self: fontstring, offsetX: number, offsetY: number)
@@ -171,10 +189,6 @@
 ---@field GetJustifyH fun(self: fontstring) : string
 ---@field SetJustifyV fun(self: fontstring, justifyV: string)
 ---@field GetJustifyV fun(self: fontstring) : string
----@field SetWidth fun(self: fontstring, width: number)
----@field GetWidth fun(self: fontstring) : number
----@field SetHeight fun(self: fontstring, height: number)
----@field GetHeight fun(self: fontstring) : number
 ---@field SetNonSpaceWrap fun(self: fontstring, nonSpaceWrap: boolean)
 ---@field GetNonSpaceWrap fun(self: fontstring) : boolean
 ---@field SetIndentedWordWrap fun(self: fontstring, indentedWordWrap: boolean)
@@ -205,40 +219,17 @@
 ---@field SetTextTruncateLines fun(self: fontstring, lines: number)
 ---@field GetTextTruncateLines fun(self: fontstring) : number
 
----@class statusbar : frame
----@field SetStatusBarColor fun(self: statusbar, r: red|number, g: green|number, b: blue|number, a: alpha|number)
----@field SetStatusBarTexture fun(self: statusbar, path: string)
----@field SetMinMaxValues fun(self: statusbar, minValue: number, maxValue: number)
----@field SetValue fun(self: statusbar, value: number)
----@field SetValueStep fun(self: statusbar, valueStep: number)
----@field SetOrientation fun(self: statusbar, orientation: string)
----@field SetReverseFill fun(self: statusbar, reverseFill: boolean)
----@field GetMinMaxValues fun(self: statusbar) : number, number
----@field GetValue fun(self: statusbar) : number
----@field GetValueStep fun(self: statusbar) : number
----@field GetOrientation fun(self: statusbar) : string
----@field GetReverseFill fun(self: statusbar) : boolean
-
----@class texture : uiobject
+---@class texture : region
 ---@field SetDrawLayer fun(self: texture, layer: "background"|"border"|"artwork"|"overlay"|"highlight", subLayer: number|nil)
 ---@field SetTexture fun(self: texture, path: string)
 ---@field SetColorTexture fun(self: texture, r: red|number, g: green|number, b: blue|number, a: alpha|number)
 ---@field SetDesaturated fun(self: texture, desaturate: boolean)
 ---@field SetBlendMode fun(self: texture, mode: "ADD"|"BLEND"|"DISABLE"|"MOD"|"MOD2X"|"OVERLAY"|"REPLACE"|"SUBTRACT")
 ---@field SetVertexColor fun(self: texture, r: red|number, g: green|number, b: blue|number, a: alpha|number)
----@field SetAlpha fun(self: texture, alpha: number)
----@field GetAlpha fun(self: texture) : number
----@field SetWidth fun(self: texture, width: number)
----@field SetHeight fun(self: texture, height: number)
----@field GetWidth fun(self: texture) : number
----@field GetHeight fun(self: texture) : number
 ---@field GetPoint fun(self: texture, index: number) : string, table, string, number, number
 ---@field SetShown fun(self: texture, state: boolean)
 ---@field IsShown fun(self: texture) : boolean
----@field SetParent fun(self: texture, parent: table)
 ---@field GetParent fun(self: texture) : table
----@field SetScale fun(self: texture, scale: number)
----@field GetScale fun(self: texture) : number
 ---@field SetTexCoord fun(self: texture, left: number, right: number, top: number, bottom: number)
 ---@field GetTexCoord fun(self: texture) : number, number, number, number
 ---@field SetRotation fun(self: texture, rotation: number)

Libs/DF/panel.lua

@@ -5090,12 +5090,14 @@ end
 ---@field SetBackdropColorForSelectedColumnHeader fun(self: headerframe, columnHeader: headercolumnframe)
 ---@field ClearColumnHeader fun(self: headerframe, columnHeader: headercolumnframe)
 ---@field GetNextHeader fun(self: headerframe) : headercolumnframe
+---@field SetColumnSettingChangedCallback fun(self: headerframe, func: function) : boolean
 ---@field columnHeadersCreated headercolumnframe[]
 ---@field HeaderTable table
 ---@field NextHeader number
 ---@field HeaderWidth number
 ---@field HeaderHeight number
 ---@field columnSelected number
+---@field OnColumnSettingChangeCallback function
 
 ---@class headercolumnframe: frame
 ---@field Icon texture
@@ -5103,7 +5105,9 @@ end
 ---@field Arrow texture
 ---@field Separator texture
 ---@field resizerButton button
-
+---@field bIsRezising boolean
+---@field bInUse boolean
+---@field columnData table
 
 --mixed functions
 detailsFramework.HeaderFunctions = {
@@ -5231,6 +5235,18 @@ detailsFramework.HeaderCoreFunctions = {
 		self:Refresh()
 	end,
 
+	---@param self headerframe
+	---@param func function
+	---@return boolean
+	SetColumnSettingChangedCallback = function(self, func)
+		if (type(func) ~= "function") then
+			self.OnColumnSettingChangeCallback = nil
+			return false
+		end
+		self.OnColumnSettingChangeCallback = func
+		return true
+	end,
+
 	--return which header is current selected and the the order ASC DESC
 	---@param self headerframe
 	GetSelectedColumn = function(self)
@@ -5249,7 +5265,7 @@ detailsFramework.HeaderCoreFunctions = {
 		--reset all header frames
 		for i = 1, #self.columnHeadersCreated do
 			local columnHeader = self.columnHeadersCreated[i]
-			columnHeader.InUse = false
+			columnHeader.bInUse = false
 			columnHeader:Hide()
 		end
 
@@ -5357,13 +5373,14 @@ detailsFramework.HeaderCoreFunctions = {
 	---@param columnHeader headercolumnframe
 	---@param headerIndex number
 	UpdateColumnHeader = function(self, columnHeader, headerIndex)
-		local headerData = self.HeaderTable[headerIndex]
+		--this is the data to update the columnHeader
+		local columnData = self.HeaderTable[headerIndex]
 
-		if (headerData.icon) then
-			columnHeader.Icon:SetTexture(headerData.icon)
+		if (columnData.icon) then
+			columnHeader.Icon:SetTexture(columnData.icon)
 
-			if (headerData.texcoord) then
-				columnHeader.Icon:SetTexCoord(unpack(headerData.texcoord))
+			if (columnData.texcoord) then
+				columnHeader.Icon:SetTexCoord(unpack(columnData.texcoord))
 			else
 				columnHeader.Icon:SetTexCoord(0, 1, 0, 1)
 			end
@@ -5372,8 +5389,8 @@ detailsFramework.HeaderCoreFunctions = {
 			columnHeader.Icon:Show()
 		end
 
-		if (headerData.text) then
-			columnHeader.Text:SetText(headerData.text)
+		if (columnData.text) then
+			columnHeader.Text:SetText(columnData.text)
 
 			--text options
 			detailsFramework:SetFontColor(columnHeader.Text, self.options.text_color)
@@ -5381,7 +5398,7 @@ detailsFramework.HeaderCoreFunctions = {
 			detailsFramework:SetFontOutline(columnHeader.Text, self.options.text_shadow)
 
 			--point
-			if (not headerData.icon) then
+			if (not columnData.icon) then
 				columnHeader.Text:SetPoint("left", columnHeader, "left", self.options.padding, 0)
 			else
 				columnHeader.Text:SetPoint("left", columnHeader.Icon, "right", self.options.padding, 0)
@@ -5393,37 +5410,37 @@ detailsFramework.HeaderCoreFunctions = {
 		--column header index
 		columnHeader.columnIndex = headerIndex
 
-		if (headerData.canSort) then
+		if (columnData.canSort) then
 			columnHeader.order = "DESC"
 			columnHeader.Arrow:SetTexture(self.options.arrow_up_texture)
 		else
 			columnHeader.Arrow:Hide()
 		end
 
-		if (headerData.selected) then
+		if (columnData.selected) then
 			columnHeader.Arrow:Show()
 			columnHeader.Arrow:SetAlpha(.843)
 			self:UpdateSortArrow(columnHeader, true, columnHeader.order)
 			self.columnSelected = headerIndex
 		else
-			if (headerData.canSort) then
+			if (columnData.canSort) then
 				self:UpdateSortArrow(columnHeader, false, columnHeader.order)
 			end
 		end
 
 		--size
-		if (headerData.width) then
-			columnHeader:SetWidth(headerData.width)
+		if (columnData.width) then
+			columnHeader:SetWidth(columnData.width)
 		end
-		if (headerData.height) then
-			columnHeader:SetHeight(headerData.height)
+		if (columnData.height) then
+			columnHeader:SetHeight(columnData.height)
 		end
 
 		columnHeader.XPosition = self.HeaderWidth -- + self.options.padding
 		columnHeader.YPosition = self.HeaderHeight -- + self.options.padding
 
-		columnHeader.columnAlign = headerData.align or "left"
-		columnHeader.columnOffset = headerData.offset or 0
+		columnHeader.columnAlign = columnData.align or "left"
+		columnHeader.columnOffset = columnData.offset or 0
 
 		--add the header piece size to the total header size
 		local growDirection = string.lower(self.options.grow_direction)
@@ -5437,8 +5454,20 @@ detailsFramework.HeaderCoreFunctions = {
 			self.HeaderHeight = self.HeaderHeight + columnHeader:GetHeight() + self.options.padding
 		end
 
+		local bShowColumnHeaderReziser = self.options.reziser_shown
+		if (bShowColumnHeaderReziser) then
+			local resizerButton = columnHeader.resizerButton
+			resizerButton:Show()
+			resizerButton.texture:SetVertexColor(unpack(self.options.reziser_color))
+			resizerButton:SetWidth(self.options.reziser_width)
+			resizerButton:SetHeight(columnHeader:GetHeight())
+		else
+			columnHeader.resizerButton:Hide()
+		end
+
 		columnHeader:Show()
-		columnHeader.InUse = true
+		columnHeader.bInUse = true
+		columnHeader.columnData = columnData
 	end,
 
 	---reset column header backdrop
@@ -5480,64 +5509,90 @@ detailsFramework.HeaderCoreFunctions = {
 		if (not columnHeader) then
 			--create a new column header
 			---@type headercolumnframe
-			local newHeader = CreateFrame("button", "$parentHeaderIndex" .. nextHeader, self, "BackdropTemplate")
-			newHeader:SetScript("OnClick", detailsFramework.HeaderFunctions.OnClick)
-			newHeader:SetMovable(true)
-			newHeader:SetResizable(true)
+			columnHeader = CreateFrame("button", "$parentHeaderIndex" .. nextHeader, self, "BackdropTemplate")
+			columnHeader:SetScript("OnClick", detailsFramework.HeaderFunctions.OnClick)
+			columnHeader:SetMovable(true)
+			columnHeader:SetResizable(true)
 
-			newHeader:SetScript("OnMouseDown", function()
+			columnHeader:SetScript("OnMouseDown", function()
 				print(11)
 			end)
 
-			newHeader:SetScript("OnMouseUp", function()
+			columnHeader:SetScript("OnMouseUp", function()
 				print(22) --doesn't work either
 			end)			
 
 			--header icon
-			detailsFramework:CreateImage(newHeader, "", self.options.header_height, self.options.header_height, "ARTWORK", nil, "Icon", "$parentIcon")
+			detailsFramework:CreateImage(columnHeader, "", self.options.header_height, self.options.header_height, "ARTWORK", nil, "Icon", "$parentIcon")
 			--header separator
-			detailsFramework:CreateImage(newHeader, "", 1, 1, "ARTWORK", nil, "Separator", "$parentSeparator")
+			detailsFramework:CreateImage(columnHeader, "", 1, 1, "ARTWORK", nil, "Separator", "$parentSeparator")
 			--header name text
-			detailsFramework:CreateLabel(newHeader, "", self.options.text_size, self.options.text_color, "GameFontNormal", "Text", "$parentText", "ARTWORK")
+			detailsFramework:CreateLabel(columnHeader, "", self.options.text_size, self.options.text_color, "GameFontNormal", "Text", "$parentText", "ARTWORK")
 			--header selected and order icon
-			detailsFramework:CreateImage(newHeader, self.options.arrow_up_texture, 12, 12, "ARTWORK", nil, "Arrow", "$parentArrow")
+			detailsFramework:CreateImage(columnHeader, self.options.arrow_up_texture, 12, 12, "ARTWORK", nil, "Arrow", "$parentArrow")
 
 			---rezise button
 			---@type button
-			local resizerButton = _G.CreateFrame("button", "$parentResizer", newHeader)
+			local resizerButton = _G.CreateFrame("button", "$parentResizer", columnHeader)
 			resizerButton:SetWidth(4)
-			resizerButton:SetFrameLevel(newHeader:GetFrameLevel()+2)
-			resizerButton:SetPoint("topright", newHeader, "topright", -1, 0)
-			resizerButton:SetPoint("bottomright", newHeader, "bottomright", -1, 0)
+			resizerButton:SetFrameLevel(columnHeader:GetFrameLevel()+2)
+			resizerButton:SetPoint("topright", columnHeader, "topright", -1, -1)
+			resizerButton:SetPoint("bottomright", columnHeader, "bottomright", -1, 1)
 			resizerButton:EnableMouse(true)
 			resizerButton:RegisterForClicks("LeftButtonDown", "LeftButtonUp")
-			newHeader.resizerButton = resizerButton
+			columnHeader.resizerButton = resizerButton
 
-			resizerButton:SetScript("OnMouseDown", function()
-				newHeader.bIsRezising = true
-				print(1)
-				newHeader:StartSizing("right")
+			resizerButton:SetScript("OnEnter", function()
+				resizerButton.texture:SetVertexColor(1, 1, 1, 0.9)
+			end)
+
+			resizerButton:SetScript("OnLeave", function()
+				resizerButton.texture:SetVertexColor(unpack(self.options.reziser_color))
+			end)
+
+			resizerButton:SetScript("OnMouseDown", function() --move this to a single function
+				if (not columnHeader.bIsRezising) then
+					--get the string length to know the min size
+					local textLength = columnHeader.Text:GetStringWidth() + 6
+					columnHeader:SetResizeBounds(math.max(textLength, self.options.reziser_min_width), columnHeader:GetHeight(), self.options.reziser_max_width, columnHeader:GetHeight())
+					columnHeader.bIsRezising = true
+					columnHeader:StartSizing("right")
+				end
 			end)
 
 			resizerButton:SetScript("OnMouseUp", function()
-				newHeader.bIsRezising = false
-				print(2)
-				newHeader:StopMovingOrSizing()
+				if (columnHeader.bIsRezising) then
+					columnHeader.bIsRezising = false
+					columnHeader:StopMovingOrSizing()
+
+					--callback or modify into a passed by table?
+					if (self.OnColumnSettingChangeCallback) then --need to get the header name
+						local columnName = columnHeader.columnData.name
+						xpcall(self.OnColumnSettingChangeCallback, geterrorhandler(), self, "width", columnName, columnHeader:GetWidth())
+					end
+				end
+			end)
+
+			resizerButton:SetScript("OnHide", function()
+				if (columnHeader.bIsRezising) then
+					columnHeader:StopMovingOrSizing()
+					columnHeader.bIsRezising = false
+				end
 			end)
 
 			resizerButton.texture = resizerButton:CreateTexture(nil, "overlay")
 			resizerButton.texture:SetAllPoints()
 			resizerButton.texture:SetColorTexture(1, 1, 1, 1)
 
-			newHeader.Arrow:SetPoint("right", newHeader, "right", -1, 0)
+			columnHeader.Arrow:SetPoint("right", columnHeader, "right", -1, 0)
 
-			newHeader.Separator:Hide()
-			newHeader.Arrow:Hide()
+			columnHeader.Separator:Hide()
+			columnHeader.Arrow:Hide()
 
-			self:UpdateSortArrow(newHeader, false, "DESC")
+			self:UpdateSortArrow(columnHeader, false, "DESC")
 
-			tinsert(self.columnHeadersCreated, newHeader)
-			columnHeader = newHeader
+			tinsert(self.columnHeadersCreated, columnHeader)
+			columnHeader = columnHeader
 		end
 
 		self:ClearColumnHeader(columnHeader)
@@ -5561,6 +5616,12 @@ local default_header_options = {
 	grow_direction = "RIGHT",
 	padding = 2,
 
+	reziser_shown = false, --make sure to set the callback function with: header:SetOnColumnResizeScript(callbackFunction)
+	reziser_width = 2,
+	reziser_color = {1, 0.6, 0, 0.6},
+	reziser_min_width = 16,
+	reziser_max_width = 200,
+
 	--each piece of the header
 	header_backdrop = {bgFile = [[Interface\Tooltips\UI-Tooltip-Background]], tileSize = 64, tile = true},
 	header_backdrop_color = {0, 0, 0, 0.5},

boot.lua

@@ -2,6 +2,7 @@
 --global name declaration
 --local _StartDebugTime = debugprofilestop() print(debugprofilestop() - _StartDebugTime)
 --test if the packager will deploy to wago
+--https://github.com/LuaLS/lua-language-server/wiki/Annotations#documenting-types
 
 --make an option to show death in the order of newest to oldest
 

frames/window_playerbreakdown_spells.lua

@@ -69,13 +69,16 @@ end
 
 function spellsTab.OnProfileChange()
 	spellsTab.spellcontainer_header_settings = Details.breakdown_spell_tab.spellcontainer_headers
-	spellsTab.UpdateHeadersSettings()
+	spellsTab.UpdateHeadersSettings("spells")
 end
 
+---@type table<table, string>
+local headerContainerType = {}
+
 ---default settings for the header of the spells container
 ---label is a localized string
 ---@type {name: string, width: number, label: string, align: string, enabled: boolean, attribute: number|nil}[]
-local columnInfo = {
+local spellContainerColumnInfo = {
 	{name = "icon", width = 22, label = "", align = "center", enabled = true,},
 	{name = "target", width = 22, label = "", align = "center", enabled = true},
 	{name = "rank", label = "#", width = 16, align = "center", enabled = true},
@@ -93,21 +96,59 @@ local columnInfo = {
 	{name = "absorbed", label = "absorbed", width = 45, align = "left", enabled = false, attribute = DETAILS_ATTRIBUTE_HEAL},
 }
 
-function spellsTab.UpdateHeadersSettings()
-	--profile settings
+---callback for when the user resizes a column on the header
+---@param headerFrame headerframe
+---@param optionName string
+---@param columnName string
+---@param value any
+local onHeaderColumnOptionChanged = function(headerFrame, optionName, columnName, value)
+	---@type string
+	local containerType = headerContainerType[headerFrame]
 	---@type table
-	local settings = spellsTab.spellcontainer_header_settings
+	local settings
 
-	--do a loop and check if the column exists in the profile settings, if not, create it
-	for i = 1, #columnInfo do
+	if (containerType == "spells") then
+		settings = spellsTab.spellcontainer_header_settings
+
+	elseif (containerType == "targets") then
+
+	end
+
+	settings[columnName][optionName] = value
+
+	spellsTab.UpdateHeadersSettings(containerType)
+end
+
+---update details profile
+---copy settings from the ColumnInfo table which doesn't exists in the details profile
+---this is called when the profile changes or when the tab is opened with a different actor than before
+---@param containerType "spells"|"targets"
+function spellsTab.UpdateHeadersSettings(containerType)
+	---details table which hold the settings for a container header
+	---@type table
+	local settings
+	---@type table
+	local containerInfo
+	if (containerType == "spells") then
+		settings = spellsTab.spellcontainer_header_settings
+		containerInfo = spellContainerColumnInfo
+
+	elseif (containerType == "targets") then
+
+	end
+
+	--do a loop and check if the column data from columnInfo exists in the details profile settings, if not, add it
+	for i = 1, #containerInfo do
 		--default column settings
-		local columnData = columnInfo[i]
+		local columnData = containerInfo[i]
+		---@type string
+		local columnName = columnData.name
 		--column settings for the column on details profile
-		local columnSettings = settings[columnData.name]
+		local columnSettings = settings[columnName]
 		--check if this column does not have a mirror table in details profile
 		if (not columnSettings) then
 			--create the mirror table
-			settings[columnData.name] = {
+			settings[columnName] = {
 				enabled = columnData.enabled,
 				width = columnData.width,
 				align = columnData.align,
@@ -115,13 +156,20 @@ function spellsTab.UpdateHeadersSettings()
 		end
 	end
 
-	spellsTab.spellsHeaderData = spellsTab.BuildHeaderTable()
-	print("headerTable = ", #spellsTab.spellsHeaderData)
-	spellsTab.SpellScrollFrame.Header:SetHeaderTable(spellsTab.spellsHeaderData)
+	if (containerType == "spells") then
+		spellsTab.spellsHeaderData = spellsTab.BuildHeaderTable("spells")
+		spellsTab.SpellScrollFrame.Header:SetHeaderTable(spellsTab.spellsHeaderData)
+
+	elseif (containerType == "targets") then
+		spellsTab.spellsHeaderData = spellsTab.BuildHeaderTable("targets")
+	end
 end
 
-function spellsTab.BuildHeaderTable()
-	---@type {name: string, width: number, label: string, align: string, enabled: boolean}[]
+---parse the data from details profile and build a table with the data to be used by the header
+---@param containerType "spells"|"targets"
+---@return {name: string, width: number, text: string, align: string}[]
+function spellsTab.BuildHeaderTable(containerType)
+	---@type {name: string, width: number, text: string, align: string}[]
 	local headerTable = {}
 
     ---@type instance
@@ -131,10 +179,20 @@ function spellsTab.BuildHeaderTable()
 	local mainAttribute, subAttribute = instance:GetDisplay()
 
 	--settings from profile | updated at UpdateHeadersSettings() > called on OnProfileChange() and when the tab is opened
-	local settings = spellsTab.spellcontainer_header_settings
+	local settings
 
-	for i = 1, #columnInfo do
-		local columnData = columnInfo[i]
+	---@type table
+	local containerInfo
+
+	if (containerType == "spells") then
+		settings = spellsTab.spellcontainer_header_settings
+		containerInfo = spellContainerColumnInfo
+	elseif (containerType == "targets") then
+
+	end
+
+	for i = 1, #containerInfo do
+		local columnData = containerInfo[i]
 		local columnSettings = settings[columnData.name]
 
 		if (columnSettings.enabled) then
@@ -218,7 +276,7 @@ function spellsTab.OnShownTab()
 	--reset the spell blocks
 	spellsTab.GetSpellBlockContainer():ClearBlocks()
 	--update spells header frame
-	spellsTab.UpdateHeadersSettings()
+	spellsTab.UpdateHeadersSettings("spells")
 end
 
 --called when the tab is getting created, run only once
@@ -1336,13 +1394,22 @@ function spellsTab.CreateSpellScrollContainer(tabFrame)
 	--~header
 	local headerOptions = {
 		padding = 2,
+
 		header_height = 14,
+		reziser_shown = true,
+		reziser_width = 2,
+		reziser_color = {.5, .5, .5, 0.7},
+		reziser_max_width = 246,
 	}
 
 	local headerTable = {}
 
 	scrollFrame.Header = DetailsFramework:CreateHeader(tabFrame, headerTable, headerOptions)
 	scrollFrame.Header:SetPoint("topleft", scrollFrame, "topleft", 0, 1)
+	scrollFrame.Header:SetColumnSettingChangedCallback(onHeaderColumnOptionChanged)
+
+	--cache the type of this container
+	headerContainerType[scrollFrame.Header] = "spells"
 
 	--create the scroll lines
 	for i = 1, CONST_SPELLSCROLL_AMTLINES do