From 5cd4170275555bbe0e734722c4f23824d24bc348 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <armin@mui.com>
Date: Wed, 27 Nov 2024 14:50:54 +0100
Subject: [PATCH] Make estimation label more accurate

---
 docs/data/data-grid/pagination/pagination.md           | 10 ++++++----
 .../migration-data-grid-v7/migration-data-grid-v7.md   |  4 ++++
 packages/x-data-grid/src/components/GridPagination.tsx |  3 ++-
 .../x-data-grid/src/tests/pagination.DataGrid.test.tsx |  2 +-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md
index 7259d7fca5b02..4e3dbaba85050 100644
--- a/docs/data/data-grid/pagination/pagination.md
+++ b/docs/data/data-grid/pagination/pagination.md
@@ -235,10 +235,12 @@ The following example demonstrates how to show the estimated row count in the pa
 ```jsx
 const labelDisplayedRows = ({ from, to, count, estimated }) => {
   if (!estimated) {
-    return `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`,
+    return `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`;
   }
-  return `${from}–${to} od ${count !== -1 ? count : `više nego ${estimated > to ? estimated : to}`}`;
-}
+  const estimateLabel =
+    estimated && estimated > to ? `oko ${estimated}` : `više nego ${to}`;
+  return `${from}–${to} od ${count !== -1 ? count : estimateLabel}`;
+};
 
 <DataGrid
   {...data}
@@ -247,7 +249,7 @@ const labelDisplayedRows = ({ from, to, count, estimated }) => {
       labelDisplayedRows,
     },
   }}
-/>
+/>;
 ```
 
 For more information, see the [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index db1f4b384786d..fe3f516574b3a 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -37,6 +37,10 @@ Below are described the steps you need to make to migrate from v7 to v8.
 
 - The prop `indeterminateCheckboxAction` has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
 
+### Localization
+
+- If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is expanded and requires additional translations. Check the new example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination)
+
 <!-- ### Accessibility
 
 TBD
diff --git a/packages/x-data-grid/src/components/GridPagination.tsx b/packages/x-data-grid/src/components/GridPagination.tsx
index 8d117112208d6..909ec8820c410 100644
--- a/packages/x-data-grid/src/components/GridPagination.tsx
+++ b/packages/x-data-grid/src/components/GridPagination.tsx
@@ -48,7 +48,8 @@ const defaultLabelDisplayedRows: WrappedLabelDisplayedRows = ({ from, to, count,
   if (!estimated) {
     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
   }
-  return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
+  const estimateLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
+  return `${from}–${to} of ${count !== -1 ? count : estimateLabel}`;
 };
 
 // A mutable version of a readonly array.
diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index 002a0d18ccad8..3bcd4f342042b 100644
--- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -613,7 +613,7 @@ describe('<DataGrid /> - Pagination', () => {
     it('should support server side pagination with estimated row count', () => {
       const { setProps } = render(<ServerPaginationGrid rowCount={-1} estimatedRowCount={2} />);
       expect(getColumnValues(0)).to.deep.equal(['0']);
-      expect(screen.getByText('1–1 of more than 2')).not.to.equal(null);
+      expect(screen.getByText('1–1 of around 2')).not.to.equal(null);
       fireEvent.click(screen.getByRole('button', { name: /next page/i }));
       expect(getColumnValues(0)).to.deep.equal(['1']);
       expect(screen.getByText('2–2 of more than 2')).not.to.equal(null);