Topic: Updating Data Using Editable Table

sedonawebservices pro asked 5 years ago


Hi.

I am able to use the Editable Table component for displaying data, but I don't understand how to trigger an update to a database using a pre-made component such as this (may be relevant to your Table templates in general). 

While this is not directly related to your components, it could be helpful to provide an example of this in your documentation.

But for now, could you briefly describe how to do this? (or point me in the right direction)? 

Also, it seems that the Editable Table component uses an Array of Arrays for handling the data, which seems practically useless (or difficult o implement), if we are trying to edit items and saving them to a database?

 

Jonathan

 

 


Ron Sargeant free commented 5 years ago

I have a very similar problem. I am trying to use the Table Editor component to edit active data. I am using Flask to generate my pages and the data going into the table is live data. The initial presentation of the data as a table works well. I activate the edits (as per example page), then get the edit icon at the end of each row. However, if I click one of those edits, the expected redraw of that section is corrupted. I get a short section of HTML text showing where there should be icons.

If I use static data to build this table (as happens in the MDB example page) it works as expected, so there appears to be nothing missing in css or js declarations on that page.

I haven't yet seen an example of MDB table data that is not based on a static data block embedded in the page. I understand it is difficult to make such an example on a public server but a tutorial on processing database entries through editable tables would be an excellent addition to the lessons you have now. At present I can't see MDB being of any use to me unless I can overcome this problem. 


Anna Morawska staff commented 5 years ago

Hi there,

thank you for your comment, we will try to deliver a tutorial explaining how to deal with it.

 



Did any one found a solution to update the database using editable table ?


Konrad Stępień staff commented 5 years ago

Hi@Rabie.jabasini

Can you expand your answer?

What do you mean by "update"?

Best, Konrad.


Jakub Mandra staff answered 5 years ago


Hi,

maybe this very simple app with dataTable and REST api will help you:

import React from "react";
import { MDBDataTable, MDBBtn, MDBInput } from "mdbreact";
import './App.css';

class TableEditablePage extends React.Component {
  state = {
    columns: [
      {
        field: 'title',
        label: 'Title'
      },
      {
        field: 'year',
        label: 'Year'
      },
      {
        field: 'genre',
        label: 'Genre'
      },
      {
        field: 'delete',
        label: 'Delete'
      }
    ],
    rows: [],
    input: ''
  }

  componentDidMount() {
    this.getMovies();
  }

  getMovies = () => {
    fetch("https://man-movies-api.herokuapp.com/movies", {
      method: "GET",
    })
      .then(res => res.json())
      .then(json => {
        let rows = [];
        json.movies.forEach(item => rows.push({
          id: item._id,
          title: item.title,
          year: item.year,
          genre: item.genre,
          delete: <MDBBtn onClick={() => this.deleteMovie(item._id)}>X</MDBBtn>
        }));

        this.setState({ rows });
      })
      .catch(err => console.error(err));
  }

  addMovie = () => {
    fetch("https://man-movies-api.herokuapp.com/movies", {
      method: "POST",
      body: JSON.stringify({
        title: this.state.input
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

  updateInput = (value) => this.setState({ input: value });

  deleteMovie = (id) => {
    fetch(`https://man-movies-api.herokuapp.com/movies/${id}`, {
      method: "DELETE"
    })
      .then(res => {
        if (res.ok) this.getMovies();
      })
      .catch(err => console.error(err));
  }

  render() {
    return (
      <>
        <MDBDataTable
          striped
          bordered
          hover
          data={{ columns: this.state.columns, rows: this.state.rows }}
        />

        <MDBInput value={this.state.input} getValue={this.updateInput} label="Insert movie title" />
        <MDBBtn onClick={this.addMovie} disabled={!this.state.input.length}>Add item</MDBBtn>
      </>
    );
  }
};

export default TableEditablePage;

Philippe Yu free commented 5 years ago

Hi, thanks for your answer ! That's not bad, but it's not using component MDBTableEditable, do you have a template for this ?


Philippe Yu free commented 5 years ago

Forget it, it helped me a lot ! Thanks !


Aliaksandr Andrasiuk staff commented 5 years ago

Glad we could help you!

Happy codding!


Roméo N'GUESSAN free commented 4 years ago

Merci pour votre reponse


Philippe Yu free answered 5 years ago


Hi sedonawebservices,

I would like to know how did you display data, and did you find a solution for updating your database ? If you have any examples, that would be great :)


Philippe Yu free commented 5 years ago

I mean fetch or axios :)


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Desktop
  • Browser: Chrome
  • OS: OS X
  • Provided sample code: No
  • Provided link: No