Add clickable cells and allow customizations on cells.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
a82da6541d
commit
c5ac9d3098
5 changed files with 47 additions and 4 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
19
src/Smartable/Cells/ClickableCell.tsx
Normal file
19
src/Smartable/Cells/ClickableCell.tsx
Normal 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
11
src/styles/_cells.less
Normal file
|
@ -0,0 +1,11 @@
|
|||
td[role="button"]
|
||||
{
|
||||
transition: background 0.2s ease;
|
||||
|
||||
&:hover
|
||||
{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
table.smartable
|
||||
{
|
||||
@import "_cells";
|
||||
@import "_headings";
|
||||
@import "_loaders";
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue