I am new to React but have used datables a lot in a java application.
I want the same functionality in React.
I want to Add, Edit and Delete.
I am returning the data from my springboot application and it is the sample json data from one of your examples.
The data is displayed correctly but I can't figure out how to add the buttons.
Thanks,
Doug
import React, { Component } from "react";
import { Navigate } from "react-router-dom";
import AuthService from "../services/auth.service";
import EquipmentService from "../services/equipment.service";
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';
DataTable.use(DT);
export default class Equipment extends Component {
constructor(props) {
super(props);
this.state = {
redirect: null,
dataReady: false,
finishedLoading: false,
equipmentList: null,
currentUser: { username: "" }
};
}
componentDidMount() {
console.log('equipment');
const currentUser = AuthService.getCurrentUser();
if (!currentUser) this.setState({ redirect: "/login" });
EquipmentService.getEquipment(currentUser.customerId).then(
data => this.setState({
currentUser: currentUser,
dataReady: true,
finishedLoading: true,
equipmentList: data
})
)
}
render() {
const { equipmentList } = this.state;
const { finishedLoading } = this.state;
const columns = [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' },
];
if (this.state.redirect) {
return <Navigate to={this.state.redirect} />
}
return (
<div className="container">
<br/>
Equipment
{(this.state.finishedLoading) ?
<div>
<DataTable data={finishedLoading ? equipmentList.data : []} columns={columns}
options={{responsive: true, select: true,}} className="display" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</DataTable>
</div>: null}
</div>
);
}
}