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 341c0358f0
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
3 changed files with 146 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>
) )
} }

137
demo/DemoTable.tsx Normal file
View file

@ -0,0 +1,137 @@
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";
/**
* 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)];
}
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(() => {
const quantity = randomQuantity();
const price = randomPrice();
return {
cells: {
name: {
data: randomName(),
},
quantity: {
data: quantity,
},
"unit-price": {
data: price,
},
"total-price": {
data: quantity * price,
},
},
} 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.
*/ */