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 React from "react";
|
||||||
import {Application} from "@kernelui/core";
|
import {Application} from "@kernelui/core";
|
||||||
import {DemoTable} from "./DemoTable";
|
import {DemoTable} from "./DemoTable";
|
||||||
|
import {RemoveDemoTable} from "./RemoveDemoTable";
|
||||||
|
|
||||||
export function DemoApp()
|
export function DemoApp()
|
||||||
{
|
{
|
||||||
|
@ -9,6 +10,8 @@ export function DemoApp()
|
||||||
<h1>Random table</h1>
|
<h1>Random table</h1>
|
||||||
|
|
||||||
<DemoTable />
|
<DemoTable />
|
||||||
|
|
||||||
|
<RemoveDemoTable />
|
||||||
</Application>
|
</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",
|
"name": "@kernelui/smartable",
|
||||||
"description": "Kernel UI Smartable.",
|
"description": "Kernel UI Smartable.",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
|
"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@kernelui/core": "^1.2.5",
|
"@kernelui/core": "^1.3.3",
|
||||||
"@phosphor-icons/react": "^2.1.7",
|
"@phosphor-icons/react": "^2.1.7",
|
||||||
"@types/node": "^22.0.0",
|
"@types/node": "^22.0.0",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
|
|
|
@ -91,6 +91,12 @@ class AsyncManager<CK extends ColumnKey>
|
||||||
*/
|
*/
|
||||||
protected rowsLoaded: boolean = false;
|
protected rowsLoaded: boolean = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tells if rows need to be reinitialized or not.
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
|
protected reinitRows: boolean = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rows data.
|
* Rows data.
|
||||||
* @protected
|
* @protected
|
||||||
|
@ -129,6 +135,9 @@ class AsyncManager<CK extends ColumnKey>
|
||||||
// Ignore undefined value.
|
// Ignore undefined value.
|
||||||
if (rowsDefinitions == undefined) return;
|
if (rowsDefinitions == undefined) return;
|
||||||
|
|
||||||
|
// Rows have been reinitialized.
|
||||||
|
this.reinitRows = true;
|
||||||
|
|
||||||
// Initialize rows data and cells definitions.
|
// Initialize rows data and cells definitions.
|
||||||
this.rowsData = [];
|
this.rowsData = [];
|
||||||
this.cellsDefinitions = [];
|
this.cellsDefinitions = [];
|
||||||
|
@ -226,6 +235,7 @@ class AsyncManager<CK extends ColumnKey>
|
||||||
{
|
{
|
||||||
if (!(
|
if (!(
|
||||||
// Checking that there is at least one changed value.
|
// Checking that there is at least one changed value.
|
||||||
|
this.reinitRows ||
|
||||||
this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => (
|
this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => (
|
||||||
Object.keys(rowCells).length > 0
|
Object.keys(rowCells).length > 0
|
||||||
))
|
))
|
||||||
|
@ -235,11 +245,14 @@ class AsyncManager<CK extends ColumnKey>
|
||||||
|
|
||||||
// Initialize new data.
|
// Initialize new data.
|
||||||
const newData = {
|
const newData = {
|
||||||
rows: !this.rowsLoaded ? undefined : [
|
rows: !this.rowsLoaded ? undefined : this.reinitRows ? [] : [
|
||||||
...(this.currentDataState?.rows ?? [])
|
...(this.currentDataState?.rows ?? [])
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Rows have been reinitialized.
|
||||||
|
this.reinitRows = false;
|
||||||
|
|
||||||
for (const [rowId, newRow] of this.rowsData?.entries())
|
for (const [rowId, newRow] of this.rowsData?.entries())
|
||||||
{ // Update value of each new row.
|
{ // Update value of each new row.
|
||||||
newData.rows[rowId] = {
|
newData.rows[rowId] = {
|
||||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -524,9 +524,9 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@kernelui/core@npm:^1.2.5":
|
"@kernelui/core@npm:^1.3.3":
|
||||||
version: 1.2.5
|
version: 1.3.3
|
||||||
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"
|
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:
|
dependencies:
|
||||||
"@floating-ui/react": "npm:^0.26.17"
|
"@floating-ui/react": "npm:^0.26.17"
|
||||||
"@fontsource-variable/jetbrains-mono": "npm:^5.0.21"
|
"@fontsource-variable/jetbrains-mono": "npm:^5.0.21"
|
||||||
|
@ -539,7 +539,7 @@ __metadata:
|
||||||
react: ^18.3.1
|
react: ^18.3.1
|
||||||
react-dom: ^18.3.1
|
react-dom: ^18.3.1
|
||||||
react-router-dom: ^6.24.1
|
react-router-dom: ^6.24.1
|
||||||
checksum: 10c0/4b7c3eb0b501fbc9ec7ad0d3787423a461f24819b3cc94c58fba2e8269d3d45d8b05d444a63bf155aaa21be0a698fecbfe2796e90b14d233958b7236deb3b02d
|
checksum: 10c0/19e00303e752e937c2ced2f79eb8c189e9453e5b186c14a32fe621b460d367778b77ae659e7ff5262cdfe835e7cb7652084efe26cb388efaae1533f450fe25b3
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
@ -547,7 +547,7 @@ __metadata:
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@kernelui/smartable@workspace:."
|
resolution: "@kernelui/smartable@workspace:."
|
||||||
dependencies:
|
dependencies:
|
||||||
"@kernelui/core": "npm:^1.2.5"
|
"@kernelui/core": "npm:^1.3.3"
|
||||||
"@phosphor-icons/react": "npm:^2.1.7"
|
"@phosphor-icons/react": "npm:^2.1.7"
|
||||||
"@types/node": "npm:^22.0.0"
|
"@types/node": "npm:^22.0.0"
|
||||||
"@types/react": "npm:^18.3.3"
|
"@types/react": "npm:^18.3.3"
|
||||||
|
|
Loading…
Reference in a new issue