Recommended development workflow for modifying DataTables source?

choc

Hi,

I’m trying to understand the recommended workflow for customizing or modifying DataTables source code.

From the build documentation, it looks like DataTablesSrc needs to be built first because the source files are combined into the final library file. That makes sense, but I’m wondering what the best development workflow is when actively editing the source.

For example, with some other libraries (e.g., plotly.js), there is a dev server or watch mode where I can edit source files and quickly see the result in the browser. With DataTablesSrc, should I run npm run build-debug npm serve after every change and then refresh the examples? Or is there an official / recommended watch or live-reload setup?

I’ve contributed to plotly.js a few times and find their devtool (test dashboard) for development quite useful for debugging/developing. There are so many sample templates (mock data) there that you can switch between and preview.

In general, how do contributors usually work on DataTables core or extensions when testing source changes locally?

Right now, I'm editing/debugging directly from the dist file (.mjs/.js)... (Of course, isn’t the minified file, lol)

Thanks!

allan

Hi,

Many thanks for your question. Yes, at the moment npm run build-debug ; npm serve is the way to do it. There isn't currently a live reload option, although that is something that I'd like to add in future. Indeed, once I get v3 out the door, and manage to to all the other things I want to do post-v3 release (rewriting SearchPanes for example), I want to spend some time improving the contribution pathways.

Out of interest, what tweaks are you making to DataTables? Anything that might be suitable for distribution in the core package?

Regards,
Allan

choc

Hi Allan,

Thank you so much for the quick response!

I've actually been focusing more on styling DataTables, since I use Tailwind CSS and React.

To make styling more unitied, I also replaced some of DataTables' DOM elements with custom React components by creating a DOM node for createPortal using the DataTable.feature.register().

Result:

Here, the pageLength, search, buttons.buttons.split (for exporting Excel/CSV), and searchBuilder are replaced by React components.
And then interact with the table using the public APIs. (except for SearchBuilder, where I need to access internal methods.)

The paging, paging, and hover effects are purely Tailwind CSS styles that use dataTables.tailwindcss.js.

The most difficult/complicated part is undoubtedly the searchBuilder. But I have to say, it's really powerful.

Right now, I'm trying to integrate DataTables React with the Tanstack Router and the stateSave so that I can use the table on different pages and restore its state when navigating! So far, everything is going well! It's not quite finished yet, but the preliminary results look promising. (P.S. To make it work, I have to use the createPortal implementation from the DataTables component for React in this PR instead of createRoot)

I'm currently working on rewriting my old project in TypeScript as well. That's why I'm really looking forward to version 3!

I’ll send you a message as soon as my new project is ready and online. Feel free to check it out!

allan

Really interesting - thank you. And gosh yes, I can imagine that SearchBuilder is going to be difficult for such an integration.

The Tailwind integration isn't really going to change for v3.0, but it is something that I plan to spend time on in future and have it roll out to all extensions.

Regarding your PR - I'm sorry I've not got to that yet. I will do - it is one of 11 emails in my inbox! I'm just falling over myself to get v3 out so I can move on (although no doubt stuff will come up as a result of that as well - time is what is needed! ).

Allan