Smartable/demo/DemoTable.tsx

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";
import {ClickableCell} from "../src/Smartable/Cells/ClickableCell";
import {Buttons, Modal, ModalType, useModals} from "@kernelui/core";
import {StringFilter} from "../src/Smartable/Filters/StringFilter";
import {NumberFilter} from "../src/Smartable/Filters/NumberFilter";

/**
 * 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",
			filter: StringFilter,
		}),
		createColumn("quantity", {
			title: "Quantity",
			filter: NumberFilter,
		}),
		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 modals = useModals();

	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 name = randomName();
					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: name,
								element: <ClickableCell onClick={() => {
									const uuid = modals.open(<Modal type={ModalType.INFO} title={name}>
										A great description about these ants.
										<Buttons>
											<button onClick={() => modals.close(uuid)}>OK</button>
										</Buttons>
									</Modal>);
								}} />,
							},
							quantity: {
								data: quantity,
							},
							"unit-price": {
								data: price,
							},
							"total-price": totalPricePromise,
						},
					} as RowDefinition<SmartableColumns<typeof Smartable>>;
				}));
			}, 2000);
		})
	), []);

	return (
		<Smartable.Table data={demoDataPromise} />
	);
}