GovOPlaN/govoplan-core
1
0
Fork 0
Code Issues 46 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webui): expose central pagination bar

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-21 12:36:49 +02:00
parent 9131838b98
commit 4cb3e94de3
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
webui/src/components/table/DataGrid.tsx
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, page,
pageSize, pageSize,
totalRows, totalRows,
pageCount, pageCount = Math.max(1, Math.ceil(totalRows / pageSize)),
pageSizeOptions, pageSizeOptions = [10, 25, 50, 100],
disabled = false, disabled = false,
className = "",
ariaLabel = "i18n:govoplan-core.table_pagination.3665bd76",
onPageChange, onPageChange,
onPageSizeChange 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 first = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
const last = Math.min(totalRows, page * pageSize); const last = Math.min(totalRows, page * pageSize);
const options = [...new Set([...pageSizeOptions, pageSize])].filter((value) => value > 0).sort((a, b) => a - b); const options = [...new Set([...pageSizeOptions, pageSize])].filter((value) => value > 0).sort((a, b) => a - b);
const { translateText } = usePlatformLanguage(); const { translateText } = usePlatformLanguage();
return ( 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> <div className="data-grid-pagination-summary">{first}–{last} {translateText("i18n:govoplan-core.of")} {totalRows}</div>
<label className="data-grid-page-size"> <label className="data-grid-page-size">
<span>{translateText("i18n:govoplan-core.rows_per_page.af2f9c1b")}</span> <span>{translateText("i18n:govoplan-core.rows_per_page.af2f9c1b")}</span>

4
webui/src/index.ts
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 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 FieldLabel } from "./components/help/FieldLabel";
export { default as InlineHelp } from "./components/help/InlineHelp"; export { default as InlineHelp } from "./components/help/InlineHelp";
export { default as DataGrid, DataGridEmptyAction, DataGridRowActions } from "./components/table/DataGrid"; export { default as DataGrid, DataGridEmptyAction, DataGridPaginationBar, DataGridRowActions } from "./components/table/DataGrid";
export type { DataGridColumn, DataGridListOption, DataGridPagination, DataGridQueryState, DataGridSortDirection } 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 { default as TableActionGroup } from "./components/table/TableActionGroup";
export type { TableActionDefinition, TableActionGroupProps } from "./components/table/TableActionGroup"; export type { TableActionDefinition, TableActionGroupProps } from "./components/table/TableActionGroup";