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";

/**
 * 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} />
	);
}