diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index 115918b..5c2c65f 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -1,10 +1,14 @@
import React from "react";
import {Application} from "@kernelui/core";
+import {DemoTable} from "./DemoTable";
export function DemoApp()
{
return (
+ Random table
+
+
)
}
diff --git a/demo/DemoTable.tsx b/demo/DemoTable.tsx
new file mode 100644
index 0000000..6f523bf
--- /dev/null
+++ b/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>>(() => (
+ 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>;
+ }));
+ }, 2000);
+ })
+ ), []);
+
+ return (
+
+ );
+}
diff --git a/src/Smartable/Smartable.tsx b/src/Smartable/Smartable.tsx
index fedf10a..aa94b13 100644
--- a/src/Smartable/Smartable.tsx
+++ b/src/Smartable/Smartable.tsx
@@ -45,6 +45,11 @@ export type Smartable = {
Table: React.FunctionComponent>;
};
+/**
+ * Smartable columns infered type.
+ */
+export type SmartableColumns = CK extends Smartable ? CK : never;
+
/**
* Define a new Smartable.
*/