Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82207

How do I add buttons to my Datatable in React.js

$
0
0

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>
    );
  }
}

Viewing all articles
Browse latest Browse all 82207

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>