diff --git a/webui/src/components/table/DataGrid.tsx b/webui/src/components/table/DataGrid.tsx
index 812fcc2..1ebb23e 100644
--- a/webui/src/components/table/DataGrid.tsx
+++ b/webui/src/components/table/DataGrid.tsx
@@ -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>
diff --git a/webui/src/index.ts b/webui/src/index.ts
index 4e1d14c..0fc48da 100644
--- a/webui/src/index.ts
+++ b/webui/src/index.ts
@@ -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";