Add clickable cells and allow customizations on cells.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-07-27 20:01:07 +02:00
parent a82da6541d
commit c5ac9d3098
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
5 changed files with 47 additions and 4 deletions

View file

@ -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,

View file

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

View file

@ -0,0 +1,19 @@
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;
}>>)
{
console.log(props);
return (
<Cell role={"button"} {...props}>
{children}
</Cell>
)
}

11
src/styles/_cells.less Normal file
View file

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

View file

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