feat(webui): expose central pagination bar

This commit is contained in:
2026-07-21 12:36:49 +02:00
parent 9131838b98
commit 4cb3e94de3
2 changed files with 22 additions and 7 deletions

View File

@@ -793,13 +793,28 @@ export default function DataGrid<T>({
}
function DataGridPaginationBar({
export type DataGridPaginationBarProps = {
page: number;
pageSize: number;
totalRows: number;
pageCount?: number;
pageSizeOptions?: number[];
disabled?: boolean;
className?: string;
ariaLabel?: string;
onPageChange: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
};
export function DataGridPaginationBar({
page,
pageSize,
totalRows,
pageCount,
pageSizeOptions,
pageCount = Math.max(1, Math.ceil(totalRows / pageSize)),
pageSizeOptions = [10, 25, 50, 100],
disabled = false,
className = "",
ariaLabel = "i18n:govoplan-core.table_pagination.3665bd76",
onPageChange,
onPageSizeChange
@@ -811,13 +826,13 @@ function DataGridPaginationBar({
}: {page: number;pageSize: number;totalRows: number;pageCount: number;pageSizeOptions: number[];disabled?: boolean;onPageChange: (page: number) => void;onPageSizeChange?: (pageSize: number) => void;}) {
}: DataGridPaginationBarProps) {
const first = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
const last = Math.min(totalRows, page * pageSize);
const options = [...new Set([...pageSizeOptions, pageSize])].filter((value) => value > 0).sort((a, b) => a - b);
const { translateText } = usePlatformLanguage();
return (
<div className="data-grid-pagination" aria-label={translateText("i18n:govoplan-core.table_pagination.3665bd76")}>
<div className={`data-grid-pagination ${className}`.trim()} aria-label={translateText(ariaLabel)}>
<div className="data-grid-pagination-summary">{first}{last} {translateText("i18n:govoplan-core.of")} {totalRows}</div>
<label className="data-grid-page-size">
<span>{translateText("i18n:govoplan-core.rows_per_page.af2f9c1b")}</span>

View File

@@ -100,8 +100,8 @@ export { default as MailServerSettingsPanel, MailServerActionResult, MailServerF
export type { MailServerConnectionTestResult, MailServerCredentialSettings, MailServerFolderLookupResult, MailServerImapSettings, MailServerSecurity, MailServerSecurityOption, MailServerSettingsMode, MailServerSettingsPanelProps, MailServerSettingsSection, MailServerSmtpSettings } from "./components/mail/MailServerSettingsPanel";
export { default as FieldLabel } from "./components/help/FieldLabel";
export { default as InlineHelp } from "./components/help/InlineHelp";
export { default as DataGrid, DataGridEmptyAction, DataGridRowActions } from "./components/table/DataGrid";
export type { DataGridColumn, DataGridListOption, DataGridPagination, DataGridQueryState, DataGridSortDirection } from "./components/table/DataGrid";
export { default as DataGrid, DataGridEmptyAction, DataGridPaginationBar, DataGridRowActions } from "./components/table/DataGrid";
export type { DataGridColumn, DataGridListOption, DataGridPagination, DataGridPaginationBarProps, DataGridQueryState, DataGridSortDirection } from "./components/table/DataGrid";
export { default as TableActionGroup } from "./components/table/TableActionGroup";
export type { TableActionDefinition, TableActionGroupProps } from "./components/table/TableActionGroup";