please how can I use datatable on react, with the functionality to print, download as excel, pdf etc

tradersofafrica

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

colin

It would be worth searching the web for that kind of info - for example this Medium page shows how to integrate with React. For the export, you need to include the Buttons extension like this example.

Colin

tradersofafrica

Hello the example on the link is on javascript, css and html. I didn't see how it was integrated on react js. you mind sharing a the code using a react example.

allan

We don't currently have a code example of DataTables in react. That is something I plan to work on in the near future, similar to the Vue package I did recently.

In the meantime, as Colin said, there are a number of posts from third parties showing how React and DataTables can be used together.

Allan

tradersofafrica

is there a link or a video to it you can point me to? the link that Colin shared uses class component on the react app and I am more familiar with functional component. I appreciate your feedback.

allan

https://github.com/rtman/react-datatables perhaps? I'm sure you can use Google as well as I can.

Allan

tradersofafrica

okay. Thank you

Leo Bruno

I´m trying to make datatables.net work as a functional component with react 18 for over 14 days.

I can say that an official guide is needed, because I had to gather information scattered over a large amount of internet posts containing old react content that either do not work anymore or shouldn´t be used (as class components for instance).

So far, I managed to get basic functionality working, but there are several issues that need´s to be addressed.

For instance, css is loaded but not applyed (search box and pagination style issues).
Buttons do not work, etc, etc, etc.

I´m currently trying to set up a test case at codesandbox.com, but datatables.net seems to be broken there.

allan

Thanks for the feedback. React isn't something I've dived into much myself and I really need to rectify that so I can write a proper integration plug-in similar the the Vue one.

Allan

fhuo

Hy Leo
my Datatables works in React. The only problem I have is that ReactDom.render does not work in React 18.
i.e
createdCell: (td, cellData, rowData) =>
ReactDOM.render(
<button
id={rowData.id}
onClick={() => {
this.props.deleteRow(rowData.id);
}}
>
{" "}
Delete{" "}
</button>,
td
),

Maybe someone has a solution for that problem.
Thank you - Freddy