Fix row removal and add a demo table to test it.

demo/DemoApp.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {Application} from "@kernelui/core";
 import {DemoTable} from "./DemoTable";
+import {RemoveDemoTable} from "./RemoveDemoTable";
 
 export function DemoApp()
 {
@@ -9,6 +10,8 @@ export function DemoApp()
 			<h1>Random table</h1>
 
 			<DemoTable />
+
+			<RemoveDemoTable />
 		</Application>
 	)
 }

demo/RemoveDemoTable.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from "react";
+import {createSmartable} from "../src/Smartable/Smartable";
+import {createColumn, createColumns} from "../src/Smartable/Column";
+import {StringFilter} from "../src/Smartable/Filters/StringFilter";
+import { Cell } from "../src/Smartable/Cell";
+
+
+// Create main table.
+const Smartable = createSmartable({
+	columns: createColumns(
+		createColumn("name", {
+			title: "Name",
+			filter: StringFilter,
+		}),
+		createColumn("actions", {
+			title: "Actions",
+		}),
+	),
+});
+
+export function RemoveDemoTable()
+{
+	const [rows, setRows] = useState<string[]>([
+		"Formica rufa",
+		"Lasius niger",
+		"Camponotus pennsylvanicus",
+		"Solenopsis invicta",
+		"Atta cephalotes",
+		"Pogonomyrmex barbatus",
+		"Myrmica rubra",
+		"Dorymyrmex insanus",
+		"Pheidole megacephala",
+		"Crematogaster scutellaris",
+		"Tetramorium caespitum",
+		"Tapinoma sessile",
+		"Linepithema humile",
+		"Monomorium pharaonis",
+		"Odontomachus bauri",
+		"Paraponera clavata",
+		"Oecophylla smaragdina",
+		"Pseudomyrmex gracilis",
+		"Eciton burchellii",
+		"Anoplolepis gracilipes",
+		"Acromyrmex octospinosus",
+		"Acanthomyops claviger",
+		"Dorylus nigricans",
+		"Neivamyrmex nigrescens",
+		"Hypoponera punctatissima",
+		"Solenopsis geminata",
+		"Camponotus chromaiodes",
+		"Brachymyrmex depilis",
+		"Ectatomma ruidum",
+		"Proceratium silaceum",
+		"Cephalotes atratus",
+		"Neoponera villosa",
+		"Dinoponera gigantea",
+		"Prenolepis imparis",
+		"Lasius flavus",
+		"Formica fusca",
+		"Myrmecia gulosa",
+		"Solenopsis molesta",
+		"Camponotus herculeanus",
+		"Cataulacus granulatus",
+		"Daceton armigerum",
+		"Polyrhachis dives",
+		"Pheidole dentata",
+		"Tetramorium immigrans",
+		"Messor barbarus",
+		"Cardiocondyla obscurior",
+		"Nylanderia flavipes",
+		"Forelius pruinosus",
+		"Amblyopone pallipes",
+	]);
+
+	return (
+		<Smartable.Table data={rows.map((row, rowIndex) => ({
+			cells: {
+				name: {
+					data: row,
+				},
+				actions: {
+					data: null,
+					element: (
+						<Cell>
+							<button className={"remove"}
+							        onClick={() => setRows(rows.toSpliced(rowIndex, 1))}>
+								Remove
+							</button>
+						</Cell>
+					)
+				},
+			},
+		}))} />
+	);
+}

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"name": "@kernelui/smartable",
 	"description": "Kernel UI Smartable.",
 	"scripts": {
@@ -17,7 +17,7 @@
 		"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
 	},
 	"devDependencies": {
-		"@kernelui/core": "^1.2.5",
+		"@kernelui/core": "^1.3.3",
 		"@phosphor-icons/react": "^2.1.7",
 		"@types/node": "^22.0.0",
 		"@types/react": "^18.3.3",

src/Smartable/AsyncManager.tsx

@@ -91,6 +91,12 @@ class AsyncManager<CK extends ColumnKey>
 	 */
 	protected rowsLoaded: boolean = false;
 
+	/**
+	 * Tells if rows need to be reinitialized or not.
+	 * @protected
+	 */
+	protected reinitRows: boolean = false;
+
 	/**
 	 * Rows data.
 	 * @protected
@@ -129,6 +135,9 @@ class AsyncManager<CK extends ColumnKey>
 		// Ignore undefined value.
 		if (rowsDefinitions == undefined) return;
 
+		// Rows have been reinitialized.
+		this.reinitRows = true;
+
 		// Initialize rows data and cells definitions.
 		this.rowsData = [];
 		this.cellsDefinitions = [];
@@ -226,6 +235,7 @@ class AsyncManager<CK extends ColumnKey>
 	{
 		if (!(
 			// Checking that there is at least one changed value.
+			this.reinitRows ||
 			this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => (
 				Object.keys(rowCells).length > 0
 			))
@@ -235,11 +245,14 @@ class AsyncManager<CK extends ColumnKey>
 
 		// Initialize new data.
 		const newData = {
-			rows: !this.rowsLoaded ? undefined : [
+			rows: !this.rowsLoaded ? undefined : this.reinitRows ? [] : [
 				...(this.currentDataState?.rows ?? [])
 			],
 		};
 
+		// Rows have been reinitialized.
+		this.reinitRows = false;
+
 		for (const [rowId, newRow] of this.rowsData?.entries())
 		{ // Update value of each new row.
 			newData.rows[rowId] = {

yarn.lock

@@ -524,9 +524,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kernelui/core@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "@kernelui/core@npm:1.2.5::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.2.5%2Fcore-1.2.5.tgz"
+"@kernelui/core@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@kernelui/core@npm:1.3.3::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.3.3%2Fcore-1.3.3.tgz"
   dependencies:
     "@floating-ui/react": "npm:^0.26.17"
     "@fontsource-variable/jetbrains-mono": "npm:^5.0.21"
@@ -539,7 +539,7 @@ __metadata:
     react: ^18.3.1
     react-dom: ^18.3.1
     react-router-dom: ^6.24.1
-  checksum: 10c0/4b7c3eb0b501fbc9ec7ad0d3787423a461f24819b3cc94c58fba2e8269d3d45d8b05d444a63bf155aaa21be0a698fecbfe2796e90b14d233958b7236deb3b02d
+  checksum: 10c0/19e00303e752e937c2ced2f79eb8c189e9453e5b186c14a32fe621b460d367778b77ae659e7ff5262cdfe835e7cb7652084efe26cb388efaae1533f450fe25b3
   languageName: node
   linkType: hard
 
@@ -547,7 +547,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@kernelui/smartable@workspace:."
   dependencies:
-    "@kernelui/core": "npm:^1.2.5"
+    "@kernelui/core": "npm:^1.3.3"
     "@phosphor-icons/react": "npm:^2.1.7"
     "@types/node": "npm:^22.0.0"
     "@types/react": "npm:^18.3.3"