Update DataTables tutorial: migrate from gulp to heft commands

[Ashlesha-MSFT]

Category

• Content fix

Related issues

• fixes SPFx Docs Update for Heft toolchain: migrate-jquery-datatables-script-to-spfx.md #10581

What's in this Pull Request?

This PR updates the jQuery and DataTables migration tutorial to align with modern SharePoint Framework practices and improves overall documentation quality.

Changes Made:
Gulp to Heft Migration:

• Replaced all gulp serve --nobrowser commands with heft start --nobrowser (3 instances)
• Updated to reflect SPFx v1.22+ toolchain standards
• Removed outdated migration notice banner
• Updated images

[learn-build-service-prod]

PoliCheck Scan Report

The following report lists PoliCheck issues in PR files. Before you merge the PR, you must fix all severity-1 and severity-2 issues. The AI Review Details column lists suggestions for either removing or replacing the terms. If you find a false positive result, mention it in a PR comment and include this text: #policheck-false-positive. This feedback helps reduce false positives in future scans.

✅ No issues found

More information about PoliCheck

Information: PoliCheck | Severity Guidance | Term
For any questions: Try searching the learn.microsoft.com contributor guides or post your question in the Learn support channel.

[learn-build-service-prod]

Learn Build status updates of commit ed6130c:

✅ Validation status: passed

File	Status	Preview URL	Details
docs/images/datatables-spfx-list-configured.png	✅Succeeded	View
docs/images/datatables-spfx.png	✅Succeeded	View
docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx.md	✅Succeeded	View

For more details, please refer to the build report.

[Ashlesha-MSFT]

@andrewconnell, I’ve kept the width the same as before. Please review and let me know if this aligns with the standards.

[andrewconnell]

Thanks for being aware of this, but let me use this op to explain this a bit more (something that's emphasized by MSDocs & MSLearn... I don't have the link to their guidelines as I'm waiting for my v- to get re-enabled, but it is in the MSLearn contrib docs).

The point of the size comment is to make sure the image focuses on WHAT the point of the image is. Also... so the reader sees the maximum amount of relevant information with their viewport (desktop browser maximized/windowed, on tablet, on mobile, etc). When there's unused negative space, it takes away from the usable viewport.

For example, look at the red boxes in this (taken from one of your images... I added the boxes):

A "better" version of this image would be to horizontally resize the image so that negative (ie: unused) space wasn't there). IOW, the effect would be:

• the blue box would move flush against the left
• the green boxes would move left in response to resizing the browser (ie: grab the RIGHT edge of the browser and resize to the left to shrink the width until the web part is flush against the left or at least as far to the left without focuring a mobile rendering to kick in)

The benefit/result: MSDOCS/MSLEARN will add the image to fill the viewport, making the content area bigger and more readable to the consumer of the page.

Does that make sense?

This rule should apply to all images in the docs. No, they all don't do that now because there's a LOT of legacy content, but trying to enforce this when we do edit/update docs.