feat(pagination): add server-side pagination support and controls

- Implement pagination control UI with page navigation and size selector
- Enable server-side callbacks for page changes and size adjustments
- Integrate pagination into Griddy component with data count handling

src/Griddy/rendering/TableCell.tsx

@@ -1,8 +1,11 @@
 import { Checkbox } from '@mantine/core'
 import { type Cell, flexRender } from '@tanstack/react-table'
 
+import { getGriddyColumn } from '../core/columnMapper'
 import { CSS, SELECTION_COLUMN_ID } from '../core/constants'
+import { useGriddyStore } from '../core/GriddyStore'
 import styles from '../styles/griddy.module.css'
+import { EditableCell } from './EditableCell'
 
 interface TableCellProps<T> {
   cell: Cell<T, unknown>
@@ -10,18 +13,60 @@ interface TableCellProps<T> {
 
 export function TableCell<T>({ cell }: TableCellProps<T>) {
   const isSelectionCol = cell.column.id === SELECTION_COLUMN_ID
+  const isEditing = useGriddyStore((s) => s.isEditing)
+  const focusedRowIndex = useGriddyStore((s) => s.focusedRowIndex)
+  const focusedColumnId = useGriddyStore((s) => s.focusedColumnId)
+  const setEditing = useGriddyStore((s) => s.setEditing)
+  const setFocusedColumn = useGriddyStore((s) => s.setFocusedColumn)
+  const onEditCommit = useGriddyStore((s) => s.onEditCommit)
 
   if (isSelectionCol) {
     return <RowCheckbox cell={cell} />
   }
 
+  const griddyColumn = getGriddyColumn(cell.column)
+  const rowIndex = cell.row.index
+  const columnId = cell.column.id
+  const isEditable = (griddyColumn as any)?.editable ?? false
+  const isFocusedCell = isEditing && focusedRowIndex === rowIndex && focusedColumnId === columnId
+
+  const handleCommit = async (value: unknown) => {
+    if (onEditCommit) {
+      await onEditCommit(cell.row.id, columnId, value)
+    }
+    setEditing(false)
+    setFocusedColumn(null)
+  }
+
+  const handleCancel = () => {
+    setEditing(false)
+    setFocusedColumn(null)
+  }
+
+  const handleDoubleClick = () => {
+    if (isEditable) {
+      setEditing(true)
+      setFocusedColumn(columnId)
+    }
+  }
+
   return (
     <div
       className={styles[CSS.cell]}
+      onDoubleClick={handleDoubleClick}
       role="gridcell"
       style={{ width: cell.column.getSize() }}
     >
-      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+      {isFocusedCell && isEditable ? (
+        <EditableCell
+          cell={cell}
+          isEditing={isFocusedCell}
+          onCancelEdit={handleCancel}
+          onCommitEdit={handleCommit}
+        />
+      ) : (
+        flexRender(cell.column.columnDef.cell, cell.getContext())
+      )}
     </div>
   )
 }