[DataGrid] Make estimation label more accurate (#15632)

Signed-off-by: Armin Mehinovic <[email protected]>
Co-authored-by: Bilal Shafi <[email protected]>

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.

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 updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination).
+
 <!-- ### Accessibility
 
 TBD

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.

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);