Add a random table as demo table.

demo/DemoApp.tsx

@@ -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>
 	)
 }

demo/DemoTable.tsx

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

src/Smartable/Smartable.tsx

@@ -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.
  */