Black Friday Super Sale! Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Server-Side DataTable Support in Metronic 9.3.5 (React Vite)


Dear Support Team,

I hope you are doing well.
I am currently working with Metronic Vite + React + Tailwind + TypeScript, version 9.3.5, and I need to implement a DataTable/DataGrid with server-side processing.

In previous versions,for instance, Metronic 9.1.2 the DataGrid component included the parameters serverSide and onFetchData, which made it straightforward to integrate with an API for backend-driven pagination, filtering, and sorting.

However, in the documentation and examples for version 9.3.5, I have not been able to find any equivalent functionality or a recommended approach for server-side handling.

Therefore, I would like to kindly ask for clarification on the following:

Does the current version provide an official component or supported method for implementing a DataTable/DataGrid with server-side processing?

If so, where can I find examples or documentation for this functionality?

If this feature has been replaced, renamed, or moved to another module, could you please indicate the recommended alternative for version 9.3.5?

Thank you very much for your assistance.
I look forward to your guidance.

Kind regards


user
Gilmer Wilder 3 weeks ago
React Datatables Tailwind 4
1 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Sean Author 2 weeks ago

Hi,

Sorry for the late reply.

Current version of Metronic 9 uses the reui.io data-grid which has better way of imlementing server side data-grid features:
https://www.reui.io/docs/data-grid

You can use Tanstack Query for fetching your server side data and rendering it with Data-Grid. You can check Next.js version of Metronic 9 in your download package and refer to the User Management app which uses real db access with real CRUDs. You can easily reuse it for your app:
https://keenthemes.com/metronic/tailwind/nextjs/demo1/user-management/users

Regards,
Sean

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(