Add a random table as demo table.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
c8601aaa30
commit
341c0358f0
3 changed files with 146 additions and 0 deletions
|
@ -1,10 +1,14 @@
|
|||
import React from "react";
|
||||
import {Application} from "@kernelui/core";
|
||||
import {DemoTable} from "./DemoTable";
|
||||
|
||||
export function DemoApp()
|
||||
{
|
||||
return (
|
||||
<Application>
|
||||
<h1>Random table</h1>
|
||||
|
||||
<DemoTable />
|
||||
</Application>
|
||||
)
|
||||
}
|
||||
|
|
137
demo/DemoTable.tsx
Normal file
137
demo/DemoTable.tsx
Normal 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} />
|
||||
);
|
||||
}
|
|
@ -45,6 +45,11 @@ export type Smartable<CK extends ColumnKey> = {
|
|||
Table: React.FunctionComponent<SmartableProperties<CK>>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Smartable columns infered type.
|
||||
*/
|
||||
export type SmartableColumns<CK> = CK extends Smartable<infer CK> ? CK : never;
|
||||
|
||||
/**
|
||||
* Define a new Smartable.
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue