Add clickable cells and allow customizations on cells.

demo/DemoTable.tsx

@@ -3,6 +3,8 @@ import {createSmartable, SmartableColumns, SmartableData} from "../src/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";
 
 /**
  * Some ants names.
@@ -111,12 +113,15 @@ export function randomComputationTime(): number
 
 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();
 
@@ -132,7 +137,15 @@ export function DemoTable()
 					return {
 						cells: {
 							name: {
-								data: randomName(),
+								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,

src/Smartable/Cell.tsx

@@ -2,7 +2,6 @@ import React, {useContext} from "react";
 import {ColumnKey, useColumn} from "./Column";
 import {Smartable} from "./Smartable";
 import {useRow} from "./Row";
-import {SpinningLoader} from "@kernelui/core";
 
 /**
  * Smartable cell definition.
@@ -23,14 +22,14 @@ export interface CellDefinition<T = any>
 /**
  * Default cell component.
  */
-export function Cell({children}: React.PropsWithChildren<{}>)
+export function Cell({children, ...props}: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>)
 {
 	// Get cell data.
 	const {data} = useCell();
 
 	// Try to render cell data to string when no children given.
 	return (
-		<td>{children ?? String(data)}</td>
+		<td {...props}>{children ?? String(data)}</td>
 	);
 }
 

src/Smartable/Cells/ClickableCell.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {Cell} from "../Cell";
+import {Modify} from "@kernelui/core";
+
+/**
+ * Clickable cell component.
+ */
+export function ClickableCell({role, children, ...props}: React.PropsWithChildren<Modify<React.TdHTMLAttributes<HTMLTableCellElement>, {
+	role?: never;
+}>>)
+{
+	return (
+		<Cell role={"button"} {...props}>
+			{children}
+		</Cell>
+	)
+}

src/styles/_cells.less

@@ -0,0 +1,11 @@
+td[role="button"]
+{
+	transition: background 0.2s ease;
+
+	&:hover
+	{
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	cursor: pointer;
+}

src/styles/smartable.less

@@ -1,5 +1,6 @@
 table.smartable
 {
+	@import "_cells";
 	@import "_headings";
 	@import "_loaders";
 }