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,46 @@
import { DatePickerInput } from '@mantine/dates'
import { useEffect, useState } from 'react'
import type { BaseEditorProps } from './types'
export function DateEditor({ autoFocus = true, onCancel, onCommit, onMoveNext, onMovePrev, value }: BaseEditorProps<Date | string>) {
const [dateValue, setDateValue] = useState<Date | null>(() =>
value ? new Date(value) : null
)
useEffect(() => {
setDateValue(value ? new Date(value) : null)
}, [value])
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault()
onCommit(dateValue ?? '')
} else if (e.key === 'Escape') {
e.preventDefault()
onCancel()
} else if (e.key === 'Tab') {
e.preventDefault()
onCommit(dateValue ?? '')
if (e.shiftKey) {
onMovePrev?.()
} else {
onMoveNext?.()
}
}
}
return (
<DatePickerInput
autoFocus={autoFocus}
clearable
onChange={(date) => {
const dateVal = date ? (typeof date === 'string' ? new Date(date) : date) : null
setDateValue(dateVal)
}}
onKeyDown={handleKeyDown}
size="xs"
value={dateValue}
/>
)
}