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
This commit is contained in:
2026-02-14 14:43:36 +02:00
parent b49d008745
commit 635da0ea18
27 changed files with 1320 additions and 39 deletions

View File

@@ -0,0 +1,49 @@
import { NumberInput } from '@mantine/core'
import { useEffect, useState } from 'react'
import type { BaseEditorProps } from './types'
interface NumericEditorProps extends BaseEditorProps<number> {
max?: number
min?: number
step?: number
}
export function NumericEditor({ autoFocus = true, max, min, onCancel, onCommit, onMoveNext, onMovePrev, step = 1, value }: NumericEditorProps) {
const [inputValue, setInputValue] = useState<number | string>(value ?? '')
useEffect(() => {
setInputValue(value ?? '')
}, [value])
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault()
onCommit(typeof inputValue === 'number' ? inputValue : Number(inputValue))
} else if (e.key === 'Escape') {
e.preventDefault()
onCancel()
} else if (e.key === 'Tab') {
e.preventDefault()
onCommit(typeof inputValue === 'number' ? inputValue : Number(inputValue))
if (e.shiftKey) {
onMovePrev?.()
} else {
onMoveNext?.()
}
}
}
return (
<NumberInput
autoFocus={autoFocus}
max={max}
min={min}
onChange={(val) => setInputValue(val ?? '')}
onKeyDown={handleKeyDown}
size="xs"
step={step}
value={inputValue}
/>
)
}