Using loleris Replica with tables for data

So I am currently working on an index system and I am using a table in my players data called Index for it. I have the ui and everything done I was just wondering how I could use replica to check when a new character was added into the index. I am pretty new to replica so I don’t know how I would go about it. Would I just use OnSet or something else?

Template

local Template = {
	Tix = 100,
	BaseCharacters = {},
	Index = {},
	Steals = 0,
	FirstTimeJoined = true,
	LastLogoutTime = 0 ,
	Rebirths = 0,
	Inventory = {},
	Cash_Multi = 1,
	Friend_Boost = 0,
	Lock_Time = 60
}

return Template

How I am handling the index currently (pretty poorly)

--//SERVICES
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

--//FOLDERS
local Modules = ReplicatedStorage:WaitForChild("Modules")
local Characters = ReplicatedStorage:WaitForChild("Floppas")
local Packages = ReplicatedStorage:WaitForChild("Packages")
local Events = ReplicatedStorage.Events

-- REFRENCES
local player = Players.LocalPlayer
local playerGUI = player.PlayerGui
local IndexUI = playerGUI:WaitForChild("Main"):WaitForChild("Index")
local IndexFrame = IndexUI:WaitForChild("IndexMain")
local FrameTemp = IndexFrame:WaitForChild("Temp")
local ScrollingFrame = IndexFrame:WaitForChild("ScrollingFrame")
local DataReplica = Events.DataReplica
local plrIndex
local UpdateIndex = Events:WaitForChild("UpdateIndex")

--//MODULES
local CharacterData = require(Modules:WaitForChild("CharacterData"))
local EzVisuals = require(Packages:WaitForChild("EasyVisuals"))

local Service = {}
Service.__index = Service

local RarityTextColor = {
	["Common"] = Color3.fromRGB(170, 255, 127),
	["Rare"] = Color3.fromRGB(85, 170, 255),
	["Epic"] = Color3.fromRGB(170, 85, 255),
	["Legendary"] = Color3.fromRGB(255, 170, 0),
	["Mythic"] = Color3.fromRGB(255, 0, 0),
	["ROBLOX"] = Color3.fromRGB(170, 85, 255)
}

local RarityOrder = {
	["Common"] = 1,
	["Rare"] = 2,
	["Epic"] = 3,
	["Legendary"] = 4,
	["Mythic"] = 5,
	["ROBLOX"] = 6
}

local MessedUpChars = {
	["coolkid"] = CFrame.new(0, -15, 0),
	["stickmasterluke"] = CFrame.new(0, -7, -8)
}

local function generateCharacterFrames(indexData)
	for _, child in pairs(ScrollingFrame:GetChildren()) do
		if child:IsA("Frame") and child.Name ~= "Temp" then
			child:Destroy()
		end
	end
	
	
	local charactersList = {}

	for _, character in pairs(Characters:GetChildren()) do
		local characterName = character.Name
		local charData = CharacterData[characterName]
		if not charData then continue end

		table.insert(charactersList, {
			Instance = character,
			Name = characterName,
			Rarity = string.gsub(charData.Rarity, "^%s*(.-)%s*$", "%1")
		})
	end

	table.sort(charactersList, function(a, b)
		local r1 = RarityOrder[a.Rarity] or math.huge
		local r2 = RarityOrder[b.Rarity] or math.huge

		if r1 == r2 then
			return a.Name < b.Name
		else
			return r1 < r2
		end
	end)

	for index, data in ipairs(charactersList) do
		local character = data.Instance
		local characterName = data.Name
		local rarity = data.Rarity
		local charData = CharacterData[characterName]

		local newFrame = FrameTemp:Clone()
		newFrame.Name = characterName
		newFrame.Parent = ScrollingFrame
		newFrame.CharName.Text = characterName
		newFrame.LayoutOrder = index

		local color = RarityTextColor[rarity]
		if not color then
			warn("Unknown rarity or missing color for:", rarity)
			color = Color3.new(1, 1, 1)
		end

		newFrame.CharName.TextColor3 = color
		if rarity == "ROBLOX" then
			EzVisuals.new(newFrame.CharName, "Rainbow", 0.35)
		end

		newFrame.Visible = true

		local charClone: Model = character:Clone()
		charClone.Parent = newFrame.CharDisplay

		for _, descendant in ipairs(charClone:GetDescendants()) do
			if table.find(indexData, charClone.Name) then newFrame.Overlay.Visible = false continue end
			if descendant:IsA("BasePart") then
				descendant.Color = Color3.new(0, 0, 0)
			elseif descendant:IsA("Decal") or descendant:IsA("Texture") then
				descendant:Destroy()
			elseif descendant:IsA("Clothing") then
				descendant:Destroy()
			end
		end


		local rotation = CFrame.Angles(math.rad(-45), math.rad(-180), math.rad(0))

		local offset = MessedUpChars[characterName]
		local finalCFrame

		if offset then
			finalCFrame = offset * rotation
		else
			finalCFrame = CFrame.new(0, 0, -8) * rotation
		end

		charClone:PivotTo(finalCFrame)
		charClone:ScaleTo(6)
	end
end

function Service.Init()
	DataReplica.OnClientEvent:Connect(function(profileData)
		plrIndex = profileData.Index
		generateCharacterFrames(plrIndex)
	end)
	
	while task.wait(5) do
		Service.UpdateIndex()
	end
end

function Service.UpdateIndex()
	local newIndex = UpdateIndex:InvokeServer()
	generateCharacterFrames(newIndex)
end

return Service

Do you mean you want to create a listener for when characters are added to the Index table?

If so you can do this

replica:OnChange(function(changeType, path, value)
		if path[1] == "Index" and changeType == "TableInsert" then
                -- Do whatever
		end
	end)

OnChange is a universal listener for changes to the replica.

yes thank you. Also, is there any proper documentation for replica? I would like to properly understand its methods. I don’t understand OnChange or any of the other methods well so I would like to read about them.

Not really, but there is a solution. Open the ReplicaClient module and at the start of it there is a bunch of useful information commented. It explains OnChange fully. You can do the same for the server side of the module.