[question] Are there plans to implement a DataGridPro footer that doesn't require a finite rowCount

[jorjen]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Say I have no way of knowing the total row count that the server has, thus not being able to provide a definite rowCount, is there a way to display the total rows differently? Similar to a "see more" or have the ">" button clickable until no records can be fetched from the server?

Examples 🌈

Motivation 🔦

I have a use case where the exact total count of data/rows is not known--i.e., DynamoDB table without scanning the whole table.

Order ID 💳 (optional)

No response

[DanailH]

Hey, @jorjen thanks for raising this!
Yes, there is a way to overwrite the default behavior. You can provide your own translation of the footerTotalVisibleRows in the localeText prop. It accepts a callback and returns a string. You can check its signature here -> https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/constants/localeTextConstants.ts#L97
You can find more about it here -> https://mui.com/components/data-grid/localization/

Hope that answers your question.

[jorjen]

Hi @DanailH,

Thank you for the response. I tried providing a translation for footerTotalVisibleRows but for some reason it is not being reflected (not being overwritten?). Am I missing something?

Below is when I tried overwriting footerRowSelected and footerTotalVisibleRows by concatenating +added text+ to both. footerRowSelected seems to reflect the change, but footerTotalVisibleRows seems not to.

CodeSandbox of Data Grid - Localization example...

[jorjen]

Hi @DanailH,

Hoping to get your feedback on above. Thanks.

[StephenStrickland]

@jorjen I was running into a similar issue. Seems like the style of paging that we're wanting is currently a low priority item, see #409

I was able to get close to what I need with this example: https://stackblitz.com/edit/react-ujnaza?file=demo.tsx

It looks like localText.footerTotalVisibleRows is the wrong approach and you have to override localText.MuiTablePagination.labelDisplayedRows(from, to, count)

[DanailH]

@jorjen I apologize for misleading you. @StephenStrickland is correct, that's the way to go if you want to overite that text. I overlooked that you wanted to overwrite the text in the pagination component itself. Because the pagination we use is the core component TablePagination you would need to overwrite it using localText.MuiTablePagination.labelDisplayedRows(from, to, count)

To prevent this to happen again I will update the docs localization page with this example.

[msassa]

I think it's already fixed, but I managed to do it using this code in the localeText

    MuiTablePagination: {
        labelDisplayedRows: ({ from, to, count, page }) => {
            return `${from}-${to} de ${count}`;
        },
    },

Thanks

[JoshK2]

@jorjen I was running into a similar issue. Seems like the style of paging that we're wanting is currently a low priority item, see #409

I was able to get close to what I need with this example: https://stackblitz.com/edit/react-ujnaza?file=demo.tsx

It looks like localText.footerTotalVisibleRows is the wrong approach and you have to override localText.MuiTablePagination.labelDisplayedRows(from, to, count)

Thank you!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@jorjen: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.