Fix row removal and add a demo table to test it.
This commit is contained in:
parent
649d608c89
commit
79b616dd95
5 changed files with 119 additions and 8 deletions
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
95
demo/RemoveDemoTable.tsx
Normal file
95
demo/RemoveDemoTable.tsx
Normal file
|
@ -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>
|
||||
)
|
||||
},
|
||||
},
|
||||
}))} />
|
||||
);
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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] = {
|
||||
|
|
10
yarn.lock
10
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"
|
||||
|
|
Loading…
Reference in a new issue