1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import type { ComponentChildren, JSX } from "preact";import { Column } from "../../../deps/@tanstack/react-table.ts";import { _get } from "../../../deps/lodash.get.ts";import { cn } from "../../utils.ts";
type TableColumnCellProps<TData, TValue> =  & JSX.HTMLAttributes<HTMLDivElement>  & {    column: Column<TData, TValue>;    title: string;    render: (v: unknown) => ComponentChildren;  };
export function TableColumnCell<TData, TValue>({  row,  column,  className,  render = (v: unknown) => v,}: TableColumnCellProps<TData, TValue>) {  const value = _get(row.original, column.id.replaceAll("_", "."));  const isNegativeNumber = typeof value === "number" && value < 0;  // const onKeyPress = async (e: JSX.KeyboardEvent<HTMLDivElement>) => {  //   if (!IS_BROWSER) return;  //   if (["Enter"].includes(event.key)) {  //     e.preventDefault();  //     e.target.blur();  //     const value = e.target.textContent;  //     console.log(value);  //     const url = new URL(`/`, globalThis.location.origin);  //     const response = await fetch();  //   }  // };
  return (    <div      // contenteditable      // onKeyPress={onKeyPress}      className={cn(        "w-max",        isNegativeNumber ? `text-left text-red7` : "text-left",      )}    >      {render(value) as ComponentChildren}    </div>  );}
export function TableColumnCellCheckbox<TData, TValue>({  row,  column,  className,}: TableColumnCellProps<TData, TValue>) {  const stringValue = _get(row.original, column.id.replaceAll("_", "."));  const value = ["TRUE", "true", true].includes(stringValue)    ? true    : ["FALSE", "false", false].includes(stringValue)    ? false    : undefined;  return (    // WORKAROUND: add "ml-8" to somewhat center checkbox since    // cannot center using "text-center" nor "mx-auto" on checkbox    <Checkbox      checked={value}      disabled={true}      aria-label="Select row"      className="flex mx-auto my-2"    />  );}