Add a random table as demo table.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-07-27 14:28:31 +02:00
parent c8601aaa30
commit e71d0aa446
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
3 changed files with 163 additions and 0 deletions

View file

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

154
demo/DemoTable.tsx Normal file
View file

@ -0,0 +1,154 @@
import React, {useMemo} from "react";
import {createSmartable, SmartableColumns, SmartableData} from "../src/Smartable/Smartable";
import {createColumn, createColumns} from "../src/Smartable/Column";
import {RowDefinition} from "../src/Smartable/Row";
import {CellDefinition} from "../src/Smartable/Cell";
/**
* Some ants names.
*/
const names: 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"
];
// Create main table.
const Smartable = createSmartable({
columns: createColumns(
createColumn("name", {
title: "Name",
}),
createColumn("quantity", {
title: "Quantity",
}),
createColumn("unit-price", {
title: "Unit price",
}),
createColumn("total-price", {
title: "Total",
}),
),
});
/**
* Generate a random quantity.
*/
export function randomQuantity(): number
{
return Math.floor(Math.random() * 8) + 1;
}
/**
* Generate a random unit price.
*/
export function randomPrice(): number
{
return Math.floor(Math.random() * 25) + 5;
}
/**
* Get a random name from `names` array.
*/
export function randomName(): string
{
return names[Math.floor(Math.random() * names.length)];
}
/**
* Generate a random computation time between 0 and 10s.
*/
export function randomComputationTime(): number
{
return Math.random() * 1000 * 10;
}
export function DemoTable()
{
const demoDataPromise = useMemo<SmartableData<SmartableColumns<typeof Smartable>>>(() => (
new Promise((resolve) => {
// Resolving promise in 2s.
window.setTimeout(() => {
resolve(Array.from({ length: 15 }).map(() => {
// Compute random quantity and unit price.
const quantity = randomQuantity();
const price = randomPrice();
// Fake long computation of total price for each row.
const totalPricePromise = new Promise<CellDefinition<number>>((resolve) => {
window.setTimeout(() => {
return resolve({
data: quantity * price,
});
}, randomComputationTime());
});
return {
cells: {
name: {
data: randomName(),
},
quantity: {
data: quantity,
},
"unit-price": {
data: price,
},
"total-price": totalPricePromise,
},
} as RowDefinition<SmartableColumns<typeof Smartable>>;
}));
}, 2000);
})
), []);
return (
<Smartable.Table data={demoDataPromise} />
);
}

View file

@ -45,6 +45,11 @@ export type Smartable<CK extends ColumnKey> = {
Table: React.FunctionComponent<SmartableProperties<CK>>; Table: React.FunctionComponent<SmartableProperties<CK>>;
}; };
/**
* Smartable columns infered type.
*/
export type SmartableColumns<CK> = CK extends Smartable<infer CK> ? CK : never;
/** /**
* Define a new Smartable. * Define a new Smartable.
*/ */