Map testing, custom table based on Tanstack Table

2024-10-25 10:02:40 +09:00
parent edb6ae00fb
commit 115c6ec417
13 changed files with 1956 additions and 125 deletions
--- a/client/src/components/CustomTable.tsx
+++ b/client/src/components/CustomTable.tsx
@ -0,0 +1,102 @@
+import { Button, Flex, Input, Table } from '@mantine/core';
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
+import styles from './CustomTable.module.scss'
+
+// Sample data
+const initialData = [
+    { id: 1, name: 'John Doe', age: 25 },
+    { id: 2, name: 'Jane Smith', age: 30 },
+    { id: 3, name: 'Sam Green', age: 22 },
+];
+
+// Define columns
+const columns: ColumnDef<typeof initialData[0]>[] = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: (info: any) => info.getValue(),
+        maxSize: Number.MAX_SAFE_INTEGER,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Age',
+        cell: (info: any) => info.getValue(),
+    },
+];
+
+const CustomTable = () => {
+    const [data, setData] = useState(initialData);
+    const [editingCell, setEditingCell] = useState({ rowIndex: null, columnId: null });
+
+    const tableColumns = useMemo<ColumnDef<typeof data[0]>[]>(() => columns, []);
+
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+        columnResizeMode: "onChange",
+    });
+
+    // Function to handle cell edit
+    const handleEditCell = (rowIndex: any, columnId: any, value: any) => {
+        const updatedData = [...data];
+        updatedData[rowIndex][columnId] = value;
+        setData(updatedData);
+        //setEditingCell({ rowIndex: null, columnId: null });
+    };
+
+    return (
+        <Table striped withColumnBorders highlightOnHover className={styles.table}>
+            <Table.Thead className={styles.thead}>
+                {table.getHeaderGroups().map(headerGroup => (
+                    <Table.Tr key={headerGroup.id} className={styles.tr}>
+                        {headerGroup.headers.map((header) => (
+                            <Table.Th key={header.id} className={styles.th} w={header.getSize()}>
+                                {flexRender(header.column.columnDef.header, header.getContext())}
+                                <div
+                                    className={styles.resize_handler}
+                                    onMouseDown={header.getResizeHandler()} //for desktop
+                                    onTouchStart={header.getResizeHandler()}
+                                >
+                                </div>
+                            </Table.Th>
+                        ))}
+                    </Table.Tr>
+                ))}
+            </Table.Thead>
+            <Table.Tbody className={styles.tbody}>
+                {table.getRowModel().rows.map((row, rowIndex) => (
+                    <Table.Tr key={row.id} className={styles.tr}>
+                        {row.getVisibleCells().map(cell => {
+                            const isEditing = editingCell.rowIndex === rowIndex && editingCell.columnId === cell.column.id;
+
+                            return (
+                                <Table.Td
+                                    key={cell.id}
+                                    onDoubleClick={() => setEditingCell({ rowIndex, columnId: cell.column.id })}
+                                    style={{ width: cell.column.getSize() }}
+                                    className={styles.td}
+                                >
+                                    {isEditing ? (
+                                        <Input
+                                            type='text'
+                                            value={data[rowIndex][cell.column.id]}
+                                            onChange={(e) => handleEditCell(rowIndex, cell.column.id, e.target.value)}
+                                            onBlur={() => setEditingCell({ rowIndex: null, columnId: null })}
+                                            autoFocus
+                                        />
+                                    ) : (
+                                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                                    )}
+                                </Table.Td>
+                            );
+                        })}
+                    </Table.Tr>
+                ))}
+            </Table.Tbody>
+        </Table>
+    );
+};
+
+export default CustomTable;