Thanks to visit codestin.com
Credit goes to github.com

Skip to content

MudTable: Add option to display paginator at the top#10862

Open
mpartsch01 wants to merge 4 commits into
MudBlazor:devfrom
mpartsch01:dev
Open

MudTable: Add option to display paginator at the top#10862
mpartsch01 wants to merge 4 commits into
MudBlazor:devfrom
mpartsch01:dev

Conversation

@mpartsch01

@mpartsch01 mpartsch01 commented Feb 12, 2025

Copy link
Copy Markdown

Hello!
My name is Michaela Sallese, I am currently a 2nd year student at South Hills School of Business & Technology studying software development and computer programming. I had a school project to find an open source project and fix a bug or add functionality to it. After searching GitHub, I found MudBlazor and found the issue someone suggested of having the option to the table's paginator at the top instead of only allowing for it to be at the bottom of the table. I saw before that a user submitted a pull request on this issue that was ultimately rejected, but I would like to appeal that rejection and submit my own code for consideration to be added to the project. The section of the code I added would be for the developer to include in their table <pager-at-top="true"> for the pager to display at the top, or else it will default to being displayed at the bottom. I initiated the proper unit testing the ensure my component would function, and it passed!
I ask of you to implore the addition of this functionality to the MudBlazor project. Not only for the sake of my school project, but to give other MudBlazor users the option to put their paginator where they like. In my time at South Hills, I've learned that coding and designing is about endless possibilities. Why would we want to deny any future developers any choice for how their application looks? Coding and innovation is reliant on creativity, and even if the maintainers of MudBlazor do not believe this functionality to be the most relevant, it was still relevant enough for one user to ask to be included and several others to voice their support of it.
Thank you for your consideration. Please reach out to me if you have any more questions.
Michaela Sallese

Description

How Has This Been Tested?

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@codecov

codecov Bot commented Feb 15, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.89%. Comparing base (089db1f) to head (e8ba1e0).
⚠️ Report is 1134 commits behind head on dev.

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10862   +/-   ##
=======================================
  Coverage   91.89%   91.89%           
=======================================
  Files         427      427           
  Lines       13581    13581           
  Branches     2603     2603           
=======================================
  Hits        12480    12480           
  Misses        526      526           
  Partials      575      575           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@mpartsch01

Copy link
Copy Markdown
Author

I believe the test that failed isn't related to the component I wanted to add to the project. When I ran the tests before pushing my branch, all succeeded but one which I had nothing to do with. Am I incorrect? Or is there something I can do to make my component pass the test?

@Anu6is

Anu6is commented Feb 19, 2025

Copy link
Copy Markdown
Contributor

Yes, as you can see below, all checks are now passing successfully.

@mpartsch01

Copy link
Copy Markdown
Author

Yes, as you can see below, all checks are now passing successfully.

Great, thanks! Does this mean the functionality has been imparted to the main branch of the project?

@Anu6is

Anu6is commented Feb 19, 2025

Copy link
Copy Markdown
Contributor

No, this PR has not yet been merged
It is currently sill open, awaiting review.
Note at the very top, below the title you see Open
image
If/when it's incorporated into the main branch you'd see Merged
image

@mpartsch01

Copy link
Copy Markdown
Author

No, this PR has not yet been merged It is currently sill open, awaiting review. Note at the very top, below the title you see Open image If/when it's incorporated into the main branch you'd see Merged image

I see, thank you!

// print the generated html
// select elements needed for the test
var tablePager = comp.FindComponent<MudTable<int>>().Instance;
tablePager.PagerAtTop.Should().Be(true);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tests whether or not the parameter was set to True. It does test if the pager actually renders at the top or not.

Comment thread src/MudBlazor/Components/Table/MudTable.razor
Comment thread src/MudBlazor/Components/Table/MudTableBase.cs
@mpartsch01

Copy link
Copy Markdown
Author

Made requested changes. Thank you for your feedback! This project has been a very valuable learning experience.

@sonarqubecloud

sonarqubecloud Bot commented Mar 4, 2025

Copy link
Copy Markdown

@github-actions github-actions Bot added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Jul 30, 2025
@github-actions github-actions Bot changed the title Added Functionality to Have Table Paginator At Top of Table MudTable: Add option to display paginator at the top Jul 30, 2025
@github-actions github-actions Bot added the awaiting triage Needs maintainer review or assistance label Aug 3, 2025
@upk-phersinger

Copy link
Copy Markdown

This issue would be great to solve. Right now using two pagercontents is not an option for a mudtable/muddatagrid. And using a toolbarcontent for the pager above the table works, but doesnt have the same css as a pagercontent.

The PagerContent gets styles:

The ToolbarContent gets styles:

@omarkurtovic

Copy link
Copy Markdown
Contributor

Hey @mpartsch01, great work on this issue. I see the PR has been open for quite some time now and just needs some finishing touches. I'd like to help get it merged, but since it has developed conflicts with the main branch I will create a new branch based on dev and incorporate your changes with some slight adjustments. I will open a superseding PR and make sure to credit your initial work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

awaiting triage Needs maintainer review or assistance enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants